From 797f3ca1d873485bb72e5b70a4964aca49075dd6 Mon Sep 17 00:00:00 2001 From: Evgeny Fadeev Date: Fri, 16 Nov 2012 19:42:28 -0300 Subject: started re-working the search bar to make it stretchy --- askbot/media/style/style.less | 189 +++++++++++-------------- askbot/templates/base.html | 1 + askbot/templates/widgets/scope_nav.html | 2 + askbot/templates/widgets/search_bar.html | 19 --- askbot/templates/widgets/secondary_header.html | 41 +++++- 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 @@ {% if settings.GOOGLE_SITEMAP_CODE %} + {% endif %} {% 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 @@ +
{% 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 %}
{% trans %}Please ask your question here{% endtrans %}
{% endif %} +
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 %} {% 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 @@
- -
- {% include "widgets/scope_nav.html" %} + {# form is wrapping search buttons and the search bar inputs #} +
+
+ {# + 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. + #} + + {% include "widgets/scope_nav.html" %} + + + {% include "widgets/ask_button.html" %} + {# clears button floats #} +
+
{% include "widgets/search_bar.html" %} {# include search form widget #} -
- {% include "widgets/ask_button.html" %} -
+
-- cgit v1.2.3-1-g7c22