Merge pull request #812 from kvch/revert-image-modal

Revert CSS image modal

searx/static/plugins/js/infinite_scroll.js

@@ -4,13 +4,9 @@ $(document).ready(function() {
         if ($(document).height() - win.height() == win.scrollTop()) {
             var formData = $('#pagination form:last').serialize();
             if (formData) {
-                var pageno = $('#pagination input[name=pageno]:last').attr('value');
                 $('#pagination').html('<div class="loading-spinner"></div>');
                 $.post('./', formData, function (data) {
-                    var lastImageHref = $('.result-images:last a').attr('href');
                     var body = $(data);
-                    $('a[href^="#open-modal"]:last').attr('href', '#open-modal-1-' + pageno);
-                    body.find('.modal-image a:first').attr('href', lastImageHref);
                     $('#pagination').remove();
                     $('#main_results').append('<hr/>');
                     $('#main_results').append(body.find('.result'));

searx/static/themes/oscar/less/logicodev/modal-pic.less

@@ -1,77 +0,0 @@
-.modal-image {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: rgba(0,0,0,0.8);
-    z-index: 1000000001;
-    opacity:0 !important;
-    pointer-events: none;
-
-    button {
-        display: none;
-    }
-
-    &:target {
-        opacity: 1 !important;
-        pointer-events: auto;
-    }
-
-    & > div {
-        margin: 2% auto;
-        width: 97%;
-        background: @dim-gray;
-        border: @gray 0.1rem solid;
-    }
-
-    @media (min-width: 769px) {
-        & > div {
-            max-width: 60.0rem;
-        }
-    }
-
-    .image-paging-left {
-        margin-right: 1.0rem;
-        margin-top: 0.5rem;
-        width:15px;
-        height:15px;
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI
-WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AweDQoOuikqUQAAAB1pVFh0Q29tbWVudAAAAAAAQ3Jl
-YXRlZCB3aXRoIEdJTVBkLmUHAAAAiElEQVQoz6XTrQ0CQRCG4SesQHI5g6EAqIEewNLSVUACzfAT
-BApDDSgSBAaJORKyauf2czOZdybzl5SpxR5j3H/OUQHYoMMMNwE1fcUT5hFwUgPuenAxBDxHwRZb
-HKMgbPDCuiQ4ZfYDU6xwxTNafXDP1dOu3nP1heUJDnmCVAB/cMES7/+v+gIq0Bs3k6NL9AAAAABJ
-RU5ErkJggg==) 96% no-repeat;
-    }
-
-    .image-paging-right {
-        margin-left: 1.2rem;
-        margin-top: 0.5rem;
-        width:15px;
-        height:15px;
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI
-        WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AweDQon+JuyPQAAAB1pVFh0Q29tbWVudAAAAAAAQ3Jl
-        YXRlZCB3aXRoIEdJTVBkLmUHAAAAaklEQVQoz73TsQ2DUAxF0SMWAFEzwGcaWhgpEyAlbQYJMACj
-        sAINTaiIf8Tt3FzL9jPfDHijdoHiVK9o8EAlQMKM1z8EZUTQHoJnjmDJFUwYr17hTIcN/W2dwzOH
-        tx2+czhhCZ9oNH/6qh1F2RaYgWxrQwAAAABJRU5ErkJggg==);
-
-    }
-
-    .image-container::before {
-        display: block;
-        min-width: 1.0rem;
-        max-width: 60.0rem;
-        min-height: 10.0rem;
-        height: 30.0rem;
-        content: "";
-    }
-}
-
-.modal-close {
-    position:fixed;
-    top: 0;
-    left: 0;
-    height: 100% !important;
-    width: 100% !important;
-    z-index: -1;
-}

searx/static/themes/oscar/less/logicodev/oscar.less

@@ -19,5 +19,3 @@
 @import "cursor.less";
 
 @import "code.less";
-
-@import "modal-pic.less";

searx/static/themes/oscar/less/pointhi/oscar.less

@@ -17,7 +17,3 @@
 @import "code.less";
 
 @import "navbar.less";
-
-@import "../logicodev/variables.less";
-
-@import "../logicodev/modal-pic.less";

searx/templates/oscar/result_templates/images.html

@@ -1,54 +1,39 @@
-<a href="#open-modal-{{ index }}-{{ pageno }}">
+{% from 'oscar/macros.html' import draw_favicon %}
-    <img src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" title="{{ result.title|striptags }}" class="img-thumbnail" id="img-result-thumb-{{ index }}" />
+
+<a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} data-toggle="modal" data-target="#modal-{{ index }}-{{pageno}}">
+    <img src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" title="{{ result.title|striptags }}" class="img-thumbnail">
 </a>
 
-<style type="text/css" media="screen">
+<div class="modal fade" id="modal-{{ index }}-{{ pageno }}" tabindex="-1" role="dialog" aria-hidden="true">
-#open-modal-{{ index }}-{{ pageno }}:target .image-container::before {
+    <div class="modal-dialog">
-    background: url({{ image_proxify(result.img_src)|safe }}) no-repeat center/contain;
+        <div class="modal-wrapper">
-}
+            <div class="modal-header">
-</style>
+                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-
+                <h4 class="modal-title">{% if result.engine~".png" in favicons %}{{ draw_favicon(result.engine) }} {% endif %}{{ result.title|striptags }}</h4>
-<div id="open-modal-{{ index }}-{{ pageno }}" class="modal-image">
-    <div class="container modal-dialog">
-        <div class="row">
-            <div class="col-md-12 col-sm-12 col-xs-12 modal-header">
-                <a {% if index != 1 %}href="#open-modal-{{ index-1 }}-{{ pageno }}"{% endif %}>
-                    <span class="pull-left image-paging-left"></span>
-                 </a>
-                <a href="#open-modal-{{ index+1 }}-{{ pageno }}">
-                    <span class="pull-right image-paging-right"></span>
-                </a>
-                <h4 class="modal-title image-title">{{ result.title|striptags }}</h4>
             </div>
-        </div>
+            <div class="modal-body">
-        <div class="row">
+                <img class="img-responsive center-block" src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}">
-            <div class="col-md-12 col-sm-12 col-xs-12 modal-body">
-                <a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}><div class="image-container"></div></a>
-            </div>
-        </div>
-        {% if result.content %}
-        <div class="row">
-            <div class="col-md-12 hidden-sm hidden-xs modal-body">
-                <p class="result-content">{{ result.content|safe }}</p>
                 {% if result.author %}<span class="photo-author">{{ result.author }}</span><br />{% endif %}
-            </div>
+                {% if result.content %}
-        </div>
+                    <p class="result-content">
+                        {{ result.content }}
+                    </p>
                 {% endif %}
+            </div>
             <div class="modal-footer">
-            <div class="row">
+                <div class="clearfix"></div>
-                <div class="col-md-10 col-xs-12">
-                    <p class="text-muted pull-left">{{ result.pretty_url }}</p>
-                </div>
-                <div class="col-md-2 hidden-sm hidden-xs">
                 <span class="label label-default pull-right">{{ result.engine }}</span>
-                </div>
+                <p class="text-muted pull-left">{{ result.pretty_url }}</p>
-            </div>
+                <div class="clearfix"></div>
 				<div class="row">
-                <a href="{{ result.url }}" class="btn btn-default">
+                    <div class="col-md-6">
-                    {{ _('View source') }}
+                        <a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} class="btn btn-default">{{ _('Get image') }}</a>
-                </a>
+                    </div>
+                    <div class="col-md-6">
+                        <a href="{{ result.url }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} class="btn btn-default">{{ _('View source') }}</a>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-    <a href="#img-result-thumb-{{ index }}-{{ pageno }}" class="modal-close"></a>
 </div>