[fix] Updated Pref. view layout (closes #280)

ThePacielloGroup · Mar 10, 2023 · 1d0ed6a · 1d0ed6a
1 parent 1f710d8
commit 1d0ed6a
Show file tree

Hide file tree

Showing 4 changed files with 2,031 additions and 2,055 deletions.
diff --git a/src/browsers/preferences.js b/src/browsers/preferences.js
@@ -15,8 +15,8 @@ module.exports = (dirname) => {
 
   let createWindow = (x, y) => {
     win = new BrowserWindow({
-      width: 300,
-      height: 400,
+      width: 400,
+      height: 350,
       x: x,
       y: y,
       resizable: false,

diff --git a/src/views/css/preferences.css b/src/views/css/preferences.css
@@ -9,13 +9,12 @@ body {
     right: 1rem;
 }
 
-fieldset {
+.option {
     display: flex;
-    align-items: stretch;
-    flex-direction: column;
+    justify-content: space-between;
+    padding-top: 0.5rem;
 }
 
-select {
-    margin-left:auto;
-    align-self: flex-end;
-}
+.option select, .width-8 {
+    min-width: 8rem;
+}
diff --git a/src/views/preferences.html b/src/views/preferences.html
@@ -12,26 +12,35 @@
       <h1 class="sr-only">Preferences</h1>
       <fieldset>
         <legend>Options</legend>
-          <label for="option-rounding">Contrast ratio precision</label>
-          <select id="option-rounding">
-            <option value="1">1 decimal place</option>
-            <option value="2">2 decimal places</option>
-          </select>
-          <label for="option-checkForUpdates"><input type="checkbox" id="option-checkForUpdates"/>Enable Auto-Update</label>
-          <label for="option-lang">Language</label>
-          <select id="option-lang">
-            <option value="auto">Auto</option>
-            <option value="de" lang="de">Deutsch</option>
-            <option value="nl" lang="nl">Dutch</option>
-            <option value="en" lang="en">English</option>
-            <option value="es" lang="es">Español</option>>
-            <option value="fr" lang="fr">Français</option>
-            <option value="pl" lang="pl">Polski</option>
-            <option value="ru" lang="ru">Русский</option>
-            <option value="ja" lang="ja">日本語</option>
-            <option value="ko" lang="ko">한국어</option>
-          </select>
-          <div id="option-picker-group">
+          <div class="option">
+            <label for="option-rounding">Contrast ratio precision</label>
+            <select id="option-rounding">
+              <option value="1">1 decimal place</option>
+              <option value="2">2 decimal places</option>
+            </select>  
+          </div>
+          <div class="option">
+            <label for="option-checkForUpdates">Enable Auto-Update</label>
+            <div class="width-8">
+              <input type="checkbox" id="option-checkForUpdates"/>
+            </div>
+          </div>
+          <div class="option">
+            <label for="option-lang">Language</label>
+            <select id="option-lang">
+              <option value="auto">Auto</option>
+              <option value="de" lang="de">Deutsch</option>
+              <option value="nl" lang="nl">Dutch</option>
+              <option value="en" lang="en">English</option>
+              <option value="es" lang="es">Español</option>>
+              <option value="fr" lang="fr">Français</option>
+              <option value="pl" lang="pl">Polski</option>
+              <option value="ja" lang="ja">日本語</option>
+              <option value="ko" lang="ko">한국어</option>
+              <option value="ru" lang="ru">Русский</option>
+            </select>
+          </div>
+          <div class="option" id="option-picker-group">
             <label for="option-picker">Color Picker type</label>
             <select id="option-picker">
               <option value="1">Electron</option>
@@ -41,6 +50,7 @@ <h1 class="sr-only">Preferences</h1>
       </fieldset>
       <fieldset>
         <legend>Shortcuts</legend>
+        <div class="option">
           <label for="shortcut-foreground-picker">Picker foreground</label>
           <select id="shortcut-foreground-picker">
             <option value="F1">F1</option>
@@ -56,6 +66,8 @@ <h1 class="sr-only">Preferences</h1>
             <option value="F11">F11</option>
             <option value="F12">F12</option>
           </select>
+        </div>
+        <div class="option">
           <label for="shortcut-background-picker">Picker background</label>
           <select id="shortcut-background-picker">
             <option value="F1">F1</option>
@@ -71,6 +83,7 @@ <h1 class="sr-only">Preferences</h1>
             <option value="F11">F11</option>
             <option value="F12">F12</option>
           </select>
+        </div>
       </fieldset>
       <div class="buttons">
         <button id="save">Save</button>