Sign Up
Log In
Log In
or
Sign Up
Places
All Projects
Status Monitor
Collapse sidebar
home:Ledest:erlang:23
erlang
3730-docgen-Make-docs-collapse-better-on-small-...
Overview
Repositories
Revisions
Requests
Users
Attributes
Meta
File 3730-docgen-Make-docs-collapse-better-on-small-screens.patch of Package erlang
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-table, .doc-image{ @@ -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[ <!-- - function getWinHeight() { - var myHeight = 0; - if( typeof( window.innerHeight ) == 'number' ) { - //Non-IE - myHeight = window.innerHeight; - } else if( document.documentElement && ( document.documentElement.clientWidth || - document.documentElement.clientHeight ) ) { - //IE 6+ in 'standards compliant mode' - myHeight = document.documentElement.clientHeight; - } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { - //IE 4 compatible - myHeight = document.body.clientHeight; - } - return myHeight; - } - function setscrollpos() { var objf=document.getElementById('loadscrollpos'); - document.getElementById("leftnav").scrollTop = objf.offsetTop - getWinHeight()/2; + document.getElementById("leftnav").firstChild.scrollTop = objf.offsetTop - 10; } function addEvent(obj, evType, fn){ @@ -826,8 +812,41 @@ addEvent(window, 'load', setscrollpos); - //-->]]></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')"> + <!-- For index pages we want to always show the navbar for mobile --> + <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"/>  + </xsl:if> + <xsl:value-of select="header/title"/> + </h1> + </div> + <div class="search-expand {$show}"> + </div> + </div> <!-- Generate menu --> <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')"> + <!-- For index pages we want to always show the navbar for mobile --> + <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)"> <!-- .../part or .../part/chapter --> <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 @@ <!-- .../internal or .../internal/chapter --> <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)"> <!-- .../internal,.../internal/erlref, .../internal/comref or .../internal/cref or .../internal/fileref or .../internal/appref --> <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 @@ <!-- .../application,.../application/erlref, .../application/comref or .../application/cref or .../application/fileref or .../application/appref --> <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)"> <!-- 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 @@ <!-- Menu.internal.chapter --> <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 @@ <!-- Menu.internal.ref --> <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 @@ <!-- Menu.internal.chapter combined when we have both modules and free-form chapters --> <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 @@ <!-- Menu.ug --> <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 @@ <!-- Menu.ref --> <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 @@ <!-- Menu.rn --> <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
Locations
Projects
Search
Status Monitor
Help
OpenBuildService.org
Documentation
API Documentation
Code of Conduct
Contact
Support
@OBShq
Terms
openSUSE Build Service is sponsored by
The Open Build Service is an
openSUSE project
.
Sign Up
Log In
Places
Places
All Projects
Status Monitor
