diff --git a/public/static/css/menu2.css b/public/static/css/menu2.css new file mode 100644 index 00000000..39312522 --- /dev/null +++ b/public/static/css/menu2.css @@ -0,0 +1,134 @@ +#top { + left: 0; + top: 0; + display: inline-block; + overflow-y: auto; + overflow-x: hidden; +} + +#top #cssmenu > ul > li { + float: none; +} + +body .row { + display: inline-block; + position: absolute; +} + +/* no shadows or borders in the menu bar */ +#top #cssmenu > ul > li > ul { + position: inherit; + border: none; + background: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* less padding in the menu bar */ +#top > .helper { + padding-left: 5px; + padding-right: 5px; +} + +/* no background for menu entries */ +#top a:hover, #top #cssmenu li.open > a, #top #cssmenu li.active > a { + background: inherit; +} + +/* active menu entry */ +#top #cssmenu li.active > a { + color: black; +} + +/* menu entries - less padding */ +.expand-content li { + padding-left: 5px; +} + +@media only screen and (min-width:992px) +{ + /* left menu has full height and no padding, margin etc. */ + #top { + height: 100vh; + width: auto; + padding: 0; + margin: 0; + border: 0px; + } + + /* and only minimal padding on the right side */ + #top #cssmenu > ul > li > ul > li > a { + padding-right: 3px; + } + + /* required due to weird behavior with display:inline-block */ + body { + overflow-y: hidden; + } + + /* auto-scroll for both boxes, but leave enough space for nav bottom */ + #tour-content { + height: calc(100vh - 52px); + overflow-y: auto; + } + + #tour-code { + height: calc(100vh - 52px); + overflow-y: auto; + } +} + +@media only screen and (max-width:991px) +{ + /* display the menu over the content */ + #top { + position: absolute; + z-index: 3; + } + /* no overlap between tour title and hambuger */ + #tour-content { + padding-top: 15px + } + /* remove weird margin around menu hamburger */ + #top a.hamburger { + margin: 0.15em; + } + /* show hamburger menu item on larger screens */ + #top > .helper { + padding: 0; + } + /* use a different width than 54em */ + #top #cssmenu { + display: none; + } + /* use a different width than 54em */ + #top a.hamburger { + display: inline; + float: right; + font-size: 2em; + line-height: 1; + } + /* use a different width than 54em */ + #top a.hamburger::after { + content: "\f0c9"; + font-family: FontAwesome; + } + /* use a different width than 54em */ + #top a.hamburger span { + display: none; + } +} + +/* less space for the nav bar */ +.navbar .h1 { + margin-top: 0px; + margin-bottom: 0px; +} + +/* Menu toggle icon */ +.menu-toggle-item { + float: left; + text-align: right; + margin-top: 10px; + padding-right: 15px; +} diff --git a/public/static/js/tour-controller.js b/public/static/js/tour-controller.js index e783e97c..871c99f5 100644 --- a/public/static/js/tour-controller.js +++ b/public/static/js/tour-controller.js @@ -159,6 +159,15 @@ dlangTourApp.controller('DlangTourAppCtrl', url += $scope.chapterId + '/' + $scope.section + '.md'; $window.open(url, '_blank'); } + + $scope.toggleMenu = function() { + var el = document.getElementById("top"); + if (el.style.display === "none") { + el.style.display = "inline-block"; + } else { + el.style.display = "none"; + } + } }]); // use CodeMirror to highlight pre diff --git a/source/app.d b/source/app.d index 2f1ec666..f7670a33 100644 --- a/source/app.d +++ b/source/app.d @@ -144,7 +144,8 @@ shared static this() auto googleAnalyticsId = config.googleAnalyticsId; auto chapterId = ""; auto language = "en"; - res.render!("error.dt", req, error, language, googleAnalyticsId, chapterId, toc, title)(); + auto section = ""; + res.render!("error.dt", req, error, language, googleAnalyticsId, chapterId, section, toc, title)(); res.finalize(); }; diff --git a/views/base.dt b/views/base.dt index f1b1b349..f4faae0d 100644 --- a/views/base.dt +++ b/views/base.dt @@ -5,6 +5,7 @@ head link(rel="stylesheet", href="/static/css/common.css") link(rel="shortcut icon", href="/static/img/favicon.ico") link(rel="stylesheet", type="text/css", href="/static/css/menu.css") + link(rel="stylesheet", type="text/css", href="/static/css/menu2.css") meta(name="viewport",content="width=device-width, initial-scale=1.0, minimum-scale=0.1, maximum-scale=10.0") title #{title} link(rel="stylesheet", href="/static/css/tour.css") @@ -17,28 +18,29 @@ body(ng-app="DlangTourApp", class="ng-cloak") .helper .helper.expand-container.active .logo - a(href="https://dlang.org") - img(id="logo", alt="DLang Logo", src="/static/img/dlogo.svg") - a(href="#{req.rootDir}", id="title") - span The DLang Tour + //-a(href="https://dlang.org") + //-img(id="logo", alt="DLang Logo", src="/static/img/dlogo.svg") + //-a(href="#{req.rootDir}", id="title") + //-span The DLang Tour a(href="#", title="Menu", class="hamburger expand-toggle") span Menu #cssmenu ul - foreach(ref tocItem; *toc) - auto active = chapterId == tocItem.chapterId; - li(class=(active ? "expand-container active" : "expand-container")) + li(class=(active ? "expand-container open" : "expand-container")) a.expand-toggle(href="#") span=tocItem.title ul.expand-content - foreach(ref sec; tocItem.sections) - li(class=(active ? "active" : "")) + - auto activeSection = section == sec.sectionId; + li(class=(activeSection ? "active" : "")) a(href="/tour/#{language}/#{tocItem.chapterId}/#{sec.sectionId}") span=sec.title - #github_avatar - a(href="https://github.com/stonemaster/dlang-tour") - i(class="fa fa-github",aria-hidden="true") + //-#github_avatar + //-a(href="https://github.com/stonemaster/dlang-tour") + //-i(class="fa fa-github",aria-hidden="true") block content diff --git a/views/tour.dt b/views/tour.dt index 329cc975..44c665ab 100644 --- a/views/tour.dt +++ b/views/tour.dt @@ -9,8 +9,12 @@ block head block content .row(ng-controller="DlangTourAppCtrl as ctrl", ng-init="init('#{language}', '#{githubRepo}', '#{chapterId}', '#{section}', #{hasSourceCode}, '#{previousSection.link}', '#{nextSection.link}')") + div#tour-content(ng-show="showContent", ng-class="{'col-md-12': !showSourceCode, 'col-md-6 col-sm-12': showSourceCode}") div(ng-hide="showProgramOutput") + .menu-toggle-item.hidden-xs.hidden-sm + button.btn.btn-default(ng-click="toggleMenu()") + .fa.fa-bars .content-command-box button.btn.btn-default(ng-click="editOnGithub()") .fa.fa-edit @@ -24,7 +28,7 @@ block content span.fa.fa-close h2.program-output-title rdmd playground.d pre#program-output {{programOutput}} - div(ng-class="{'col-md-6 col-sm-12': showContent, 'col-md-12': !showContent}", ng-show="showSourceCode", style="padding-left: 0px; padding-right: 0px") + div#tour-code(ng-class="{'col-md-6 col-sm-12': showContent, 'col-md-12': !showContent}", ng-show="showSourceCode", style="padding-left: 0px; padding-right: 0px") div#command-box.text-right button.btn.btn-default(ng-click="showContent = !showContent") i.fa.fa-expand(ng-show="showContent",aria-hidden="true") @@ -40,20 +44,23 @@ block content span Reset ui-codemirror(ui-codemirror-opts="editorOptions", ui-codemirror="{ onLoad : codemirrorLoaded }", ng-model="sourceCode") - nav.navbar.navbar-bottom - .container.text-center.h1 - a(href="#{previousSection.link}", ng-show="'' != '#{previousSection.link}'") - | < - span.h4 #{previousSection.title} - | #{sectionId + 1} / - span.small #{sectionCount} - a(href="#{nextSection.link}", ng-show="'' != '#{nextSection.link}'") - span.h4 #{nextSection.title} - | > - .container.hidden-xs.hidden-sm - p.text-muted.text-center - kbd ? - | Keyboard shortcuts + .clear + nav.navbar.navbar-bottom + .text-center.h1 + a(href="#{previousSection.link}", ng-show="'' != '#{previousSection.link}'") + | < + span.h4 #{previousSection.title} + //-| #{sectionId + 1} / + //-span.small #{sectionCount} + span(ng-show="'' != '#{previousSection.link}'") + | / + a(href="#{nextSection.link}", ng-show="'' != '#{nextSection.link}'") + span.h4 #{nextSection.title} + | > + //-.container.hidden-xs.hidden-sm + //-p.text-muted.text-center + //-kbd ? + | Keyboard shortcuts block js script(src="/static/js/tour-controller.js")