css updates

startpage.html

@@ -62,7 +62,6 @@
 
         border: solid black 2px;
         border-radius: 10px;
-        padding: 10px;
 
         display: block;
 
@@ -77,10 +76,14 @@
       * SETTINGS TABS
       */
       #tabList {
-        display: block;
+        display: flex;
+        justify-content: space-between;
+        position: sticky;
+        top: 0;
+        background-color: rgba(173, 165, 165, 1);
+        padding: 5px 5px 5px 5px;
+
         border-bottom: solid 2px black;
-        padding-bottom: 10px;
-        margin-bottom: 10px;
       }
 
       .tab {
@@ -103,6 +106,9 @@
         flex-shrink: 1;
       }
 
+      #containers {
+        padding-left: .25rem;
+      }
       /*
       * SETTINGS PAGES
       */
@@ -239,17 +245,18 @@
       <br />
 
       <div id="settingsContainer" class="movable settingsContainer hidden">
-        <div id="tabList" style="display: flex; justify-content: space-between;">
+        <div id="tabList">
           <div>
             <a class="tab" id="containerTab">layers</a>
             <a class="tab" id="globalSettingsTab">global settings</a>
           </div>
-          <div>
+          <div style="text-align: right;">
             <a class="tab" id="instructionsTab">help</a>
-            <a class="tab" id="ioTab">import / export</a>
+            <a class="tab" id="ioTab" style="margin:0;">import / export</a>
           </div>
         </div>
 
+        <div style="padding: 0 .5rem;">
         <!-- note to self: 
            - i should rename these so they don't end in "Form",
            - rather something like "Page". to do that though i need
@@ -443,7 +450,8 @@
             </div>
           </form>
       </div>
-    TODO: CONTAINER TEXT RIGHT ALIGN AND ALSO PADDING LEVELS
+      </div>
+      todo: first image being made not working, free transform mode
     </div>
   </body>
 
@@ -480,7 +488,7 @@
 
       enableDivider: true,
       dividerColor: "",
-      centerAlign: false,
+      textAlign: "center",
       shadowX: "0",
       shadowY: "0",
       shadowBlur: "0",
@@ -621,16 +629,11 @@
          }
 
           this.initializeTextContainer();
-          // this.createTextContainerMenuListing();
-
           this.loadBookmarks();
-          // this.loadBookmarkListings();
         }
 
         this.applySettings();
-        
         this.addContainerEventListeners()
-        // this.addSettingsMenuEventListeners();
 
         // and save
         containerDataMap.set(this.id, this);
@@ -992,6 +995,10 @@
                         <label for=${this.id + "-settings-center-align"}>center</label>
                         <input id=${this.id + "-settings-center-align"} type="radio" name="align" />
                       </div>
+                      <div>
+                        <label for=${this.id + "-settings-right-align"}>right</label>
+                        <input id=${this.id + "-settings-right-align"} type="radio" name="align" />
+                      </div>
                     </div>
                   </div>
               </div>
@@ -1107,9 +1114,11 @@
       }
       // TEXT ALIGNMENT
       document.getElementById(this.id + "-settings-left-align").checked =
-        !containerSettings.centerAlign;
+        !containerSettings.textAlign == "left";
       document.getElementById(this.id + "-settings-center-align").checked =
-        containerSettings.centerAlign;
+        containerSettings.textAlign == "center";
+     document.getElementById(this.id + "-settings-right-align").checked =
+        containerSettings.textAlign == "right";
      // BOOKMARK OPTIONS
       document.getElementById(this.id + "-settings-section-color").value =
         containerSettings.sectionColor;
@@ -1302,13 +1311,14 @@
         }
 
         /** TEXT ALIGNMENT */
-        if (containerSettings.centerAlign) {
+        if (containerSettings.textAlign == "center") {
           document.getElementById(this.id).style.textAlign = "center";
-        } else {
+        } else if (containerSettings.textAlign == "left") {
           document.getElementById(this.id).style.textAlign = "left";
+        } else if (containerSettings.textAlign == "right") {
+          document.getElementById(this.id).style.textAlign = "right";
         }
 
-
         /** BOOKMARK CUSTOMIZATION */
         // apply link customization
         let linkElements = document.getElementsByClassName(this.id + "-link");
@@ -1444,6 +1454,10 @@
         document
           .getElementById(this.id + "-settings-center-align")
           .addEventListener("change", changeContainerAlignment, false);
+        document
+          .getElementById(this.id + "-settings-right-align")
+          .addEventListener("change", changeContainerAlignment, false);
+
         // bookmark section setting listeners
         document
           .getElementById(this.id + "-settings-section-color")
@@ -2880,12 +2894,16 @@
       let container   = containerDataMap.get(containerId);
 
       if (document.getElementById(containerId + "-settings-left-align").checked) {
-        container.containerSettings.centerAlign = false;
+        container.containerSettings.textAlign = "left";
         document.getElementById(containerId).style.textAlign = "left";
       } else if (document.getElementById(containerId + "-settings-center-align").checked) {
-        container.containerSettings.centerAlign = true;
+        container.containerSettings.textAlign = "center";
         document.getElementById(containerId).style.textAlign = "center";
+      } else if (document.getElementById(containerId + "-settings-right-align").checked) {
+        container.containerSettings.textAlign = "right";
+        document.getElementById(containerId).style.textAlign = "right";
       }
+
     }
     function changeFont(buttonClicked) {
       let containerId = buttonClicked.target.id.split("-settings")[0];