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

Implement mobile-friendly menu

Browse Source
This commit is contained in:
Joe Fiorini 2015-04-24 09:43:53 -04:00
parent d760c96596
commit b649887e61
13 changed files with 159 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/static/js/main-menu/main-menu.directive.js
View File

@ -20,7 +20,7 @@ function link(scope, element, attrs) {
export default function() {
return {
restrict: 'E',
template: '<nav class="Menu Menu--main Menu--fixed-top" ng-include="menuStylePartialUrl"></nav>',
templateUrl: '/static/js/main-menu/main-menu.partial.html',
scope: {
style: '&menuStyle'
},

7
awx/ui/static/js/main-menu/main-menu.partial.html Normal file
View File

@ -0,0 +1,7 @@
<nav class="Menu Menu--main Menu--fixed-top">
<a href="#/home" title="Home" class="MenuItem MenuItem--logo">
<img id="ansible-brand-logo" class="MenuItem-logo" src="/static/img/TowerLogo.svg">
<menu-toggle-button width="15" height="15" bar-height="2"></menu-toggle-button>
</a>
<include-partial ng-include="menuStylePartialUrl"></include-partial>
</nav>

6
awx/ui/static/js/main-menu/main.js
View File

@ -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);

6
awx/ui/static/js/main-menu/menu-default.partial.html
View File

@ -1,6 +1,3 @@
<a menu-item href="/" title="Home" class="MenuItem MenuItem--logo">
<img id="ansible-brand-logo" class="MenuItem-logo" src="/static/img/TowerLogo.svg">
</a>
<a menu-item href="#/projects" title="Projects" class="MenuItem MenuItem--hoverable">
<img src="/static/img/Projects.svg" class="MenuItem-hover-icon">
Projects
@ -19,12 +16,15 @@
</a>
<a href="#/setup" class="MenuItem MenuItem--right MenuItem--fixed" title="Setup">
<img src="/static/img/Setup.svg" class="MenuItem-icon">
<span class="MenuItem-helpTitle">Setup</span>
</a>
<a portal-mode-link class="MenuItem MenuItem--fixed" title="Portal Mode">
<img src="/static/img/PortalMode.svg" class="MenuItem-icon">
<span class="MenuItem-helpTitle">Portal Mode</span>
</a>
<a href="#/logout" title="Sign out" class="MenuItem MenuItem--fixed">
<img src="/static/img/Signout.svg" class="MenuItem-icon">
<span class="MenuItem-helpTitle">Sign Out</span>
</a>
<a href="#setup" class="MenuItem MenuItem--setup" title="Setup">
Setup

5
awx/ui/static/js/main-menu/menu-minimal.partial.html
View File

@ -1,7 +1,4 @@
<a href="#portal" title="Home" class="MenuItem MenuItem--logo">
<img id="ansible-brand-logo" class="MenuItem-logo" src="/static/img/TowerLogo.svg">
</a>
<a href="#portal" title="Portal" class="MenuItem">
<a href="#portal" title="Portal" class="MenuItem MenuItem--hoverable">
Portal
</a>
<a portal-mode-link class="MenuItem MenuItem--right MenuItem--fixed" title="Portal Mode">

19
awx/ui/static/js/main-menu/menu-toggle.directive.js Normal file
View File

@ -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");
});
}
};
}

9
awx/ui/static/js/main-menu/menu-toggle.partial.html Normal file
View File

@ -0,0 +1,9 @@
<button menu-toggle class="Menu-toggle MenuToggle Button--pseudo">
<svg class="MenuToggle-icon" width="12" height="10">
<rect class="MenuToggle-bar MenuToggle-topBar" x="0" y="0" width="100%" height="2" />
<rect class="MenuToggle-bar MenuToggle-crossBar1" x="0" y="4" width="100%" height="2" />
<rect class="MenuToggle-bar MenuToggle-crossBar2" x="0" y="4" width="100%" height="2" />
<rect class="MenuToggle-bar MenuToggle-bottomBar" x="0" y="8" width="100%" height="2" />
</svg>
</button>

4
awx/ui/static/js/setup-menu/setup-menu.block.less
View File

@ -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;

5
awx/ui/static/js/shared/include-partial/main.js Normal file
View File

@ -0,0 +1,5 @@
import includePartial from './include-partial.directive';
export default
angular.module('includePartial', [])
.directive('includePartial', includePartial);

41
awx/ui/static/js/shared/menu/menu-item.block.less
View File

@ -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;
}
}
}

33
awx/ui/static/js/shared/menu/menu-toggle.block.less Normal file
View File

@ -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);
}
}
}

44
awx/ui/static/js/shared/menu/menu.block.less
View File

@ -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;
// }
}
}

2
awx/ui/static/less/main-layout.less
View File

@ -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 {