| Age | Commit message (Collapse) | Author |
|---|
|
|
|
* 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
|
|
* disable declaration-empty-line-before
https://stylelint.io/user-guide/rules/list/declaration-empty-line-before/
this change allows to mix CSS declarations and LESS mixins without empty lines:
#something {
display: flex;
.ltr-left(60rem); // no mandatory empty line before this one
}
* disable no-invalid-position-at-import-rule
https://stylelint.io/user-guide/rules/list/no-invalid-position-at-import-rule/
this change allows to declare some mixins and then import another .less file:
for example:
.ltr-left(@offset) {
left: @offset;
}
@import "style.less";
|
|
The less grunt runner silently ignore missing files and continue with the build[1]::
Running "less:production" (less) task
>> Destination css/searxng.min.css not written because no source files were found.
>> 1 stylesheet created.
>> 1 sourcemap created.
Add filter function that calls grunt.fail() if the scr file does not exists.
[1] https://github.com/searxng/searxng/pull/750#discussion_r784357031
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
|
|
|
|
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
|
|
|
|
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
|
|
Fixes #704.
|
|
|
|
|
|
[fix] simple theme: hide the image if img load fails
|
|
|
|
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
|
|
|
|
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>
|
|
|
|
|
|
|
|
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>
|
|
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>
|
|
|
|
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>
|
|
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
|
|
The SearXNG JavaScript Style Guide is a set of eslint rules [1] based on the
eslint:recommended [2] rules.
"extends": "eslint:recommended"
The additional rules adopted from the JavaScript Standard Style [3][4].
[1] https://eslint.org/docs/rules/
[2] https://github.com/kunalgolani/eslint-config/tree/master/packages/recommended
[3] https://standardjs.com/rules.html#javascript-standard-style
[4] https://github.com/standard/eslint-config-standard/blob/master/.eslintrc.json
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
|
|
[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>
|
|
|
|
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 LESS source files directly in the `.map` files [1].
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-less#outputsourcefiles
[2] https://github.com/searxng/searxng/pull/575#issuecomment-984058868
Suggested-by: @dalf [2]
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.js
searx/static/themes/simple/js/searxng.head.js
searx/static/themes/simple/css/searxng-rtl.css
searx/static/themes/simple/css/searxng.css
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>
|
|
Show default image `img/img_load_error.svg` when image can't be loaded.
----
Some words about class ImageLayout:
The https://github.com/searxng/searxng/blob/master/searx/static/themes/simple/js/searxng.js is build by a grunt task ..
https://github.com/searxng/searxng/blob/d0e21a01b4e14df905f25445a3f6bcbec481671c/searx/static/themes/simple/gruntfile.js#L91-L93
The `/__common__/js/*.js` concats also https://github.com/searxng/searxng/blob/master/searx/static/themes/__common__/js/image_layout.js where a modified copy of the of the "Google-image-layout" (`ImageLayout`) is implemented [1][2][3].
[1] https://ptgamr.github.io/2014-09-12-google-image-layout/
[2] https://ptgamr.github.io/google-image-layout/src/google-image-layout.js
[3] https://github.com/ptgamr/google-image-layout/tree/master
----
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>
|
|
|
|
Add link::
<link rel="icon" href="favicon.png" sizes="any">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
Modern browsers should request::
INFO werkzeug : 127.0.0.1 - - [28/Nov/2021 17:03:07] "GET /static/themes/simple/img/favicon.svg HTTP/1.1" 200 -
[1] https://github.com/audreyfeldroy/favicon-cheat-sheet#svg-file
[2] https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7
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>
|
|
|
