Fix "Ensure pages reflow without requiring two-dimensional scrolling …

…without loss of content or functionality"
awslabs · Jul 1, 2024 · f09bf02 · f09bf02
1 parent ad984ba
commit f09bf02
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 0 deletions.
diff --git a/docs/dokka-presets/css/aws-styles.css b/docs/dokka-presets/css/aws-styles.css
@@ -77,4 +77,24 @@ div .compiler-info, .fold-button, .run-button {
     height: auto;
     opacity: 1;
     z-index: 999; /* Ensure the skip link is on top of other content */
+}
+
+.content .symbol .monospace {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.aws-toggle-content-btn {
+    font-size: 24px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+}
+
+@media (max-width: 320px) {
+    .content[data-togglable] {
+        display: none;
+    }
 }
diff --git a/docs/dokka-presets/templates/base.ftl b/docs/dokka-presets/templates/base.ftl
@@ -112,6 +112,58 @@
         }
     </script>
 
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const MIN_WINDOW_SIZE = 550
+
+            // Function to insert 'toggle content' button
+            function insertToggleContentButton(element) {
+                const toggleContent = document.createElement('button');
+                toggleContent.className = 'aws-toggle-content-btn';
+                toggleContent.textContent = '☰';
+
+                const initiallyVisible = window.innerWidth >= MIN_WINDOW_SIZE
+
+                toggleContent.setAttribute('aria-expanded', initiallyVisible.toString());
+                toggleContent.setAttribute('aria-label', 'Toggle code block for' + element.getAttribute("data-togglable"));
+                toggleContent.setAttribute('aria-controls', element.id);
+
+                if (!initiallyVisible) {
+                    element.style.display = 'none';
+                }
+
+                toggleContent.onclick = function() {
+                    const isExpanded = toggleContent.getAttribute('aria-expanded') === 'true';
+                    toggleContent.setAttribute('aria-expanded', (!isExpanded).toString());
+                    if (isExpanded) {
+                        element.style.display = 'none';
+                    } else {
+                        element.style.display = 'block';
+                    }
+
+                };
+
+                // Insert the hamburger button before the content element
+                element.parentNode.insertBefore(toggleContent, element);
+            }
+
+            document.querySelectorAll('.content[data-togglable]').forEach(insertToggleContentButton);
+
+            // Update content visibility on resize
+            window.addEventListener('resize', function() {
+                document.querySelectorAll('.content[data-togglable]').forEach(function(element) {
+                    const toggleContent = element.previousSibling;
+                    if (window.innerWidth < MIN_WINDOW_SIZE) {
+                        element.style.display = 'none';
+                        toggleContent.setAttribute('aria-expanded', 'false');
+                    } else {
+                        element.style.display = 'block';
+                        toggleContent.setAttribute('aria-expanded', 'true');
+                    }
+                });
+            });
+        });
+    </script>
 </head>
 <body>
 <div class="root">