From 8b984e301f80226f58b25ba415406fc1b59a55e6 Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Mon, 27 Jul 2020 00:18:42 +0200
Subject: [PATCH] Fix #1

Also make website more mobile-friendly for smaller devices. And ignore
temporary scssc files from cache SCSS compiling.
---
 .gitignore           |  1 +
 web/dart/navbar.dart | 70 +++++++++++++++++++++++---------------------
 web/style/style.scss | 31 +++++++++++++++++---
 3 files changed, 64 insertions(+), 38 deletions(-)

diff --git a/.gitignore b/.gitignore
index f31ad7b..d10e5de 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@
 /pubspec.lock
 /.sass-cache/
 /build/
+*.scssc
diff --git a/web/dart/navbar.dart b/web/dart/navbar.dart
index 7993b79..85d46ac 100644
--- a/web/dart/navbar.dart
+++ b/web/dart/navbar.dart
@@ -43,25 +43,25 @@ final icons = {
 // Get the current page’s title
 String getPageTitle() => querySelector('title').text;
 
-// Create any type of icon
+// Create the home button
+Future<Element> makeHome() async {
+  return Element.li()
+    ..classes.add('nav-item')
+    ..insertAdjacentElement(
+        'afterBegin',
+        Element.a()
+          ..attributes['href'] = '/'
+          ..append(makeIcon(icons['home'])));
+}
+
+// Create a clickable icon
+// `t_elem` must be an SVG declared in the above `icons` variable.
 Element makeIcon(SvgElement t_elem) {
   final icon = t_elem..classes.add('nav-icon');
   return icon;
 }
 
-// Make the Table of Content in the navbar
-Future<Element> makeToc() async {
-  return Element.li()
-    ..attributes['id'] = 'toc-drop'
-    ..attributes['tabindex'] = '0'
-    ..classes.addAll(['nav-item', 'has-dropdown'])
-    ..append(Element.a()
-      ..attributes['tabindex'] = '-1'
-      ..attributes['href'] = 'javascript:void(0)'
-      ..append(makeIcon(icons['toc'])));
-}
-
-// Make the list of pages in the navbar
+// Create the dropdown sitemap
 Future<Element> makePages() async {
   var pages = Element.ul()
     ..attributes['id'] = 'drop-page'
@@ -76,7 +76,7 @@ Future<Element> makePages() async {
     ..append(pages);
 }
 
-// Make the share icon
+// Create the array of share icons
 Future<Element> makeShare() async {
   // Create a share button
   Element makeShareLink(Element t_icon, String t_url) {
@@ -115,14 +115,12 @@ Future<Element> makeShare() async {
           'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}')));
 }
 
-// Make the theme changer in the navbar
+// Create the theme changer
 Future<Element> makeThemeChanger() async {
-  Element makeThemeItem(String t_btnId, String t_text, [Element t_icon]) {
+  Element makeThemeItem(String t_btnId, [Element t_icon]) {
     return Element.li()
       ..classes.add('dropdown-item')
-      ..append(Element.span()
-        ..attributes['id'] = t_btnId
-        ..appendText(' $t_text'));
+      ..append(Element.span()..attributes['id'] = t_btnId);
   }
 
   return Element.li()
@@ -137,25 +135,29 @@ Future<Element> makeThemeChanger() async {
     ..append(Element.ul()
       ..classes.add('dropdown')
       ..attributes['id'] = 'theme-dropdown'
-      ..append(makeThemeItem('lightBtn', 'Clair', makeIcon(icons['sun'])))
-      ..append(makeThemeItem('darkBtn', 'Sombre', makeIcon(icons['lightbulb'])))
-      ..append(makeThemeItem('blackBtn', 'Noir', makeIcon(icons['moon']))));
+      ..append(makeThemeItem('lightBtn', makeIcon(icons['sun'])))
+      ..append(makeThemeItem('darkBtn', makeIcon(icons['lightbulb'])))
+      ..append(makeThemeItem('blackBtn', makeIcon(icons['moon']))));
 }
 
-// Make home button in navbar
-Future<Element> makeHome() async {
+// Create the dropdown table of contents
+Future<Element> makeToc() async {
   return Element.li()
-    ..classes.add('nav-item')
-    ..insertAdjacentElement(
-        'afterBegin',
-        Element.a()
-          ..attributes['href'] = '/'
-          ..append(makeIcon(icons['home'])));
+    ..attributes['id'] = 'toc-drop'
+    ..attributes['tabindex'] = '0'
+    ..classes.addAll(['nav-item', 'has-dropdown'])
+    ..append(Element.a()
+      ..attributes['tabindex'] = '-1'
+      ..attributes['href'] = 'javascript:void(0)'
+      ..append(makeIcon(icons['toc'])));
 }
 
-// Add a navbar atop of the HTML body, containing two buttons:
-// - One back to home
-// - A dropdown to each page detected in the sitemap
+// Add a navbar atop of the HTML body, containing:
+// - A back to home button
+// - A dropdown sitemap
+// - A dropdown table of contents
+// - A dropdown array of share icons
+// - A theme changer
 Future<Element> makeNavbar() async {
   final navbar_content = Element.ul()..classes.add('navbar-nav');
   final home = await makeHome();
diff --git a/web/style/style.scss b/web/style/style.scss
index 7f87ac6..22584d1 100644
--- a/web/style/style.scss
+++ b/web/style/style.scss
@@ -180,8 +180,8 @@ $gradient-accent3-light-right: linear-gradient(to right, $light,  $accent3);
     }
 
     .dropdown {
-        background: $accent3;
-        color: $dark;
+        background: $dark;
+        color: $light;
     }
 
     #content {
@@ -373,11 +373,34 @@ header {
 }
 
 #theme-dropdown {
-    width: 250px;
+    width: 150px;
     flex-direction: row;
     transform: translateX(-75%);
 }
 
+#lightBtn, #darkBtn, #blackBtn {
+    content: ' ';
+    border: 2px solid white;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 10px;
+}
+
+#lightBtn {
+    background: $light;
+}
+
+#darkBtn {
+    background: $dark;
+}
+
+#blackBtn {
+    background: $black;
+}
+
 #drop-page, #table-of-contents {
     flex-direction: column;
 
@@ -385,7 +408,7 @@ header {
     top: -40px;
 
     height: 0;
-    min-width: 350px;
+    min-width: 300px;
     overflow-y: auto;
 
     font-size: 0.9em;