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>
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>
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.
* 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
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>
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 *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>
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>
* 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
when on the top of the page, the image is just below the search fields.
this commit slightly aligh the top of the image detail with the bottom
of the search fields.
the width of #main_results #results.image-detail-open.only_template_images
was set to 59.25rem. On mobile, the images overflowed on right side of
the viewport, which creates a horizontal scroll.
This commit set the value to min(98%, 59.25rem) whatever the max-width is.
* update from ionicons-npm to ionicons ver.5
* drop the webfont built by grunt for icons
* built icons.html template for inlining icons with jinja2 into html
* update icon to use mostly the outline version
* add icons to categories and do not display them on mobile to save space
* remove all legacy ion icon font files from simple theme
* icons.html is added in this commit since make statc.build.restore requires git to know the file already
* cleanup error-dialog
* remove hover effect from vim help modal
* remove bold font weight from active item in prefenreces tab bar
* remove margin from answer box to unify with rest of result page
buttons:
* previous & next in the result page
* save, restore, & back in the preferences
* back to top
<select> input in Chrom* browsers:
* fix the white text with a white background issue
It is not possible to use CSS variable in a SVG when this is in a background.
This commit adds two .svg files, less converts them into data URL.
The two files are indentical except the fill color.
* remove vim arrow
* add 1rem padding to results
* add 0.2rem left border to vim selected article
* set column gap to 1.2rem and make search bar in line with results
* put 10px border-radius selected article
* result article: 0.125rem margin on tablet and esktop; 1rem margin on phone
* index page: margin top is 24% of the view port.
avoid to scroll a small screen,
center the content in the middle of the screen
* link to preferences at the same height same the input fields
* increase the category tab heighs
* increase the margin bottom of the query field
* in the results, change the h3 margin top and bottom to 0.4rem (6px)
* move the back to top button slightly on the right when the results are only images
When an image is selected, the detail with the full size image is displayed
on the right side of the screen (or full screen on tablet and phone).
When Javascript is disabled, the thumbnail is a linked to the full size image,
as it was before.
When the image proxy is enabled, the full size image is also proxied,
in consequence this commit increases the bandwidth usage of instances.
The detail can be closed by the close button or the Esc key.
It is possible to go to the next and previous images using the j and k keys
or the button on the top right of the screen.
* url in article head is clickable
* url is bigger now 0.96em font
* url is now left floating on tablet and phone
* there is a 8px top and bottom margin on h3 result heading
* rework search form as grid layout
* remove various paddings and margins
* add logo and link to index to search form
* make categories bigger on phone
