reworked bookmark listing menu dropdowns to reduce clicks + add clarity

startpage.html

@@ -902,7 +902,7 @@
           <div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block; margin: 0;">
 
             <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
-              <p>${this.name}: bookmarks</p>
+              <p>bookmarks</p>
               <p class="expandedMenuIndicator">+</p>
             </div>
             <div class="expandableMenu" id=${this.id + "-bookmark-menu"} >
@@ -952,13 +952,74 @@
             </div>
             
           <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
-              <p>${this.name}: customize</p>
+              <p>color + shape options</p>
               <p class="expandedMenuIndicator">+</p>
             </div>
             <div class="expandableMenu">
 
+              <p class="menuHeader">background color</p>
+                <div class="containerOptionListing">
+                  <label for=${this.id + "-settings-bg-color"}>set background color: </label>
+                  <input id=${this.id + "-settings-bg-color"} type="color" />
+                </div>
+
+                <div class="containerOptionListing">
+                  <label for=${this.id + "-settings-bg-alpha"}>set background opacity (%): </label>
+                  <input id=${this.id + "-settings-bg-alpha"} type="range" min="0" max="100" />
+                </div>
+
+              <p class="menuHeader">layer shape</p>
+                <div class="containerOptionListing">
+                  <label for=${this.id + "-settings-border-radius"}>roundness: </label>
+                  <input id=${this.id + "-settings-border-radius"} type="range" max="175" />
+                </div>
+
+              <p class="menuHeader">border</p>
+                <div class="containerOptionListing">
+                  <label for=${this.id + "-settings-border-color"}>set border color: </label>
+                  <input id=${this.id + "-settings-border-color"} type="color" />
+                </div>
+
+                <div class="containerOptionListing">
+                  <label for=${this.id + "-settings-border-width"}>set border width: </label>
+                  <input id=${this.id + "-settings-border-width"} type="range" min="0" max="100" />
+                </div>
+
+              
+
+              <p class="menuHeader">shadow / glow</p>
+                <div class="containerOptionListing">
+                  <label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
+                  <input id=${this.id + "-settings-shadow-color"} type="color" />
+                </div>
+
+                <div class="containerOptionListing">
+                  <label>shadow opacity:</label>
+                  <input id=${this.id + "-settings-shadow-alpha"} type="range" min="0" max="100" />
+                </div>
+
+                <br />
+
+                <div class="containerOptionListing">
+                  <label for=${this.id + "-settings-shadow-x"}>shift shadow left/right: </label>
+                  <input id=${this.id + "-settings-shadow-x"} type="range" min="-1000" max="1000" />
+                </div>
+
+                <div class="containerOptionListing">
+                  <label for=${this.id + "-settings-shadow-y"}>shift shadow up/down: </label>
+                  <input id=${this.id + "-settings-shadow-y"} type="range" min="-1000" max="1000" />
+                </div>
+
+                <br />
+
+                <div class="containerOptionListing">
+                  <label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label>
+                  <input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" />
+                </div>
+             </div>
+
             <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
-                <p>header options</p>
+              <p>header text options</p>
               <p class="expandedMenuIndicator">+</p>
             </div>              
             <div class="expandableMenu">
@@ -1011,7 +1072,7 @@
             </div>
 
             <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
-                <p>text options</p>
+              <p>general text options</p>
               <p class="expandedMenuIndicator">+</p>
             </div>
             <div class="expandableMenu">
@@ -1086,76 +1147,6 @@
                   </div>
                 </div>
             </div>
-
-              <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
-                <p>color + shape options</p>
-                <p class="expandedMenuIndicator">+</p>
-              </div>
-              <div class="expandableMenu">
-
-                <p class="menuHeader">background color</p>
-                  <div class="containerOptionListing">
-                    <label for=${this.id + "-settings-bg-color"}>set background color: </label>
-                    <input id=${this.id + "-settings-bg-color"} type="color" />
-                  </div>
-
-                  <div class="containerOptionListing">
-                    <label for=${this.id + "-settings-bg-alpha"}>set background opacity (%): </label>
-                    <input id=${this.id + "-settings-bg-alpha"} type="range" min="0" max="100" />
-                  </div>
-
-                <p class="menuHeader">layer shape</p>
-                  <div class="containerOptionListing">
-                    <label for=${this.id + "-settings-border-radius"}>roundness: </label>
-                    <input id=${this.id + "-settings-border-radius"} type="range" max="175" />
-                  </div>
-
-                <p class="menuHeader">border</p>
-                  <div class="containerOptionListing">
-                    <label for=${this.id + "-settings-border-color"}>set border color: </label>
-                    <input id=${this.id + "-settings-border-color"} type="color" />
-                  </div>
-
-                  <div class="containerOptionListing">
-                    <label for=${this.id + "-settings-border-width"}>set border width: </label>
-                    <input id=${this.id + "-settings-border-width"} type="range" min="0" max="100" />
-                  </div>
-
-                
-
-                <p class="menuHeader">shadow / glow</p>
-                  <div class="containerOptionListing">
-                    <label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
-                    <input id=${this.id + "-settings-shadow-color"} type="color" />
-                  </div>
-
-                  <div class="containerOptionListing">
-                    <label>shadow opacity:</label>
-                    <input id=${this.id + "-settings-shadow-alpha"} type="range" min="0" max="100" />
-                  </div>
-
-                  <br />
-
-                  <div class="containerOptionListing">
-                    <label for=${this.id + "-settings-shadow-x"}>shift shadow left/right: </label>
-                    <input id=${this.id + "-settings-shadow-x"} type="range" min="-1000" max="1000" />
-                  </div>
-
-                  <div class="containerOptionListing">
-                    <label for=${this.id + "-settings-shadow-y"}>shift shadow up/down: </label>
-                    <input id=${this.id + "-settings-shadow-y"} type="range" min="-1000" max="1000" />
-                  </div>
-
-                  <br />
-
-                  <div class="containerOptionListing">
-                    <label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label>
-                    <input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" />
-                  </div>
-                  
-
-               </div>
-            </div>
           </div>
 
           <div class="manageButtons">