The search tabs are actually labels for checkboxes because multiple can
be selected. To still make them work like tabs the plugin
search_on_category_select adds a JavaScript that submits the form on
label click.
The problem with this is that when the plugin is disabled (e.g. because
JavaScript is disabled or a user chose to disable it in the settings),
then the tabs still look like tabs but act as checkboxes
(which is very confusing).
This commit changes fixes this so that the checkboxes are visible by
default. The next commit makes the plugin hide them again. This way
they are visible when the plugin is disabled ... as they should be.
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>
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>
Add the 'SearXNG JavaScript Style Guide' as one quality gate in the build chain
of the simple theme::
make themes.simple
make themes.simple.test
In the github CI the `themes.all` target enforce a `themes.simple`.
BTW: Remove 'jshint' left overs from 0ee316f3d
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
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>
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>
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>
Include the source files directly in the `.map` files [1] for two reasons:
1. In the simple theme, modules from `./node_modules` are only available on
developer's build host (a `make node.env` is needed to get the sources). By
example; in the `searxng.min.js.map` file, the `autocomplete.js` is linked at
URL:
../node_modules/autocomplete-js/dist/autocomplete.js
2. Later, when client sources has been moved out of the `./static` URL [2] to
the `<repo-roo>/src` folder, all JS sources are no longer available.
Drawback: `.map` files grow up in size, but this should not bother, because the
files are only loaded in debug mode.
[1] https://github.com/gruntjs/grunt-contrib-uglify#sourcemapincludesources
[2] https://github.com/searxng/searxng/issues/141
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
remove:
* searx/static/themes/simple/js/searxng.head.js
* searx/static/themes/simple/js/searxng.js
* searx/static/themes/simple/css/searxng-rtl.css
* searx/static/themes/simple/css/searxng.css
These files are never used.
About the js files: the .map files references the sources instead of the concated version.
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>
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>
* move `searx/static/themes/simple/img/searxng.svg` to `src/brand/searxng.svg`
* README.rst can use it without a reference to a theme.
* the simple theme can create `searx/static/themes/simple/img/searxng.png` using
the svg2png task
Suggested-by: @dalf https://github.com/searxng/searxng/pull/561#issuecomment-981747902
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
define a custom grunt task, since grunt-sharp is too old (it can't be installed).
in gruntfile.js, the image tasks are moved at the end the build chain.
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
- remove unused 'path' constant
- fix indentation
- Put all image tasks at the end, where it is easy to list which image is processed.
Suggested -by: @dalf https://github.com/searxng/searxng/pull/541#discussion_r756247157
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
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>
