Separately scroll instructions and main panel

It took me a day to figure out which 5 lines of code I needed to make this work.
alanhkarp · Oct 27, 2023 · 18ca95f · 18ca95f
1 parent 9b1eff8
commit 18ca95f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -606,7 +606,7 @@ <h1 style="text-align: center;">Settings</h1>
             </div>
       </div>
       <div id="instructionpanel" style="display: none;">
-        <h2 class="nodisplay">Instructions</h2>
+        <h1> Instructions</h1>
         <div id="sections">
           <section id="useinfo" name="instructions">
             <svg id="openuse" class="accordian" style="display: block;" width="24px" height="24px" viewBox="0 0 24 24"

diff --git a/src/ssp.css b/src/ssp.css
@@ -107,12 +107,16 @@ body {
   background-color: rgb(136, 204, 255, 0%); 
   width: auto;
   padding: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
   border: 0pt solid #47A;
   border-radius: 6pt;
 }
 #instructionpanel {
   flex: 0 0 auto;
   padding-left: 1em;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 #main {
   margin: 0;

diff --git a/src/ssp.js b/src/ssp.js
@@ -114,10 +114,12 @@ let SitePasswordWeb = ((function (self) {
         const $makedefaultbutton = get("makedefaultbutton")
         const $downloadbutton = get("downloadbutton");
         const $phishing = get("phishing");
+        const $instructionpanel = get("instructionpanel");
         // Fill in default values in case the user has changed them
         let defaultsettings = SitePassword.getDefaultSettings();
         loadSettingControls(defaultsettings);
-
+        // Set size of window for separately scrolling sections
+        $instructionpanel.style.height = window.innerHeight + "px";
         if (bkmkSettings) {
             $domainname.value = bkmkSettings.domainname;
             $sitename.value = bkmkSettings.sitename;
@@ -237,7 +239,6 @@ let SitePasswordWeb = ((function (self) {
             //$element.focus();
         }
 
-        const $instructionpanel = get("instructionpanel");
         const $maininfo = get("maininfo");
         $maininfo.onclick = function () {
             if ($instructionpanel.style.display === "none") {
@@ -1010,7 +1011,6 @@ let SitePasswordWeb = ((function (self) {
                 let $buttons = get(which + "helptextclose");
                 let bottom = $buttons.getBoundingClientRect().bottom + 10;
                 $element.style.height = bottom - top + "px";
-                hideInstructions();
                 hideSettings();
             } else {
                 helpAllOff();