From e38b740d88f571f35d425aa2655a5dc28715039f Mon Sep 17 00:00:00 2001 From: Cam Findlay Date: Fri, 21 Oct 2016 10:49:50 +1300 Subject: [PATCH] Create sidebar hamburger menu for mobile (#121) * Create sidebar hamburger menu for mobile * Improve sidebar UX and mobile menu * Fixed sidebar UX bug where blue text breadcrumb didn't appear and fixed hover/focus styling * Improved UX of hamburger by applying toggle animations --- css/layout.css | 278 ++++++++++++------ css/typography.css | 188 ++++++------ javascript/DocumentationViewer.js | 97 ++---- templates/DocumentationViewer.ss | 21 +- templates/DocumentationViewer_all.ss | 31 +- templates/DocumentationViewer_results.ss | 33 ++- .../Includes/DocumentationBreadcrumbs.ss | 7 +- templates/Includes/DocumentationSidebar.ss | 5 +- .../Includes/DocumentationTableContents.ss | 2 +- 9 files changed, 356 insertions(+), 306 deletions(-) diff --git a/css/layout.css b/css/layout.css index aab40cd..73aa760 100644 --- a/css/layout.css +++ b/css/layout.css @@ -1,5 +1,5 @@ -html { - background: #fff; +html { + background: #fff; font: 15px/1.5 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #586667; padding-bottom: 40px; @@ -29,7 +29,7 @@ html { .introduction p { font-size: 20px; margin-bottom: 10px; - max-width: 80%; + max-width: 80%; } .no-box { @@ -43,7 +43,7 @@ html { } #content .box { - padding: 30px; + padding: 30px 5px; } /*! sidebar */ @@ -60,39 +60,48 @@ html { } #sidebar .nav { - font-size: 16px; + font-size: 16px; } #sidebar .nav .top { width: 100%; display: block; line-height: 15px; - color: #808c8d; + color: #808c8d; padding: 15px 15px 14px; - text-transform: uppercase; + text-transform: uppercase; + } + + #sidebar .nav .current .top { + color: #1389CE; + font-weight: 700; } #sidebar .nav a { display:block; - padding-top:8px; - padding-bottom:8px; + padding-top:7px; + padding-bottom:7px; padding-right:12px; } - #sidebar .nav a:hover { - text-decoration: none; - background:#eee; - color:#808c8d; - } - - #sidebar .nav a.current:hover { - background-color: #03527a; + /* Sidebar hover states */ + #sidebar .nav a:hover, + #sidebar .nav a.top:hover, + #sidebar .nav .section ul li .section:hover, + #sidebar .nav a.current:hover, + /* Sidebar focus states */ + #sidebar .nav a:focus, + #sidebar .nav a.top:focus, + #sidebar .nav .section ul li .section:focus, + #sidebar .nav a.current:focus { + background-color: #1389ce; color: #fff; + text-decoration: none; } #sidebar .nav .section .top { - background: #f6f7f8; - border: none; + border: none; + color: #1389CE; } #sidebar li { @@ -101,15 +110,13 @@ html { } #sidebar li a.current { - background:rgb(3, 91, 136); color:#fff; } #sidebar .nav > li {} - + #sidebar .nav .section ul, #sidebar .nav .current ul { - background: #f6f7f8; border-bottom: 1px solid #eee; margin: 0; padding:0; @@ -117,17 +124,24 @@ html { #sidebar .nav .section ul li a, #sidebar .nav .current ul li a { - padding-left:24px; + padding-left:30px; + } + + #sidebar .nav .section ul li a.section { + color: #1389CE; } #sidebar .nav .section ul li ul li a, #sidebar .nav .current ul li ul li a { - padding-left:42px; + padding-left:48px; font-size:14px; } - #sidebar .nav a.current {} - + #sidebar .nav a.current { + color: #1389CE; + font-weight: 700; + } + #sidebar .minor-nav a { color: #181C17; opacity: 0.4; @@ -164,7 +178,7 @@ html { } #masthead { - padding: 50px 0; + padding: 50px 0; background:#f6f7f8; position:relative; } @@ -206,71 +220,61 @@ html { .versions .current { background: #fff; } - -.menu-toggle { - position:absolute; - right:20px; - top:14px; -} - -.menu-toggle img { - width:32px; -} /*! language */ #language {} - #language label { - float: left; - width: 830px; - line-height: 19px; - text-align: right; - font-size: 11px; + #language label { + float: left; + width: 830px; + line-height: 19px; + text-align: right; + font-size: 11px; color: #999; } - #language select { - float: right; + #language select { + float: right; width: 120px; } - #language input.action { - float: right; + #language input.action { + float: right; margin-top: 4px; } /* Header */ -#header { - padding: 0 0 14px 0; +#header { + padding: 0 0 14px 0; overflow: hidden; } - #header h1 { - margin: 0; - line-height: 38px; - float: left; + #header h1 { + margin: 0; + line-height: 38px; + float: left; } - #header h1 a { - text-decoration: none; - font-size: 22px; - color: #0973A6; + #header h1 a { + text-decoration: none; + font-size: 22px; + color: #0973A6; letter-spacing: -1px; } - - #header .logo { - background: #fff url(../../docsviewer/images/logo.jpg) no-repeat bottom left; - height: 36px; width: 140px; - display: inline-block; + + #header .logo { + background: #fff url(../../docsviewer/images/logo.jpg) no-repeat bottom left; + height: 36px; width: 140px; + display: inline-block; } /* Search Results */ #search-results {} - #search-results li { - list-style: none; - border-bottom: 1px solid #ddd; - padding: 0 0 19px 0; + #search-results li { + list-style: none; + border-bottom: 1px solid #ddd; + padding: 0 0 19px 0; margin: 0 0 20px 0; background: none; } @@ -286,16 +290,16 @@ html { } /* Footer */ -#footer { - margin: 20px auto; +#footer { + margin: 20px auto; padding: 0 30px; } - #footer p { + #footer p { color: #798D85; } - #footer p a { + #footer p a { color: #798D85; } @@ -313,7 +317,7 @@ html { } .pagination { - margin: 27px 0; + margin: 27px 0; } .pagination li { @@ -409,17 +413,17 @@ html { * close * */ -#content .warningBox h5, -#content .hint h5, -#content .notice h5, -#content .warning h5, -#content .info h5 { - margin-bottom: 0px; +#content .warningBox h5, +#content .hint h5, +#content .notice h5, +#content .warning h5, +#content .info h5 { + margin-bottom: 0px; } -.hint a.close, -.notice a.close, -.warning a.close, +.hint a.close, +.notice a.close, +.warning a.close, .info a.close { background:url(../../docsviewer/images/ico_close_off.png) no-repeat scroll left top transparent; display:block; @@ -496,7 +500,7 @@ html { background: #f4f4f4; } -.info { +.info { background: #CAF7FF; } @@ -509,24 +513,24 @@ html { background: url(../../docsviewer/images/warning.png) no-repeat 18px 14px; } -.warningBoxTop h1 { +.warningBoxTop h1 { margin-bottom: 0; } -.warningBoxTop ul { - margin: 9px 0 18px; +.warningBoxTop ul { + margin: 9px 0 18px; } -.warningBoxTop li { - margin-bottom: 0; +.warningBoxTop li { + margin-bottom: 0; } .warningBox { margin-top: 0; } -.warningBoxBottom { - background-color: #0973A6; +.warningBoxBottom { + background-color: #0973A6; padding: 12px 0 16px; } @@ -537,20 +541,20 @@ html { .doc-breadcrumbs {} - .doc-breadcrumbs p { - margin: 0 0 5px 0; + .doc-breadcrumbs p { + margin: 0 0 5px 0; color: #999; font-size: 38px; } - .doc-breadcrumbs p a { + .doc-breadcrumbs p a { color: rgb(3, 91, 136); text-decoration:none; font-weight:200; } .doc-breadcrumbs p a.current { - color:#696868; + color:#696868; } .menu-toggle { @@ -700,7 +704,7 @@ html { bottom: 0; top: 0; z-index: 9999; - box-shadow: -2px 1px 12px -3px #ccc; + box-shadow: -2px 1px 40px -3px #999; overflow-y:auto; overflow-x:hidden; } @@ -711,19 +715,99 @@ html { } #masthead { - padding:20px 0; + padding:20px 0; } .doc-breadcrumbs p { - font-size:18px; + font-size:18px; } .introduction p { font-size:14px; } - .menu-toggle { - display:block; + .wrapper .menu-toggle { + display: block; + position: relative; + margin-left: auto; + margin-bottom: 20px; + width: 30px; + height: 30px; + -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; + cursor: pointer; + } + + .menu-toggle span { + display: block; + position: absolute; + height: 3px; + width: 100%; + background: #1389ce; + border-radius: 9px; + opacity: 1; + 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; + } + /* Icon 3 */ + + .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; + } + + .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%; + } +} + +@media (max-width:992px) { + #content { + float: right; + width: 100%; } } diff --git a/css/typography.css b/css/typography.css index 027a222..7febc87 100644 --- a/css/typography.css +++ b/css/typography.css @@ -1,51 +1,51 @@ /*! text selection */ -::-moz-selection { +::-moz-selection { text-shadow:none; color: #ffffff; background: #1389CE; } -::selection { +::selection { text-shadow: none; color: #ffffff; background: #1389CE; } /*! links */ -a { - color: #1389ce; - text-decoration: none; +a { + color: #808c8d; + text-decoration: none; } a:hover, - a:focus { + a:focus { text-decoration: underline; } a[href$=".pdf"], a[href$=".PDF"], -a.pdf { +a.pdf { padding: 2px; - padding-left: 20px; + padding-left: 20px; background: url(../../docsviewer/images/icons/page_white_acrobat.png) no-repeat left center; } - + a[href$=".doc"], a[href$=".DOC"], a.doc { padding: 2px; - padding-left: 20px; + padding-left: 20px; background: url(../../docsviewer/images/icons/page_word.png) no-repeat left center; } - + a[href$=".xls"], a[href$=".XLS"], a.xls { padding: 2px; - padding-left: 20px; - background: url(../../docsviewer/images/icons/page_excel.png) no-repeat left center; + padding-left: 20px; + background: url(../../docsviewer/images/icons/page_excel.png) no-repeat left center; } - + a[href$=".gz"], a[href$=".GZ"], a[href$=".gzip"], @@ -54,22 +54,22 @@ a[href$=".zip"], a[href$=".ZIP"], a.archive { padding: 2px; - padding-left: 20px; - background: url(../../docsviewer/images/icons/page_white_zip.png) no-repeat left center; + padding-left: 20px; + background: url(../../docsviewer/images/icons/page_white_zip.png) no-repeat left center; } - + a[href$=".exe"], a[href$=".EXE"], a.application { padding: 2px; padding-left: 20px; - background: url(../../docsviewer/images/icons/application.png) no-repeat left center; + background: url(../../docsviewer/images/icons/application.png) no-repeat left center; } /*! pargraphs */ -p { - font-size: 15px; - line-height: 1.5; +p { + font-size: 15px; + line-height: 1.5; margin: 0 0 25px; } @@ -78,36 +78,36 @@ p { } /*! lists */ -ul { - margin: 10px 0 20px 20px; +ul { + margin: 10px 0 20px 20px; padding: 0; } -li, dd, li p { - font-size: 15px; +li, dd, li p { + font-size: 15px; margin: 0 0 10px 0; line-height: 1.5; } -li { - list-style-position: inside; +li { + list-style-position: inside; } li ul, -li ol { +li ol { margin: 0 0 5px 20px; } -dl { - margin: 7px 0 21px 0; +dl { + margin: 7px 0 21px 0; } -dt { - font-weight: bold; +dt { + font-weight: bold; } -dd { - margin: 5px 0 10px 20px; +dd { + margin: 5px 0 10px 20px; } .semantic { @@ -132,10 +132,10 @@ ul.third { } /*! headers */ -h1 { +h1 { font-size: 35px; line-height: 40px; - margin-bottom: 10px; + margin-bottom: 10px; margin-top: 0; letter-spacing: -1px; color:rgb(3, 91, 136); @@ -145,44 +145,44 @@ h1 { font-size: 18px; line-height: 20px; } - + h1 + p { margin-top: 30px; } -h2 { - font-size: 28px; - line-height: 30px; +h2 { + font-size: 28px; + line-height: 30px; margin: 40px 0 20px; border-top: 1px solid #eee; padding-top: 29px; letter-spacing: -1px; - color: rgb(3, 91, 136); + color: rgb(3, 91, 136); } -h3 { - font-size: 20px; - line-height: 20px; +h3 { + font-size: 20px; + line-height: 20px; margin: 30px 0 10px; - color: #181c1d; + color: #181c1d; } -h4 { - font-size: 16px; - margin-bottom: 14px; +h4 { + font-size: 16px; + margin-bottom: 14px; line-height: 21px; } -h5 { - font-size: 14px; - line-height: 14px; +h5 { + font-size: 14px; + line-height: 14px; margin-bottom: 7px; } h6 { - font-size: 12px; - line-height: 15px; - margin-bottom: 10px; + font-size: 12px; + line-height: 15px; + margin-bottom: 10px; } h1 .heading-anchor-link, @@ -210,16 +210,16 @@ h6 .heading-anchor-link { /*! images */ img { max-width: 100%; - border: 1px solid #ccc; + border: 1px solid #ccc; padding: 6px; margin: 10px 0; border-radius: 3px; } /*! code */ -pre { - margin: 20px 0 30px; - font: 13px/20px Monaco, 'Bitstream Vera Sans Mono', 'Courier New', monospace; +pre { + margin: 20px 0 30px; + font: 13px/20px Monaco, 'Bitstream Vera Sans Mono', 'Courier New', monospace; background-color: #f6f7f8; border: 1px solid #e9eaed; padding: 14px; @@ -228,27 +228,27 @@ pre { color: #4E5661; } - pre code { - background: none; + pre code { + background: none; font-weight: normal; padding: 0; } - + code { font: 13px/15px Monaco, 'Bitstream Vera Sans Mono', Courier, monospace; background: #ecf0f1; padding: 2px; } - code a { - color: #4E5661; + code a { + color: #4E5661; } /*! quotes */ -blockquote { - margin: 28px 0; - padding: 14px 14px 0 38px; - background: #f8f9fa url(../../docsviewer/images/quote.gif) no-repeat 9px 18px; +blockquote { + margin: 28px 0; + padding: 14px 14px 0 38px; + background: #f8f9fa url(../../docsviewer/images/quote.gif) no-repeat 9px 18px; overflow: hidden; } @@ -257,42 +257,42 @@ blockquote { blockquote h3, blockquote h4, blockquote h5, - blockquote h6 { + blockquote h6 { font-style: italic; - color: #627871; + color: #627871; } - - blockquote h4 { - font-size: 18px; + + blockquote h4 { + font-size: 18px; } - - blockquote p { - font-style: italic; - font-size: 14px; - color: #667D76; + + blockquote p { + font-style: italic; + font-size: 14px; + color: #667D76; } /*! tables */ -table { - border-collapse: collapse; - width: 100%; - background-color: #fafafa; +table { + border-collapse: collapse; + width: 100%; + background-color: #fafafa; margin-bottom: 28px; border: 1px solid #c3cdca; } - table tr:nth-child(even) { - background: #eef4f6; + table tr:nth-child(even) { + background: #eef4f6; } - table caption { - text-align: left; - font-weight: bold; - font-size: 18px; - line-height: 21px; + table caption { + text-align: left; + font-weight: bold; + font-size: 18px; + line-height: 21px; } - table thead { + table thead { background: #fafafa; } @@ -303,12 +303,12 @@ table { border-right: 1px solid #c3cdca; } - table tbody tr { - border-top: 1px solid #c3cdca; + table tbody tr { + border-top: 1px solid #c3cdca; } - table td { - font-size: 15px; + table td { + font-size: 15px; line-height: 21px; padding: 7px; border-right: 1px solid #c3cdca; @@ -342,7 +342,7 @@ table { border-radius: 3px; float: left; } - + #edit-link a:hover, #edit-link a:focus { color: #fff; diff --git a/javascript/DocumentationViewer.js b/javascript/DocumentationViewer.js index acf8b3e..60ddea2 100755 --- a/javascript/DocumentationViewer.js +++ b/javascript/DocumentationViewer.js @@ -1,20 +1,31 @@ ;(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'); + }) + var switched = false; - + var updateTables = function() { if (($(window).width() < 540) && !switched ){ switched = true; - + $("table").each(function(i, element) { splitTable($(element)); }); - + return true; } else if (switched && ($(window).width() > 540)) { switched = false; - + $("table").each(function(i, element) { unsplitTable($(element)); }); @@ -62,7 +73,7 @@ tx.each(function () { var height = $(this).outerHeight(true); heights[index] = heights[index] || 0; - + if (height > heights[index]) heights[index] = height; }); }); @@ -121,74 +132,21 @@ * Automatically adds anchor links to headings that have IDs */ var url = window.location.href.replace(/#[a-zA-Z0-9\-\_]*/g, ''); - + $("#content h1[id], #content h2[id], #content h3[id], #content h4[id], #content h5[id], #content h6[id]").each(function() { var link = ''; $(this).append(' ' + link); - }); - + }); + $("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").mouseenter(function() { $(this).addClass('hover'); }); - + $("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").mouseleave(function() { $(this).removeClass('hover'); }); - /* - $(".search input").live("keyup", function(e) { - clearTimeout($.data(this, 'timer')); - var string = $(this).val(); - var self = $(this); - - if (string == '') { - $(".search .autocomplete-results").hide(); - } else { - var container; - - if($(this).siblings('.autocomplete-results').length == 0) { - container = $("
"); - - $.each(results, function(i, elem) { - list.append( - $("
  • ") - .append( - $("").attr('href', elem.link).text(elem.title) - ).append( - elem.path - ) - ); - }); - - container.append(list); - } else { - container.hide().removeClass('loading'); - } - } - ); - } - - return false; - }, 100)); - }; - - }); - */ /** --------------------------------------------- * LANGAUGE SELECTER @@ -196,13 +154,13 @@ * Hide the change button and do it onclick */ $("#Form_LanguageForm .Actions").hide(); - + $("#Form_LanguageForm select").change(function() { $("#Form_LanguageForm").submit(); }); - + /** --------------------------------------------- - * SYNTAX HIGHLIGHTER + * SYNTAX HIGHLIGHTER * * As the Markdown parser now uses the GFM structure (```yml) this does * not work with SyntaxHighlighter. The below translates the GFM output @@ -218,13 +176,6 @@ } }); - $('.menu-toggle').on('click', function (e) { - e.preventDefault(); - var left = $('#sidebar').is('.visible') ? -270 : 0; - $('#sidebar').animate({ left: left}, 'fast', function() { - $(this).toggleClass('visible'); - }); - }) - + }); })(jQuery); diff --git a/templates/DocumentationViewer.ss b/templates/DocumentationViewer.ss index 53eada8..1ad5419 100755 --- a/templates/DocumentationViewer.ss +++ b/templates/DocumentationViewer.ss @@ -1,11 +1,18 @@ - <% include DocumentationHead %> - + <% include DocumentationHead %> +
    class="has_versions"<% end_if %>>
    - <% if Breadcrumbs.count > 1 %> + + + + + + + + <% if Breadcrumbs.count > 1 %> <% include DocumentationBreadcrumbs %> <% else_if Page.Title %>

    $Page.Title

    @@ -18,8 +25,8 @@ <% include DocumentationVersions %>
    -
    - +
    +
    @@ -27,12 +34,12 @@
    $Layout - + <% include DocumentationFooter %>
    - + <% include DocumentationGA %> <% include DocumentationEnd %> diff --git a/templates/DocumentationViewer_all.ss b/templates/DocumentationViewer_all.ss index cdf36c9..56770fc 100644 --- a/templates/DocumentationViewer_all.ss +++ b/templates/DocumentationViewer_all.ss @@ -1,35 +1,40 @@ - <% include DocumentationHead %> - + <% include DocumentationHead %> +
    class="has_versions"<% end_if %>>

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

    - - - + + +
    -
    - + +
    $Layout - + <% include DocumentationFooter %> - +
    - + <% include DocumentationGA %> <% include DocumentationEnd %> diff --git a/templates/DocumentationViewer_results.ss b/templates/DocumentationViewer_results.ss index 20b0a6d..74ebe0f 100644 --- a/templates/DocumentationViewer_results.ss +++ b/templates/DocumentationViewer_results.ss @@ -1,35 +1,40 @@ - <% include DocumentationHead %> - + <% include DocumentationHead %> +
    class="has_versions"<% end_if %>>

    - - Documentation - / - Search + + + + + + + Documentation + / + Search

    - - - + + +
    -
    - + +
    $Layout - + <% include DocumentationFooter %> - +
    - + <% include DocumentationGA %> <% include DocumentationEnd %> diff --git a/templates/Includes/DocumentationBreadcrumbs.ss b/templates/Includes/DocumentationBreadcrumbs.ss index fa1f6db..beab350 100755 --- a/templates/Includes/DocumentationBreadcrumbs.ss +++ b/templates/Includes/DocumentationBreadcrumbs.ss @@ -1,11 +1,10 @@

    - <% loop Breadcrumbs %> - <% if not First %> - $Title <% if Last %><% else %>/<% end_if %> + <% if not First %> + $Title <% if Last %><% else %>/<% end_if %> <% end_if %> <% end_loop %>

    -
    \ No newline at end of file + diff --git a/templates/Includes/DocumentationSidebar.ss b/templates/Includes/DocumentationSidebar.ss index 8150b73..1b99273 100644 --- a/templates/Includes/DocumentationSidebar.ss +++ b/templates/Includes/DocumentationSidebar.ss @@ -1,16 +1,15 @@