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
......@@ -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;
}
......
This diff is collapsed.
<?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>
@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 {
......
......@@ -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 {
......
node_modules/
dump.rdb
.vscode
\ No newline at end of file
......@@ -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
{% 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 %}
......
{% 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
{% 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
......@@ -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 %}
......
......@@ -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