diff --git a/public/static/css/menu2.css b/public/static/css/menu2.css index 476b9b3c..2077a875 100644 --- a/public/static/css/menu2.css +++ b/public/static/css/menu2.css @@ -15,10 +15,7 @@ body .row { position: absolute; } -#top #cssmenu .expand-container.active > * { - display: block; -} - +/* no shadows or borders in the menu bar */ #top #cssmenu > ul > li > ul { position: inherit; border: none; @@ -27,30 +24,49 @@ body .row { 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:54.01em) { + /* left menu has full height and no padding, margin etc. */ #top { - height: 99vh; - width: 250px; + height: 100vh; + width: auto; + padding: 0; + margin: 0; + border: 0px; } - body .row { - width: calc(100% - 250px); - } + + /* 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; @@ -64,18 +80,22 @@ body .row { @media only screen and (max-width:54em) { + /* 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; } } +/* less space for the nav bar */ .navbar .h1 { margin-top: 0px; margin-bottom: 0px; 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 e71cab75..f4faae0d 100644 --- a/views/base.dt +++ b/views/base.dt @@ -28,12 +28,13 @@ body(ng-app="DlangTourApp", class="ng-cloak") 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 diff --git a/views/tour.dt b/views/tour.dt index d873b469..a767b911 100644 --- a/views/tour.dt +++ b/views/tour.dt @@ -41,14 +41,16 @@ block content span Reset ui-codemirror(ui-codemirror-opts="editorOptions", ui-codemirror="{ onLoad : codemirrorLoaded }", ng-model="sourceCode") + .clear nav.navbar.navbar-bottom - .container.text-center.h1 + .text-center.h1 a(href="#{previousSection.link}", ng-show="'' != '#{previousSection.link}'") | < span.h4 #{previousSection.title} //-| #{sectionId + 1} / //-span.small #{sectionCount} - span / + span(ng-show="'' != '#{previousSection.link}'") + | / a(href="#{nextSection.link}", ng-show="'' != '#{nextSection.link}'") span.h4 #{nextSection.title} | >