[extensions-web/wip/tomtryf/redesign: 10/18] css: Style the search input

[Tom Tryfonidis <tomtryf src gnome org>]

commit 33a0c18b4509a749c93d1c7a2b97c8f6daa3003a
Author: Tom Tryfonidis <tomtryf gnome org>
Date:   Thu Feb 23 15:14:21 2017 +0200

    css: Style the search input

 .../extensions/templates/extensions/list.html      |   12 +++++--
 sweettooth/static/css/style.css                    |   19 +++++++++++-
 sweettooth/static/images/search-icon.png           |  Bin 491 -> 0 bytes
 sweettooth/static/images/search.svg                |   32 ++++++++++++++++++++
 sweettooth/templates/base.html                     |   21 +++++-------
 5 files changed, 68 insertions(+), 16 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/list.html 
b/sweettooth/extensions/templates/extensions/list.html
index 70fea13..4b589a7 100644
--- a/sweettooth/extensions/templates/extensions/list.html
+++ b/sweettooth/extensions/templates/extensions/list.html
@@ -1,13 +1,19 @@
 {% extends "base.html" %}
+{% load static from staticfiles %}
+
 {% block body %}
   <div id="extensions-list">
   </div>
 {% endblock %}
 
 {% block search-bar %}
-  <div class="right">
-    <input id="search_input" type="text" placeholder="Search..." />
-  </div>
+<div id="search-bar">
+    <div class="form-group has-feedback has-feedback-left">
+        <input id="search_input" class="form-control input-lg" type="text" placeholder="Search for 
extensions…">
+                <span class="form-control-feedback"><img src="{% static 'images/search.svg' %}"></span>
+        </input>
+    </div>
+</div>
 {% endblock %}
 
 {% block navclass %}main{% endblock %}
diff --git a/sweettooth/static/css/style.css b/sweettooth/static/css/style.css
index 5010a0c..7d6c917 100644
--- a/sweettooth/static/css/style.css
+++ b/sweettooth/static/css/style.css
@@ -6,7 +6,6 @@ Description: The original theme for the GNOME Project website.
 Version: 20160212
 */
 
-
 @import url("text.css");
 @import url("sweettooth.css");
 
@@ -161,6 +160,24 @@ a:visited {
     display: inline-block !important;
 }
 
+/* Search bar*/
+
+#search-bar {
+    margin-bottom: 40px;
+}
+#search-bar input {
+    padding-left: 50px;
+}
+
+/* CSS hack to align search icon with the text */
+
+.has-feedback-left .form-control-feedback {
+    top: 0;
+    left: 0;
+    padding-left: 5px;
+    pointer-events: none;
+}
+
 /* User settings */
 
 .login_popup_form {
diff --git a/sweettooth/static/images/search.svg b/sweettooth/static/images/search.svg
new file mode 100644
index 0000000..ace2c2f
--- /dev/null
+++ b/sweettooth/static/images/search.svg
@@ -0,0 +1,32 @@
+<?xml version='1.0' encoding='UTF-8' standalone='no'?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg xmlns:cc='http://creativecommons.org/ns#' xmlns:dc='http://purl.org/dc/elements/1.1/' 
sodipodi:docname='system-search-symbolic.svg' 
inkscape:export-filename='/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png' 
inkscape:export-xdpi='90' inkscape:export-ydpi='90' height='16' id='svg7384' 
xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' 
xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' 
xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:svg='http://www.w3.org/2000/svg' 
version='1.1' inkscape:version='0.48.5 r10040' width='16.000002' xmlns='http://www.w3.org/2000/svg'>
+  <metadata id='metadata90'>
+    <rdf:RDF>
+      <cc:Work rdf:about=''>
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/>
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview inkscape:bbox-nodes='false' inkscape:bbox-paths='true' bordercolor='#666666' 
borderopacity='1' inkscape:current-layer='layer12' inkscape:cx='226.85531' inkscape:cy='256.56615' 
gridtolerance='10' inkscape:guide-bbox='true' guidetolerance='10' id='namedview88' 
inkscape:object-nodes='false' inkscape:object-paths='false' objecttolerance='10' pagecolor='#3a3b39' 
inkscape:pageopacity='1' inkscape:pageshadow='2' showborder='false' showgrid='false' showguides='true' 
inkscape:snap-bbox='true' inkscape:snap-bbox-midpoints='false' inkscape:snap-global='true' 
inkscape:snap-grids='true' inkscape:snap-nodes='true' inkscape:snap-others='false' 
inkscape:snap-to-guides='true' inkscape:window-height='1375' inkscape:window-maximized='1' 
inkscape:window-width='2560' inkscape:window-x='0' inkscape:window-y='27' inkscape:zoom='1'>
+    <inkscape:grid dotted='false' empspacing='2' enabled='true' id='grid4866' originx='139.9998px' 
originy='630px' snapvisiblegridlinesonly='true' spacingx='1px' spacingy='1px' type='xygrid' visible='true'/>
+  </sodipodi:namedview>
+  <title id='title9167'>Gnome Symbolic Icon Theme</title>
+  <defs id='defs7386'/>
+  <g inkscape:groupmode='layer' id='layer9' inkscape:label='status' style='display:inline' 
transform='translate(-101.0004,-847)'/>
+  <g inkscape:groupmode='layer' id='layer10' inkscape:label='devices' style='display:inline' 
transform='translate(-101.0004,-847)'/>
+  <g inkscape:groupmode='layer' id='layer11' inkscape:label='apps' transform='translate(-101.0004,-847)'/>
+  <g inkscape:groupmode='layer' id='layer13' inkscape:label='places' style='display:inline' 
transform='translate(-101.0004,-847)'/>
+  <g inkscape:groupmode='layer' id='layer14' inkscape:label='mimetypes' 
transform='translate(-101.0004,-847)'/>
+  <g inkscape:groupmode='layer' id='layer15' inkscape:label='emblems' style='display:inline' 
transform='translate(-101.0004,-847)'/>
+  <g inkscape:groupmode='layer' id='g71291' inkscape:label='emotes' style='display:inline' 
transform='translate(-101.0004,-847)'/>
+  <g inkscape:groupmode='layer' id='g4953' inkscape:label='categories' style='display:inline' 
transform='translate(-101.0004,-847)'/>
+  <g inkscape:groupmode='layer' id='layer12' inkscape:label='actions' style='display:inline' 
transform='translate(-101.0004,-847)'>
+    <path inkscape:connector-curvature='0' d='m 107.50781,847.99554 c -3.02886,0 -5.51073,2.47905 
-5.51073,5.50447 0,3.02541 2.48187,5.50446 5.51073,5.50446 3.02885,0 5.51072,-2.47905 5.51072,-5.50446 
0,-3.02542 -2.48187,-5.50447 -5.51072,-5.50447 z m 0,2.00893 c 1.94735,0 3.49951,1.55039 3.49951,3.49554 
0,1.94514 -1.55216,3.49553 -3.49951,3.49553 -1.94736,0 -3.49952,-1.55039 -3.49952,-3.49553 0,-1.94515 
1.55216,-3.49554 3.49952,-3.49554 z' id='path5901' 
style='font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:1.55467153;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-speci
 fication:Sans'/>
+    <path inkscape:connector-curvature='0' d='m 110.8125,856 a 1.0001,1.0001 0 0 0 -0.5,1.71875 l 4,4 a 
1.0054782,1.0054782 0 1 0 1.40625,-1.4375 l -4,-4 A 1.0001,1.0001 0 0 0 110.8125,856 z' id='path5903' 
style='font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans'/>
+    
+  </g>
+</svg>
diff --git a/sweettooth/templates/base.html b/sweettooth/templates/base.html
index c39b360..45ce30c 100644
--- a/sweettooth/templates/base.html
+++ b/sweettooth/templates/base.html
@@ -96,24 +96,21 @@
     <div class="clearfix"></div>
 
     <div id="container" class="container gnome-content">
-                <div class="col-sm-12">
-                <div class="row">
-                    <div class="col-sm-12">
-                         {% block search-bar %}
-                        {% endblock %}
-                    </div>
-                </div>
-                
-              <div id="message_container">
+        <div class="col-sm-12">
+            <div id="message_container">
                 {% for message in messages %}
                 <p class="message {{ message.tags }}">{{ message }}</p>
                 {% endfor %}
 
                 {% block extra-messages %}
                 {% endblock %}
-              </div>
-              {% block body %}
-              {% endblock %}
+            </div>
+
+            {% block search-bar %}
+            {% endblock %}
+
+            {% block body %}
+            {% endblock %}
         </div>
     </div>