Fix menu-dropdown on small screens

knolleary · knolleary · commit b6bbb2c143d2 · 2021-10-28T09:50:58.000+01:00
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -38,6 +38,14 @@
         </div>
     </div>
 </div>
+<script>
+ $(function() {
+    $(".menu").on("click", function(e) {
+        var s = $(".navigation").slideToggle('hide');
+        e.preventDefault();
+    });
+  });
+</script>
 <script defer data-domain="nodered.org" src="https://plausible.io/js/plausible.js"></script>
 </body>
 </html>
diff --git a/_includes/toc-about-survey.html b/_includes/toc-about-survey.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander"><div>V</div></li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul id="page-toc">
         </ul>
diff --git a/_includes/toc-about.html b/_includes/toc-about.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander"><div>V</div></li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul>
         <li {% if page.url == "/about/" %}class="active"{% endif %}><a href="/about/">About</a></li>
diff --git a/_includes/toc-api-admin.html b/_includes/toc-api-admin.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander">V</li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul>
             <li class="{% if page.url == "/docs/api/admin/" %} active{% endif %}"><a href="/docs/api/admin/">Admin HTTP API</a>
diff --git a/_includes/toc-api-context.html b/_includes/toc-api-context.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander">V</li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul>
             <li class="{% if page.url == "/docs/api/context/" %} active{% endif %}"><a href="/docs/api/context/">Context Store API</a>
diff --git a/_includes/toc-api-hooks.html b/_includes/toc-api-hooks.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander">V</li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul>
             <li class="{% if page.url == "/docs/api/hooks/" %} active{% endif %}"><a href="/docs/api/hooks/">Runtime Hooks API</a>
diff --git a/_includes/toc-api-library.html b/_includes/toc-api-library.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander">V</li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul>
             <li class="{% if page.url == "/docs/api/library/" %} active{% endif %}"><a href="/docs/api/library/">Library Store API</a>
diff --git a/_includes/toc-api-modules.html b/_includes/toc-api-modules.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander">V</li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul>
             <li class="{% if page.url == "/docs/api/modules/" %} active{% endif %}"><a href="/docs/api/modules/">Module APIs</a>
diff --git a/_includes/toc-api-storage.html b/_includes/toc-api-storage.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander">V</li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul>
             <li class="{% if page.url == "/docs/api/storage/" %} active{% endif %}"><a href="/docs/api/storage/">Storage API</a>
diff --git a/_includes/toc-api-ui.html b/_includes/toc-api-ui.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander">V</li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul>
             <li class="{% if page.url == "/docs/api/ui/" %} active{% endif %}"><a href="/docs/api/ui/">Editor</a></li>
diff --git a/_includes/toc-api.html b/_includes/toc-api.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander">V</li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul>
             <li class="toctitle active"><a href="/docs/api/">API Reference</a>
diff --git a/_includes/toc-creating-nodes.html b/_includes/toc-creating-nodes.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander"><div>V</div></li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul>
             <li class="toctitle active"><a href="/docs/creating-nodes/">Creating Nodes</a></li>
diff --git a/_includes/toc-developing-flows.html b/_includes/toc-developing-flows.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander"><div>V</div></li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul>
             <li class="toctitle active"><a href="/docs/developing-flows/">Developing Flows</a></li>
diff --git a/_includes/toc-developing.html b/_includes/toc-developing.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander"><div>V</div></li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li><a href="/docs/">&larr; back</a></li>
     <li class="tocheader">
         <ul>
diff --git a/_includes/toc-editor-guide.html b/_includes/toc-editor-guide.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander"><div>V</div></li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul>
             <li class="toctitle active"><a href="/docs/user-guide/editor">Editor Guide</a></li>
diff --git a/_includes/toc-user-guide.html b/_includes/toc-user-guide.html
@@ -1,5 +1,5 @@
 <ul class="toc">
-    <li class="toc-expander"><div>V</div></li>
+    <li class="toc-expander"><i class="fa fa-caret-down"></i></li>
     <li class="tocheader">
         <ul id="page-toc">
         </ul>
diff --git a/css/docs.css b/css/docs.css
@@ -69,6 +69,7 @@ ul.fixed-toc {
 }
 
 ul.toc {
+    position:relative;
     overflow: hidden;
     list-style-type: none;
     margin: 40px 0 20px 0;
@@ -209,10 +210,10 @@ ul.toc li.toc-expander {
     width: 35px;
     right: 0;
     top: 3px;
-    height: 37px;
+    height: 30px;
     background: #B68181;
     text-align: center;
-    line-height: 37px;
+    line-height: 30px;
     border-left: 1px solid #fff;
     color: #eee;
     z-index: 10;
@@ -318,7 +319,10 @@ ul.multi-column-toc {
     ul.toc li.toc-expander {
         display: inline;
     }
-    ul.toc.open li.toc-expander div {
+    ul.toc li.toc-expander i {
+
+    }
+    ul.toc.open li.toc-expander i {
         transform: rotate(180deg);
     }
 
