File 1270-docgen-Make-docs-collapse-better-on-small-... of Package erlang

Overview Repositories Revisions Requests Users Attributes Meta

File 1270-docgen-Make-docs-collapse-better-on-small-screens.patch of Package erlang (Revision e62e4225e41cf032f11f17868c8e4330)

Currently displaying revision e62e4225e41cf032f11f17868c8e4330 , Show latest

From 58a5e8d43c90abd276d1e318cebf9774588daa3b Mon Sep 17 00:00:00 2001
From: Lukas Larsson <lukas@erlang.org>
Date: Mon, 13 Sep 2021 11:45:35 +0200
Subject: [PATCH 10/12] docgen: Make docs collapse better on small screens

This commit makes padding and margins smaller when the screen size
becomed smaller and when it is small enough it moves the navigation
to a collapseable topbar instead.

To achieve this the top-level layout has been changed from using
and fixed placed div for the navbar to use css grid instead.

When on a small screen the index pages' navigation is permanently
expanded to that the user does not have to expand it.
---
 lib/erl_docgen/priv/css/otp_doc.css      | 458 ++++++++++++++++-------
 lib/erl_docgen/priv/js/flipmenu/Makefile |   2 +-
 lib/erl_docgen/priv/js/topbar.js         |  16 +
 lib/erl_docgen/priv/xsl/db_html.xsl      |  93 +++--
 make/otp_release_targets.mk              |   1 +
 system/doc/top/templates/index.html.src  |  43 ++-
 6 files changed, 442 insertions(+), 171 deletions(-)
 create mode 100644 lib/erl_docgen/priv/js/topbar.js

diff --git a/lib/erl_docgen/priv/css/otp_doc.css b/lib/erl_docgen/priv/css/otp_doc.css
index f9c84b7e1f..7a45a3a4f7 100644
--- a/lib/erl_docgen/priv/css/otp_doc.css
+++ b/lib/erl_docgen/priv/css/otp_doc.css
@@ -1,24 +1,26 @@
 /* standard OTP style sheet */
+/* We use three responsive breakpoints:
+ * 768px - mobile
+ * 992px - small screen
+ * 1200px - medium screen
+ * default - large screen
+*/
 body {
-  background: #fefefe;
-  color: #1a1a1a;
-  font-family: sans-serif;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  overflow: scroll;
-  height: 100%;
-  max-height: 100%;
-  line-height: 1.2em;
-  font-size: 16px;
+    background: #fefefe;
+    color: #1a1a1a;
+    font-family: sans-serif;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    max-height: 100%;
+    line-height: 1.2em;
+    font-size: 16px;
 }
 
 h1, h2, h3, h4, h5, h6{
- line-height: 1.2em;
+    line-height: 1.2em;
 }
 
-p             { max-width: 42em }
-
 .header       { background: #222; color: #fefefe }
 .top          { background: #efe }
 .otp          { background: #efe }
@@ -31,55 +33,201 @@ a:active       { color: #1c7cd6; text-decoration: none }
 a:visited      { color: #1b6ec2; text-decoration: none }
 
 #container {
-  width: 100%;
-  margin: 0;
-  background-color: #fefefe;
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    grid-template-areas: "leftnav content";
 }
 
 #leftnav {
-  position: fixed;
-  float: left;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 300px;
-  overflow:auto;
-  margin: 0;
-  padding: 1px;
-  border-right: 1px solid #ccc;
+    grid-area: leftnav;
 }
 
-.leftnav-tube
-{
-    margin: 15px;
+.leftnav-tube {
+    top: 0;
+    margin-left: 15px;
+    position: sticky;
+    height: 100vh;
+    max-width: 250px;
+    overflow: auto;
+    border-right: 1px solid #ccc;
 }
 
 #content {
-  margin-left: 340px; /* set left value to WidthOfFrameDiv */
-  max-width: 52em;
-  overflow-x: hidden;
-}
-
-.frontpage 
-{
-  padding-top: 50px; /* Magins for inner DIV inside each DIV (to provide padding) */
-}
-
-.innertube 
-{
-    margin-left: 15px; /* Magins for inner DIV inside each DIV (to provide padding) */
-    margin-right: 11em;
+    grid-area: content;
+    max-width: 52em;
+    margin-left: 30px;
+}
+
+@media screen and (max-width: 1200px) {
+    #content {
+        margin-left: 0px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    #content {
+        max-width: 35em;
+    }
+}
+
+.topbar {
+    grid-area: topbar;
+    display: none;
+}
+
+@media screen and (max-width: 768px) {
+
+    #container {
+        grid-template-columns: 100%;
+        grid-template-areas:
+            "topbar"
+            "leftnav"
+            "content";
+    }
+
+    /* styling for the top bar */
+    .topbar {
+        display: flex;
+        position: relative;
+        top: 0px;
+        padding: 0.5em;
+        width: 100%;
+        box-sizing: border-box;
+        border-bottom: 1px solid #ccc;
+        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05),
+                    inset 0 -1px 0 rgba(0,0,0,0.15);
+        text-align: center;
+    }
+    .topbar button {
+        padding: 1 6 1 6;
+        margin: 0;
+        height: auto;
+        display: inline-block;
+        border-radius: .25rem;
+        border: 1px solid transparent;
+        background: transparent;
+    }
+    .topbar-expand:not(.show) > button {
+        /* When we add the "show" class we rotate the button 180deg */
+        transform: rotate(180deg);
+    }
+    .topbar-expand > button {
+        transition: transform 0.35s ease;
+    }
+    .topbar-expand.show-permanent > button {
+        display: none;
+    }
+    .topbar-title {
+        text-align: center;
+        flex-grow: 2;
+    }
+    .topbar-title > h1 {
+        font-size: 1.17em;
+        margin: 0px;
+    }
+
+    /* Break words on mobile */
+    #content {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        margin-left: 0px;
+        max-width: 100%;
+    }
+    p {
+        max-width: 100%;
+    }
+    /* The h1 is part of the topbar on mobile */
+    #content h1 {
+        display: none;
+    }
+
+    /* Styling of the navbar when shown/hidden */
+    #leftnav {
+        overflow: hidden;
+    }
+    #leftnav:not(.show) {
+        max-height: 0px;
+        border-bottom: 0px;
+        transition: max-height 0.35s ease;
+    }
+    #leftnav.show {
+        max-height: 60vh;
+        border-bottom: 1px solid #ccc;
+        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05),
+                    inset 0 -1px 0 rgba(0,0,0,0.15);
+        transition: max-height 0.35s ease;
+    }
+    
+    .leftnav-tube {
+        max-height: 60vh;
+        max-width: 100%;
+        position: unset;
+        border-right: 0px;
+        margin-right: 0px;
+        margin-left: 0px;
+        padding: 0px 15px 0px 15px;
+    }
+    #leftnav.show-permanent {
+        max-height: none;
+    }
+    .show-permanent > .leftnav-tube {
+        overflow: initial;
+        max-height: none;
+        height: inherit;
+    }
+    .hide-mobile {
+        opacity: 0;
+    }
+
+}
+
+@media (prefers-reduced-motion: reduce){
+    #leftnav.collapsing{
+        transition: none;
+    }
+    .topbar-expand > button {
+        transition: none;
+    }
+}
+
+.frontpage {
+    padding-top: 50px; /* Magins for inner DIV inside each DIV (to provide padding) */
+}
+
+.mobile-only {
+    display: none;
+}
+
+@media screen and (max-width: 768px) {
+    .mobile-only {
+        display: revert;
+    }
+}
+
+.innertube, .exports-tube {
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+@media screen and (max-width: 1200px) {
+    .innertube, .exports-tube {
+        margin-left: 0px;
+        margin-right: 15px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .innertube, .exports-tube {
+        margin-left: 15px;
+        margin-right: 15px;
+    }
+}
+
+.footer {
+    margin: 15px; /* Magins for inner DIV inside each DIV (to provide padding) */
+    text-align: center;
 }
 
-.footer 
-{
-  margin: 15px; /* Magins for inner DIV inside each DIV (to provide padding) */
-  text-align: center;
-}
-
-.cref-head h4, .func-head h4, .data-type-name h4 {
-    margin: 0;
-}
 .bold_code   { font-family: mono, Courier, monospace; font-weight: bold }
 
 .title-link {
@@ -115,63 +263,80 @@ a:visited      { color: #1b6ec2; text-decoration: none }
     margin-left: auto;
 }
 
+@media screen and (max-width: 768px) {
+    .cref-head, .func-head, .data-type-name {
+        margin-left: 0em;
+        padding-bottom: 0em;
+        padding-top: 0em;
+    }
+    .title-link {
+        flex-direction: column;
+    }
+    .title-anchors {
+        display: none;
+    }
+    .title-since {
+        margin-left: 1em;
+    }
+}
+
 .code        {
- font-family: mono, Courier, monospace;
- font-weight: normal;
- background-color: #f3f3f3;
+    font-family: mono, Courier, monospace;
+    font-weight: normal;
+    background-color: #f3f3f3;
 }
 
 .note, .warning, .do, .dont {
-  border: 1px solid #495057;
-  margin: 1em 0;
+    border: 1px solid #495057;
+    margin: 1em 0;
 }
 .note .label {
-  background-color: #2b8a3e;
-  color: #fefefe;
-  font-weight: bold;
-  padding: 0.5em 1em;
+    background-color: #2b8a3e;
+    color: #fefefe;
+    font-weight: bold;
+    padding: 0.5em 1em;
 }
 .note .content {
-  background: #f8f9fa;
-  line-height: 120%;
-  font-size: 0.9em;
-  padding: 0.5em 1em;
+    background: #f8f9fa;
+    line-height: 120%;
+    font-size: 0.9em;
+    padding: 0.5em 1em;
 }
 .warning .label {
-  background: #c92a2a;
-  color: #fefefe;
-  font-weight: bold;
-  padding: 0.5em 1em;
+    background: #c92a2a;
+    color: #fefefe;
+    font-weight: bold;
+    padding: 0.5em 1em;
 }
 .warning .content {
-  background-color: #f8f9fa;
-  line-height: 120%;
-  font-size: 0.9em;
-  padding: 0.5em 1em;
+    background-color: #f8f9fa;
+    line-height: 120%;
+    font-size: 0.9em;
+    padding: 0.5em 1em;
 }
 .do .label {
-  background-color: #2b8a3e;
-  color: #fefefe;
-  font-weight: bold;
-  padding: 0.5em 1em;
+    background-color: #2b8a3e;
+    color: #fefefe;
+    font-weight: bold;
+    padding: 0.5em 1em;
 }
 .do .content {
-  background: #f8f9fa;
-  line-height: 120%;
-  font-size: 0.9em;
-  padding: 0.5em 1em;
+    background: #f8f9fa;
+    line-height: 120%;
+    font-size: 0.9em;
+    padding: 0.5em 1em;
 }
 .dont .label {
-  background: #c92a2a;
-  color: #fefefe;
-  font-weight: bold;
-  padding: 0.5em 1em;
+    background: #c92a2a;
+    color: #fefefe;
+    font-weight: bold;
+    padding: 0.5em 1em;
 }
 .dont .content {
-  background-color: #f8f9fa;
-  line-height: 120%;
-  font-size: 0.9em;
-  padding: 0.5em 1em;
+    background-color: #f8f9fa;
+    line-height: 120%;
+    font-size: 0.9em;
+    padding: 0.5em 1em;
 }
 
 .quote {
@@ -179,61 +344,70 @@ a:visited      { color: #1b6ec2; text-decoration: none }
 }
 
 .example {
-  background-color:#f1f3f5;
-  border: 1px solid #dee2e6;
-  padding: 0.5em 1em;
-  margin: 1em 0;
-  font-size: 0.7em;
+    background-color:#f1f3f5;
+    border: 1px solid #dee2e6;
+    padding: 0.5em 1em;
+    margin: 1em 0;
+    font-size: 0.7em;
+    overflow-x: auto;
+    max-width: min(100%, 48em);
 }
 .extrafrontpageinfo {
-  color: #C00;
-  font-weight: bold;
-  font-size: 1.2em;
+    color: #C00;
+    font-weight: bold;
+    font-size: 1.2em;
 }
 
 pre {
- font-family: mono, Courier, monospace;
- font-weight: normal;
- margin: 0;
+    font-family: mono, Courier, monospace;
+    font-weight: normal;
+    margin: 0;
 }
 
 
-.data-types-body, .REFBODY{
- margin-left: 2em;
+.data-types-body, .REFBODY {
+    margin-left: 2em;
 }
 .REFTYPES    { margin-left: 1.5em }
 .exports-body {
     margin-left: 3em;
 }
-.exports-tube
-{
-    margin-right: 11em;
+
+@media screen and (max-width: 768px) {
+    .data-types-body, .REFBODY{
+        margin-left: 1em;
+    }
+    .REFTYPES    { margin-left: 0.75em }
+    .exports-body {
+        margin-left: 1em;
+    }
 }
 
 footer       { }
 
 .erlang-logo-wrapper{
- text-align: center;
- margin-bottom: 1em;
+    text-align: center;
+    margin-top: 1em;
+    margin-bottom: 1em;
 }
 
 .main-title{
- text-align: center;
+    text-align: center;
 }
 
 .main-description{
- text-align: center;
- margin: 2em 0;
- font-size: 1.5em;
- line-height: 1.5em;
+    text-align: center;
+    margin: 2em 0;
+    font-size: 1.5em;
+    line-height: 1.5em;
 }
 
 .doc-table-wrapper, .doc-image-wrapper{
- width: 100%;
+    width: 100%;
 }
 
 .doc-image-wrapper{
- text-align: center;
+    text-align: center;
 }
 
 .doc-svg {
@@ -241,60 +415,60 @@ footer       { }
 }
 
 .doc-table, .doc-image{
- min-width: 50%;
- margin: 0 auto;
- font-size: 0.7em;
+    min-width: 50%;
+    margin: 0 auto;
+    font-size: 0.7em;
 }
 
 .doc-table-caption, .doc-image-caption{
- margin-top: 1em;
- font-style: italic;
- text-align: center;
+    margin-top: 1em;
+    font-style: italic;
+    text-align: center;
 }
 
 table {
- border-collapse: collapse;
- min-width: 50%;
- margin: 1em;
+    border-collapse: collapse;
+    min-width: 50%;
+    margin: 1em;
 }
 
 table, th, td {
- border: 1px solid #666;
+    border: 1px solid #666;
 }
 
 th, td {
- padding: 0.5em;
- text-align: left;
+    padding: 0.5em;
+    text-align: left;
 }
 
 tr:hover {
- background-color: #f5f5f5;
+    background-color: #f5f5f5;
 }
 
 tr:nth-child(even) {
- background-color: #f2f2f2;
+    background-color: #f2f2f2;
 }
 
 th {
- background-color: #777;
- color: #fefefe;
+    background-color: #777;
+    color: #fefefe;
 }
 
 .section-title, .section-subtitle, .section-version{
- text-align: center;
- margin: 0;
+    text-align: center;
+    margin: 0;
 }
 
 .section-title{
- font-weight: bold;
+    font-weight: bold;
 }
 
 .section-version{
- font-size: small;
+    font-size: small;
 }
 
 .expand-collapse-items{
- font-size: small;
+    font-size: small;
 }
 
 .title_link {
@@ -343,24 +517,24 @@ th {
 }
 
 hr{
-  border: 0;
-  border-top: 1px solid #aaa;
+    border: 0;
+    border-top: 1px solid #aaa;
 }
 
 .section-links, .panel-sections, .expand-collapse-items{
- padding: 0 1em;
+    padding: 0 1em;
 }
 
 .section-links, .panel-sections{
- margin-top: 0;
+    margin-top: 0;
 }
 
 a > .code {
- color: #1862ab;
+    color: #1862ab;
 }
 
 .func-types-title{
- font-size: 1em;
+    font-size: 1em;
 }
 
 .since{
diff --git a/lib/erl_docgen/priv/js/flipmenu/Makefile b/lib/erl_docgen/priv/js/flipmenu/Makefile
index be0bed74fb..33cce4e6d6 100644
--- a/lib/erl_docgen/priv/js/flipmenu/Makefile
+++ b/lib/erl_docgen/priv/js/flipmenu/Makefile
@@ -76,7 +76,7 @@ release_spec: opt
 release_html_spec: html
 	$(INSTALL_DIR) "$(RELEASE_PATH)/doc/js/flipmenu"
 	$(INSTALL_DATA) $(JS_FILES) $(GIF_FILES) "$(RELEASE_PATH)/doc/js/flipmenu"
-	$(INSTALL_DATA) ../highlight.js ../highlight.pack.js "$(RELEASE_PATH)/doc/js/"
+	$(INSTALL_DATA) ../highlight.js ../highlight.pack.js ../topbar.js "$(RELEASE_PATH)/doc/js/"
 
 release_docs_spec: $(DOC_TARGETS:%=release_%_spec)
 
diff --git a/lib/erl_docgen/priv/js/topbar.js b/lib/erl_docgen/priv/js/topbar.js
new file mode 100644
index 0000000000..ef36f09c8c
--- /dev/null
+++ b/lib/erl_docgen/priv/js/topbar.js
@@ -0,0 +1,16 @@
+
+function toggleDisplay() {
+    var leftnav=document.getElementById('leftnav');
+    var topbar=document.getElementsByClassName('topbar-expand')[0];
+    if (leftnav.classList.contains('show')) {
+        leftnav.classList.remove('show');
+        topbar.classList.remove('show');
+        setTimeout(() => {
+            leftnav.classList.add('hide-mobile');
+        }, 350);
+    } else {
+        leftnav.classList.add('show');
+        topbar.classList.add('show');
+        leftnav.classList.remove('hide-mobile');
+    }
+}
diff --git a/lib/erl_docgen/priv/xsl/db_html.xsl b/lib/erl_docgen/priv/xsl/db_html.xsl
index acde262899..1fedb53fea 100644
--- a/lib/erl_docgen/priv/xsl/db_html.xsl
+++ b/lib/erl_docgen/priv/xsl/db_html.xsl
@@ -766,6 +766,8 @@
     <xsl:param name="curModule"/>
     <html>
       <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
+        <meta charset="utf-8"></meta>
         <xsl:choose>
           <xsl:when test="string-length($stylesheet) > 0">
             <link rel="stylesheet" href="{$topdocdir}/{$stylesheet}" type="text/css"/>
@@ -784,32 +786,16 @@
         </xsl:choose>
       </head>
       <body>
-
         <div id="container">
           <script id="js" type="text/javascript" language="JavaScript" src="{$topdocdir}/js/flipmenu/flipmenu.js"/>
           <script id="js2" type="text/javascript" src="{$topdocdir}/js/erlresolvelinks.js"></script>
+          <script id="js3" type="text/javascript" src="{$topdocdir}/js/topbar.js"></script>
           <script language="JavaScript" type="text/javascript">
             <xsl:text disable-output-escaping="yes"><![CDATA[
             ]]></xsl:text>
+             //-->
+]]></xsl:text>
           </script>
+          <div class="topbar">
+            <xsl:variable name="show">
+              <xsl:if test="(local-name() = 'application') or (local-name() = 'part') or (local-name() = 'releasenotes')">
+                
+                <xsl:text>show show-permanent</xsl:text>
+              </xsl:if>
+            </xsl:variable>
+            <div class="topbar-expand {$show}">
+              <button onclick="toggleDisplay();">
+                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 54 54" width="24" height="24">
+                  <g>
+	            <path style="fill:#000000;" d="M27,54c-0.552,0-1-0.448-1-1V8c0-0.552,0.448-1,1-1s1,0.448,1,1v45C28,53.552,27.552,54,27,54z"/>
+	            <path style="fill:#000000;" d="M11,25c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l16-16
+		                                   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-16,16C11.512,24.902,11.256,25,11,25z"/>
+	            <path style="fill:#000000;" d="M43,25c-0.256,0-0.512-0.098-0.707-0.293l-16-16c-0.391-0.391-0.391-1.023,0-1.414
+		                                   s1.023-0.391,1.414,0l16,16c0.391,0.391,0.391,1.023,0,1.414C43.512,24.902,43.256,25,43,25z"/>
+	            <path style="fill:#000000;" d="M43,2H11c-0.552,0-1-0.448-1-1s0.448-1,1-1h32c0.552,0,1,0.448,1,1S43.552,2,43,2z"/>
+                  </g>
+                </svg>
+              </button>
+            </div>
+            <div class="topbar-title">
+              <h1 id="{header/title}">
+                <xsl:if test="string-length($chapnum) > 0">
+                  <xsl:value-of select="$chapnum"/>&#160;
+                </xsl:if>
+                <xsl:value-of select="header/title"/>
+              </h1>
+            </div>
+            <div class="search-expand {$show}">
+            </div>
+          </div>
           
           <xsl:call-template name="menu">
             <xsl:with-param name="chapnum" select="$chapnum"/>
@@ -905,10 +924,22 @@
   <xsl:template name="menu">
     <xsl:param name="chapnum"/>
     <xsl:param name="curModule"/>
+    <xsl:variable name="show">
+      <xsl:choose>
+        <xsl:when test="(local-name() = 'application') or (local-name() = 'part') or (local-name() = 'releasenotes')">
+          
+          <xsl:text>show show-permanent</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>hide-mobile</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
     <xsl:if test="(local-name() = 'part') or ((local-name() = 'chapter') and ancestor::part)">
       
       <xsl:call-template name="menu.ug">
         <xsl:with-param name="chapnum" select="$chapnum"/>
+        <xsl:with-param name="show" select="$show"/>
       </xsl:call-template>
     </xsl:if>
 
@@ -922,12 +953,14 @@
 	
 	<xsl:call-template name="menu.internal.ug">
           <xsl:with-param name="chapnum" select="$chapnum"/>
+          <xsl:with-param name="show" select="$show"/>
 	</xsl:call-template>
       </xsl:when>
       <xsl:when test="(local-name() = 'internal' and descendant::erlref) or (((local-name() = 'erlref') or (local-name() = 'comref') or (local-name() = 'cref') or (local-name() = 'fileref') or (local-name() = 'appref')) and ancestor::internal)">
 	
 	<xsl:call-template name="menu.internal.ref">
           <xsl:with-param name="curModule" select="$curModule"/>
+          <xsl:with-param name="show" select="$show"/>
 	</xsl:call-template>
       </xsl:when>
     </xsl:choose>
@@ -935,12 +968,14 @@
       
       <xsl:call-template name="menu.ref">
         <xsl:with-param name="curModule" select="$curModule"/>
+        <xsl:with-param name="show" select="$show"/>
       </xsl:call-template>
     </xsl:if>
     <xsl:if test="(local-name() = 'releasenotes') or ((local-name() = 'chapter') and ancestor::releasenotes)">
       
       <xsl:call-template name="menu.rn">
         <xsl:with-param name="chapnum" select="$chapnum"/>
+        <xsl:with-param name="show" select="$show"/>
       </xsl:call-template>
     </xsl:if>
   </xsl:template>
@@ -1435,8 +1470,9 @@
   
   <xsl:template name="menu.internal.ug">
     <xsl:param name="chapnum"/>
+    <xsl:param name="show"/>
 
-    <aside id="leftnav">
+    <aside class="{$show}" id="leftnav">
       <nav class="leftnav-tube">
 
         <xsl:call-template name="erlang_logo"/>
@@ -1464,7 +1500,9 @@
     
   <xsl:template name="menu.internal.ref">
       <xsl:param name="curModule"/>
-      <aside id="leftnav">
+      <xsl:param name="show"/>
+      
+      <aside class="{$show}" id="leftnav">
       <nav class="leftnav-tube">
 
         <xsl:call-template name="erlang_logo"/>
@@ -1492,7 +1530,8 @@
 
   
   <xsl:template name="menu.internal.ug_ref">
-    <aside id="leftnav">
+    <xsl:param name="show"/>
+    <aside class="{$show}" id="leftnav">
       <nav class="leftnav-tube">
 
         <xsl:call-template name="erlang_logo"/>
@@ -1563,8 +1602,9 @@
   
   <xsl:template name="menu.ug">
     <xsl:param name="chapnum"/>
+    <xsl:param name="show"/>
 
-    <aside id="leftnav">
+    <aside class="{$show}" id="leftnav">
       <nav class="leftnav-tube">
 
         <xsl:call-template name="erlang_logo"/>
@@ -1725,7 +1765,9 @@
   
   <xsl:template name="menu.ref">
     <xsl:param name="curModule"/>
-    <aside id="leftnav">
+    <xsl:param name="show"/>
+
+    <aside class="{$show}" id="leftnav">
       <nav class="leftnav-tube">
 
         <xsl:call-template name="erlang_logo"/>
@@ -2772,8 +2814,9 @@
   
   <xsl:template name="menu.rn">
     <xsl:param name="chapnum"/>
+    <xsl:param name="show"/>
 
-    <aside id="leftnav">
+    <aside class="{$show}" id="leftnav">
       <nav class="leftnav-tube">
 
         <xsl:call-template name="erlang_logo"/>
diff --git a/make/otp_release_targets.mk b/make/otp_release_targets.mk
index c594f5c07f..f525368d7a 100644
--- a/make/otp_release_targets.mk
+++ b/make/otp_release_targets.mk
@@ -195,6 +195,7 @@ local_copy_of_topdefs: $(HTMLDIR)/otp_doc.css
 	$(INSTALL) $(DOCGEN)/priv/images/erlang-logo.png $(HTMLDIR)
 	$(INSTALL) $(DOCGEN)/priv/images/erlang-logo.gif $(HTMLDIR)
 	$(INSTALL_DIR) $(HTMLDIR)/js/flipmenu
+	$(INSTALL) $(DOCGEN)/priv/js/*.js $(HTMLDIR)/js
 	$(INSTALL) $(DOCGEN)/priv/js/flipmenu/flip_closed.gif \
 	 	$(DOCGEN)/priv/js/flipmenu/flip_open.gif \
 		$(DOCGEN)/priv/js/flipmenu/flip_static.gif \
diff --git a/system/doc/top/templates/index.html.src b/system/doc/top/templates/index.html.src
index 49d7facda5..0c899efe0c 100644
--- a/system/doc/top/templates/index.html.src
+++ b/system/doc/top/templates/index.html.src
@@ -20,17 +20,43 @@ limitations under the License.
 -->
 
 <html>
-<head>
+  <head>
+  <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
+  <meta charset="utf-8"></meta>
   <link rel="stylesheet" href="otp_doc.css" type="text/css"/>
   <title>Erlang/OTP #otp_base_vsn#</title>
 
 <script id="js" type="text/javascript" language="JavaScript" src="js/flipmenu/flipmenu.js">
-
+</script>
+<script id="js2" type="text/javascript" language="JavaScript" src="js/topbar.js">
 </script>
 </head> 
 
 <body>
   <div id="container">
+      <div class="topbar">
+    <div class="topbar-expand">
+      <button onclick="toggleDisplay();">
+        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 54 54" width="24" height="24">
+<g>
+	<path style="fill:#000000;" d="M27,54c-0.552,0-1-0.448-1-1V8c0-0.552,0.448-1,1-1s1,0.448,1,1v45C28,53.552,27.552,54,27,54z"/>
+	<path style="fill:#000000;" d="M11,25c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l16-16
+		c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-16,16C11.512,24.902,11.256,25,11,25z"/>
+	<path style="fill:#000000;" d="M43,25c-0.256,0-0.512-0.098-0.707-0.293l-16-16c-0.391-0.391-0.391-1.023,0-1.414
+		s1.023-0.391,1.414,0l16,16c0.391,0.391,0.391,1.023,0,1.414C43.512,24.902,43.256,25,43,25z"/>
+	<path style="fill:#000000;" d="M43,2H11c-0.552,0-1-0.448-1-1s0.448-1,1-1h32c0.552,0,1,0.448,1,1S43.552,2,43,2z"/>
+</g>
+        </svg>
+      </button>
+    </div>
+    <div class="topbar-title">
+      <h1>
+        Erlang/OTP #otp_base_vsn#
+      </h1>
+    </div>
+    <div class="search-expand">
+    </div>
+  </div>
 <aside id="leftnav">
 <nav class="leftnav-tube">
 <div class="erlang-logo-wrapper">
@@ -91,7 +117,18 @@ limitations under the License.
     <h2>Some hints that may get you started faster</h2>
 
 <ul>
-
+  <li class="mobile-only">
+    The navigation menu can be accessed by clicking the <svg style="transform: rotate(180deg);" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 54 54" width="24" height="24">
+<g>
+	<path style="fill:#000000;" d="M27,54c-0.552,0-1-0.448-1-1V8c0-0.552,0.448-1,1-1s1,0.448,1,1v45C28,53.552,27.552,54,27,54z"/>
+	<path style="fill:#000000;" d="M11,25c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l16-16
+		c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-16,16C11.512,24.902,11.256,25,11,25z"/>
+	<path style="fill:#000000;" d="M43,25c-0.256,0-0.512-0.098-0.707-0.293l-16-16c-0.391-0.391-0.391-1.023,0-1.414
+		s1.023-0.391,1.414,0l16,16c0.391,0.391,0.391,1.023,0,1.414C43.512,24.902,43.256,25,43,25z"/>
+	<path style="fill:#000000;" d="M43,2H11c-0.552,0-1-0.448-1-1s0.448-1,1-1h32c0.552,0,1,0.448,1,1S43.552,2,43,2z"/>
+</g>
+        </svg> symbol in the top left corner.
+  </li>
 <li>
 The Erlang language is described in the 
 <a href="reference_manual/users_guide.html">Erlang Reference Manual</a>. 
-- 
2.31.1

Places

File 1270-docgen-Make-docs-collapse-better-on-small-screens.patch of Package erlang (Revision e62e4225e41cf032f11f17868c8e4330)

Places