oscar template: implement search input, index page,...

6 files changed, 48 insertions, 9 deletions

diff --git a/searx/static/oscar/img/searx.png b/searx/static/oscar/img/searx.png
deleted file mode 100644
index e162da502..000000000
--- a/searx/static/oscar/img/searx.png
+++ /dev/null
diff --git a/searx/static/oscar/img/searx_logo.png b/searx/static/oscar/img/searx_logo.png
new file mode 100644
index 000000000..26be6def7
--- /dev/null
+++ b/searx/static/oscar/img/searx_logo.png
diff --git a/searx/static/oscar/js/scripts.js b/searx/static/oscar/js/scripts.js
index 1cef58896..1254b1581 100644
--- a/searx/static/oscar/js/scripts.js
+++ b/searx/static/oscar/js/scripts.js
@@ -12,15 +12,11 @@ $(document).ready(function(){
         var btnClass = 'btn-' + $(this).data('btn-class');

         var btnLabelDefault = $(this).data('btn-label-default');

         var btnLabelToggled = $(this).data('btn-label-toggled');

-        if(btnLabelToggled != '')

-        {

-            if($(this).hasClass('btn-default'))

-            {

+        if(btnLabelToggled != '') {

+            if($(this).hasClass('btn-default')) {

                 

                 var html = $(this).html().replace(btnLabelDefault, btnLabelToggled);

-            }

-            else

-            {

+            } else {

                 var html = $(this).html().replace(btnLabelToggled, btnLabelDefault);

             }

             $(this).html(html);

@@ -28,4 +24,18 @@ $(document).ready(function(){
         $(this).toggleClass(btnClass);

         $(this).toggleClass('btn-default');

     });

+

+    $('.btn-collapse').click(function() {

+        var btnTextCollapsed = $(this).data('btn-text-collapsed');

+        var btnTextNotCollapsed = $(this).data('btn-text-not-collapsed');

+        

+        if(btnTextCollapsed != '' && btnTextNotCollapsed != '') {

+            if($(this).hasClass('collapsed')) {

+                var html = $(this).html().replace(btnTextCollapsed, btnTextNotCollapsed);

+            } else {

+                var html = $(this).html().replace(btnTextNotCollapsed, btnTextCollapsed);

+            }

+            $(this).html(html);

+        }

+    });

 });

diff --git a/searx/templates/oscar/index.html b/searx/templates/oscar/index.html
index 0c9a73060..adb535d9b 100644
--- a/searx/templates/oscar/index.html
+++ b/searx/templates/oscar/index.html
@@ -1,6 +1,15 @@
 {% extends "oscar/base.html" %}
 {% block content %}
-<div class="center">
-    <div class="title"><h1>searx</h1></div>
+<div class="container-fluid">
+    <div class="row">
+        <div class="text-center col-sm-12 col-md-12">
+            <h1 class="text-hide center-block"><img class="center-block img-responsive" src="{{ url_for('static', filename='img/searx_logo.png') }}" alt="searx logo"/>searx</h1>
+        </div>
+    </div>
+    <div class="row">
+        <div class="text-center col-sm-12 col-md-12">
+            {% include 'oscar/search.html' %}
+        </div>
+    </div>
 </div>
 {% endblock %}
diff --git a/searx/templates/oscar/macros.html b/searx/templates/oscar/macros.html
new file mode 100644
index 000000000..f61de2015
--- /dev/null
+++ b/searx/templates/oscar/macros.html
@@ -0,0 +1,3 @@
+{% macro icon(action) -%}

+    <span class="glyphicon glyphicon-{{ action }}"></span>

+{%- endmacro %}

diff --git a/searx/templates/oscar/search.html b/searx/templates/oscar/search.html
new file mode 100644
index 000000000..f44d48adf
--- /dev/null
+++ b/searx/templates/oscar/search.html
@@ -0,0 +1,17 @@
+{% from 'oscar/macros.html' import icon %}

+

+<form method="{{ method or 'POST' }}" action="{{ url_for('index') }}" id="search_form" role="search">

+    <div class="input-group col-md-8 col-md-offset-2">

+        <input type="search" name="q" class="form-control input-lg" id="q" placeholder="{{ _('Search for...') }}" autocomplete="off" value="{{ q }}">

+        <span class="input-group-btn">

+            <button type="submit" class="btn btn-default input-lg">{{ icon('search') }}<span class="sr-only">{{ _('Start search') }}</span></button>

+        </span>

+    </div>

+

+    <button type="button" class="btn btn-link btn-collapse center-block collapsed" data-toggle="collapse" data-target="#search_categories" data-btn-text-collapsed="{{ _('Show search filters') }}" data-btn-text-not-collapsed="{{ _('Hide search filters') }}">{{ _('Show search filters') }}</button>

+    <div class="row collapse" id="search_categories">

+        <div class="col-md-12 text-center">

+            {% include 'oscar/categories.html' %}

+        </div>

+    </div><!-- / #search_categories -->

+</form><!-- / #search_form_full -->