Commit graph

120 commits

Author SHA1 Message Date
mrpaulblack
169f8d9988 [simple theme] add netloc to image result articles 2022-04-06 15:07:05 +02:00
Monty
c09ce4d0f2 Fix answer box bug
Fix bug of too long words.
2022-03-28 21:29:13 +02:00
mrpaulblack
d8d42c8541 [fix] revert changes from #997
* in #997 there was a bug introduced: #1002
-> for now we just revert the change to make the image detail modal usable again
2022-03-25 13:08:17 +01:00
Monty
47dcf876ff [simple theme] refactor search form
* 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
2022-03-24 22:22:45 +01:00
Markus Heiser
022479d4c2 [fix] 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>
2022-03-20 19:32:40 +01:00
Alexandre Flament
84340f56ec simple theme: JS version: the reset button clear the text
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
2022-03-19 20:49:37 +01:00
mrpaulblack
3620d006a4 [fix] naming of id for prefs in css 2022-03-19 18:02:10 +01:00
mrpaulblack
6a8e168e25 [simple theme] use default font and font-size in info page 2022-03-16 21:01:22 +01:00
Markus Heiser
3633dc5611 [simple] add CSS for /info pages
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-03-12 11:36:31 +01:00
Alexandre FLAMENT
8ffbaa086a [simple] switch to the tablet layout at 79.75em
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
2022-03-04 08:26:02 +00:00
Alexandre Flament
3d9e48b84e [simple] checkboxes can get the focusable
Do note that checkboxes in the engine tab are displayed reversed.
See: 3408d061aa/searx/templates/simple/preferences.html (L313)
A checkbox for an engine is checked when the engine is disabled.
2022-03-02 18:56:08 +00:00
Alexandre Flament
56bb1443c4 [fix] simple: display "Click on the magnifier..." only the mouse over the categories 2022-02-27 19:48:21 +01:00
Alexandre Flament
e435806505 [fix] simple: detect touch screen using media query
related to https://github.com/searxng/searxng/issues/928
2022-02-27 19:26:52 +01:00
mrpaulblack
21e3c40516 [simple theme] replace Image_layout.js with flexbox CS impl.
* 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)
2022-02-26 22:31:47 +01:00
Monty
b850178d26 Search filters changes
Better search filters view on mobile.
2022-02-26 10:05:23 +01:00
Markus Heiser
bded1ee280 [fix] genius: add player an avoid exceptional programming
Add player:

- The players are just playing 30sec from the title.  Some of the player will be
  blocked because of a cross-origin request and some players will link to apple
  when you press the play button.

Avoid exceptions and (and BTW improve results)

-  ERROR   searx.engines.genius          : list index out of range

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-02-21 22:12:07 +01:00
Alexandre Flament
56e34947a6 [mod] infinite_scroll as preference
* oscar theme: code from searx/plugins/infinite_scroll.py
* simple theme: new implementation

Co-authored-by: Markus Heiser <markus.heiser@darmarIT.de>
2022-02-20 22:58:51 +01:00
Markus Heiser
16d05ca285 [mod] simple theme: define a '.show-content-button'
With LESS function '.show-content-button' all the *Show-Media* links becomes
bottons.

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-02-19 15:12:50 +01:00
Markus Heiser
05c105b837 [fix] bandcamp: fix itemtype (album|track) and exceptions
BTW: polish implementation and show tracklist for albums

Closes: https://github.com/searxng/searxng/issues/883
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-02-18 22:44:43 +01:00
Markus Heiser
8acf540f0e [mod] simple theme: set height of embedded content (iframe)
This commit sets appropriate height of the (embedded) player from:

- soundcloud
- mixcloud
- deezer

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-02-18 19:00:51 +01:00
Markus Heiser
f5e8cfade2 [fix] simple theme: support browsers which do not have aspect-ratio
Suggested-by: @dalf https://github.com/searxng/searxng/pull/882#discussion_r805187303
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-02-18 19:00:02 +01:00
Markus Heiser
98cab4cf75 [mod] result_templates/default.html replace embedded HTML by data_src audio_src
Embedded HTML breaks SearXNG architecture.  To modularize, HTML is generated in
the templates (oscar & simple) and result parameter 'embedded' is replaced by
'data_src' (and 'audio_src'), an URL for embedded content (<iframe>).

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-02-13 14:20:47 +01:00
Markus Heiser
46e131fdad [mod] result_templates/videos.html: replace embedded HTML by data_src
Embedded HTML breaks SearXNG architecture.  To modularize, HTML is generated in
the templates (oscar & simple) and result parameter 'embedded' is replaced by
'data_src', an URL for embedded content (<iframe>).

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-02-13 14:20:47 +01:00
Martin Fischer
5012d06e72 [simple] allow .tabs to be used for help pages 2022-02-01 06:28:26 +01:00
Martin Fischer
b6200563ba [simple] improve margin of #linkto_preferences
Co-authored-by: Paul Braeuning <paul@paulgo.io>
2022-02-01 06:22:29 +01:00
Martin Fischer
6f0ec7e58f [simple] introduce page_with_header.html template
Previously the preferences & stats templates contained the markup:

<a href="{{ url_for('index') }}"><h1><span>SearXNG</span></h1></a>

There are many things wrong with this:

1. the markup was duplicated

2. the CSS needed to be changed whenever a new page wanted to use this
   header (since the CSS used page-specific selectors)

3. h1 should be reserved for the actual page title
   (e.g. Preferences or Engine stats)

4. the image was set via CSS which also set:

       span { visibility: hidden; }

   which however removes the alternative text from the accessibility
   tree (meaning screen readers will ignore it).

This commit fixes all these problems.
2022-01-30 17:29:21 +01:00
Alexandre Flament
dc4caa5a39 [fix] simple theme: /preferences: cookies table is LTR
close #827
2022-01-29 14:42:12 +01:00
mrpaulblack
7a0f5e6b19 [simple theme] dynamic border radius in CSS 2022-01-17 22:35:02 +01:00
Alexandre Flament
d000288ad0 [enh] simple theme: RTL support
* mirror all inline SVGs so that direction SVGs display correctly on RTL
* set the bold list element in info box to RTL so the colon gets displayed on the right side
* set correct .ltr function for the left border on the search button in #q
* move text to the right in autocomplete
* move search form in lign with result article on RTL
* add the correct padding for img thumbnails in categories like music on RTL
* apply RTL to result table for map results
* align text in tables part of /preferences on RTL
* move burger menu on index page to the left on RTL
* fix positioning of drop down arrow on select boxes on RTL
* align result URL on the right (written LTR)
* align vim hotkeys help on the left since it is not translated
* image detail:
  * labels (author, format, URL, etc...) are written on the right,
    values are on the left.
  * URL are written LTR and overflow on the right
2022-01-16 18:51:11 +01:00
Markus Heiser
85159ad307 [fix] autocomple.js: register li.onmousedown instead li.onclick
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-01-10 17:30:57 +01:00
Markus Heiser
d8db85638e make pygments.less
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-01-07 08:35:14 +01:00
Martin Fischer
a12cb6a807 [simple] improve styling of subcategory table headers in preferences 2022-01-05 11:03:44 +01:00
Alexandre Flament
458b7fb72d
Merge pull request #610 from return42/img-load-error
[fix] simple theme: hide the image if img load fails
2022-01-02 22:34:15 +01:00
Markus Heiser
391e4b57c9 make pygments.less
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-12-31 09:12:22 +01:00
Markus Heiser
f75199b1ec [fix] simple theme: hide the image if img load fails
Add event listener to query selector::

    '#urls img.image'

From the user point of view, I think it is better to hide the image:
img_load_error.svg is helplful in the image category because it still allows to
select the image. IMO, in the news category, the fact there is a missing image
won't help to choose the links. From a developer point of view, the place holder
is signal that may be the engine needs to be updated (at least give a look). The
browser console should show the same information too, but it requires some
additional steps. [1]

[1] https://github.com/searxng/searxng/pull/610#issuecomment-997640132

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-12-29 14:30:16 +01:00
Markus Heiser
c020b90056 [mod] simple theme: remove vendor prefix of width: max-content
Remove no longer needed workarounds like `width: 1000px;`
and vendor prefix of max-content [1].

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/max-content#browser_compatibility

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-12-15 14:43:15 +01:00
Markus Heiser
459f33a18e [mod] simple-theme: remove vendor CSS
flexbox
  Browser support for flexbox is excellent, and the majority of browsers do not
  need a prefix at this point. Safari was the last of the major browsers to
  remove prefixes, with the release of Safari 9 in 2015. [1]

user-select:
  Vendor prefix of user-select is not needed, see 'Browser compatibility' [2].

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox#status_in_browsers
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-12-15 14:43:15 +01:00
Markus Heiser
c416464949 [fix] lazy loading of <img> tags
Images should include dimension attributes.  Without `width` and `height`
specified, image dimensions are 0×0 pixels at first.  ...  In this case the
browser determines that all of them are visible to the user and decides to load
everything [1].

In CSS the `width` is set to a value and the `height` is unsed to scale the image
proportional in both dimensions.

[1] https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
[2] https://caniuse.com/loading-lazy-attr

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-12-15 10:39:55 +01:00
Markus Heiser
34f5e9c7a3 [fix] eslint --fix
automatically fix some of the problems reported by eslint rules::

    $ ./manage nvm.bash
    nvm-env$ npm --prefix searx/static/themes/simple run eslint-fix

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-12-14 07:31:58 +01:00
Markus Heiser
9fc27088ef
Merge pull request #583 from return42/fix-combo-with
[fix] simple theme: remove width  45% from language and time filters
2021-12-12 17:02:31 +01:00
Markus Heiser
5f902bbb0f [fix] simple theme: remove width 45% from language and time filters
All three filters (`language`, `time_range` and `safesearch`) are rendered in
one line.  A size of 45% for `language` and `time_range` left only 10% for the
`safesearch` filter.  Solution: drop with from `language` and `time_range`.

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-12-05 14:22:55 +01:00
Markus Heiser
2b26285a73 [fix] simple theme: make autocomplete-js CSP compliant
The CSP issue is, that the `_Position` function in the autocomplete-js set the
style attributes by `setAttribute("style", ...)`.  Using `setAttribute` to set
the style attribute invokes the HTML parser and CSP is triggered [1].

This patch overwrite the `_Position` function of autocomplete-js.

BTW: remove trailing whitespace

[1] https://stackoverflow.com/a/57633533

Closes: https://github.com/searxng/searxng/issues/352
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-12-05 11:48:23 +01:00
Markus Heiser
7dc9cc91a8 [mod] simple theme, JS: introduce window.searxng.theme namespace
In window.searxng.theme the theme data can be passed through to JS
implementations.

Initial the window.searxng.theme namespace starts with a value for
`img_load_error`::

    // image that is displayed if load of <img src='...'> failed
    img_load_error: 'img/img_load_error.svg'

The searx/static/themes/__common__/js/image_layout.js is patched to uses the
value, if the theme defines a value for img_load_error in this namespace.

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-11-30 12:42:52 +01:00
Markus Heiser
fb5c1ed310 [fix] simple theme: set img background color to wallpaper's color
The *background color* of an transparent image is the color of the color of
wallpaper on which all images are shown on.

Set variable `--color-result-image-background` and `--color-base-background` to
the same value.

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-11-29 20:47:37 +01:00
Markus Heiser
28a597e43e [simple theme] remove '-webkit-border-radius' property
[1] https://github.com/searxng/searxng/pull/537#issuecomment-976582675

Suggested-by: @dalf [1]
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-11-23 20:02:39 +01:00
Markus Heiser
8935b1d8a2 [simple theme] remove '-moz-border-radius' property
Support for the prefixed version (-moz-border-radius) was removed in Gecko
13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) [1].

[1] https://developer.mozilla.org/pt-BR/docs/Web/CSS/border-radius

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-11-23 20:02:39 +01:00
Markus Heiser
f57a9f425d [simple template] format default string 'italic'
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-11-23 15:28:08 +01:00
mrpaulblack
6a367b59ce [simple theme] add animations.less for keyframe animations 2021-11-23 12:35:37 +01:00
Alexandre Flament
e612b81f41 [fix] simple theme: fix modal dialog 2021-11-23 12:35:37 +01:00
mrpaulblack
f3aff26086 [simple theme] rework select; add safesearch to search and replace / with › in article url
* rework selection UI in pref (fix based on: 78643e9f43)
* moved search filters underneath categories
* cut params from url and replace / with ›
* make h3 and url in article bigger
* add safe search select to search filter (this will not override settings and only be valid while on result page in a session)
* make search form button not overlap each other when js is disabled
* 1rem padding around preview image and thumbnail in default article template
2021-11-21 21:38:00 +01:00