mirror of
https://github.com/ansible/awx.git
synced 2026-01-14 03:10:42 -03:30
Much improved mobile menu
When screen width goes below 1076px the menu disappears, being replaced by a button. Clicking the button displayed the default twitter bootstrap, which was pretty icky. Now it displays a much nicer slide in menu from the right.
This commit is contained in:
Chris Houseknecht
parent
13dcbb9a79
commit
2398e17206
@ -460,6 +460,11 @@ angular.module('Tower', [
|
||||
$(this).removeClass('active');
|
||||
});
|
||||
$('#ansible-main-menu #' + base).addClass('active');
|
||||
// Apply to mobile menu as well
|
||||
$('#ansible-mobile-menu a').each(function() {
|
||||
$(this).removeClass('active');
|
||||
});
|
||||
$('#ansible-mobile-menu a[href="#' + base + '"]').addClass('active');
|
||||
}
|
||||
|
||||
$rootScope.browser = detectBrowser();
|
||||
|
||||
@ -59,6 +59,7 @@
|
||||
@import "stdout.less";
|
||||
@import "lists.less";
|
||||
@import "new-dashboard.less";
|
||||
@import "jPushMenu.less";
|
||||
|
||||
|
||||
/* Bootstrap fix that's causing a right margin to appear
|
||||
|
||||
176
awx/ui/static/less/jPushMenu.less
Normal file
176
awx/ui/static/less/jPushMenu.less
Normal file
@ -0,0 +1,176 @@
|
||||
/*********************************************
|
||||
* Copyright (c) 2014 AnsibleWorks, Inc.
|
||||
*
|
||||
* jPushMenu.less
|
||||
*
|
||||
* Custom styles for slideout menu
|
||||
*
|
||||
*/
|
||||
.cbp-spmenu {
|
||||
background: #E8E8E8;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.cbp-spmenu h3 {
|
||||
color: @white;
|
||||
font-size: 14px;
|
||||
padding: 15px 10px 15px 10px;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
background: @grey;
|
||||
}
|
||||
|
||||
.cbp-spmenu a {
|
||||
display: block;
|
||||
color: @grey-txt;
|
||||
font-size: 1.1em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.cbp-spmenu a:hover {
|
||||
background: #D8D8D8;
|
||||
color: @black;
|
||||
}
|
||||
|
||||
.cbp-spmenu a.active {
|
||||
background: #E8E8E8;
|
||||
color: @black;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Orientation-dependent styles for the content of the menu */
|
||||
|
||||
.cbp-spmenu-vertical {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 1100;
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.cbp-spmenu-vertical a {
|
||||
border-bottom: 1px solid #D8D8D8;
|
||||
padding: 10px 10px 10px 20px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-horizontal {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cbp-spmenu-horizontal h3 {
|
||||
height: 100%;
|
||||
width: 20%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.cbp-spmenu-horizontal a {
|
||||
float: left;
|
||||
width: 20%;
|
||||
padding: 0.8em;
|
||||
border-left: 1px solid #258ecd;
|
||||
}
|
||||
|
||||
/* Vertical menu that slides from the left or right */
|
||||
|
||||
.cbp-spmenu-left {
|
||||
left: -240px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-right {
|
||||
right: -240px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-left.cbp-spmenu-open {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-right.cbp-spmenu-open {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
/* Horizontal menu that slides from the top or bottom */
|
||||
|
||||
.cbp-spmenu-top {
|
||||
top: -150px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-bottom {
|
||||
bottom: -150px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-top.cbp-spmenu-open {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-bottom.cbp-spmenu-open {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
/* Push classes applied to the body */
|
||||
|
||||
.cbp-spmenu-push {
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.cbp-spmenu-push-toright {
|
||||
left: 240px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-push-toleft {
|
||||
left: -240px;
|
||||
}
|
||||
|
||||
/* Transitions */
|
||||
|
||||
.cbp-spmenu,
|
||||
.cbp-spmenu-push {
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-moz-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Example media queries */
|
||||
|
||||
@media screen and (max-width: 55.1875em){
|
||||
|
||||
.cbp-spmenu-horizontal {
|
||||
font-size: 75%;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-top {
|
||||
top: -110px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-bottom {
|
||||
bottom: -110px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-height: 26.375em){
|
||||
|
||||
.cbp-spmenu-vertical {
|
||||
font-size: 90%;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-left,
|
||||
.cbp-spmenu-push-toleft {
|
||||
left: -190px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-right {
|
||||
right: -190px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-push-toright {
|
||||
left: 190px;
|
||||
}
|
||||
}
|
||||
167
awx/ui/static/lib/jPushMenu/jPushMenu.css
Normal file
167
awx/ui/static/lib/jPushMenu/jPushMenu.css
Normal file
@ -0,0 +1,167 @@
|
||||
/* General styles for all menus */
|
||||
|
||||
.cbp-spmenu {
|
||||
background: #47a3da;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.cbp-spmenu h3 {
|
||||
color: #afdefa;
|
||||
font-size: 1.9em;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
background: #0d77b6;
|
||||
}
|
||||
|
||||
.cbp-spmenu a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 1.1em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.cbp-spmenu a:hover {
|
||||
background: #258ecd;
|
||||
}
|
||||
|
||||
.cbp-spmenu a:active {
|
||||
background: #afdefa;
|
||||
color: #47a3da;
|
||||
}
|
||||
|
||||
/* Orientation-dependent styles for the content of the menu */
|
||||
|
||||
.cbp-spmenu-vertical {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 1100;
|
||||
}
|
||||
|
||||
.cbp-spmenu-vertical a {
|
||||
border-bottom: 1px solid #258ecd;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.cbp-spmenu-horizontal {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cbp-spmenu-horizontal h3 {
|
||||
height: 100%;
|
||||
width: 20%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.cbp-spmenu-horizontal a {
|
||||
float: left;
|
||||
width: 20%;
|
||||
padding: 0.8em;
|
||||
border-left: 1px solid #258ecd;
|
||||
}
|
||||
|
||||
/* Vertical menu that slides from the left or right */
|
||||
|
||||
.cbp-spmenu-left {
|
||||
left: -240px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-right {
|
||||
right: -240px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-left.cbp-spmenu-open {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-right.cbp-spmenu-open {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
/* Horizontal menu that slides from the top or bottom */
|
||||
|
||||
.cbp-spmenu-top {
|
||||
top: -150px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-bottom {
|
||||
bottom: -150px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-top.cbp-spmenu-open {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-bottom.cbp-spmenu-open {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
/* Push classes applied to the body */
|
||||
|
||||
.cbp-spmenu-push {
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.cbp-spmenu-push-toright {
|
||||
left: 240px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-push-toleft {
|
||||
left: -240px;
|
||||
}
|
||||
|
||||
/* Transitions */
|
||||
|
||||
.cbp-spmenu,
|
||||
.cbp-spmenu-push {
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-moz-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Example media queries */
|
||||
|
||||
@media screen and (max-width: 55.1875em){
|
||||
|
||||
.cbp-spmenu-horizontal {
|
||||
font-size: 75%;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-top {
|
||||
top: -110px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-bottom {
|
||||
bottom: -110px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-height: 26.375em){
|
||||
|
||||
.cbp-spmenu-vertical {
|
||||
font-size: 90%;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-left,
|
||||
.cbp-spmenu-push-toleft {
|
||||
left: -190px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-right {
|
||||
right: -190px;
|
||||
}
|
||||
|
||||
.cbp-spmenu-push-toright {
|
||||
left: 190px;
|
||||
}
|
||||
}
|
||||
99
awx/ui/static/lib/jPushMenu/jPushMenu.js
Normal file
99
awx/ui/static/lib/jPushMenu/jPushMenu.js
Normal file
@ -0,0 +1,99 @@
|
||||
/*!
|
||||
* jPushMenu.js
|
||||
* 1.1.1
|
||||
* @author: takien
|
||||
* http://takien.com
|
||||
* Original version (pure JS) is created by Mary Lou http://tympanus.net/
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
$.fn.jPushMenu = function(customOptions) {
|
||||
var jPushMenu,
|
||||
o = $.extend({}, $.fn.jPushMenu.defaultOptions, customOptions);
|
||||
|
||||
/* add class to the body.*/
|
||||
|
||||
$('body').addClass(o.bodyClass);
|
||||
$(this).addClass('jPushMenuBtn');
|
||||
$(this).click(function() {
|
||||
var target = '',
|
||||
push_direction = '';
|
||||
|
||||
if($(this).is('.'+o.showLeftClass)) {
|
||||
target = '.cbp-spmenu-left';
|
||||
push_direction = 'toright';
|
||||
}
|
||||
else if($(this).is('.'+o.showRightClass)) {
|
||||
target = '.cbp-spmenu-right';
|
||||
push_direction = 'toleft';
|
||||
}
|
||||
else if($(this).is('.'+o.showTopClass)) {
|
||||
target = '.cbp-spmenu-top';
|
||||
}
|
||||
else if($(this).is('.'+o.showBottomClass)) {
|
||||
target = '.cbp-spmenu-bottom';
|
||||
}
|
||||
|
||||
|
||||
$(this).toggleClass(o.activeClass);
|
||||
$(target).toggleClass(o.menuOpenClass);
|
||||
|
||||
if ($(this).is('.'+o.pushBodyClass)) {
|
||||
$('body').toggleClass( 'cbp-spmenu-push-'+push_direction );
|
||||
}
|
||||
|
||||
/* disable all other button*/
|
||||
$('.jPushMenuBtn').not($(this)).toggleClass('disabled');
|
||||
|
||||
return false;
|
||||
});
|
||||
jPushMenu = {
|
||||
close: function () {
|
||||
$('.jPushMenuBtn,body,.cbp-spmenu').removeClass('disabled active cbp-spmenu-open cbp-spmenu-push-toleft cbp-spmenu-push-toright');
|
||||
}
|
||||
};
|
||||
|
||||
if (o.closeOnClickInside) {
|
||||
$(document).click(function() {
|
||||
jPushMenu.close();
|
||||
});
|
||||
|
||||
$('.cbp-spmenu,.toggle-menu').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
if (o.closeOnClickOutside) {
|
||||
$(document).click(function() {
|
||||
jPushMenu.close();
|
||||
});
|
||||
|
||||
$('.cbp-spmenu,.toggle-menu').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
// On Click Link
|
||||
if (o.closeOnClickLink) {
|
||||
$('.cbp-spmenu a').on('click',function(){
|
||||
jPushMenu.close();
|
||||
});
|
||||
}
|
||||
};
|
||||
/* in case you want to customize class name,
|
||||
* do not directly edit here, use function parameter when call jPushMenu.
|
||||
*/
|
||||
$.fn.jPushMenu.defaultOptions = {
|
||||
bodyClass : 'cbp-spmenu-push',
|
||||
activeClass : 'menu-active',
|
||||
showLeftClass : 'menu-left',
|
||||
showRightClass : 'menu-right',
|
||||
showTopClass : 'menu-top',
|
||||
showBottomClass : 'menu-bottom',
|
||||
menuOpenClass : 'cbp-spmenu-open',
|
||||
pushBodyClass : 'push-body',
|
||||
closeOnClickOutside: true,
|
||||
closeOnClickInside: true,
|
||||
closeOnClickLink: true
|
||||
};
|
||||
})(jQuery);
|
||||
@ -171,12 +171,30 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="ansible-mobile-menu">
|
||||
<h3>Hello, <span ng-bind="current_user.username"></span></h3>
|
||||
<a href="#home" id="main_home_link" >Dashboard</a></li>
|
||||
<a href="#organizations" id="main_organizations_link">Organizations</a></li>
|
||||
<a href="#users" id="main_users_link">Users</a></li>
|
||||
<a href="#teams" id="main_teams_link">Teams</a></li>
|
||||
<a href="#credentials" id="main_credentials_link">Credentials</a></li>
|
||||
<a href="#projects" id="main_projects_link">Projects</a></li>
|
||||
<a href="#inventories" id="main_inventories_link">Inventories</a></li>
|
||||
<a href="#job_templates" id="main_job_templates_link">Job Templates</a></li>
|
||||
<a href="#jobs" id="main_jobs_link">Jobs</a></li>
|
||||
<a href="" id="main_view_user" ng-click="viewCurrentUser()">Account Settings</a></li>
|
||||
<a href="" id="main_view_license" ng-click="viewLicense()">View License</a></li>
|
||||
<a href="https://ansibleworks.zendesk.com/anonymous_requests/new" id="main_contact_support" target="_blank">Contact Support</a></li>
|
||||
<a href="#/logout" id="main_logout">Logout</a>
|
||||
</nav>
|
||||
|
||||
<div id="main-menu-container">
|
||||
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<div id="socket-beacon-div"></div>
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse">
|
||||
<button type="button" class="navbar-toggle toggle-menu menu-right" id="main-menu-toggle-button">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
@ -425,6 +443,11 @@
|
||||
<script src="{{ STATIC_URL }}lib/d3js/build/d3.v3.min.js"></script>
|
||||
<script src="{{ STATIC_URL }}lib/novus-nvd3/nv.d3.min.js"></script>
|
||||
<script src="{{ STATIC_URL }}lib/d3Donut/d3Donut.js"></script>
|
||||
<script src="{{ STATIC_URL }}lib/jPushMenu/jPushMenu.js"></script>
|
||||
|
||||
<script>
|
||||
$('#main-menu-toggle-button').jPushMenu();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user