Fix more edge cases

dlang-tour · Jan 8, 2017 · 4824d26 · 4824d26
1 parent c8f1ec0
commit 4824d26
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}
 					| >