started re-working the search bar to make it stretchy

5 files changed, 117 insertions, 135 deletions

diff --git a/askbot/media/style/style.less b/askbot/media/style/style.less
index ed0e0572..22c5fe30 100644
--- a/askbot/media/style/style.less
+++ b/askbot/media/style/style.less
@@ -395,45 +395,37 @@ body.user-messages {
     border-top:#fcfcfc 1px solid;
     margin-bottom:10px;
     font-family:@main-font;
+}
 
-    #homeButton{
-        border-right:#afaf9e 1px solid;
-       .sprites(-6px,-36px);
-        height:55px;
-       width:43px;
-       display:block;
-       float:left;
-    }
+#homeButton{
+    border-right: #afaf9e 1px solid;
+    .sprites(-6px,-36px);
+    height:55px;
+    width:43px;
+    display:block;
+    float:left;
+}
 
-    #homeButton:hover{
-        .sprites(-6px-45,-36px);
-    }
-    
-    #scopeWrapper{
-        width:688px;
-        float:left;
-        
-        a{
-            display:block;
-           float:left;
-         }
+#homeButton:hover{
+    .sprites(-45px,-36px);
+}
 
-        .scope-selector{
-            font-size:20px;
-            color:#7a7a6b;
-            height:55px;
-            line-height:55px;
-            margin-left:16px
-        }
+.scope-selector {
+    display:block;
+    float:left;
+    font-size:20px;
+    color:#7a7a6b;
+    height:55px;
+    line-height:55px;
+    margin-left:16px
+}
 
-        .on{
-            background:url(../images/scopearrow.png) no-repeat center bottom;
-        }
+.scope-selector.on {
+    background:url(../images/scopearrow.png) no-repeat center bottom;
+}
 
-        .ask-message{
-            font-size:24px;
-        }
-    }
+.scope-selector.ask-message {
+    font-size:24px;
 }
 
 .validate-email-page {
@@ -456,15 +448,15 @@ body.user-messages {
 }
 
 #searchBar { /* Main search form , check widgets/search_bar.html */
-    display: inline-block;
+    display: block;
     background-color: #fff;
-    width: 400px;
     border: 1px solid #c9c9b5;
-    float:right;
     height:42px;
-    margin:6px 0px 0px 15px;
+    padding: 0 420px 0 45px;/* right & left padding is for the buttons */
+    margin: 0;
+    width: 100%;
 
-    .searchInput, .searchInputCancelable{
+    .searchInput {
         font-size: 26px;
         height: 39px;
         line-height: 39px;
@@ -476,70 +468,45 @@ body.user-messages {
         padding-top: 1px;
         font-family:@body-font;
         vertical-align: top;
+        width: 100%;
     }
+}
 
-    .searchInput,{
-        width: 340px;
-    }
-
-    .searchInputCancelable {
-        width: 305px;
-    }
-
-    .logoutsearch {
-        width: 337px;
-    }
-
-    .searchBtn {
-        font-size: 10px;
-        color: #666;
-        background-color: #eee;
-        height: 42px;
-        border:#FFF 1px solid;
-        line-height: 22px;
-        text-align: center;
-        float:right;
-        margin: 0px;
-        width:48px;
-        .sprites(-98px,-36px);
-        cursor:pointer;
-    }
-
-    .searchBtn:hover {
-        .sprites(-98px-48,-36px);
-    }
-
-    .cancelSearchBtn {
-        font-size: 30px;
-        color: #ce8888;
-        background:#fff;
-        height: 42px;
-        line-height: 42px;
-        border:0px;
-        border-left:#deded0 1px solid;
-        text-align: center;
-        width: 35px;
-        cursor:pointer;
-    }
-
-    .cancelSearchBtn:hover {
-        color: #d84040;
-    }
+.searchBtn {
+    font-size: 10px;
+    color: #666;
+    background-color: #eee;
+    height: 42px;
+    border:#FFF 1px solid;
+    line-height: 22px;
+    text-align: center;
+    float:right;
+    margin: 0px;
+    width:48px;
+    .sprites(-98px,-36px);
+    cursor:pointer;
 }
 
-body.anon {
-    #searchBar {
-        width: 500px;
-        .searchInput {
-            width: 440px;
-        }
+.searchBtn:hover {
+    .sprites(-98px-48,-36px);
+}
 
-        .searchInputCancelable {
-            width: 405px;
-        }
-    }
+.cancelSearchBtn {
+    font-size: 30px;
+    color: #ce8888;
+    background:#fff;
+    height: 42px;
+    line-height: 42px;
+    border:0px;
+    border-left:#deded0 1px solid;
+    text-align: center;
+    width: 35px;
+    cursor:pointer;
 }
 
+.cancelSearchBtn:hover {
+    color: #d84040;
+}
 
 #askButton{ /* check blocks/secondary_header.html and widgets/ask_button.html*/
     line-height:44px;
@@ -554,6 +521,20 @@ body.anon {
     .button-style-hover;
 }
 
+/* 
+    Put the secondary navigation together:
+    1) raise the search bar by 55px
+    2) add padding to fit the buttons
+*/
+#searchBar {
+    padding: 0 250px 0 200px;
+    margin-top: -55px;
+}
+body.anon #searchBar {
+    padding-left: 150px;/* we don't have the "followed" scope */
+}
+
+
 /* ----- Content layout, check two_column_body.html or one_column_body.html ----- */
 
 #ContentLeft {
@@ -3756,24 +3737,12 @@ pre.prettyprint { clear:both;padding: 3px; border: 0px solid #888; }
 /* language-specific fixes */
 body.lang-es {
     #searchBar {
-        width: 398px;
-        .searchInput {
-            width: 337px;
-        }
-        .searchInputCancelable {
-            width: 302px;
-        }
+        /* need special left padding */
     }
 }
 body.anon.lang-es {
     #searchBar {
-        width: 485px;
-        .searchInput {
-            width: 425px;
-        }
-        .searchInputCancelable {
-            width: 390px;
-        }
+        /* need special left padding */
     }
 }
 
diff --git a/askbot/templates/base.html b/askbot/templates/base.html
index 63d7115f..ffe3bf84 100644
--- a/askbot/templates/base.html
+++ b/askbot/templates/base.html
@@ -9,6 +9,7 @@
         <meta name="keywords" content="{%block keywords%}{%endblock%},{{settings.APP_KEYWORDS|escape}}" />
         {% if settings.GOOGLE_SITEMAP_CODE %}
         <meta name="google-site-verification" content="{{settings.GOOGLE_SITEMAP_CODE}}" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         {% endif %}
         <link rel="shortcut icon" href="{{ settings.SITE_FAVICON|media }}" />
         {% block before_css %}{% endblock %}
diff --git a/askbot/templates/widgets/scope_nav.html b/askbot/templates/widgets/scope_nav.html
index a6bda630..b68d899c 100644
--- a/askbot/templates/widgets/scope_nav.html
+++ b/askbot/templates/widgets/scope_nav.html
@@ -1,3 +1,4 @@
+<div id="scopeNav">
 {% if active_tab != "ask" %}
     {% if not search_state %}  {#  get empty SearchState() if there's none #}
         {% set search_state=search_state|get_empty_search_state %}
@@ -13,3 +14,4 @@
 {% else %}
     <div class="scope-selector ask-message">{% trans %}Please ask your question here{% endtrans %}</div>
 {% endif %}
+</div>
diff --git a/askbot/templates/widgets/search_bar.html b/askbot/templates/widgets/search_bar.html
index 59c4fd58..2964f93d 100644
--- a/askbot/templates/widgets/search_bar.html
+++ b/askbot/templates/widgets/search_bar.html
@@ -2,16 +2,6 @@
 {% spaceless %}
 <div id="searchBar">
     {# url action depends on which tab is active #}
-    <form 
-        {% if active_tab == "tags" %}
-            action="{% url tags %}" 
-        {% elif active_tab == "users" %}
-            action="{% url users %}" 
-        {% else %}
-            action="{% url questions %}" id="searchForm"
-        {% endif %}
-        method="get">
-            <input type="submit" value="" name="search" class="searchBtn" />
             {% if active_tab == "tags" %}
                 <input type="hidden" name="t" value="tag"/>
             {% else %}
@@ -32,15 +22,6 @@
                 name="query" 
                 id="keywords"
             />
-            <input type="button"
-                value="X"
-                name="reset_query"
-                class="cancelSearchBtn"
-                {% if not query %}{# query is only defined by questions view (active_tab) #}
-                    style="display: none;"
-                {% endif %}
-            />
-    </form>
 </div>
 {% endspaceless %}
 {% endif %}
diff --git a/askbot/templates/widgets/secondary_header.html b/askbot/templates/widgets/secondary_header.html
index caf190bc..cd4db225 100644
--- a/askbot/templates/widgets/secondary_header.html
+++ b/askbot/templates/widgets/secondary_header.html
@@ -1,12 +1,41 @@
 <!-- template secondary_header.html -->
 <div id="secondaryHeader">
     <div class="content-wrapper">
-        <a id="homeButton" href="{% url questions %}"></a>
-        <div id="scopeWrapper">
-            {% include "widgets/scope_nav.html" %}            
+        {# form is wrapping search buttons and the search bar inputs #}
+        <form
+            {% if active_tab == "tags" %}
+                action="{% url tags %}" 
+            {% elif active_tab == "users" %}
+                action="{% url users %}" 
+            {% else %}
+                action="{% url questions %}" id="searchForm"
+            {% endif %}
+            method="get">
+            <div>
+                {# 
+                    Some or all contents of this div may be dropped
+                    over the search bar via negative margins,
+                    to make sure that the search bar can occupy 100%
+                    of the content width.
+                    Search bar may have padding on the left and right
+                    to accomodate the buttons.
+                #}
+                <a id="homeButton" href="{% url questions %}"></a>
+                {% include "widgets/scope_nav.html" %}            
+                <input type="submit" value="" name="search" class="searchBtn" />
+                <input type="button"
+                    value="X"
+                    name="reset_query"
+                    class="cancelSearchBtn"
+                    {% if not query %}{# query is only defined by questions view (active_tab) #}
+                        style="display: none;"
+                    {% endif %}
+                />
+                {% include "widgets/ask_button.html" %}            
+                {# clears button floats #}
+                <div class="clearfix"></div>
+            </div>
             {% include "widgets/search_bar.html" %} {# include search form widget #}
-        </div>
-        {% include "widgets/ask_button.html" %}            
-        <div class="clean"></div>
+        </form>
     </div>
 </div>