Make navbar flow nicely for narrow windows

This commit is contained in:
kristi
2012-05-02 13:51:26 -07:00
parent 3d95730880
commit b29d22e99b
6 changed files with 32 additions and 19 deletions
@@ -37,9 +37,8 @@ a:hover, a:visited {
/* @section head */ /* @section head */
#head { #head {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ddd;
margin: 4.5em 0 0.5em; margin: 4.5em 0 0.5em;
padding: 0.5em 0;
overflow: hidden; overflow: hidden;
} }
@@ -209,6 +208,7 @@ a:hover, a:visited {
/* @section page-footer */ /* @section page-footer */
.page #footer { .page #footer {
border-top: 1px solid #ddd;
margin: 1em 0 7em; margin: 1em 0 7em;
} }
@@ -482,8 +482,9 @@ ul.actions {
ul.actions li { ul.actions li {
float: left; float: left;
font-size: 1em; font-size: 0.9em;
margin-left: 0.6em; margin-left: 0.6em;
margin-bottom: 0.6em;
} }
.minibutton a { .minibutton a {
@@ -595,28 +596,30 @@ ul.actions {
background: #fff; background: #fff;
border: 1px solid #d4d4d4; border: 1px solid #d4d4d4;
overflow: hidden; overflow: hidden;
height: 2.0em;
border-radius: 0.3em; border-radius: 0.3em;
-moz-border-radius: 0.3em; -moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em; -webkit-border-radius: 0.3em;
} }
.ie #head #searchbar #searchbar-fauxtext,
.ff #head #searchbar #searchbar-fauxtext {
height: 2.2em
}
#head #searchbar #searchbar-fauxtext input#search-query { #head #searchbar #searchbar-fauxtext input#search-query {
border: none; border: none;
color: #000; color: #000;
float: left; float: left;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1em; font-size: 1em;
height: 2.15em; height: inherit;
padding: 0 .5em; padding: 0 .5em;
-webkit-focus-ring: none; -webkit-focus-ring: none;
} }
.ff #head #searchbar #searchbar-fauxtext input#search-query {
padding: 0.2em 0 0.2em 0.5em;
}
.ie #head #searchbar #searchbar-fauxtext input#search-query { .ie #head #searchbar #searchbar-fauxtext input#search-query {
padding: 0.4em 0 0 0.5em; padding: 0.4em 0 0 0.5em;
} }
@@ -632,7 +635,7 @@ ul.actions {
margin: 0 !important; margin: 0 !important;
padding: 0; padding: 0;
float: right; float: right;
font-size: 1.2em; height: inherit;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0;
@@ -641,10 +644,10 @@ ul.actions {
#head #searchbar #searchbar-fauxtext #search-submit span { #head #searchbar #searchbar-fauxtext #search-submit span {
background-image: url(/images/icon-sprite.png); background-image: url(/images/icon-sprite.png);
background-position: -431px 0px; background-position: -431px -1px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: block; display: block;
height: 1.8em; height: inherit;
overflow: hidden; overflow: hidden;
text-indent: -5000px; text-indent: -5000px;
width: 28px; width: 28px;
@@ -656,6 +659,6 @@ ul.actions {
} }
#head #searchbar #searchbar-fauxtext #search-submit:hover span { #head #searchbar #searchbar-fauxtext #search-submit:hover span {
background-position: -431px -27px; background-position: -431px -28px;
padding: 0; padding: 0;
} }
@@ -3,10 +3,12 @@
<h1>History for <strong>{{path}}</strong></h1> <h1>History for <strong>{{path}}</strong></h1>
<ul class="actions"> <ul class="actions">
<li class="minibutton">
{{>searchbar}}
</li>
<li class="minibutton"><a href="/history/{{escaped_name}}" <li class="minibutton"><a href="/history/{{escaped_name}}"
class="action-page-history">Back to Page History</a></li> class="action-page-history">Back to Page History</a></li>
</ul> </ul>
{{>searchbar}}
</div> </div>
{{#message}} {{#message}}
@@ -2,12 +2,14 @@
<div id="head"> <div id="head">
<h1>History for <strong>{{title}}</strong></h1> <h1>History for <strong>{{title}}</strong></h1>
<ul class="actions"> <ul class="actions">
<li class="minibutton">
{{>searchbar}}
</li>
<li class="minibutton"><a href="/{{escaped_name}}" <li class="minibutton"><a href="/{{escaped_name}}"
class="action-view-page">View Page</a></li> class="action-view-page">View Page</a></li>
<li class="minibutton"><a href="/edit/{{escaped_name}}" <li class="minibutton"><a href="/edit/{{escaped_name}}"
class="action-edit-page">Edit Page</a></li> class="action-edit-page">Edit Page</a></li>
</ul> </ul>
{{>searchbar}}
</div> </div>
<div id="wiki-history"> <div id="wiki-history">
+3 -1
View File
@@ -2,6 +2,9 @@
<div id="head"> <div id="head">
<h1>{{title}}</h1> <h1>{{title}}</h1>
<ul class="actions"> <ul class="actions">
<li class="minibutton">
{{>searchbar}}
</li>
<li class="minibutton"><a href="/pages" <li class="minibutton"><a href="/pages"
class="action-all-pages">All Pages</a></li> class="action-all-pages">All Pages</a></li>
<li class="minibutton" class="jaws"> <li class="minibutton" class="jaws">
@@ -13,7 +16,6 @@
<li class="minibutton"><a href="/history/{{escaped_name}}" <li class="minibutton"><a href="/history/{{escaped_name}}"
class="action-page-history">Page History</a></li> class="action-page-history">Page History</a></li>
</ul> </ul>
{{>searchbar}}
</div> </div>
<div id="wiki-content"> <div id="wiki-content">
<div class="wrap {{#has_footer}} has-footer {{/has_footer}} {{#has_sidebar}} has-rightbar{{/has_sidebar}}"> <div class="wrap {{#has_footer}} has-footer {{/has_footer}} {{#has_sidebar}} has-rightbar{{/has_sidebar}}">
+3 -1
View File
@@ -2,10 +2,12 @@
<div id="head"> <div id="head">
<h1>{{title}}</h1> <h1>{{title}}</h1>
<ul class="actions"> <ul class="actions">
<li class="minibutton">
{{>searchbar}}
</li>
<li class="minibutton"><a href="/" <li class="minibutton"><a href="/"
class="action-edit-page">Home</a></li> class="action-edit-page">Home</a></li>
</ul> </ul>
{{>searchbar}}
</div> </div>
<div id="results"> <div id="results">
@@ -2,10 +2,12 @@
<div id="head"> <div id="head">
<h1>Search Results for <strong>{{query}}</strong></h1> <h1>Search Results for <strong>{{query}}</strong></h1>
<ul class="actions"> <ul class="actions">
<li class="minibutton">
{{>searchbar}}
</li>
<li class="minibutton"><a href="/" <li class="minibutton"><a href="/"
class="action-edit-page">Home</a></li> class="action-edit-page">Home</a></li>
</ul> </ul>
{{>searchbar}}
</div> </div>
<div id="results"> <div id="results">