From 55867c784506284caf1d12a8c6a28c281074e7ed Mon Sep 17 00:00:00 2001 From: Jared Lee Date: Fri, 4 Nov 2016 16:51:02 +1300 Subject: [PATCH] Hotfix/remove search hamburger (#125) * Removed hamburger and inserted close button in sidebar * Replace sidebar mobile slide out with fade in * Updated mobile menu button to translate into different languages --- css/layout.css | 169 +++++++++++---------- javascript/DocumentationViewer.js | 29 ++-- lang/en.yml | 1 + templates/DocumentationViewer.ss | 12 +- templates/DocumentationViewer_all.ss | 12 +- templates/DocumentationViewer_results.ss | 6 - templates/Includes/DocumentationSidebar.ss | 1 + 7 files changed, 119 insertions(+), 111 deletions(-) diff --git a/css/layout.css b/css/layout.css index 3309e0a..68e2dad 100644 --- a/css/layout.css +++ b/css/layout.css @@ -49,7 +49,7 @@ html { /*! sidebar */ #sidebar { float: left; - padding-top:24px; + padding-top:20px; } #sidebar .nav, @@ -97,6 +97,9 @@ html { background-color: #1389ce; color: #fff; text-decoration: none; + -webkit-transition: all 500ms ease; + -moz-transition: all 500ms ease; + transition: all 500ms ease; } #sidebar .nav .section .top { @@ -557,7 +560,7 @@ html { color:#696868; } -.menu-toggle { +.menu-open { display:none; } @@ -683,6 +686,10 @@ html { #sidebar { width: 25%; } + /* Removes close button on desktop view */ + #sidebar .menu-close { + display: none; + } .documentation_children li { width:33%; @@ -694,19 +701,44 @@ html { width: 1170px; } } - +/* Sidebar mobile styles (default:hidden) */ @media (max-width: 991px) { #sidebar { - width: 265px; position: fixed; - background: #fff; - left: -300px; - bottom: 0; + background: transparent; top: 0; - z-index: 9999; - box-shadow: -2px 1px 40px -3px #999; - overflow-y:auto; - overflow-x:hidden; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + z-index: -1; /* [-1] Sidebar: hidden, [0] Page, [1] Sidebar: Show */ + box-shadow: none; + overflow-x: hidden; + overflow-y: auto; + -webkit-transition: all 300ms ease; + -moz-transition: all 300ms ease; + transition: all 300ms ease; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -moz-box-shadow: none!important; + -webkit-box-shadow: none!important; + box-shadow: none!important; + } + + /* Opened sidebar styles */ + #sidebar.open { + z-index: 1; + background: #fff; + opacity: 1; + } + /* Fade out sidebar state styles before class is removed */ + #sidebar.hide { + z-index: 1; + background: transparent; + color: white; } #content { @@ -726,81 +758,56 @@ html { font-size:14px; } - .wrapper .menu-toggle { + /* Menu button styles */ + .wrapper .menu-open { + display: block; + position: relative; + width: 70px; + height: 40px; + margin-left: auto; + margin-bottom: 20px; + padding: 7px 10px; + font-weight: 700; + text-decoration: none; + text-transform: uppercase; + color: #1389ce; + background-color: transparent; + border: 2px solid #1389ce; + border-radius: 5px; + + cursor: pointer; + -webkit-user-select: none; /* Chrome/Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+ */ + } + + .wrapper .menu-open:hover { + background-color: #1389ce; + color: #fff; + transition: 300ms 0.1s ease; + } + + /* Close button styles */ + .menu-close { display: block; position: relative; margin-left: auto; - margin-bottom: 20px; - width: 30px; - height: 39px; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - -webkit-transition: .5s ease-in-out; - -moz-transition: .5s ease-in-out; - -o-transition: .5s ease-in-out; - transition: .5s ease-in-out; + margin-right: 10px; + padding: 0px 12px; + font-size: 33px; + font-weight: 700; + line-height: 33px; + text-decoration: none; + color: #1389ce; + width: 40px; + height: 40px; cursor: pointer; + -webkit-user-select: none; /* Chrome/Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+ */ } - - .menu-toggle span { - display: block; - position: absolute; - height: 3px; - width: 100%; - background: #1389ce; - border-radius: 9px; - left: 0; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - -webkit-transition: .25s ease-in-out; - -moz-transition: .25s ease-in-out; - -o-transition: .25s ease-in-out; - transition: .25s ease-in-out; - } - - /* Hamburger line positioning */ - .menu-toggle span:nth-child(1) { - top: 8px; - } - - .menu-toggle span:nth-child(2), - .menu-toggle span:nth-child(3) { - top: 18px; - } - - .menu-toggle span:nth-child(4) { - top: 28px; - } - - /* X line Animation */ - .menu-toggle.open span:nth-child(1) { - top: 18px; - width: 0%; - left: 50%; - } - - .menu-toggle.open span:nth-child(2) { - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); - } - - .menu-toggle.open span:nth-child(3) { - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); - } - - .menu-toggle.open span:nth-child(4) { - top: 18px; - width: 0%; - left: 50%; + .menu-close:hover { + text-decoration: none; } } diff --git a/javascript/DocumentationViewer.js b/javascript/DocumentationViewer.js index 60ddea2..182114c 100755 --- a/javascript/DocumentationViewer.js +++ b/javascript/DocumentationViewer.js @@ -1,15 +1,26 @@ ;(function($) { $(document).ready(function() { - //toggle the side menu when in mobile - $('.menu-toggle').on('click', function (e) { - e.preventDefault(); - var left = $('#sidebar').is('.visible') ? -270 : 0; - $('#sidebar').animate({ left: left}, 'fast', function() { - $(this).toggleClass('visible'); - }); - $(this).toggleClass('open'); - }) + // Open sidebar on mobile + $('.menu-open').click(function(){ + $('#sidebar').removeClass('hide').addClass('open'); + return false; + }); + // Close sidebar on mobile + $('.menu-close').click(function(){ + $('#sidebar').removeClass('open').addClass('hide'); + + setTimeout(function() { + $('#sidebar').removeClass('hide'); + }, 500); + return false; + }); + // Close sidebar by hitting of ESC + $(document).keyup(function(e) { + if (e.keyCode == 27) { + $('#sidebar').removeClass('open'); + } + }); var switched = false; diff --git a/lang/en.yml b/lang/en.yml index da293ab..139d9d6 100644 --- a/lang/en.yml +++ b/lang/en.yml @@ -6,6 +6,7 @@ en: CHANGE: Change KEYWORDS: Keywords LANGUAGE: Language + MENU: Menu MODULES: Modules OPENSEARCHDESC: 'Search the documentation' OPENSEARCHNAME: 'Documentation Search' diff --git a/templates/DocumentationViewer.ss b/templates/DocumentationViewer.ss index 1ad5419..5ea89ae 100755 --- a/templates/DocumentationViewer.ss +++ b/templates/DocumentationViewer.ss @@ -5,12 +5,12 @@
class="has_versions"<% end_if %>>
- - - - - - +
+ + + <%t DocumentationViewer.MENU "Menu" %> + +
<% if Breadcrumbs.count > 1 %> <% include DocumentationBreadcrumbs %> diff --git a/templates/DocumentationViewer_all.ss b/templates/DocumentationViewer_all.ss index 56770fc..dd46420 100644 --- a/templates/DocumentationViewer_all.ss +++ b/templates/DocumentationViewer_all.ss @@ -8,15 +8,9 @@

- - - - - - - Documentation - / - Index + Documentation + / + Index

diff --git a/templates/DocumentationViewer_results.ss b/templates/DocumentationViewer_results.ss index 74ebe0f..637d842 100644 --- a/templates/DocumentationViewer_results.ss +++ b/templates/DocumentationViewer_results.ss @@ -8,12 +8,6 @@

- - - - - - Documentation / Search diff --git a/templates/Includes/DocumentationSidebar.ss b/templates/Includes/DocumentationSidebar.ss index 1b99273..687afec 100644 --- a/templates/Includes/DocumentationSidebar.ss +++ b/templates/Includes/DocumentationSidebar.ss @@ -1,4 +1,5 @@