From 7915b5c5a08afbdc8fd2144866e2d5d9f0591696 Mon Sep 17 00:00:00 2001
From: Dalf <alex@al-f.net>
Date: Sun, 5 Jan 2014 20:27:13 +0100
Subject: [PATCH 1/3] [mod] web page modification

---
 searx/static/css/style.css      | 125 ++++++++++++++++++++------------
 searx/templates/categories.html |   4 +-
 searx/templates/results.html    |  26 ++++---
 searx/templates/search.html     |   8 +-
 4 files changed, 99 insertions(+), 64 deletions(-)

diff --git a/searx/static/css/style.css b/searx/static/css/style.css
index b24b97a6..b3831c54 100644
--- a/searx/static/css/style.css
+++ b/searx/static/css/style.css
@@ -2,8 +2,22 @@ html {
   font-family: sans-serif;
   font-size: 0.9em;
   -webkit-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
   color: #444444;
+  padding: 0;
+  margin: 0;
+}
+
+body, #container {
+  padding: 0;
+  margin: 0;
+}
+
+#container {
+    width: 100%;
+    position: absolute;
+    top: 0;
 }
 
 .row { max-width: 800px; margin: auto; text-align: justify; }
@@ -22,57 +36,49 @@ h1 { font-size: 5em; }
 div.title { background: url('/static/img/searx.png') no-repeat; width: 100%; background-position: center; }
 div.title h1 { visibility: hidden; }
 
-
 input[type="submit"] { border: 1px solid #666666; color: #444444;  padding: 4px; background-color: #FFFFFF; margin-left: 8px; }
 
 input[type="checkbox"] { visibility: hidden; }
 
-.checkbox_container { display: inline-block; position: relative; padding-left: 3px; margin: 0 10px; }
+#categories { margin: 0 10px; }
+
+.checkbox_container { display: inline-block; position: relative; margin: 0 3px; padding: 0px; }
+.checkbox_container input {
+    display: none;
+}
 .checkbox_container label {
     cursor: pointer;
-}
-.checkbox_container label.cb {
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    top: 2px;
-    left: 2px;
-    background: #eee;
-    border:1px solid #ddd;
-}
-.checkbox_container label.cb:after {
-    opacity: 0.2;
-    content: '';
-    position: absolute;
-    width: 8px;
-    height: 4px;
-    background: transparent;
-    top: 3px;
-    left: 3px;
-    border: 3px solid #333;
-    border-top: none;
-    border-right: none;
+    padding: 4px 10px;
+    margin: 0;
+    display: block;
+    text-transform: capitalize;
 
-    -webkit-transform: rotate(-45deg);
-    -moz-transform: rotate(-45deg);
-    -o-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    transform: rotate(-45deg);
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
-.checkbox_container label.cb:hover:after {
-    opacity: 0.5;
+
+.checkbox_container input[type="checkbox"]:checked + label {
+    background: #b8c1d9;
 }
-.checkbox_container input[type=checkbox]:checked + label.cb:after {
-    opacity: 1;
+
+.search .checkbox_container label {
+    border-bottom: 4px solid #e8e7e6;
+}
+
+.search .checkbox_container input[type="checkbox"]:checked + label { 
+    border-bottom: 4px solid #8098d9;
 }
 
 a { text-decoration: none; }
 
-
 .result { margin-bottom: 16px; clear: both; }
 .result_title { margin-bottom: 0; }
-.result p { margin-top: 0; padding-top: 0; font-size: 0.8em; max-width: 54em; }
-.result h3 { font-size: 0.9em;}
+.result p { margin-top: 0; padding-top: 0; font-size: 0.8em; max-width: 54em; word-wrap:break-word; }
+.result h3 { font-size: 0.9em; word-wrap:break-word; }
 .result { max-width: 70em; }
 
 .url { font-weight: bold; word-wrap:break-word; }
@@ -85,6 +91,8 @@ a { text-decoration: none; }
 
 .small p { margin: 2px 0; }
 
+.search { background: #e8e7e6; padding: 0; margin: 0 }
+
 .right { float: right; }
 
 .invisible { display: none; }
@@ -103,8 +111,7 @@ a { text-decoration: none; }
 td { padding: 0 4px; }
 tr:hover td { background: #DDDDDD; }
 
-
-#search_wrapper { position: relative; max-width: 600px; margin: 10px; }
+#search_wrapper { position: relative; max-width: 600px; padding: 10px; }
 .center #search_wrapper { margin-left: auto; margin-right: auto; }
 .q {
     background: none repeat scroll 0 0 #FFFFFF;
@@ -124,8 +131,8 @@ tr:hover td { background: #DDDDDD; }
 }
 #search_submit {
     position: absolute;
-    top: 5px;
-    right: 0px;
+    top: 15px;
+    right: 4px;
     padding: 0;
     border: 0;
     background: url('/static/img/search-icon.png') no-repeat;
@@ -135,14 +142,40 @@ tr:hover td { background: #DDDDDD; }
     height: 30px;
 }
 
-#results { margin-left: 10px; margin-top: 10px; }
+#results { margin-left: 10px; margin-top: 10px; margin-right: 10px; }
 
 #suggestions { max-width: 50em;}
 #suggestions form { display: inline; }
 #suggestions input { padding: 2px 6px; margin: 2px 4px;  font-size: 0.8em; display: inline-block; background: #E4E4E4; border-radius: 4px; border: 0; cursor: pointer; }
 
-@media screen and (max-width: 740px) {
-  .right { margin: 5px; } 
-
-  #search_wrapper { max-width: 90%; clear:both }
+#preferences { 
+    top: 10px;
+    padding: 0;
+    border: 0;
+    background: url('/static/img/preference-icon.png') no-repeat;
+    background-size: 28px 28px;
+    opacity: 0.8;
+    width: 28px;
+    height: 30px;
+    display: block;
+}
+
+#preferences * {
+    display: none;
+}
+
+#apis {
+    clear: both;
+}
+
+@media screen and (max-width: 680px) {
+  #search_wrapper { width: 90%; clear:both; }
+
+  .right { display: none; postion: fixed !important; top: 100px; right: 0px; }
+
+  #categories { font-size: 80% }
+  
+  #categories .checkbox_container { margin-top: 2px; margin: 0 2px; }
+
+  .result img { max-width: 90%; width: auto; height: auto }
 }
diff --git a/searx/templates/categories.html b/searx/templates/categories.html
index 4c693f3d..ec9c2e7d 100644
--- a/searx/templates/categories.html
+++ b/searx/templates/categories.html
@@ -1,5 +1,7 @@
+<div id="categories">
 {% for category in categories %}
     <div class="checkbox_container">
-        <input type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} /><label for="checkbox_{{ category|replace(' ', '_') }}" class="cb"></label><label for="checkbox_{{ category|replace(' ', '_') }}">{{ category }}</label>
+        <input type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} /></label><label for="checkbox_{{ category|replace(' ', '_') }}">{{ category }}</label>
     </div>
 {% endfor %}
+</div>
diff --git a/searx/templates/results.html b/searx/templates/results.html
index c20f2d86..1f315362 100644
--- a/searx/templates/results.html
+++ b/searx/templates/results.html
@@ -1,8 +1,8 @@
 {% extends "base.html" %}
 {% block title %}{{ q }} - {% endblock %}
 {% block content %}
-<div class="right"><a href="/preferences">preferences</a></div>
-<div class="small">
+<div class="right"><a href="/preferences" id="preferences"><span>preferences</span></a></div>
+<div class="small search">
     {% include 'search.html' %}
 </div>
 <div id="results">
@@ -19,19 +19,21 @@
             {% include 'result_templates/default.html' %}
         {% endif %}
     {% endfor %}
-    <form method="post" action="/">
+    <div id="apis">
+      <form method="post" action="/">
         <div class="left">
-            <input type="hidden" name="q" value="{{ q }}" />
-            <input type="hidden" name="format" value="csv" />
-            <input type="submit" value="download results in csv" />
+          <input type="hidden" name="q" value="{{ q }}" />
+          <input type="hidden" name="format" value="csv" />
+          <input type="submit" value="download results in csv" />
         </div>
-    </form>
-    <form method="post" action="/">
+      </form>
+      <form method="post" action="/">
         <div class="">
-            <input type="hidden" name="q" value="{{ q }}" />
-            <input type="hidden" name="format" value="json" />
-            <input type="submit" value="download results in json" />
+          <input type="hidden" name="q" value="{{ q }}" />
+          <input type="hidden" name="format" value="json" />
+          <input type="submit" value="download results in json" />
         </div>
-    </form>
+      </form>
+    </div>
 </div>
 {% endblock %}
diff --git a/searx/templates/search.html b/searx/templates/search.html
index 12d50733..92ce5a72 100644
--- a/searx/templates/search.html
+++ b/searx/templates/search.html
@@ -1,9 +1,7 @@
 <form method="post" action="/" id="search_form">
-<div id="search_wrapper">
+  <div id="search_wrapper">
     <input type="text" id="q" class="q" name="q" tabindex="1" autocomplete="off" {% if q %}value="{{ q }}"{% endif %}/>
     <input type="submit" value="" id="search_submit" />
-</div>
-    <div>
-    {% include 'categories.html' %}
-    </div>
+  </div>
+  {% include 'categories.html' %}
 </form>

From dfce4fd86560e172c7864902f95e84aba8cf3731 Mon Sep 17 00:00:00 2001
From: Dalf <alex@al-f.net>
Date: Sun, 5 Jan 2014 20:32:09 +0100
Subject: [PATCH 2/3] [fix] add preference-icon.png

---
 searx/static/img/preference-icon.png | Bin 0 -> 837 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 searx/static/img/preference-icon.png

diff --git a/searx/static/img/preference-icon.png b/searx/static/img/preference-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f74635788ee02d720cf77397b0680c7a57bbd4de
GIT binary patch
literal 837
zcmV-L1G@Z)P)<h;3K|Lk000e1NJLTq003kF003kN1^@s6aN?Cz00001b5ch_0Itp)
z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2i^e#
z79AU=mn)M100PBHL_t(|+U=Y%ZWJ*ThTmF?wA9-r63G#0=^Tk^kPsC&K!_s|j=%*d
zMv7dejg%7r5}YBTNs1^^s%2)!_WSMm{ytg%@ADhK=Na1!A%qY@2%+w^X>GtmjQ2DD
z<ZevqWh?$d=P=C7c0-I;0MUT)qzix`fB*ym1Rw|?Yu2`QnL4J_R5M!JN2qBcLq8$Y
z`;_t#YMN*XikFX2+e8acJbi3DOiXze4>A5Uv$GNbKlJ?1?ZXAg(pmD{Oy$h^HKuf4
z!iO7>mKNy)x-+v~>FlEqnXaA6Kmd}zAov21jsy^Z^sO<aug#ae9l`J~dx0X@7_J>k
z&Yj=vTgbJb{4WS9<8TL3G8o62R~t`tAi0B(%edm0nksw8lr}kyXZ&A(SJ#J>nt_=h
zpELzTVH>;jZwxX1Sw)7_{0L&<Z=Ey&WJz{-e37E|6--!TW+<2UY%YpThM+KG6au0G
zW$Triy=YEsra<3#!%$m0YD~UEo&%YoCD%p0#mZ_mWv`Ha07R<<eg_Z)5P%?n00aS~
zK&So@AX@sqS|DuA%m+filz@yW1$#X1RWeIn3#}inJH2KT-iOS&9`8s)H`d@)gHr?S
zx`r(H)brmOvZJLc>jf~x%H9?$t`hHag3=&8pr}m*xyG<&fE2T`6p-KQfl~ecxCoFj
zr8CvpJH&XYyk2chSWkgdJg`$r9BC7KY&Ci4b4nnF7)LXE+gj<%v1l<UTpS<<g{w8h
zpm3v{7!+RNuB1~(009UBNdJ<$NO_3y+RWZ~RYhG~q`cJ3fvd*v&CG6YZ$It#`}eO-
zPe0TsPrJBk{8%$nP2}ozO8s6JH_FX5QTuUH%18A@eaZk^IPB@=Bh)t2(#cy7AH{<+
z#Q5!*iO=4ZoVO2mAl_A6Yne%72oMAifFOVXM6Xc;2rv;s2qA<JLi6<iIWK2uUt-wD
P00000NkvXXu0mjfDq3v8

literal 0
HcmV?d00001


From 843342115633c93b2d90c4e1cec2e7cf6d4c0c6b Mon Sep 17 00:00:00 2001
From: Dalf <alex@al-f.net>
Date: Tue, 7 Jan 2014 00:21:08 +0100
Subject: [PATCH 3/3] [mod] more web page modification

---
 searx/static/css/style.css                    | 50 +++++++++++--------
 searx/templates/result_templates/default.html |  3 +-
 searx/templates/results.html                  |  4 +-
 3 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/searx/static/css/style.css b/searx/static/css/style.css
index b3831c54..c9e0335a 100644
--- a/searx/static/css/style.css
+++ b/searx/static/css/style.css
@@ -61,27 +61,18 @@ input[type="checkbox"] { visibility: hidden; }
     user-select: none;
 }
 
-.checkbox_container input[type="checkbox"]:checked + label {
-    background: #b8c1d9;
-}
+.checkbox_container input[type="checkbox"]:checked + label { background: #b8c1d9; }
+.search .checkbox_container label { border-bottom: 4px solid #e8e7e6; }
+.search .checkbox_container input[type="checkbox"]:checked + label { border-bottom: 4px solid #1a11be; }
 
-.search .checkbox_container label {
-    border-bottom: 4px solid #e8e7e6;
-}
+a { text-decoration: none; color: #1a11be; }
+a:visited { color: #7b11be; }
 
-.search .checkbox_container input[type="checkbox"]:checked + label { 
-    border-bottom: 4px solid #8098d9;
-}
-
-a { text-decoration: none; }
-
-.result { margin-bottom: 16px; clear: both; }
+.result { margin: 19px 0 18px 0; padding: 0; max-width: 55em; }
 .result_title { margin-bottom: 0; }
-.result p { margin-top: 0; padding-top: 0; font-size: 0.8em; max-width: 54em; word-wrap:break-word; }
-.result h3 { font-size: 0.9em; word-wrap:break-word; }
-.result { max-width: 70em; }
-
-.url { font-weight: bold; word-wrap:break-word; }
+.result h3 { font-size: 1em; word-wrap:break-word; margin: 5px 0 1px 0; padding: 0 }
+.result .content { font-size: 0.8em; margin: 0; padding: 0; max-width: 54em; word-wrap:break-word; line-height: 1.24; }
+.result .url { font-size: 0.8em; margin: 3px 0 0 0; padding: 0; max-width: 54em; word-wrap:break-word; color: #2e1c0b; }
 
 .q { width: 30em; }
 
@@ -142,10 +133,13 @@ tr:hover td { background: #DDDDDD; }
     height: 30px;
 }
 
-#results { margin-left: 10px; margin-top: 10px; margin-right: 10px; }
+#results { margin: 10px; padding: 0; }
 
-#suggestions { max-width: 50em;}
-#suggestions form { display: inline; }
+#result_count { font-size: 0.8em; margin: 2px 0 2px 0; padding: 0 }
+
+#suggestions { position: absolute; left: 54em; width: 12em; margin: 0 2px 5px 5px; padding: 0 2px 2px 2px; }
+#suggestions span { display: block; font-size: 0.8em; margin: 0 2px 10px 2px; padding: 0; }
+#suggestions form { display: block; }
 #suggestions input { padding: 2px 6px; margin: 2px 4px;  font-size: 0.8em; display: inline-block; background: #E4E4E4; border-radius: 4px; border: 0; cursor: pointer; }
 
 #preferences { 
@@ -168,8 +162,18 @@ tr:hover td { background: #DDDDDD; }
     clear: both;
 }
 
+@media screen and (max-width: 60em) {
+    
+  #suggestions { position: static; max-width: 50em; margin: 0 0 2px 0; padding: 0; float: none; border: none; width: auto }
+  #suggestions span { display: inline; font-size: 0.8em }
+  #suggestions form { display: inline; }
+  #suggestions input { padding: 2px 6px; margin: 2px 4px;  font-size: 0.8em; display: inline-block; background: #E4E4E4; border-radius: 4px; border: 0; cursor: pointer; }
+
+}
+
 @media screen and (max-width: 680px) {
-  #search_wrapper { width: 90%; clear:both; }
+    
+  #search_wrapper { width: 90%; clear:both; overflow: hidden }
 
   .right { display: none; postion: fixed !important; top: 100px; right: 0px; }
 
@@ -177,5 +181,7 @@ tr:hover td { background: #DDDDDD; }
   
   #categories .checkbox_container { margin-top: 2px; margin: 0 2px; }
 
+  .result { border-top: 1px solid #e8e7e6; margin: 7px 0 6px 0;  }
+
   .result img { max-width: 90%; width: auto; height: auto }
 }
diff --git a/searx/templates/result_templates/default.html b/searx/templates/result_templates/default.html
index 3b1c448e..27cf5752 100644
--- a/searx/templates/result_templates/default.html
+++ b/searx/templates/result_templates/default.html
@@ -1,4 +1,5 @@
 <div class="result">
     <h3 class="result_title"><a href="{{ result.url }}">{{ result.title|safe }}</a></h3>
-    <p class="content">{% if result.content %}{{ result.content|safe }}<br />{% endif %}<span class="url">{{ result.pretty_url }}</span></p>
+    <p class="content">{% if result.content %}{{ result.content|safe }}<br />{% endif %}</p>
+    <p class="url">{{ result.pretty_url }}</p>
 </div>
diff --git a/searx/templates/results.html b/searx/templates/results.html
index 1f315362..b134c8cf 100644
--- a/searx/templates/results.html
+++ b/searx/templates/results.html
@@ -7,9 +7,9 @@
 </div>
 <div id="results">
     {% if suggestions %}
-    <div id="suggestions">Suggestions: {% for suggestion in suggestions %}<form method="post" action="/"><input type="hidden" name="q" value="{{suggestion}}"><input type="submit" value="{{ suggestion }}" /></form>{% endfor %}</div>
+    <div id="suggestions"><span>Suggestions: </span>{% for suggestion in suggestions %}<form method="post" action="/"><input type="hidden" name="q" value="{{suggestion}}"><input type="submit" value="{{ suggestion }}" /></form>{% endfor %}</div>
     {% endif %}
-    <div>
+    <div id ="result_count">
         Number of results: {{ number_of_results }}
     </div>
     {% for result in results %}