full-screen mode

nedbat · Aug 10, 2021 · 4e6b00a · 4e6b00a
1 parent 1be0be9
commit 4e6b00a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 7 deletions.
diff --git a/CHANGES b/CHANGES
@@ -5,6 +5,8 @@ Unreleased
 
 * Added lightness tweaking controls.
 
+* Added "F" for full-screen mode.
+
 * Web interface now has a favicon.
 
 Aptus 3.0.1, July 25 2021

diff --git a/src/aptus/web/static/aptus.js b/src/aptus/web/static/aptus.js
@@ -536,11 +536,13 @@ const App = {
                     this.view.paint();
                     break;
 
-                case "L":
-                    const url = `${document.URL}${this.view.url_args()}`.replace("&", "&amp;");
-                    const html = `<a href="${url}">${url}</a>`;
-                    document.querySelector("#linklink").innerHTML = html;
-                    Panels.show_panel("#linkpanel");
+                case "F":
+                    if (document.fullscreenElement) {
+                        document.exitFullscreen();
+                    }
+                    else {
+                        document.querySelector("body").requestFullscreen().then(() => {});
+                    }
                     break;
 
                 case "i":
@@ -551,6 +553,13 @@ const App = {
                     Panels.toggle_panel("#infopanel");
                     break;
 
+                case "L":
+                    const url = `${document.URL}${this.view.url_args()}`.replace("&", "&amp;");
+                    const html = `<a href="${url}">${url}</a>`;
+                    document.querySelector("#linklink").innerHTML = html;
+                    Panels.show_panel("#linkpanel");
+                    break;
+
                 case "P":
                     Panels.toggle_panel("#palettepanel");
                     break;

diff --git a/src/aptus/web/static/style.css b/src/aptus/web/static/style.css
@@ -12,7 +12,7 @@ html.wait { cursor: wait; }
 
 body { font-family: Helvetica; overflow: hidden; margin: 0; padding: 0; height: 100%; }
 
-.canvas_container { display: flex; justify-content: center; width: 100%; }
+.canvas_container { display: flex; justify-content: center; width: 100%; height: 100%; }
 
 .canvas_sizer { position: absolute; top: 0; overflow: hidden; }
 
@@ -42,7 +42,7 @@ canvas.view.move { cursor: grab; }
 
 #splash.hidden { visibility: hidden; opacity: 0; transition: opacity 1s, visibility 1s; }
 
-#helppanel { width: 20em; top: 5em; right: 5em; left: auto; padding: 1em 1em 0 1em; }
+#helppanel { width: 20em; top: 5em; right: 5em; left: auto; padding: 1em 1em 0 1em; max-height: 80%; overflow: scroll; }
 
 #infopanel { width: 18em; top: 5em; left: 5em; }
 

diff --git a/src/aptus/web/static/style.scss b/src/aptus/web/static/style.scss
@@ -36,6 +36,7 @@ body {
     display: flex;
     justify-content: center;
     width: 100%;
+    height: 100%;
 }
 
 .canvas_sizer {
@@ -127,6 +128,8 @@ canvas.view {
     right: 5em;
     left: auto;
     padding: 1em 1em 0 1em;
+    max-height: 80%;
+    overflow: scroll;
 }
 
 #infopanel {

diff --git a/src/aptus/web/templates/mainpage.html b/src/aptus/web/templates/mainpage.html
@@ -47,6 +47,7 @@
         <p>
         <kbd>a</kbd> set the angle<br/>
         <kbd>c</kbd> toggle continuous coloring<br/>
+        <kbd>F</kbd> toggle full-screen<br/>
         <kbd>i</kbd> set the iteration limit<br/>
         <kbd>I</kbd> toggle the computation parameters panel<br/>
         <kbd>L</kbd> display a permalink<br/>