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] [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 b3831c543..c9e0335aa 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 3b1c448e4..27cf57528 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 1f3153624..b134c8cf0 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 %}