From b649887e61bcd24fbd6e003f11bc1eed021a6726 Mon Sep 17 00:00:00 2001 From: Joe Fiorini Date: Fri, 24 Apr 2015 09:43:53 -0400 Subject: [PATCH] Implement mobile-friendly menu --- .../js/main-menu/main-menu.directive.js | 2 +- .../js/main-menu/main-menu.partial.html | 7 +++ awx/ui/static/js/main-menu/main.js | 6 ++- .../js/main-menu/menu-default.partial.html | 6 +-- .../js/main-menu/menu-minimal.partial.html | 5 +-- .../js/main-menu/menu-toggle.directive.js | 19 ++++++++ .../js/main-menu/menu-toggle.partial.html | 9 ++++ .../js/setup-menu/setup-menu.block.less | 4 +- .../static/js/shared/include-partial/main.js | 5 +++ .../js/shared/menu/menu-item.block.less | 41 ++++++++++++++--- .../js/shared/menu/menu-toggle.block.less | 33 ++++++++++++++ awx/ui/static/js/shared/menu/menu.block.less | 44 ++++++++++++++++--- awx/ui/static/less/main-layout.less | 2 +- 13 files changed, 159 insertions(+), 24 deletions(-) create mode 100644 awx/ui/static/js/main-menu/main-menu.partial.html create mode 100644 awx/ui/static/js/main-menu/menu-toggle.directive.js create mode 100644 awx/ui/static/js/main-menu/menu-toggle.partial.html create mode 100644 awx/ui/static/js/shared/include-partial/main.js create mode 100644 awx/ui/static/js/shared/menu/menu-toggle.block.less diff --git a/awx/ui/static/js/main-menu/main-menu.directive.js b/awx/ui/static/js/main-menu/main-menu.directive.js index a9c0e1e2d9..107f4b4113 100644 --- a/awx/ui/static/js/main-menu/main-menu.directive.js +++ b/awx/ui/static/js/main-menu/main-menu.directive.js @@ -20,7 +20,7 @@ function link(scope, element, attrs) { export default function() { return { restrict: 'E', - template: '', + templateUrl: '/static/js/main-menu/main-menu.partial.html', scope: { style: '&menuStyle' }, diff --git a/awx/ui/static/js/main-menu/main-menu.partial.html b/awx/ui/static/js/main-menu/main-menu.partial.html new file mode 100644 index 0000000000..4c7ec3e335 --- /dev/null +++ b/awx/ui/static/js/main-menu/main-menu.partial.html @@ -0,0 +1,7 @@ + diff --git a/awx/ui/static/js/main-menu/main.js b/awx/ui/static/js/main-menu/main.js index c53ad3d653..8af8db94ea 100644 --- a/awx/ui/static/js/main-menu/main.js +++ b/awx/ui/static/js/main-menu/main.js @@ -1,9 +1,13 @@ import mainMenu from './main-menu.directive'; import menuItem from './menu-item.directive'; +import menuToggle from './menu-toggle.directive'; import portalModeLink from './portal-mode-link.directive'; +import includePartial from 'tower/shared/include-partial/main'; + export default - angular.module('mainMenu', []) + angular.module('mainMenu', [includePartial.name]) .directive('portalModeLink', portalModeLink) .directive('menuItem', menuItem) + .directive('menuToggleButton', menuToggle) .directive('mainMenu', mainMenu); diff --git a/awx/ui/static/js/main-menu/menu-default.partial.html b/awx/ui/static/js/main-menu/menu-default.partial.html index 1b63eaa40d..75f41ea4c6 100644 --- a/awx/ui/static/js/main-menu/menu-default.partial.html +++ b/awx/ui/static/js/main-menu/menu-default.partial.html @@ -1,6 +1,3 @@ - Projects @@ -19,12 +16,15 @@ + Setup + Portal Mode + Sign Out Setup diff --git a/awx/ui/static/js/main-menu/menu-minimal.partial.html b/awx/ui/static/js/main-menu/menu-minimal.partial.html index f01c22f2d1..0f7c2f70cc 100644 --- a/awx/ui/static/js/main-menu/menu-minimal.partial.html +++ b/awx/ui/static/js/main-menu/menu-minimal.partial.html @@ -1,7 +1,4 @@ - - + Portal diff --git a/awx/ui/static/js/main-menu/menu-toggle.directive.js b/awx/ui/static/js/main-menu/menu-toggle.directive.js new file mode 100644 index 0000000000..14752021f3 --- /dev/null +++ b/awx/ui/static/js/main-menu/menu-toggle.directive.js @@ -0,0 +1,19 @@ +export default function() { + return { + templateUrl: '/static/js/main-menu/menu-toggle.partial.html', + restrict: 'E', + scope: { + width: '@', + height: '@', + barHeight: '@' + }, + link: function(scope, element, attrs) { + element.on("click", function(e) { + e.preventDefault(); + e.stopPropagation(); + $(".Menu--main").toggleClass("Menu--open"); + element.toggleClass("MenuToggle--open"); + }); + } + }; +} diff --git a/awx/ui/static/js/main-menu/menu-toggle.partial.html b/awx/ui/static/js/main-menu/menu-toggle.partial.html new file mode 100644 index 0000000000..76b937edff --- /dev/null +++ b/awx/ui/static/js/main-menu/menu-toggle.partial.html @@ -0,0 +1,9 @@ + + diff --git a/awx/ui/static/js/setup-menu/setup-menu.block.less b/awx/ui/static/js/setup-menu/setup-menu.block.less index 7263e3835c..d70a888d78 100644 --- a/awx/ui/static/js/setup-menu/setup-menu.block.less +++ b/awx/ui/static/js/setup-menu/setup-menu.block.less @@ -7,7 +7,9 @@ justify-content: flex-start; background-color: #EDEDED; flex-wrap: wrap; - margin-top: -2.8rem; + @media screen and (min-width: 571px) { + margin-top: -2.8rem; + } &-block { display: flex; diff --git a/awx/ui/static/js/shared/include-partial/main.js b/awx/ui/static/js/shared/include-partial/main.js new file mode 100644 index 0000000000..da67028014 --- /dev/null +++ b/awx/ui/static/js/shared/include-partial/main.js @@ -0,0 +1,5 @@ +import includePartial from './include-partial.directive'; + +export default + angular.module('includePartial', []) + .directive('includePartial', includePartial); diff --git a/awx/ui/static/js/shared/menu/menu-item.block.less b/awx/ui/static/js/shared/menu/menu-item.block.less index d6b393d049..eb793dc7e4 100644 --- a/awx/ui/static/js/shared/menu/menu-item.block.less +++ b/awx/ui/static/js/shared/menu/menu-item.block.less @@ -10,13 +10,25 @@ min-width: 9.2rem; &--fixed { + @media screen and (max-width: 570px) { + flex: 1 0 100% !important; + justify-content: center; + } flex: none; min-width: 0; margin-right: 0 !important; } + &-helpTitle { + @media screen and (min-width: 571px) { + display: none; + } + } + &--logo { - width: 202px; + @media screen and (max-width: 570px) { + justify-content: center; + } } &--active { @@ -31,15 +43,20 @@ } &--hoverable { - transition: background-color 0.3s; flex-direction: column; justify-content: center; + transition: background-color 0.3s; .MenuItem-hover-icon { - display: flex; - opacity: 0; - height: 0; - width: auto; - transition: opacity 0.3s ease-out, height 0.2s ease-out; + height: 22px; + } + @media screen and (min-width: 571px) { + .MenuItem-hover-icon { + display: flex; + opacity: 0; + height: 0; + width: auto; + transition: opacity 0.3s ease-out, height 0.2s ease-out; + } } &:hover { background-color: rgba(255,255,255,0.35); @@ -64,7 +81,11 @@ } &--right { + // Push this and all following elements to the right margin-left: auto; + @media screen and (max-width: 570px) { + margin-left: 0; + } } &--setup { @@ -90,11 +111,17 @@ &-logo { height: 34px; width: auto; + @media screen and (max-width: 570px) { + height: 25px; + } } &-icon { height: 13px; width: auto; + @media screen and (max-width: 570px) { + margin-right: 1.4rem; + } } } diff --git a/awx/ui/static/js/shared/menu/menu-toggle.block.less b/awx/ui/static/js/shared/menu/menu-toggle.block.less new file mode 100644 index 0000000000..cecd6f15bc --- /dev/null +++ b/awx/ui/static/js/shared/menu/menu-toggle.block.less @@ -0,0 +1,33 @@ +/** @define MenuToggle */ + +.MenuToggle { + + &-icon { + // Override settings (on svg tag) from nv.d3.css that really + // shouldn't be there, but are, so meh. + display: inherit; + width: inherit; + height: inherit; + // border: solid thin white; + } + + &-bar { + fill: #000; + transition: transform 0.25s cubic-bezier(.96,-0.6,.27,1.68), opacity 0.25s; + transform: rotate(0deg); + transform-origin: center center; + } + + + &--open { + .MenuToggle-crossBar1 { + transform: rotate(45deg); + } + .MenuToggle-topBar, .MenuToggle-bottomBar { + opacity: 0; + } + .MenuToggle-crossBar2 { + transform: rotate(-45deg); + } + } +} diff --git a/awx/ui/static/js/shared/menu/menu.block.less b/awx/ui/static/js/shared/menu/menu.block.less index 00ae1f40f9..888607bc10 100644 --- a/awx/ui/static/js/shared/menu/menu.block.less +++ b/awx/ui/static/js/shared/menu/menu.block.less @@ -18,6 +18,30 @@ margin-right: 0; } } + + @media screen and (max-width: 570px) { + position: relative; + transition: height 1s; + justify-content: flex-start; + flex-wrap: wrap; + height: 56px; + overflow: hidden; + + &.Menu--open { + height: 348px !important; + border-bottom: solid thin black; + } + + .MenuItem { + flex: 1 0 50%; + padding: 0; + margin-right: 0; + + &--logo { + flex: 2 0 100%; + } + } + } } &--popup { @@ -39,13 +63,21 @@ } } + &-toggle { + @media screen and (min-width: 571px) { + display: none; + } + } + &--fixed-top { - width: 100%; - z-index: 1040; - position: fixed; - right: 0; - left: 0; - top: 0; + // @media screen and (min-width: 571px) { + width: 100%; + z-index: 1040; + position: fixed; + right: 0; + left: 0; + top: 0; + // } } } diff --git a/awx/ui/static/less/main-layout.less b/awx/ui/static/less/main-layout.less index 89070609f3..f00a15aaae 100644 --- a/awx/ui/static/less/main-layout.less +++ b/awx/ui/static/less/main-layout.less @@ -10,8 +10,8 @@ body { font-family: 'Open Sans', sans-serif; font-weight: 400; - padding-top: 75px; color: @black; + padding-top: 75px; } #main-menu-container {