From bcd8f49e465da4aa7e4572213a5b3ab5cfbf9805 Mon Sep 17 00:00:00 2001
From: Henrik Tidefelt <henrikt@wolfram.com>
Date: Mon, 16 Nov 2020 22:19:35 +0100
Subject: [PATCH] Collapse navbar unless window is really wide (#2716)

* Minor white-space cleanup
* Collapse navbar (expand on hover) unless window is really wide
---
 css/MLS-navbar-left.css | 118 ++++++++++++++++++++++++++++++++++------
 css/MLS.css             |   4 +-
 2 files changed, 102 insertions(+), 20 deletions(-)

diff --git a/css/MLS-navbar-left.css b/css/MLS-navbar-left.css
index 435e5835e..57e115a43 100644
--- a/css/MLS-navbar-left.css
+++ b/css/MLS-navbar-left.css
@@ -3,25 +3,45 @@
  * Developed from LaTeXML-navbar-left.css as starting point.
  */
 
-/* Add scrollbar if overflowing in y-direction. The 95% of viewport height allow for borders.*/
+body {
+  margin: 0px;
+  background: #F6F6F6;
+}
+
+nav > div.ltx_TOC {
+  margin-left: 1em;
+}
+
 .ltx_page_navbar {
   display: block!important;
   position: fixed;
-  z-index: 1;
-  left: 0px;
+  z-index: 2;
   top: 0px;
-  width: calc(350px - 1em);
   margin: 0px;
   padding: 0px;
   font: 90% sans-serif;
   color: black;
-/*border: 3px double;*/
-  overflow-y: auto;
-  height: 100%;
   border-style: solid;
   border-color: #707A85; /* "Bouncing ball trace gray" */
   border-width: 0px;
-  border-right-width: 1em;
+  border-right-width: 8px;
+  background: #F6F6F6;
+  height: 100%; /* Provide fixed height for .ltx_TOC to refer to. */
+}
+
+.ltx_page_navbar:before {
+  position: fixed;
+  z-index: 4;
+  left: 2px;
+  top: 0px;
+  margin: 0px;
+  padding: 0px;
+  font: 16px sans-serif;
+  color: #DE1D31; /* "Bouncing ball red" */
+  height: 30px;
+  width: 16px;
+  background: #F6F6F6;
+  content: "☰"; /* Chinese character that looks like hamburger. */
 }
 
 .ltx_page_navbar a[rel=start] {
@@ -30,8 +50,9 @@
   font-weight: bold;
 }
 
-nav > div.ltx_TOC {
-  margin-left: 1em;
+.ltx_TOC {
+  padding-right: 1em;
+  overflow-y: auto;
 }
 
 .ltx_TOC > ul.ltx_toclist {
@@ -42,21 +63,25 @@ nav > div.ltx_TOC {
   padding-left: 1em; /* Indentation of each table of contents level below the top. */
 }
 
-.ltx_ref_title .ltx_tag_ref {
-  font-size: 75%; /* Compress navbar even more by shrinking the numbering. */
+/* How to deal with the long section titles in the table of contents (overriding styling from LaTeXML.css).
+ * The right boundary for these titles is the .ltx_page_navbar padding-right.
+ */
+.ltx_page_navbar li {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-body {
-  margin: 0px;
-  background: #F6F6F6;
+.ltx_ref_title .ltx_tag_ref {
+  font-size: 75%; /* Compress navbar even more by shrinking the numbering. */
 }
 
 .ltx_page_main {
   position: absolute;
-  z-index: 2;
-  margin-left: 350px;
+  z-index: 1;
   margin-top: 0px;
   margin-bottom: 0px;
+  border-width: 0px;
   max-width: 80em;
   padding: 0px;
 }
@@ -64,12 +89,13 @@ body {
 .ltx_page_header {
   position: fixed;
   z-index: 3;
-  width: calc(100% - 350px - 2em);
   top: 0px;
   height: 3em;
   padding: 0.5em 1em;
   background: #F6F6F6; /* Same as body. */
   color: black; /* Same as side bar. */
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .ltx_page_content {
@@ -82,3 +108,59 @@ body {
   padding: 1em;
   background: white;
 }
+
+/* Layout for wide screens, with navbar always expanded.
+ * The threshold for being considered wide is set so that it should be possible to get a collapsable
+ * navbar at the same time as extending .ltx_page_main to its max-width (currently 80em).
+ * This max-width is added to the .ltx_page_main margin-left in the collapsable layout, currently
+ * resulting in 1306px if 1em is converted to 16px:
+ *   80em * 16px/em + 2px + 16px + 8px = 1306px
+ * Add 4px of slack, and the threshold becomes 1310.
+ */
+@media screen and (min-width: 1310px) {
+  .ltx_page_main {
+    margin-left: 350px;
+  }
+  .ltx_page_navbar {
+    left: 0px;
+    width: calc(350px - 8px); /* Width of .ltx_page_main, minus .ltx_page_navbar border-right-width. */
+  }
+  .ltx_TOC {
+    height: 100%;
+  }
+  .ltx_page_header {
+    width: calc(100% - 350px - 2em); /* Subtract 2em for the total horizontal padding on this element. */
+  }
+  .ltx_page_navbar:before {
+    display: none;
+  }
+}
+
+/* Layout for smaller screens or other media where navbar is only expanded when hovered.
+ */
+@media screen and (max-width: 1310px) {
+  .ltx_page_main {
+    /* Leave just enough space to fit the hamburger plus the right border of the .ltx_page_navbar.
+     * Don't define this in em units, since the em is not the same below in .ltx_page_navbar.
+     */
+    margin-left: calc(2px + 16px + 8px); /* left + width + border */
+  }
+  .ltx_page_navbar {
+    width: 500px;
+    left: calc(26px - (500px + 8px)); /* Position right extent where .lts_page_main starts, taking .ltx_page_navbar border-right-width into account. */
+    transition: 0.3s;
+  }
+  .ltx_TOC {
+    margin-top: 20px; /* Reserve space for hamburger. */
+    height: calc(100% - 20px);
+  }
+  .ltx_page_header {
+    width: calc(100% - 26px - 2em); /* Subtract 2em for the total horizontal padding on this element. */
+  }
+  .ltx_page_navbar:hover {
+    left: 0px;
+  }
+  .ltx_page_navbar:before {
+    display: block;
+  }
+}
diff --git a/css/MLS.css b/css/MLS.css
index 33c645c1c..8b18ed576 100644
--- a/css/MLS.css
+++ b/css/MLS.css
@@ -24,7 +24,7 @@ a:hover { text-decoration: underline; }
 
 /* Undo bold here to remove the browser's native <th> styling,
  */
-.ltx_th { font-weight:normal; }
+.ltx_th { font-weight: normal; }
 
 /* Compensate for default font size ratio 13:16 for monospace to normal.
  * 16/13 = 1.2307...
@@ -40,4 +40,4 @@ a:hover { text-decoration: underline; }
 
 /* Undo the ltx-report.css setting that destroys parskip.sty style paragraphs.
  */
-.ltx_para > .ltx_p:first-child { text-indent:0; }
+.ltx_para > .ltx_p:first-child { text-indent: 0; }