reflow buttons based on browser size, much better

This commit is contained in:
John McLear 2014-11-06 14:32:20 +00:00
parent b59f6a4d6f
commit 7d04d7309f

View file

@ -59,7 +59,7 @@ a img {
height: 32px; height: 32px;
} }
.toolbar ul { .toolbar ul {
position: relative; position: absolute;
list-style: none; list-style: none;
padding-right: 3px; padding-right: 3px;
padding-left: 1px; padding-left: 1px;
@ -67,9 +67,6 @@ a img {
overflow: hidden; overflow: hidden;
float: left float: left
} }
.toolbar ul.menu_right {
float: right
}
.toolbar ul li { .toolbar ul li {
float: left; float: left;
margin-left: 2px; margin-left: 2px;
@ -84,6 +81,7 @@ a img {
visibility: hidden; visibility: hidden;
width: 0px; width: 0px;
padding: 5px; padding: 5px;
height:20px;
} }
.toolbar ul li a:hover { .toolbar ul li a:hover {
text-decoration: none; text-decoration: none;
@ -164,6 +162,15 @@ a img {
border: 1px solid #ccc; border: 1px solid #ccc;
outline: none; outline: none;
} }
.toolbar ul.menu_left {
left:0px;
right:250px;
}
.toolbar ul.menu_right {
right:0px;
}
li[data-key=showusers] > a { li[data-key=showusers] > a {
min-width: 30px; min-width: 30px;
text-align: left; text-align: left;
@ -843,12 +850,16 @@ input[type=checkbox] {
width: 185px !important; width: 185px !important;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.toolbar ul li.separator { .toolbar ul li.separator {
display: none; display: none;
} }
.toolbar ul li a { .toolbar ul li a {
padding: 4px 1px padding: 4px 1px
} }
.toolbar ul.menu_left {
left:0px;
right:150px;
}
} }
@media all and (max-width: 400px){ @media all and (max-width: 400px){
#gritter-notice-wrapper{ #gritter-notice-wrapper{
@ -894,9 +905,13 @@ input[type=checkbox] {
#editbar { #editbar {
height: 62px; height: 62px;
} }
.toolbar ul.menu_left {
left:0px;
right:100px;
}
.toolbar ul.menu_right { .toolbar ul.menu_right {
float: left; right:0px;
margin-top:2px;
} }
.popup { .popup {
width:100%; width:100%;
@ -917,6 +932,8 @@ input[type=checkbox] {
#editorcontainer { #editorcontainer {
margin-bottom: 33px margin-bottom: 33px
} }
.toolbar ul.menu_left {
}
.toolbar ul.menu_right { .toolbar ul.menu_right {
background: #f7f7f7; background: #f7f7f7;
background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%);