From 7915b5c5a08afbdc8fd2144866e2d5d9f0591696 Mon Sep 17 00:00:00 2001 From: Dalf 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 b24b97a68..b3831c543 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 4c693f3dd..ec9c2e7d0 100644 --- a/searx/templates/categories.html +++ b/searx/templates/categories.html @@ -1,5 +1,7 @@ +
{% for category in categories %}
- +
{% endfor %} +
diff --git a/searx/templates/results.html b/searx/templates/results.html index c20f2d862..1f3153624 100644 --- a/searx/templates/results.html +++ b/searx/templates/results.html @@ -1,8 +1,8 @@ {% extends "base.html" %} {% block title %}{{ q }} - {% endblock %} {% block content %} -
preferences
-
+
preferences
+
{% include 'search.html' %}
@@ -19,19 +19,21 @@ {% include 'result_templates/default.html' %} {% endif %} {% endfor %} -
+
+
- - - + + +
- -
+
+
- - - + + +
-
+ +
{% endblock %} diff --git a/searx/templates/search.html b/searx/templates/search.html index 12d507335..92ce5a72c 100644 --- a/searx/templates/search.html +++ b/searx/templates/search.html @@ -1,9 +1,7 @@
-
+
-
-
- {% include 'categories.html' %} -
+
+ {% include 'categories.html' %}
From dfce4fd86560e172c7864902f95e84aba8cf3731 Mon Sep 17 00:00:00 2001 From: Dalf 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)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 zA5Uv$GNbKlJ?1?ZXAg(pmD{Oy$h^HKuf4 z!iO7>mKNy)x-+v~>FlEqnXaA6Kmd}zAov21jsy^Z^sOk z&Yj=vTgbJb{4WS9<8TL3G8o62R~t`tAi0B(%edm0nksw8lr}kyXZ&A(SJ#J>nt_=h zpELzTVH>;jZwxX1Sw)7_{0L&jf~x%H9?$t`hHag3=&8pr}m*xyG<&fE2T`6p-KQfl~ecxCoFj zr8CvpJH&XYyk2chSWkgdJg`$r9BC7KY&Ci4b4nnF7)LXE+gj<%v1l 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 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 @@

{{ result.title|safe }}

-

{% if result.content %}{{ result.content|safe }}
{% endif %}{{ result.pretty_url }}

+

{% if result.content %}{{ result.content|safe }}
{% endif %}

+

{{ result.pretty_url }}

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 @@
{% if suggestions %} -
Suggestions: {% for suggestion in suggestions %}
{% endfor %}
+
Suggestions: {% for suggestion in suggestions %}
{% endfor %}
{% endif %} -
+
Number of results: {{ number_of_results }}
{% for result in results %}