mirror of https://github.com/searxng/searxng.git
[feat] images: show resolution inside the image and fix image details overflow
Co-authored-by: Markus Heiser <markus.heiser@darmarit.de>
This commit is contained in:
parent
e76ab1a4b3
commit
db1f9b31c9
|
@ -67,7 +67,10 @@ article.result-images .detail {
|
||||||
p {
|
p {
|
||||||
color: var(--color-result-detail-label-font);
|
color: var(--color-result-detail-label-font);
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
line-height: 0.9rem;
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0.8rem 0;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -464,6 +464,17 @@ article[data-vim-selected].category-social {
|
||||||
background: var(--color-result-image-background);
|
background: var(--color-result-image-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image_resolution {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 50%);
|
||||||
|
padding: 0.3rem 0.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #fff;
|
||||||
|
border-top-left-radius: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
span.title,
|
span.title,
|
||||||
span.source {
|
span.source {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -1,11 +1,9 @@
|
||||||
<article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">{{- "" -}}
|
<article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">{{- "" -}}
|
||||||
<a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">{{- "" -}}
|
<a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">{{- "" -}}
|
||||||
<img class="image_thumbnail" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{- "" -}}
|
<img class="image_thumbnail" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{- "" -}}
|
||||||
<span class="title">{{ result.title|striptags }}</span>{{- "" -}}
|
{%- if result.resolution %} <span class="image_resolution">{{ result.resolution }}</span> {%- endif -%}
|
||||||
<span class="source">
|
<span class="title">{{ result.title|striptags }}</span>{{- "" -}}
|
||||||
{{- result.parsed_url.netloc -}}
|
<span class="source">{{- result.parsed_url.netloc -}}</span>{{- "" -}}
|
||||||
{%- if result.resolution %} - {{ result.resolution }}{%- endif -%}
|
|
||||||
</span>{{- "" -}}
|
|
||||||
</a>{{- "" -}}
|
</a>{{- "" -}}
|
||||||
<div class="detail">{{- "" -}}
|
<div class="detail">{{- "" -}}
|
||||||
<a class="result-detail-close" href="#">{{ icon('close') }}</a>{{- "" -}}
|
<a class="result-detail-close" href="#">{{ icon('close') }}</a>{{- "" -}}
|
||||||
|
|
Loading…
Reference in New Issue