Merge pull request #173 from Cqoicebordel/default-UXUI

Default theme - a few UIUX

searx/static/themes/default/less/definitions.less

@@ -15,6 +15,9 @@
 /// General
 
 @color-font: #444;
+@color-font-light: #888;
+
+@color-red: #C0392B;
 
 @color-url-font: #1a11be;
 @color-url-visited-font: #8E44AD;
@@ -44,6 +47,9 @@
 
 @color-autocompleter-choices-font: #444;
 
+/// Answers
+@color-answers-border: @color-base-dark;
+
 // Selected
 @color-autocompleter-selected-background: #444;
 @color-autocompleter-selected-font: #FFF;
@@ -78,10 +84,10 @@
 @color-result-link-visited-font: @color-url-visited-font;
 
 // Url to result
-@color-result-url-font: #C0392B;
+@color-result-url-font: @color-red;
 
 // Publish Date
-@color-result-publishdate-font: #888;
+@color-result-publishdate-font: @color-font-light;
 
 // Images
 @color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
@@ -109,5 +115,5 @@
 
 /// Other
 
-@color-engines-font: #888;
+@color-engines-font: @color-font-light;
 @color-percentage-div-background: #444;

searx/static/themes/default/less/style.less

@@ -342,6 +342,18 @@ a {
 		margin: 3px;
 		font-size: 0.8em;
 	}
+	
+	a { 
+		color: @color-result-link-font;
+
+		&:hover {
+			text-decoration: underline;
+		}
+
+		&:visited {
+			color: @color-result-link-visited-font;
+		}
+	}
 }
 
 .definition_result {
@@ -434,6 +446,20 @@ tr {
 
 }
 
+#suggestions-title {
+
+color: @color-font-light;
+
+	
+}
+
+#answers {
+	
+	border: 2px solid @color-answers-border;
+	padding: 20px;
+	
+}
+
 #answers, #infoboxes {
 	form {
                 min-width: 210px;

searx/templates/default/base.html

@@ -11,6 +11,7 @@
         <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.png') }}?v=2" />
         {% block styles %}
         {% endblock %}
+        {% block meta %}{% endblock %}
         {% block head %}
         <link title="searx" type="application/opensearchdescription+xml" rel="search" href="{{ url_for('opensearch') }}"/>
         {% endblock %}

searx/templates/default/categories.html

@@ -5,6 +5,6 @@
              <input type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} /><label for="checkbox_{{ category|replace(' ', '_') }}" class="tooltips">{{ _(category) }}</label>
         </div>
         {% endfor %}
-    <div class="hidden">{{ _('Click on the magnifier to perform search') }}</div>
+        {% if display_tooltip %}<div class="hidden">{{ _('Click on the magnifier to perform search') }}</div>{% endif %}
     </div>
 </div>

searx/templates/default/preferences.html

@@ -7,9 +7,8 @@
     <form method="post" action="{{ url_for('preferences') }}" id="search_form">
     <fieldset>
         <legend>{{ _('Default categories') }}</legend>
-        <p>
+        {% set display_tooltip = false %}
         {% include 'default/categories.html' %}
-        </p>
     </fieldset>
     <fieldset>
         <legend>{{ _('Search language') }}</legend>
@@ -79,9 +78,9 @@
                 <td>{{ search_engine.name }} ({{ shortcuts[search_engine.name] }})</td>
                 <td>{{ _(categ) }}</td>
                 <td class="engine_checkbox">
-                    <input type="checkbox" id="engine_{{ categ }}_{{ search_engine.name|replace(' ', '_') }}" name="engine_{{ search_engine.name }}"{% if search_engine.name in blocked_engines %} checked="checked"{% endif %} />
-                    <label class="allow" for="engine_{{ categ }}_{{ search_engine.name|replace(' ', '_') }}">{{ _('Allow') }}</label>
-                    <label class="deny" for="engine_{{ categ }}_{{ search_engine.name|replace(' ', '_') }}">{{ _('Block') }}</label>
+                    <input type="checkbox" id="engine_{{ categ|replace(' ', '_') }}_{{ search_engine.name|replace(' ', '_') }}" name="engine_{{ search_engine.name }}"{% if search_engine.name in blocked_engines %} checked="checked"{% endif %} />
+                    <label class="allow" for="engine_{{ categ|replace(' ', '_') }}_{{ search_engine.name|replace(' ', '_') }}">{{ _('Allow') }}</label>
+                    <label class="deny" for="engine_{{ categ|replace(' ', '_') }}_{{ search_engine.name|replace(' ', '_') }}">{{ _('Block') }}</label>
                 </td>
             </tr>
             {% endif %}

searx/templates/default/result_templates/default.html

@@ -1,6 +1,6 @@
 <div class="result {{ result.class }}">
     <h3 class="result_title">{% if "icon_"~result.engine~".ico" in favicons %}<img width="14" height="14" class="favicon" src="{{ url_for('static', filename='img/icons/icon_'+result.engine+'.ico') }}" alt="{{result.engine}}" />{% endif %}<a href="{{ result.url }}">{{ result.title|safe }}</a></h3>
-    <p class="url">{{ result.pretty_url }} <a class="cache_link" href="https://web.archive.org/web/{{ result.url }}">cached</a></p>
-    {% if result.publishedDate %}<p class="published_date">{{ result.publishedDate }}</p>{% endif %}
+    <p class="url">{{ result.pretty_url }} <a class="cache_link" href="https://web.archive.org/web/{{ result.url }}">cached</a>
+    {% if result.publishedDate %}<span class="published_date">{{ result.publishedDate }}</span>{% endif %}</p>
     <p class="content">{% if result.img_src %}<img src="{{ result.img_src }}" class="image" />{% endif %}{% if result.content %}{{ result.content|safe }}<br class="last"/>{% endif %}</p>
 </div>

searx/templates/default/result_templates/images.html

@@ -1,6 +1,6 @@
 <div class="image_result">
     <p>
         <a href="{{ result.img_src }}"><img src="{{ result.img_src }}" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}" /></a>
-        <span class="url"><a href="{{ result.url }}" class="small_font">original context</a></span>
+        <span class="url"><a href="{{ result.url }}" class="small_font">{{ _('original context') }}</a></span>
     </p>
 </div>

searx/templates/default/result_templates/map.html

@@ -6,8 +6,8 @@
 
     <div>
         <h3 class="result_title"><a href="{{ result.url }}">{{ result.title|safe }}</a></h3>
-    <p class="url">{{ result.pretty_url }} <a class="cache_link" href="https://web.archive.org/web/{{ result.url }}">cached</a></p>
-	{% if result.publishedDate %}<p class="published_date">{{ result.publishedDate }}</p>{% endif %}
+        <p class="url">{{ result.pretty_url }} <a class="cache_link" href="https://web.archive.org/web/{{ result.url }}">cached</a>
+        {% if result.publishedDate %}<span class="published_date">{{ result.publishedDate }}</span>{% endif %}</p>
         <p class="content">{% if result.img_src %}<img src="{{ result.img_src }}" class="image" />{% endif %}{% if result.content %}{{ result.content|safe }}<br class="last"/>{% endif %}</p>
     </div>
 </div>

searx/templates/default/result_templates/torrent.html

@@ -5,5 +5,9 @@
     <h3 class="result_title"><a href="{{ result.url }}">{{ result.title|safe }}</a></h3>
     <p class="url">{{ result.pretty_url }}</p>
     {% if result.content %}<p class="content">{{ result.content|safe }}</p>{% endif %}
-    <p><a href="{{ result.magnetlink }}" class="magnetlink">magnet link</a> - <span class="stats">Seed: {{ result.seed }}, Leech: {{ result.leech }}</span></p>
+    <p>
+        {% if result.magnetlink %}<a href="{{ result.magnetlink }}" class="magnetlink">{{ _('magnet link') }}</a>{% endif %} 
+        {% if result.torrentfile %}<a href="{{ result.torrentfile }}" class="torrentfile">{{ _('torrent file') }}</a>{% endif %} - 
+        <span class="stats">{{ _('Seeder') }} : {{ result.seed }}, {{ _('Leecher') }} : {{ result.leech }}</span>
+    </p>
 </div>

searx/templates/default/result_templates/videos.html

@@ -1,6 +1,6 @@
 <div class="result">
     <h3 class="result_title">{% if "icon_"~result.engine~".ico" in favicons %}<img width="14" height="14" class="favicon" src="{{ url_for('static', filename='img/icons/icon_'+result.engine+'.ico') }}" alt="{{result.engine}}" />{% endif %}<a href="{{ result.url }}">{{ result.title|safe }}</a></h3>
-      {% if result.publishedDate %}<p class="published_date">{{ result.publishedDate }}</p>{% endif %}
+    {% if result.publishedDate %}<span class="published_date">{{ result.publishedDate }}</span><br />{% endif %}
     <a href="{{ result.url }}"><img class="thumbnail" src="{{ result.thumbnail }}" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}"/></a>
     <p class="url">{{ result.url }}</p>
 </div>

searx/templates/default/results.html

@@ -1,5 +1,6 @@
 {% extends "default/base.html" %}
 {% block title %}{{ q }} - {% endblock %}
+{% block meta %}<link rel="alternate" type="application/rss+xml" title="Searx search: {{ q }}" href="{{ url_for('index') }}?q={{ q|urlencode }}&amp;format=rss&amp;{% for category in selected_categories %}category_{{ category }}=1&amp;{% endfor %}pageno={{ pageno }}">{% endblock %}
 {% block content %}
 <div class="preferences_container right"><a href="{{ url_for('preferences') }}" id="preferences"><span>preferences</span></a></div>
 <div class="small search center">
@@ -39,12 +40,14 @@
     {% endif %}
 
     {% if suggestions %}
-    <div id="suggestions"><span>{{ _('Suggestions') }}</span>
+    <div id="suggestions"><span id="suggestions-title">{{ _('Suggestions') }} : </span>
+        {% set first = true %}
         {% for suggestion in suggestions %}
-        <form method="{{ method or 'POST' }}" action="{{ url_for('index') }}">
+        {% if not first %} &bull; {% endif %}<form method="{{ method or 'POST' }}" action="{{ url_for('index') }}">
             <input type="hidden" name="q" value="{{ suggestion }}">
-            <input type="submit" value="{{ suggestion }}" />
+            <input type="submit" class="suggestion" value="{{ suggestion }}" />
         </form>
+        {% set first = false %}
         {% endfor %}
     </div>
     {% endif %}

searx/templates/default/search.html

@@ -3,5 +3,6 @@
         <input type="text" placeholder="{{ _('Search for...') }}" id="q" class="q" name="q" tabindex="1" autocomplete="off" size="100" {% if q %}value="{{ q }}"{% endif %}/>
         <input type="submit" value="search" id="search_submit" />
     </div>
+    {% set display_tooltip = true %}
     {% include 'default/categories.html' %}
 </form>