commit: ba141d64ce88c2210759794eb7665a80348609ac
parent: 1ba2762b674fd08a67bf9460b03081892359af24
Author: asciimoo <asciimoo@gmail.com>
Date: Fri, 10 Jan 2014 14:31:43 +0100
Merge branch 'master' of https://github.com/dalf/searx
Diffstat:
6 files changed, 117 insertions(+), 75 deletions(-)
diff --git 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,60 +36,43 @@ 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;
-
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- -o-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
-}
-.checkbox_container label.cb:hover:after {
- opacity: 0.5;
-}
-.checkbox_container input[type=checkbox]:checked + label.cb:after {
- opacity: 1;
+ padding: 4px 10px;
+ margin: 0;
+ display: block;
+ text-transform: capitalize;
+
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
-a { text-decoration: none; }
+.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; }
+a { text-decoration: none; color: #1a11be; }
+a:visited { color: #7b11be; }
-.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; }
-.result h3 { font-size: 0.9em;}
-.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; }
@@ -85,6 +82,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 +102,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 +122,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 +133,55 @@ tr:hover td { background: #DDDDDD; }
height: 30px;
}
-#results { margin-left: 10px; margin-top: 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; }
-@media screen and (max-width: 740px) {
- .right { margin: 5px; }
+#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: 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; overflow: hidden }
+
+ .right { display: none; postion: fixed !important; top: 100px; right: 0px; }
+
+ #categories { font-size: 80% }
+
+ #categories .checkbox_container { margin-top: 2px; margin: 0 2px; }
+
+ .result { border-top: 1px solid #e8e7e6; margin: 7px 0 6px 0; }
- #search_wrapper { max-width: 90%; clear:both }
+ .result img { max-width: 90%; width: auto; height: auto }
}
diff --git a/searx/static/img/preference-icon.png b/searx/static/img/preference-icon.png
Binary files differ.
diff --git 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/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
@@ -1,15 +1,15 @@
{% 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">
{% 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 %}
@@ -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
@@ -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>
