name horizontal scrolling and change impl accordingly

deathbeds · Feb 24, 2024 · 7c1f4fb · 7c1f4fb
1 parent e7d5835
commit 7c1f4fb
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/nbconvert_a11y/templates/a11y/components/settings.html.j2 b/nbconvert_a11y/templates/a11y/components/settings.html.j2
@@ -32,7 +32,7 @@ settings provides multiple screen reader navigation techniques when the dialog i
                         treegrid
                         tree".split())}}</li>
                     {# screen overflow exists for digital magnifier users to follow long horizontal lines of text. #}
-                    <li>{{checkbox("scroll overflow", True)}}</li>
+                    <li>{{checkbox("horizontal scrolling", False)}}</li>
                     {% set priority = {"Triple A": "AAA","Double A": "AA", "Single A": "A"}%}
                     <li>{{select("accessibility priority", priority, resources.wcag_priority)}}</li>
                     <li>{{checkbox("accesskey navigation", True)}}</li>

diff --git a/nbconvert_a11y/templates/a11y/static/settings.js b/nbconvert_a11y/templates/a11y/static/settings.js
@@ -199,9 +199,9 @@ document.forms.visibility['visually-hide'].addEventListener("change",
         document.querySelector("main").classList.toggle("visually-hide");
         activityLog(`${event.target.checked ? "hiding" : "showing"} main content`);
     });
-document.forms.settings['scroll-overflow'].addEventListener("change",
+document.forms.settings['horizontal-scrolling'].addEventListener("change",
     (x) => {
-        document.querySelector("main").classList.toggle("no-overflow");
+        BODY.classList.toggle("horiz-overflow", event.target.checked);
         // activityLog(`${event.target.checked ? "overflow scrol" : "showing"} main content`);
     });
 

diff --git a/nbconvert_a11y/templates/a11y/static/style.css b/nbconvert_a11y/templates/a11y/static/style.css
@@ -7,19 +7,19 @@ the variables specify critical degrees of freedom in the notebook style.
 ## notebook interface specific css variables
 
 */
-
 :root {
     --nb-focus-width: 3px;
     --nb-accent-color: auto;
-    --nb-background-color-dark: #2b2a33;
-    --nb-background-color-light: #FFFFFF;
     --nb-margin: 5%;
     --nb-font-size: 16px;
     --nb-font-family: serif;
     --nb-line-height: 1.5;
     --nb-scrolled-height: 600px;
+    --color-light: #FFFFFF;
+    --color-dark: #2b2a33;
 }
 
+
 /* map css variables to css properties on the `body` elements.
 this mapping turns out css variables into user interfaces. */
 
@@ -31,6 +31,22 @@ body {
     margin-right: var(--nb-margin);
     line-height: var(--nb-line-height);
     width: calc(100% - 2*var(--nb-margin));
+    color: var(--color-dark);
+    background-color: var(--color-light);
+}
+
+body.dark {
+    color: var(--color-light);
+    background-color: var(--color-dark);
+}
+
+main:fullscreen {
+    overflow: auto;
+    background: var(--color-light);
+}
+
+.dark main:fullscreen {
+    background: var(--color-dark);
 }
 
 /* ## notebook settings
@@ -182,13 +198,19 @@ td.nb-source {
     overflow-x: auto;
 }
 
-.no-overflow td.nb-source {
+.horiz-overflow td.nb-outputs, 
+.horiz-overflow header,
+.horiz-overflow footer
+{
+    width: max-content;
+}
+
+.horiz-overflow td.nb-source {
     overflow-x: visible;
 }
 
-.no-overflow td.nb-outputs {
+.horiz-overflow td.nb-outputs {
     min-width: 100%;
-    width: max-content;
 }
 
 #nb-settings li::marker,