Skip to content
GitLab
Commit 3be9ef8a authored by Daniel J. Ramirez's avatar Daniel J. Ramirez
Browse files

Several layout changes. 

Added new videos layout
Added video results for the first page (currently only two videos are shown since
it can clutter the main results)
parent a73f7468
Expand all Hide whitespace changes
Inline Side-by-side
searx/static/themes/eelo/css/eelo.css
View file @ 3be9ef8a
......@@ -658,19 +658,21 @@ nav #eelo_links > * {
flex-wrap: nowrap;
}
#search_form #more_categories {
margin-left: 24px;
padding: 8px 16px;
border-radius: 16px;
position: relative;
flex-direction: row;
align-items: center;
top: 0;
border: none;
border-radius: 0;
padding-bottom: 0;
background-color: transparent;
margin-left: 16px;
}
#search_form #more_categories > label {
padding: 0;
}
#search_form #more_categories > label:not(:last-child) {
margin-right: 16px;
}
#search_form.inline-search > #search_input_container {
margin-right: 40px;
}
......@@ -713,25 +715,78 @@ nav #eelo_links > * {
.result.result-torrent .extra-info > :not(:last-child) {
margin-right: 16px;
}
.result.result-videos {
.videos-gallery .result.result-torrent .torrent-banner {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: rgba(0, 0, 0, 0.4);
font-weight: bold;
padding: 6px 16px;
text-transform: uppercase;
display: flex;
justify-content: space-between;
font-size: 14px;
}
.videos-gallery .result.result-torrent .torrent-banner .torrent-data {
text-transform: none;
font-weight: normal;
}
.videos-gallery .result.result-torrent .torrent-banner .torrent-data > :not(:first-child) {
margin-left: 6px;
}
.result.result-videos,
.videos-gallery .result.result-torrent {
position: relative;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.result.result-videos .result-content {
display: flex;
.result.result-videos .result-content,
.videos-gallery .result.result-torrent .result-content {
margin: 0px;
display: flex;
flex-direction: column;
height: 100%;
}
.result.result-videos .result-content .result_header {
.result.result-videos .result-content .result_header,
.videos-gallery .result.result-torrent .result-content .result_header {
margin-top: 0;
}
.result.result-videos .result-content > .thumbnail {
flex: 1;
.result.result-videos .result-content .result_header a,
.videos-gallery .result.result-torrent .result-content .result_header a {
word-wrap: break-word;
}
.result.result-videos .result-content > :not(.thumbnail) {
flex: 3;
padding-left: 16px;
.result.result-videos .result-content > .thumbnail,
.videos-gallery .result.result-torrent .result-content > .thumbnail {
position: relative;
}
.result.result-videos .result-content .thumbnail > img {
.result.result-videos .result-content > :not(.thumbnail),
.videos-gallery .result.result-torrent .result-content > :not(.thumbnail) {
margin-top: 8px;
height: 100%;
display: flex;
padding: 8px 16px;
flex-direction: column;
justify-content: space-between;
}
.result.result-videos .result-content .thumbnail > img,
.videos-gallery .result.result-torrent .result-content .thumbnail > img {
width: 100%;
height: 144px;
object-fit: cover;
object-position: center;
display: block;
}
.result.result-videos .result-content .subheader .result_engine,
.videos-gallery .result.result-torrent .result-content .subheader .result_engine {
float: right;
}
.result.result-videos .result-content .subheader .result_engine img,
.videos-gallery .result.result-torrent .result-content .subheader .result_engine img {
width: 16px;
height: 16px;
margin-left: 8px;
vertical-align: middle;
}
.result .external-link {
font-size: 14px;
......@@ -750,8 +805,7 @@ nav #eelo_links > * {
white-space: pre-wrap;
}
.result.result-default,
.result.result-torrent,
.result.result-videos {
.result.result-torrent {
margin-bottom: 32px;
}
.result.result-images {
......@@ -762,32 +816,49 @@ nav #eelo_links > * {
border: none;
margin-bottom: 8px;
}
#results.image-gallery {
#results.images-gallery {
display: flex;
flex-wrap: wrap;
}
#results.image-gallery .result.result-images {
#results.images-gallery .result.result-images {
display: block;
flex: 20%;
height: 200px;
max-height: 200px;
overflow: hidden;
}
.videos-gallery {
display: flex;
flex-wrap: wrap;
}
.videos-gallery .result.result-torrent {
margin-bottom: 0;
}
@supports (display: grid) {
#results.image-gallery {
#results.images-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 8px;
}
#results.image-gallery .result.result-images {
#results.images-gallery .result.result-images {
display: block;
text-align: center;
overflow: hidden;
}
#results.image-gallery .result.result-images .img-thumbnail {
#results.images-gallery .result.result-images .img-thumbnail {
height: 100%;
width: auto;
}
.videos-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
grid-gap: 16px;
}
.videos-gallery .result.result-videos,
.videos-gallery .result.result-torrent {
display: block;
overflow: hidden;
}
}
#default_images_container {
column-count: 5;
......@@ -855,19 +926,22 @@ nav #eelo_links > * {
color: rgba(0, 0, 0, 0.4);
padding-right: 16px;
}
#image_result_mini_gallery_header {
.first-page-media-results {
margin-bottom: 32px;
}
.first-page-media-results .header {
display: flex;
align-items: center;
justify-content: space-between;
}
#image_result_mini_gallery_header .title {
.first-page-media-results .header .title {
font-size: 18px;
}
@media screen and (max-width: 1100px) {
#results.image-gallery {
#results.images-gallery {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
#results.image-gallery .result.result-images {
#results.images-gallery .result.result-images {
height: 140px;
max-height: 140px;
}
......
searx/static/themes/eelo/css/eelo.min.css
View file @ 3be9ef8a
This diff is collapsed.
searx/static/themes/eelo/img/torrent_thumb.svg 0 → 100644
View file @ 3be9ef8a
<?xml version="1.0" encoding="UTF-8"?>
<svg width="128" height="72" version="1.1" viewBox="0 0 33.866666 19.050001" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(0 -277.95)">
<g transform="matrix(1.1444 0 0 1.1444 -1.0945e-7 -40.149)">
<rect x="1.5947e-6" y="277.95" width="29.592" height="16.646" fill="#f1f1f1"/>
<g transform="matrix(.77212 0 0 .77212 141.52 -132.88)" fill="none" stroke="#507cdd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.1977">
<path d="m-164.12 538.09v7.5069"/>
<path d="m-166.86 542.37 2.7316 3.2273 2.7316-3.2273"/>
</g>
</g>
</g>
</svg>
searx/static/themes/eelo/less/eelo/results.less
View file @ 3be9ef8a
@video-scale: 16;
#results {
margin-top: @spacing_xx-large;
margin-bottom: @spacing_xx-large;
......@@ -35,22 +37,78 @@
&.result-torrent {
.extra-info > :not(:last-child) { margin-right: @spacing_large; }
}
&.result-videos {
.videos-gallery &.result-torrent {
.torrent-banner {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: @text-muted-color;
font-weight: bold;
padding: @spacing_small @spacing_large;
text-transform: uppercase;
display: flex;
justify-content: space-between;
font-size: @fontsize_small;
.torrent-data {
text-transform: none;
font-weight: normal;
& > :not(:first-child) {
margin-left: @spacing_small;
}
}
}
}
&.result-videos, .videos-gallery &.result-torrent {
position: relative;
.widget-border(@dim-color-lighter);
border-radius: @corner-radius;
.result-content {
display: flex;
margin: 0px;
display: flex;
flex-direction: column;
height: 100%;
.result_header {
margin-top: 0;
a {
word-wrap: break-word;
}
}
.result_header { margin-top: 0; }
& > .thumbnail { flex: 1; }
& > .thumbnail { position: relative; }
& > :not(.thumbnail) {
flex: 3;
padding-left: @spacing_large;
margin-top: @spacing_medium;
height: 100%;
display: flex;
padding: @spacing_medium @spacing_large;
flex-direction: column;
justify-content: space-between;
}
.thumbnail > img {
width: 100%;
height: 9px * @video-scale;
object-fit: cover;
object-position: center;
display: block;
}
.subheader {
.result_engine {
float: right;
img {
width: 16px;
height: 16px;
margin-left: @spacing_medium;
vertical-align: middle;
}
}
}
.thumbnail > img { width: 100%; }
}
}
}
.external-link {
font-size: @fontsize_small;
......@@ -74,7 +132,7 @@
}
}
.result.result-default, .result.result-torrent, .result.result-videos {
.result.result-default, .result.result-torrent {
margin-bottom: @spacing_xx-large;
}
.result.result-images {
......@@ -87,7 +145,7 @@
}
}
#results.image-gallery {
#results.images-gallery {
display: flex;
flex-wrap: wrap;
......@@ -99,8 +157,15 @@
overflow: hidden;
}
}
.videos-gallery {
display: flex;
flex-wrap: wrap;
// torrents in grid mode do not need margin
.result.result-torrent { margin-bottom: 0; }
}
@supports(display: grid) {
#results.image-gallery {
#results.images-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: @spacing_medium;
......@@ -116,6 +181,16 @@
}
}
}
.videos-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16px * @video-scale, 1fr));
grid-gap: @spacing_large;
.result.result-videos, .result.result-torrent {
display: block;
overflow: hidden;
}
}
}
#default_images_container {
column-count: 5;
......@@ -199,17 +274,21 @@
}
}
#image_result_mini_gallery_header {
display: flex;
align-items: center;
justify-content: space-between;
.first-page-media-results {
margin-bottom: @spacing_xx-large;
.title { font-size: @fontsize_large; }
.header {
display: flex;
align-items: center;
justify-content: space-between;
.title { font-size: @fontsize_large; }
}
}
.tablet-mq({
#results.image-gallery {
#results.images-gallery {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
.result.result-images {
......
searx/static/themes/eelo/less/eelo/search.less
View file @ 3be9ef8a
......@@ -214,17 +214,19 @@
#search_params, #categories { flex-wrap: nowrap; }
#more_categories {
margin-left: @spacing_x-large;
padding: @spacing_medium @spacing_large;
border-radius: @spacing_large;
position: relative;
flex-direction: row;
align-items: center;
top: 0;
border: none;
border-radius: 0;
padding-bottom: 0;
background-color: transparent;
margin-left: @spacing_large;
> label { padding: 0; }
> label:not(:last-child) {
margin-right: @spacing_large;
}
}
}
#search_form.inline-search > #search_input_container {
......
searx/static/themes/oscar/.gitignore
View file @ 3be9ef8a
node_modules/
dump.rdb
.vscode
\ No newline at end of file
searx/templates/eelo/macros.html
View file @ 3be9ef8a
......@@ -35,8 +35,11 @@
{%- endmacro -%}
<!-- Draw result header -->
{% macro result_header(result, favicons) -%}
<h4 class="result_header">{% if result.engine~".png" in favicons %}{{ draw_favicon(result.engine) }} {% endif %}{{ result_link(result.url, result.title|safe) }}</h4>
{% macro result_header(result, favicons, put_icon=True) -%}
<h4 class="result_header">{% if result.engine~".png" in favicons and put_icon %}{{ draw_favicon(result.engine) }} {% endif %}{{ result_link(result.url, result.title|safe) }}</h4>
{%- endmacro %}
{% macro result_engine(result, favicons) -%}
<span class="result_engine">{{ result.engine }}{% if result.engine~".png" in favicons %}{{ draw_favicon(result.engine)}}{% endif %}</span>
{%- endmacro %}
<!-- Draw result sub header -->
......@@ -102,7 +105,7 @@
<input type="hidden" name="language" value="{{ lang }}" />
{% endif %}
{% if category %}
<input type="hidden" name="category" value="images" />
<input type="hidden" name="category" value="{{ category }}" />
{% endif %}
<button type="submit" class="btn btn-flat" >{{ text }}</button>
</form>
......@@ -117,4 +120,13 @@
{{ caller() }}
</div>
</div>
{%- endmacro %}
{% macro format_filesize(filesize) -%}
{% if filesize < 1024 %}{{ filesize }} {{ _('Bytes') }}
{% elif filesize < 1024*1024 %}{{ '{0:0.2f}'.format(filesize/1024) }} {{ _('kiB') }}
{% elif filesize < 1024*1024*1024 %}{{ '{0:0.2f}'.format(filesize/1024/1024) }} {{ _('MiB') }}
{% elif filesize < 1024*1024*1024*1024 %}{{ '{0:0.2f}'.format(filesize/1024/1024/1024) }} {{ _('GiB') }}
{% else %}{{ '{0:0.2f}'.format(filesize/1024/1024/1024/1024) }} {{ _('TiB') }}{% endif %}
{%- endmacro %}
\ No newline at end of file
searx/templates/eelo/result_templates/torrent.html
View file @ 3be9ef8a
{% from 'eelo/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, result_link, icon %}
{% from 'eelo/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, result_link, icon, format_filesize %}
{{ result_header(result, favicons) }}
{% call result_sub_header(result) %}
......@@ -20,11 +20,7 @@
{% if result.filesize %}
<span class="badge"> {{ _('Filesize') }}:
{% if result.filesize < 1024 %}{{ result.filesize }} {{ _('Bytes') }}
{% elif result.filesize < 1024*1024 %}{{ '{0:0.2f}'.format(result.filesize/1024) }} {{ _('kiB') }}
{% elif result.filesize < 1024*1024*1024 %}{{ '{0:0.2f}'.format(result.filesize/1024/1024) }} {{ _('MiB') }}
{% elif result.filesize < 1024*1024*1024*1024 %}{{ '{0:0.2f}'.format(result.filesize/1024/1024/1024) }} {{ _('GiB') }}
{% else %}{{ '{0:0.2f}'.format(result.filesize/1024/1024/1024/1024) }} {{ _('TiB') }}{% endif %}
{{ format_filesize(result.filesize) }}
</span>
{% endif %}
......
searx/templates/eelo/result_templates/video_torrent.html 0 → 100644
View file @ 3be9ef8a
{% from 'eelo/macros.html' import result_header, result_engine, result_sub_header%}
<div class="result-content">
<a class="thumbnail" href="{{ result.url }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}>
<img src="{{ url_for('static', filename='img/torrent_thumb.svg') }}" alt="{{ result.title|striptags }} {{ result.engine }}" />
<div class="torrent-banner">
{{_("torrent")}}
<span class="torrent-data">
{% if result.seed and result.leech -%}
<span>🡑: {{ result.seed }}</span>
<span>🡓: {{ result.leech }}</span>
{%- endif %}
{% if result.filesize %}
<span> {{ format_filesize(result.filesize) }} </span>
{% endif %}
</span>
</div>
</a>
<div>
{{ result_header(result, favicons, False) }}
{% call result_sub_header(result) -%}
{{result_engine(result, favicons)}}
{%- endcall %}
</div>
</div>
\ No newline at end of file
searx/templates/eelo/result_templates/videos.html
View file @ 3be9ef8a
{% from 'eelo/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, icon %}
{% from 'eelo/macros.html' import result_header, result_engine, result_sub_header%}
<div class="result-content">
<a class="thumbnail" href="{{ result.url }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}>
<img src="{{ image_proxify(result.thumbnail) }}" alt="{{ result.title|striptags }} {{ result.engine }}" />
</a>
<span>
{{ result_header(result, favicons) }}
<div>
{{ result_header(result, favicons, False) }}
{% call result_sub_header(result) -%}
{{result.engine}}
{{result_engine(result, favicons)}}
{%- endcall %}
</span>
</div>
</div>
\ No newline at end of file
searx/templates/eelo/results.html
View file @ 3be9ef8a
......@@ -11,8 +11,8 @@
{% include 'eelo/search_full.html' %}
</div>
{% set image_gallery = selected_category == 'images' %}
<div class="container contents {% if image_gallery %} full {% endif %}">
{% set use_gallery_layout = selected_category == 'images' or selected_category == 'videos'%}
<div class="container contents {% if use_gallery_layout %} full {% endif %}">
<div>
{% if corrections %}
<div class="result" id="corrections">
......@@ -43,16 +43,21 @@
{% macro put_results(results_slice, no_image=False) -%}
{%- for result in results_slice %}
{% set template = result.template|replace('.html', '') if result['template'] else None %}
{% if no_image and template == "images" and not image_gallery %}
{% if no_image and template == "images" and not use_gallery_layout %}
{% else %}
<div class="result {% if template %}result-{{ template }}{% else %} result-default {% endif %}">
{% if template in ["torrent"] %}
{% if template in ["torrent"] and not use_gallery_layout %}
<small class="result-template">{{template}}</small>
{% endif %}
{% set index = loop.index %}
{% if result.template %}
{# Torrents presented in a gallery like layout are different than the regular layout #}
{% if template == "torrent" and selected_category == 'videos' %}
{% include get_result_template('eelo', 'video_torrent.html') %}
{% else %}
{% include get_result_template('eelo', result['template']) %}
{% endif %}
{% else %}
{% include 'eelo/result_templates/default.html' %}
{% endif %}
......@@ -62,16 +67,29 @@
{%- endmacro %}
<div id="results" {% if image_gallery %} class="image-gallery" {% endif %}>
<div id="results" {% if use_gallery_layout %} class="{{selected_category}}-gallery" {% endif %}>
{{ put_results(results[:3], True) }}
{% if image_results %}
<div id="image_result_mini_gallery_header">
<b class="title">{{_("Images")}}</b>
{{ search_link(_("More"), q|e, method=method, time_range=time_range, lang=current_language, category="images") }}
<div class="first-page-media-results">
<div class="header">
<b class="title">{{_("Images")}}</b>
{{ search_link(_("More"), q|e, method=method, time_range=time_range, lang=current_language, category="images") }}
</div>
<div id="default_images_container">
{{ put_results(image_results) }}
</div>
</div>
<div id="default_images_container">
{{ put_results(image_results) }}
{% endif %}
{% if videos_results %}
<div class="first-page-media-results">
<div class="header">
<b class="title">{{_("Videos")}}</b>
{{ search_link(_("More"), q|e, method=method, time_range=time_range, lang=current_language, category="videos") }}
</div>
<div class="videos-gallery">
{{ put_results(videos_results) }}
</div>
</div>
{% endif %}
......
searx/webapp.py
View file @ 3be9ef8a
......@@ -507,7 +507,7 @@ def index():
images.append(res)
search_data.results.remove(res)
elif res.get('category') == 'videos':
if len(videos) < 5:
if len(videos) < 2:
videos.append(res)
search_data.results.remove(res)
elif res.get('category') is None:
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment