haskal
/
vagrant
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

rename sidebar to mobile nav to avoid conflict

This commit is contained in:
captainill 2015-11-14 14:41:17 -08:00
parent 558c1773c4
commit c903a064bb
4 changed files with 73 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
website/www/source/javascripts/Sidebar.js
View File

@ -11,9 +11,9 @@
constructor: function(){ constructor: function(){
this.$body = $('body'); this.$body = $('body');
this.$overlay = $('.sidebar-overlay'); this.$overlay = $('.mobile-nav-overlay');
this.$sidebar = $('#sidebar'); this.$sidebar = $('#mobile-nav');
this.$sidebarHeader = $('#sidebar .sidebar-header'); this.$sidebarHeader = $('#mobile-nav .mobile-nav-header');
this.$toggleButton = $('.navbar-toggle'); this.$toggleButton = $('.navbar-toggle');
this.sidebarImg = this.$sidebarHeader.css('background-image'); this.sidebarImg = this.$sidebarHeader.css('background-image');
@ -25,7 +25,7 @@
_this.$toggleButton.on('click', function() { _this.$toggleButton.on('click', function() {
_this.$sidebar.toggleClass('open'); _this.$sidebar.toggleClass('open');
if ((_this.$sidebar.hasClass('sidebar-fixed-left') || _this.$sidebar.hasClass('sidebar-fixed-right')) && _this.$sidebar.hasClass('open')) { if ((_this.$sidebar.hasClass('mobile-nav-fixed-left') || _this.$sidebar.hasClass('mobile-nav-fixed-right')) && _this.$sidebar.hasClass('open')) {
_this.$overlay.addClass('active'); _this.$overlay.addClass('active');
_this.$body.css('overflow', 'hidden'); _this.$body.css('overflow', 'hidden');
} else { } else {

22
website/www/source/layouts/_mobile_nav.erb
View File

@ -1,18 +1,18 @@
<!-- Overlay for fixed sidebar --> <!-- Overlay for fixed mobile-nav -->
<div class="sidebar-overlay"></div> <div class="mobile-nav-overlay"></div>
<!-- Material sidebar --> <!-- Material mobile-nav -->
<aside id="sidebar" class="sidebar sidebar-default sidebar-fixed-right" role="navigation"> <aside id="mobile-nav" class="mobile-nav mobile-nav-default mobile-nav-fixed-right" role="navigation">
<!-- Sidebar header --> <!-- mobile-nav header -->
<div class="sidebar-header header-cover"> <div class="mobile-nav-header header-cover">
<!-- Sidebar brand image --> <!-- mobile-nav brand image -->
<div class="sidebar-image"> <div class="mobile-nav-image">
<a class="sidebar-logo" href="/">Vagrant</a> <a class="mobile-nav-logo" href="/">Vagrant</a>
</div> </div>
</div> </div>
<!-- Sidebar navigation --> <!-- mobile-nav navigation -->
<ul class="main nav sidebar-nav"> <ul class="main nav mobile-nav-nav">
<li class="pill"><a href="/vmware">VMware Integration</a></li> <li class="pill"><a href="/vmware">VMware Integration</a></li>
<li><a href="/downloads.html">Downloads</a></li> <li><a href="/downloads.html">Downloads</a></li>
<li><a href="https://docs.vagrantup.com/">Documentation</a></li> <li><a href="https://docs.vagrantup.com/">Documentation</a></li>

4
website/www/source/stylesheets/_header.less
View File

@ -13,7 +13,7 @@
top: 0; top: 0;
left: 0; left: 0;
background-color: @white; background-color: @white;
z-index: 9999999999; z-index: 1001;
&.docs { &.docs {
background: @gray-background; background: @gray-background;
@ -130,7 +130,7 @@
.navbar-toggle{ .navbar-toggle{
padding-top: 0; padding-top: 0;
} }
.navbar-brand { .navbar-brand {
.logo{ .logo{
width: @project-logo-width * .75; width: @project-logo-width * .75;

112
website/www/source/stylesheets/hashicorp-shared/_hashicorp-mobile-nav.less
View File

@ -1,5 +1,5 @@
// //
// Hashicorp Sidebar // Hashicorp mobile-nav
// - Shared throughout projects // - Shared throughout projects
// - Edits should not be made here // - Edits should not be made here
// -------------------------------------------------- // --------------------------------------------------
@ -22,22 +22,22 @@
@link-disabled-color: @gray-light; @link-disabled-color: @gray-light;
@link-disabled-bg: transparent; @link-disabled-bg: transparent;
/* -- Sidebar style ------------------------------- */ /* -- mobile-nav style ------------------------------- */
// Sidebar variables // mobile-nav variables
// -------------------------------------------------- // --------------------------------------------------
@zindex-sidebar-fixed: 1035; @zindex-mobile-nav-fixed: 1035;
@sidebar-desktop-width: 280px; @mobile-nav-desktop-width: 280px;
@sidebar-width: 240px; @mobile-nav-width: 240px;
@sidebar-padding: 16px; @mobile-nav-padding: 16px;
@sidebar-divider: @sidebar-padding/2; @mobile-nav-divider: @mobile-nav-padding/2;
@sidebar-icon-width: 40px; @mobile-nav-icon-width: 40px;
@sidebar-icon-height: 20px; @mobile-nav-icon-height: 20px;
.sidebar-nav-base { .mobile-nav-nav-base {
text-align: center; text-align: center;
&:last-child{ &:last-child{
@ -105,13 +105,13 @@
} }
// //
// Sidebar // mobile-nav
// -------------------------------------------------- // --------------------------------------------------
// Sidebar Elements // mobile-nav Elements
// //
// Basic style of sidebar elements // Basic style of mobile-nav elements
.sidebar { .mobile-nav {
position: relative; position: relative;
display: block; display: block;
min-height: 100%; min-height: 100%;
@ -127,22 +127,22 @@
list-style-type: none; list-style-type: none;
} }
.sidebar-divider, .divider { .mobile-nav-divider, .divider {
width: 80%; width: 80%;
height: 1px; height: 1px;
margin: 8px auto; margin: 8px auto;
background-color: lighten(@gray, 20%); background-color: lighten(@gray, 20%);
} }
// Sidebar heading // mobile-nav heading
//---------------- //----------------
.sidebar-header { .mobile-nav-header {
position: relative; position: relative;
margin-bottom: @sidebar-padding; margin-bottom: @mobile-nav-padding;
.transition(all .2s ease-in-out); .transition(all .2s ease-in-out);
} }
.sidebar-image { .mobile-nav-image {
padding-top: 24px; padding-top: 24px;
img { img {
display: block; display: block;
@ -151,14 +151,14 @@
} }
// Sidebar icons // mobile-nav icons
//---------------- //----------------
.sidebar-icon { .mobile-nav-icon {
display: inline-block; display: inline-block;
height: @sidebar-icon-height; height: @mobile-nav-icon-height;
margin-right: @sidebar-divider; margin-right: @mobile-nav-divider;
text-align: left; text-align: left;
font-size: @sidebar-icon-height; font-size: @mobile-nav-icon-height;
vertical-align: middle; vertical-align: middle;
&:before, &:after { &:before, &:after {
@ -166,11 +166,11 @@
} }
} }
.sidebar-nav { .mobile-nav-nav {
margin: 0; margin: 0;
padding: 0; padding: 0;
.sidebar-nav-base(); .mobile-nav-nav-base();
// Links // Links
//---------------- //----------------
@ -197,73 +197,73 @@
} }
} }
// Sidebar toggling // mobile-nav toggling
// //
// Hide sidebar // Hide mobile-nav
.sidebar { .mobile-nav {
width: 0; width: 0;
.translate3d(-@sidebar-desktop-width, 0, 0); .translate3d(-@mobile-nav-desktop-width, 0, 0);
&.open { &.open {
min-width: @sidebar-desktop-width; min-width: @mobile-nav-desktop-width;
width: @sidebar-desktop-width; width: @mobile-nav-desktop-width;
.translate3d(0, 0, 0); .translate3d(0, 0, 0);
} }
} }
// Sidebar positions: fix the left/right sidebars // mobile-nav positions: fix the left/right mobile-navs
.sidebar-fixed-left, .mobile-nav-fixed-left,
.sidebar-fixed-right, .mobile-nav-fixed-right,
.sidebar-stacked { .mobile-nav-stacked {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: @zindex-sidebar-fixed; z-index: @zindex-mobile-nav-fixed;
} }
.sidebar-stacked { .mobile-nav-stacked {
left: 0; left: 0;
} }
.sidebar-fixed-left { .mobile-nav-fixed-left {
left: 0; left: 0;
box-shadow: 2px 0px 25px rgba(0,0,0,0.15); box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
-webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15); -webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
} }
.sidebar-fixed-right { .mobile-nav-fixed-right {
right: 0; right: 0;
box-shadow: 0px 2px 25px rgba(0,0,0,0.15); box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
-webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
.translate3d(@sidebar-desktop-width, 0, 0); .translate3d(@mobile-nav-desktop-width, 0, 0);
&.open { &.open {
.translate3d(0, 0, 0); .translate3d(0, 0, 0);
} }
.icon-material-sidebar-arrow:before { .icon-material-mobile-nav-arrow:before {
content: "\e614"; // icon-material-arrow-forward content: "\e614"; // icon-material-arrow-forward
} }
} }
// Sidebar size // mobile-nav size
// //
// Change size of sidebar and sidebar elements on small screens // Change size of mobile-nav and mobile-nav elements on small screens
@media (max-width: @screen-tablet) { @media (max-width: @screen-tablet) {
.sidebar.open { .mobile-nav.open {
min-width: @sidebar-width; min-width: @mobile-nav-width;
width: @sidebar-width; width: @mobile-nav-width;
} }
.sidebar .sidebar-header { .mobile-nav .mobile-nav-header {
//height: @sidebar-width * 9/16; // 16:9 header dimension //height: @mobile-nav-width * 9/16; // 16:9 header dimension
} }
.sidebar .sidebar-image { .mobile-nav .mobile-nav-image {
/* img { /* img {
width: @sidebar-width/4 - @sidebar-padding; width: @mobile-nav-width/4 - @mobile-nav-padding;
height: @sidebar-width/4 - @sidebar-padding; height: @mobile-nav-width/4 - @mobile-nav-padding;
} */ } */
} }
} }
.sidebar-overlay { .mobile-nav-overlay {
visibility: hidden; visibility: hidden;
position: fixed; position: fixed;
top: 0; top: 0;
@ -272,7 +272,7 @@
bottom: 0; bottom: 0;
opacity: 0; opacity: 0;
background: @white; background: @white;
z-index: @zindex-sidebar-fixed - 1; z-index: @zindex-mobile-nav-fixed - 1;
-webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
-moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
@ -284,7 +284,7 @@
transform: translateZ(0); transform: translateZ(0);
} }
.sidebar-overlay.active { .mobile-nav-overlay.active {
opacity: 0.3; opacity: 0.3;
visibility: visible; visibility: visible;
-webkit-transition-delay: 0; -webkit-transition-delay: 0;