From 5fa6af648debcdb3e19d58971c5c6dc2f44267e1 Mon Sep 17 00:00:00 2001
From: Noemi Vanyi <sitbackandwait@gmail.com>
Date: Mon, 5 Sep 2016 23:41:04 +0200
Subject: [PATCH 1/6] add own pics modal window

---
 .../static/themes/oscar/css/logicodev.min.css | Bin 10469 -> 11075 bytes
 .../oscar/less/logicodev/modal-pic.less       |  67 ++++++++++++++++
 .../themes/oscar/less/logicodev/oscar.less    |   2 +
 .../oscar/result_templates/images.html        |  73 +++++++++++-------
 4 files changed, 113 insertions(+), 29 deletions(-)
 create mode 100644 searx/static/themes/oscar/less/logicodev/modal-pic.less

diff --git a/searx/static/themes/oscar/css/logicodev.min.css b/searx/static/themes/oscar/css/logicodev.min.css
index 33d451b8f1b712e5bd5d8f106b4d1deb13fa6da8..9718eb793d1a8383bf020bc29c5eb52647bff11e 100644
GIT binary patch
delta 609
zcmb7?T~5O=498!1<qk#Dq#=>2g@ITiaR(mY-CfemqKTt48{4XBhu|XIfkSYD-Gj7c
z;$!21_#uvE{cQi8-Tm9+>u$774N0gN8qlh7RAWH0yu_uFB9P;m@Tg}Y-UWp~COVZW
zyEjaqw5Pe1-0K2H*+pyV?YUSpv{Ehkq&<QhOfjr@c81204`73Egf=M8)OMk4sJSJp
zHs4!Gig~PN8;P~6V0D<l19+`Mv#00B=sg_ffqua6BrZN@eR)4Q-9{2xo@c|PO%)EL
zM63CwGNSkza!}rslM;l1C3{90X8bzyZ3=m*JRiWgwIt1BFsZ3Rxk=GzHm#`sL)u=+
zt(d7!<2=iT-^S>R{0i>1WqD8U*XJNkpc6=H2ev8623F%*@p0_$$WpJm#=Gj#eNg6*
P#k#fslh}Wij=uQ-X>s6d

delta 7
OcmX>c_B3$AQw;zS9|R2m

diff --git a/searx/static/themes/oscar/less/logicodev/modal-pic.less b/searx/static/themes/oscar/less/logicodev/modal-pic.less
new file mode 100644
index 000000000..ffa87043a
--- /dev/null
+++ b/searx/static/themes/oscar/less/logicodev/modal-pic.less
@@ -0,0 +1,67 @@
+.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;
+        }
+    }
+
+    @media (max-width: 7680px) {
+        & > div {
+            position: relative;
+        }
+    }
+
+    .image-paging-left {
+        font-size: 2.2rem;
+        padding-right: 1.0rem;
+    }
+
+    .image-paging-right {
+        font-size: 2.2rem;
+        padding-left: 1.2rem;
+    }
+
+    .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;
+}
diff --git a/searx/static/themes/oscar/less/logicodev/oscar.less b/searx/static/themes/oscar/less/logicodev/oscar.less
index 55181cb9c..ecb3a0799 100644
--- a/searx/static/themes/oscar/less/logicodev/oscar.less
+++ b/searx/static/themes/oscar/less/logicodev/oscar.less
@@ -19,3 +19,5 @@
 @import "cursor.less";
 
 @import "code.less";
+
+@import "modal-pic.less";
diff --git a/searx/templates/oscar/result_templates/images.html b/searx/templates/oscar/result_templates/images.html
index b23f34915..53b2cb76d 100644
--- a/searx/templates/oscar/result_templates/images.html
+++ b/searx/templates/oscar/result_templates/images.html
@@ -1,39 +1,54 @@
-{% from 'oscar/macros.html' import draw_favicon %}
-
-<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 href="#open-modal-{{ index }}-{{ pageno }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}>
+    <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>
 
-<div class="modal fade" id="modal-{{ index }}-{{ pageno }}" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-wrapper">
-            <div class="modal-header">
-                <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>
+<style type="text/css" media="screen">
+#open-modal-{{ index }}-{{ pageno }}:target .image-container::before {
+    background: url({{ image_proxify(result.img_src)|safe }}) no-repeat center/contain;
+}
+</style>
+
+<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 glyphicon glyphicon-chevron-left image-paging-left"></span>
+                 </a>
+                <a href="#open-modal-{{ index+1 }}-{{ pageno }}">
+                    <span class="image-paging-right pull-right glyphicon glyphicon-chevron-right"></span>
+                </a>
+                <h4 class="modal-title image-title">{{ result.title|striptags }}</h4>
             </div>
-            <div class="modal-body">
-                <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>
+        <div class="row">
+            <div class="col-md-12 col-sm-12 col-xs-12 modal-body">
+                <a href="{{ result.img_src }}"><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 %}
-                {% if result.content %}
-                    <p class="result-content">
-                        {{ result.content }}
-                    </p>
-                {% endif %}
             </div>
-            <div class="modal-footer">
-                <div class="clearfix"></div>
-                <span class="label label-default pull-right">{{ result.engine }}</span>
-                <p class="text-muted pull-left">{{ result.pretty_url }}</p>
-                <div class="clearfix"></div>
-				<div class="row">
-                    <div class="col-md-6">
-                        <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>
-                    </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>
+        {% endif %}
+        <div class="modal-footer">
+            <div class="row">
+                <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>
+            </div>
+            <div class="row">
+                <a href="{{ result.url }}" class="btn btn-default">
+                    {{ _('View source') }}
+                </a>
             </div>
         </div>
     </div>
+    <a href="#img-result-thumb-{{ index }}-{{ pageno }}" class="modal-close"></a>
 </div>

From 1157cefb1e231673592799e43d6448a494b703d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9mi=20V=C3=A1nyi?= <sitbackandwait@gmail.com>
Date: Tue, 27 Dec 2016 19:48:58 +0100
Subject: [PATCH 2/6] add generated css of modal window

---
 .../static/themes/oscar/css/logicodev.min.css | Bin 11075 -> 11271 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/searx/static/themes/oscar/css/logicodev.min.css b/searx/static/themes/oscar/css/logicodev.min.css
index 9718eb793d1a8383bf020bc29c5eb52647bff11e..2f3af28a6bdaedb81d60c3decd9dd4beb7721dfe 100644
GIT binary patch
delta 437
zcmaKo!A^uQ6h-&0`~VjOGl`5T0Zc&J#OTJION}lcv_LboC7q6r5;99afQ7%|Kg`yT
z5;|lwM(yt9-goZp+upt2zh8L=VKBY0zxLiv1?ZAX9L*e98AYBrH5E>i8Ob1Dlv=GM
z#m7Zlqy_Y7esp^&80Fxc2rkjioWyCf_F7*k3N_*aN_Ii{V=G`iIpRPw(RKUPy^zG`
z!MNLhc<!d_z9Sspl28Lfy%N=|Fm0ivK}-I^aO6h=k~Bc+sA^tT28UzHKMd>o6SA=x
zIJD$nG5HV=Tr!Pu#tNlbOZl>?;TdPO$`|D8Bx4iu<NsE!*ske#5HbyCcE}G0I+F&w
L?iAkN%pX1hMmd|o

delta 257
zcmZpVI2^XYQIpjY1SWfHPM_SbC1`J*n^=^dnP+8apsJ8qT9R*FkeHH^nU`*5l$vXu
zl$e~IUX)*&mtv)yW|n4|mIzc{p<AArQj%e1YEYD#JDFEYhD9$kH+}Lt?Z|o%LpL`+
zB{4_0AQ5P4x<aBtaY15Uby|L2iEeRbRjQQ<(Aa|f;>?oF{5-3)%!<?$>yrEeD`Svh
e);XzZB@kvUhEcjjnduoNcny@pG!d)`Y9s)}&s;SC


From d82f64238f63debe143d1f9617aa5149197ba6ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9mi=20V=C3=A1nyi?= <sitbackandwait@gmail.com>
Date: Tue, 27 Dec 2016 20:21:45 +0100
Subject: [PATCH 3/6] fix opening of result on new tab

---
 searx/templates/oscar/result_templates/images.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/searx/templates/oscar/result_templates/images.html b/searx/templates/oscar/result_templates/images.html
index 53b2cb76d..3bf52cd68 100644
--- a/searx/templates/oscar/result_templates/images.html
+++ b/searx/templates/oscar/result_templates/images.html
@@ -1,4 +1,4 @@
-<a href="#open-modal-{{ index }}-{{ pageno }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}>
+<a href="#open-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" id="img-result-thumb-{{ index }}" />
 </a>
 
@@ -23,7 +23,7 @@
         </div>
         <div class="row">
             <div class="col-md-12 col-sm-12 col-xs-12 modal-body">
-                <a href="{{ result.img_src }}"><div class="image-container"></div></a>
+                <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 %}

From 2ec6034c8545290ac58f6b9868b266aa1befde2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9mi=20V=C3=A1nyi?= <sitbackandwait@gmail.com>
Date: Tue, 27 Dec 2016 20:22:40 +0100
Subject: [PATCH 4/6] add modal window for pointhi style

---
 searx/static/themes/oscar/css/pointhi.min.css | Bin 6697 -> 7499 bytes
 .../themes/oscar/less/pointhi/oscar.less      |   4 ++++
 2 files changed, 4 insertions(+)

diff --git a/searx/static/themes/oscar/css/pointhi.min.css b/searx/static/themes/oscar/css/pointhi.min.css
index 921d60a32d9225d636a8186e7b418371d4698cef..ce5f637576c8eafb24db4c1a5200f8a44dd2edbe 100644
GIT binary patch
delta 816
zcmaJ<+is&U5dDvRVpBy*qy<4*<zh?K{))i^85Mgh<D_X3;(PXO|6_luHVGuXEq=gb
z&z$j`bN)R1V}F-F`b3cwb&N_>&>CvcA!%0P2_$!9SjsI{d*}Z-IY-KGYAA<T6i=0<
zgO<!zxmcvX!b-MF{u-l}aAH|{`7%yM6zE=9`V*BQ>x6dP5bEB6jo}E|HB6I+?)E)V
ze()`IE3q-Pc=?>boUj$Rc0|uUpx=OtgQIugj}niq>OBBzwwgyFfj^^kd$!xmd48Sl
zu3VS9Qg{Na1k3KkLs(IgSx`|!HOlU{0*NA8DAe&8W3%3w)3UuC=iE`8E*b08*Z1AE
zcDmWDx9OL~lRg$|;qVCEyOE+~kTEvG&s4=hr?w>R;s#%Vt&){*$c>OP+@59a!w~-i
z8PdK-8N84U$X}uqzP&*0X=6E*WML9Buc>(A{gtus60Rl^26}k7-oxO)EbzrI!Tk^f
nbZ;Ftn~lwjnwoEXe6j6>md?Ff7NZ%@s(HtT)A4XLa-4N<eiJC}

delta 7
OcmX?YwbEpRrW61Ti2~LD

diff --git a/searx/static/themes/oscar/less/pointhi/oscar.less b/searx/static/themes/oscar/less/pointhi/oscar.less
index 4e2fee129..4529801bb 100644
--- a/searx/static/themes/oscar/less/pointhi/oscar.less
+++ b/searx/static/themes/oscar/less/pointhi/oscar.less
@@ -17,3 +17,7 @@
 @import "code.less";
 
 @import "navbar.less";
+
+@import "../logicodev/variables.less";
+
+@import "../logicodev/modal-pic.less";

From 420ef433ae9b58786a4d2cc3816aff1e38a7076e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9mi=20V=C3=A1nyi?= <sitbackandwait@gmail.com>
Date: Wed, 28 Dec 2016 12:39:20 +0100
Subject: [PATCH 5/6] add img pagination support of infinite scroll

---
 searx/static/plugins/js/infinite_scroll.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/searx/static/plugins/js/infinite_scroll.js b/searx/static/plugins/js/infinite_scroll.js
index 9cd582d7f..1bc27e2e7 100644
--- a/searx/static/plugins/js/infinite_scroll.js
+++ b/searx/static/plugins/js/infinite_scroll.js
@@ -4,9 +4,13 @@ $(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'));

From 1710043eb76ef180269e7cf2b1ff795fa0a47157 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9mi=20V=C3=A1nyi?= <sitbackandwait@gmail.com>
Date: Wed, 28 Dec 2016 19:31:52 +0100
Subject: [PATCH 6/6] remove unnecessary media query && generated files

---
 .../static/themes/oscar/css/logicodev.min.css | Bin 11271 -> 11209 bytes
 searx/static/themes/oscar/css/pointhi.min.css | Bin 7499 -> 7437 bytes
 .../oscar/less/logicodev/modal-pic.less       |   6 ------
 3 files changed, 6 deletions(-)

diff --git a/searx/static/themes/oscar/css/logicodev.min.css b/searx/static/themes/oscar/css/logicodev.min.css
index 2f3af28a6bdaedb81d60c3decd9dd4beb7721dfe..4f5acfff3176d0c2a07a98ae85af14d0e468e15a 100644
GIT binary patch
delta 12
TcmZpVI2pbnMQigStyD$;C7A^y

delta 73
zcmX>Z-X5_bMa#w^H#H?QQ9&a&u|l^zGo>WM%G}JtprAstS}!+0B{4@gGdD3k)h;Eo
cthyk-II|=(KhLTtH7Btovn+LUl2$q+0PNNqNdN!<

diff --git a/searx/static/themes/oscar/css/pointhi.min.css b/searx/static/themes/oscar/css/pointhi.min.css
index ce5f637576c8eafb24db4c1a5200f8a44dd2edbe..03a85d791545668ba0816837cb414c4978c65f25 100644
GIT binary patch
delta 20
bcmX?Y)oZn3h4kbC8Ij3$GVGffWxN;xQ+x)3

delta 81
zcmeCRI&HOKg|w|hZfZ(qqJl<lVufybW=cthmARRPK|zIPwO($1N@9*~W^Q77s$EKE
lS#?2vab`(oex6lPYEEKFW?5?OWJ4LzNiyu44@-M70szsT9jE{R

diff --git a/searx/static/themes/oscar/less/logicodev/modal-pic.less b/searx/static/themes/oscar/less/logicodev/modal-pic.less
index ffa87043a..6861f1710 100644
--- a/searx/static/themes/oscar/less/logicodev/modal-pic.less
+++ b/searx/static/themes/oscar/less/logicodev/modal-pic.less
@@ -31,12 +31,6 @@
         }
     }
 
-    @media (max-width: 7680px) {
-        & > div {
-            position: relative;
-        }
-    }
-
     .image-paging-left {
         font-size: 2.2rem;
         padding-right: 1.0rem;