mirror of
				https://github.com/searxng/searxng.git
				synced 2025-11-04 03:27:06 -05:00 
			
		
		
		
	[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">{{- "" -}}
 | 
				
			||||||
 | 
							{%- if result.resolution %} <span class="image_resolution">{{ result.resolution }}</span> {%- endif -%}
 | 
				
			||||||
		<span class="title">{{ result.title|striptags }}</span>{{- "" -}}
 | 
							<span class="title">{{ result.title|striptags }}</span>{{- "" -}}
 | 
				
			||||||
                <span class="source">
 | 
					                <span class="source">{{- result.parsed_url.netloc -}}</span>{{- "" -}}
 | 
				
			||||||
                  {{- result.parsed_url.netloc -}}
 | 
					 | 
				
			||||||
                  {%- 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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user