HINT: this patch has no functional change / it is the preparation for following
changes and bugfixes
Over the years, the preferences template became an unmanageable beast. To make
the source code more readable the monolith is splitted into elements. The
splitting into elements also has the advantage that a new template can make use
of them.
The reversed checkbox is a quirk that is only used in the prefereces and must be
eliminated in the long term. For this the macro 'checkbox_onoff_reversed' was
added to the preferences.html template. The 'checkbox' macro is also a quirk of
the preferences.html we don't want to use in other templates (it is an
input-checkbox in a HTML form that was misused for status display).
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
* set border top and bottom on sidebar collasables
* inrease peading on summary so its easier to click on mobile
* remove margins and add flex wrapper to normalize elements in sidebar
Make elements in the sidebar collapse able. Except infoboxes all elements in
the sidebar are collapsed by default.
By folding out the sidebar elements, the UI looks less cluttered. Especially on
small devices like smartphones, where the sidebar is above the results list, the
UX should be improved [1].
[1] https://github.com/searxng/searxng/issues/2140
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
When the user press [TAB] the input form should be filled with the highlighted
item from the autocomplete list, but not release a search / with other words:
what we now have by pressing once on [ENTER] should be mapped to the [TAB] key
and pressing [ENTER] once should release a search query. [1]
[1] https://github.com/searxng/searxng/issues/778#issuecomment-1016593816
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
- Update input when selecting autocomplete prediction with keyboard
- Search immediately by pressing enter key
- Search immediately by clicking on an autocomplete suggestion
Related:
- https://github.com/searxng/searxng/issues/778
* use html input elements instead of buttons for the pagination forms at the bottom of the result page
* move the less section that hides the pagination number widget on mobile to the mobile section
* clean up the less code for styling the numbers of the pagination widget
* fix: add the margin for box results (like in news category) to the bottom of the result to have a margin between pagination widget and article result
Adds to the navigation widget, preserving forward/backward nav, and
inserting a list of clickable page numbers between them.
Phone sized devices continue without this widget as deterministic
display under small screen sizes has not been solved.
The widget is agnostic to the actual amount of pages there are that one
can navigate to and as such shows all plausible, albeit not necessarilly
valid, possibilities.
This widget does not interfere with infinite scroll in any fashion.
This changes the Suggestions to be a single column, not a wrapping row,
changing the input to be incapable of overflowing into visually adjacent
elements.
With the POST method, autocomplete.js does not URL encode the values.
For example "1+1" is sent as "1+1" which is read as "1 1" since space are URL encoded with a plus.
There is no clean way to fix the bug since autocomplete.js seems abandoned.
The commit monkey patches the ajax function of autocomplete.js
Related to #1695
For keyboard navigation the highlightResult() function in keyboard.js steals the
focus. On a mouse click event (non keyboard action) the focus should resist
where it is, otherwise a marked region gets lost. This is the reason why text
can't be selected when using simple theme with JS enabled.
Closes: https://github.com/searxng/searxng/issues/794
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
After each update of the pygments version, we (or github action) should [1]
1. update less files:
./manage pyenv.cmd searxng_extra/update/update_pygments.py
update: static/themes/oscar/src/generated/pygments-logicodev.less
update: static/themes/oscar/src/generated/pygments-pointhi.less
update: static/themes/simple/src/generated/pygments.less
2. rebuild the static files of each themes:
make static.build.commit
[1] https://github.com/searxng/searxng/pull/2#issuecomment-826958666
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
* update search input form params; inspiried by whoogle
* remove autofocus from result page input form (JS impl. as well as input param)
-> autofocus on landing page still works only on desktop and tablet with JS impl.
* update landing page margins on mobile
* rework border and radius for search form to 0.8rem and outline
* remove positioning from autocomplete JS lib and use CSS impl.
* match search box and autocomplete width
* rework search form to a google like design on mobile
* fix settings icon display withg RTL on mobile on result page when search input is empty
The <input type="reset"> introduced in the PR 894, restores the default value.
It works in the index page, but it doesn't work in the /search page:
the reset button restore the initial query.
This PR:
* fix the JS version: the reset button clear the text
* keep the clear button in the / page
* hide the clear button in the /search page
The previous value was 80em (1280px).
Some desktop screens have this resolution,
and tablet layout takes too much space in this configuration
This PR switch to the table layout for screen width strictly below 1280px.
Close https://github.com/searxng/searxng/issues/874
* drop image_layout.js from simple theme
* move image_layout.js to oscar theme and delete common js dir (since its empty now)
* align top position of image detail modal with bottom position of search header
* use flexbox to display images; row height can be set via @results-image-row-height in defenitions.less
* display span title underneath each image with a max width of 12rem
* increase margin and padding around image article on desktop and tablet
* make article height smaller on phone layout (height of 6rem) to display more content on current view
* remove content from result, if the title and content matches
* use a group that cotains the flex image article, if images are mixed with other categories
* fix pylint issues in webapp.py
* use the default.html result template in unit tests (thanks @return42)
Markus Heiser