External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-19 09:57:33 -02: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 */ /** @define MainMenu */
.MainMenu { .MainMenu {
@menu-breakpoint: 871px;
display: flex; display: flex;
background-color: white; background-color: white;
margin: 0; margin: 0;
@media screen and (max-width: 570px) { @media screen and (max-width: @menu-breakpoint) {
position: relative; position: relative;
transition: height 0.5s ease-out; transition: height 0.5s ease-out;
justify-content: flex-start; 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; padding: 0 1rem;
} }
@@ -34,7 +36,7 @@
} }
&-toggle { &-toggle {
@media screen and (min-width: 571px) { @media screen and (min-width: @menu-breakpoint + 1px) {
display: none; display: none;
} }
display: flex; display: flex;

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

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