[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)
This commit is contained in:
mrpaulblack 2022-02-21 22:18:48 +01:00
parent 3408d061aa
commit 21e3c40516
12 changed files with 91 additions and 51 deletions

View file

@ -278,12 +278,18 @@ class ResultContainer:
result['parsed_url'] = result['parsed_url']._replace(scheme="http") result['parsed_url'] = result['parsed_url']._replace(scheme="http")
result['url'] = result['parsed_url'].geturl() result['url'] = result['parsed_url'].geturl()
# avoid duplicate content between the content and title fields
if result.get('content') == result.get('title'):
del result['content']
# make sure there is a template
if 'template' not in result:
result['template'] = 'default.html'
# strip multiple spaces and cariage returns from content # strip multiple spaces and cariage returns from content
if result.get('content'): if result.get('content'):
result['content'] = WHITESPACE_REGEX.sub(' ', result['content']) result['content'] = WHITESPACE_REGEX.sub(' ', result['content'])
return True
def __merge_url_result(self, result, position): def __merge_url_result(self, result, position):
result['engines'] = set([result['engine']]) result['engines'] = set([result['engine']])
with self._lock: with self._lock:

View file

@ -60,7 +60,7 @@ module.exports = function(grunt) {
separator: ';' separator: ';'
}, },
dist: { dist: {
src: ['src/js/*.js', '../__common__/js/image_layout.js'], src: ['src/js/*.js'],
dest: 'js/searxng.js' dest: 'js/searxng.js'
} }
}, },

View file

@ -128,7 +128,7 @@
obj.trottleCallToAlign = null; obj.trottleCallToAlign = null;
}, 20); }, 20);
} }
} };
ImageLayout.prototype.align = function () { ImageLayout.prototype.align = function () {
var i; var i;
@ -183,7 +183,7 @@
img.classList.add('aligned'); img.classList.add('aligned');
} }
} }
} };
ImageLayout.prototype.watch = function () { ImageLayout.prototype.watch = function () {
var objthrottleAlign = this.throttleAlign.bind(this); var objthrottleAlign = this.throttleAlign.bind(this);
@ -216,7 +216,7 @@
subtree: true, subtree: true,
attributes: false, attributes: false,
characterData: false, characterData: false,
}) });
}; };
w.searxng.ImageLayout = ImageLayout; w.searxng.ImageLayout = ImageLayout;

View file

@ -108,7 +108,6 @@ module.exports = function (grunt) {
'js/searxng.head.min.js': ['src/js/head/*.js'], 'js/searxng.head.min.js': ['src/js/head/*.js'],
'js/searxng.min.js': [ 'js/searxng.min.js': [
'src/js/main/*.js', 'src/js/main/*.js',
'../__common__/js/*.js',
'./node_modules/autocomplete-js/dist/autocomplete.js' './node_modules/autocomplete-js/dist/autocomplete.js'
] ]
} }

View file

@ -7,9 +7,6 @@
} }
searxng.ready(function () { searxng.ready(function () {
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 14, 6, 200);
searxng.image_thumbnail_layout.watch();
d.querySelectorAll('#urls img.image').forEach( d.querySelectorAll('#urls img.image').forEach(
img => img =>
img.addEventListener( img.addEventListener(
@ -74,13 +71,11 @@
} }
} }
d.getElementById('results').classList.add('image-detail-open'); d.getElementById('results').classList.add('image-detail-open');
searxng.image_thumbnail_layout.align();
searxng.scrollPageToSelected(); searxng.scrollPageToSelected();
} }
searxng.closeDetail = function (e) { searxng.closeDetail = function (e) {
d.getElementById('results').classList.remove('image-detail-open'); d.getElementById('results').classList.remove('image-detail-open');
searxng.image_thumbnail_layout.align();
searxng.scrollPageToSelected(); searxng.scrollPageToSelected();
} }
searxng.on('.result-detail-close', 'click', e => { searxng.on('.result-detail-close', 'click', e => {

View file

@ -68,8 +68,8 @@
--color-result-search-url-border: #ddd; --color-result-search-url-border: #ddd;
--color-result-search-url-font: #000; --color-result-search-url-font: #000;
// Images Colors // Images Colors
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); --color-result-image-span-font: #444;
--color-result-image-span-font: #fff; --color-result-image-span-font-selected: #fff;
--color-result-image-background: #fff; --color-result-image-background: #fff;
/// Settings Colors /// Settings Colors
--color-settings-tr-hover: #f7f7f7; --color-settings-tr-hover: #f7f7f7;
@ -179,8 +179,8 @@
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2); --color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0); --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
// Images Colors // Images Colors
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); --color-result-image-span-font: #bbb;
--color-result-image-span-font: #fff; --color-result-image-span-font-selected: #222;
--color-result-image-background: #222; --color-result-image-background: #222;
/// Settings Colors /// Settings Colors
--color-settings-tr-hover: #2d2d2d; --color-settings-tr-hover: #2d2d2d;
@ -230,9 +230,11 @@
@results-gap: 5rem; @results-gap: 5rem;
@results-margin: 0.125rem; @results-margin: 0.125rem;
@result-padding: 1rem; @result-padding: 1rem;
@results-image-row-height: 12rem;
@results-image-row-height-phone: 6rem;
@search-width: 40rem; @search-width: 40rem;
// heigh of #search, see detail.less // heigh of #search, see detail.less
@search-height: 7.75rem; @search-height: 7.6rem;
/// Device Size /// Device Size
/// @desktop > @tablet /// @desktop > @tablet

View file

@ -39,6 +39,7 @@ article.result-images .detail {
border: none; border: none;
object-fit: contain; object-fit: contain;
width: inherit; width: inherit;
height: inherit;
max-width: 100%; max-width: 100%;
min-height: inherit; min-height: inherit;
max-height: calc(100vh - 25rem - 7rem); max-height: calc(100vh - 25rem - 7rem);

View file

@ -83,6 +83,11 @@
} }
} }
// Image flexbox
#main_results div#results.only_template_images #urls {
direction: rtl;
}
// Image detail // Image detail
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p { #results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
direction: rtl; direction: rtl;

View file

@ -143,6 +143,10 @@ article.result-images[data-vim-selected] {
.image_thumbnail { .image_thumbnail {
filter: opacity(60%); filter: opacity(60%);
} }
span.title {
color: var(--color-result-image-span-font-selected);
}
} }
article[data-vim-selected].category-videos, article[data-vim-selected].category-videos,
@ -284,6 +288,16 @@ article[data-vim-selected].category-social {
} }
} }
.template_group_images {
display: flex;
flex-wrap: wrap;
}
.template_group_images::after {
flex-grow: 10;
content: "";
}
.category-videos, .category-videos,
.category-news, .category-news,
.category-map, .category-map,
@ -357,40 +371,38 @@ article[data-vim-selected].category-social {
} }
.result-images { .result-images {
display: inline-block; flex-grow: 1;
margin: 0; padding: 0.5rem 0.5rem 2rem 0.5rem;
padding: 0; margin: 0.25rem;
position: relative;
max-height: 200px;
border: none !important; border: none !important;
height: @results-image-row-height;
& > a {
position: relative;
}
img { img {
float: inherit; margin: 0;
margin: 0.125rem;
padding: 0; padding: 0;
border: none; border: none;
max-height: 200px; height: 100%;
width: 100%;
object-fit: cover;
vertical-align: bottom;
background: var(--color-result-image-background); background: var(--color-result-image-background);
} }
span.title { span.title {
display: none;
color: var(--color-result-image-span-font);
}
&:hover span.title {
display: block; display: block;
position: absolute; position: absolute;
bottom: 0;
.ltr-right(0); width: 100%;
padding: 4px; font-size: 0.9rem;
margin-top: 0; color: var(--color-result-image-span-font);
.ltr-margin-right(0); padding: 0.5rem 0 0 0;
margin-bottom: 4px; overflow: hidden;
.ltr-margin-left(4px); text-overflow: ellipsis;
// color: @color-result-image-span-font; white-space: nowrap;
background-color: var(--color-result-image-span-background-hover);
font-size: 0.7em;
} }
} }
@ -785,8 +797,14 @@ article[data-vim-selected].category-social {
} }
#urls { #urls {
width: inherit;
margin: 0; margin: 0;
display: flex;
flex-wrap: wrap;
}
#urls::after {
flex-grow: 10;
content: "";
} }
#backToTop { #backToTop {
@ -837,8 +855,7 @@ article[data-vim-selected].category-social {
.result-images { .result-images {
margin: 0; margin: 0;
padding: 0; height: @results-image-row-height-phone;
border: none;
} }
} }

View file

@ -15,7 +15,7 @@
{% if results and results|map(attribute='template')|unique|list|count == 1 %} {% if results and results|map(attribute='template')|unique|list|count == 1 %}
{% set only_template = 'only_template_' + results[0]['template']|default('default')|replace('.html', '') %} {% set only_template = 'only_template_' + results[0]['template']|default('default')|replace('.html', '') %}
{% else %} {% else %}
{% set unique_template = '' %} {% set only_template = '' %}
{% endif %} {% endif %}
<div id="results" class="{{ only_template }}"> <div id="results" class="{{ only_template }}">
@ -131,12 +131,10 @@
<div id="urls"> <div id="urls">
{% for result in results %} {% for result in results %}
{% if result.open_group and not only_template %}<div class="template_group_{{ result['template']|replace('.html', '') }}">{% endif %}
{% set index = loop.index %} {% set index = loop.index %}
{% if result['template'] %}
{% include get_result_template('simple', result['template']) %} {% include get_result_template('simple', result['template']) %}
{% else %} {% if result.close_group and not only_template %}</div>{% endif %}
{% include 'simple/result_templates/default.html' %}
{% endif %}
{% endfor %} {% endfor %}
{% if not results and not answers %} {% if not results and not answers %}
{% include 'simple/messages/no_results.html' %} {% include 'simple/messages/no_results.html' %}

View file

@ -726,6 +726,9 @@ def search():
# Server-Timing header # Server-Timing header
request.timings = result_container.get_timings() # pylint: disable=assigning-non-slot request.timings = result_container.get_timings() # pylint: disable=assigning-non-slot
current_template = None
previous_result = None
# output # output
for result in results: for result in results:
if output_format == 'html': if output_format == 'html':
@ -762,6 +765,18 @@ def search():
else: else:
result['publishedDate'] = format_date(result['publishedDate']) result['publishedDate'] = format_date(result['publishedDate'])
# set result['open_group'] = True when the template changes from the previous result
# set result['close_group'] = True when the template changes on the next result
if current_template != result.get('template'):
result['open_group'] = True
if previous_result:
previous_result['close_group'] = True # pylint: disable=unsupported-assignment-operation
current_template = result.get('template')
previous_result = result
if previous_result:
previous_result['close_group'] = True
if output_format == 'json': if output_format == 'json':
x = { x = {
'query': search_query.query, 'query': search_query.query,

View file

@ -33,7 +33,8 @@ class ViewsTestCase(SearxTestCase):
'engine': 'startpage', 'engine': 'startpage',
'parsed_url': ParseResult( 'parsed_url': ParseResult(
scheme='http', netloc='first.test.xyz', path='/', params='', query='', fragment='' scheme='http', netloc='first.test.xyz', path='/', params='', query='', fragment=''
), # noqa ),
'template': 'default.html',
}, },
{ {
'content': 'second test content', 'content': 'second test content',
@ -43,7 +44,8 @@ class ViewsTestCase(SearxTestCase):
'engine': 'youtube', 'engine': 'youtube',
'parsed_url': ParseResult( 'parsed_url': ParseResult(
scheme='http', netloc='second.test.xyz', path='/', params='', query='', fragment='' scheme='http', netloc='second.test.xyz', path='/', params='', query='', fragment=''
), # noqa ),
'template': 'default.html',
}, },
] ]