External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-25 15:06:02 -03:30
Code Issues Packages Projects Releases Wiki Activity

Fix mobile breakpoints for menu

Browse Source 
We need a better strategy around these breakpoints. I feel like they'll
be different depending on the thing we're styling, so maybe having a
file with variables for different breakpoints. Not sure yet.
This commit is contained in:
Joe Fiorini
2015-05-28 18:20:05 -04:00
parent fc07169b5c
commit 18303a004d
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
awx/ui/static/js/main-menu/main-menu.block.less
View File

@@ -1,12 +1,14 @@
/** @define MainMenu */
.MainMenu {
@menu-breakpoint: 871px;
display: flex;
background-color: white;
margin: 0;
@media screen and (max-width: 570px) {
@media screen and (max-width: @menu-breakpoint) {
position: relative;
transition: height 0.5s ease-out;
justify-content: flex-start;
@@ -25,7 +27,7 @@
}
@media screen and (min-width: 571px) {
@media screen and (min-width: @menu-breakpoint + 1px) {
padding: 0 1rem;
}
@@ -34,7 +36,7 @@
}
&-toggle {
@media screen and (min-width: 571px) {
@media screen and (min-width: @menu-breakpoint + 1px) {
display: none;
}
display: flex;

16
awx/ui/static/js/main-menu/menu-item.block.less
View File

@@ -4,6 +4,8 @@
@import "shared/branding/colors.less";
.MenuItem {
@menu-breakpoint: 870px;
display: flex;
flex: none;
@@ -27,7 +29,7 @@
margin-right: 0;
}
@media screen and (max-width: 570px) {
@media screen and (max-width: @menu-breakpoint) {
flex: 1 1 0;
padding: 0 1rem;
margin-right: 0;
@@ -48,13 +50,13 @@
flex: none;
min-width: 0;
margin-right: 0;
@media screen and (min-width: 571px) {
@media screen and (min-width: (@menu-breakpoint + 1px)) {
padding: 0 0.75rem;
}
}
&-helpTitle {
@media screen and (min-width: 571px) {
@media screen and (min-width: (@menu-breakpoint + 1px)) {
display: none;
}
}
@@ -70,7 +72,7 @@
&--right {
// Push this and all following elements to the right
margin-left: auto;
@media screen and (max-width: 570px) {
@media screen and (max-width: @menu-breakpoint) {
margin-left: 0;
}
}
@@ -110,7 +112,7 @@
&--labelled {
margin-right: 0.25rem;
}
@media screen and (max-width: 570px) {
@media screen and (max-width: @menu-breakpoint) {
display: none;
margin-right: 1.4rem;
}
@@ -118,10 +120,10 @@
&-username {
padding-right: 0.25rem;
@media screen and (max-width: 570px) {
@media screen and (max-width: @menu-breakpoint) {
order: 1; // moves this to the bottom
}
@media screen and (min-width: 571px) {
@media screen and (min-width: (@menu-breakpoint + 1px)) {
max-width: 110px;
}
}