Update layout to have better sizing properties (#1040)

author: toasted-nutbread <toasted-nutbread@users.noreply.github.com> 2020-11-16 20:41:12 -0500
committer: GitHub <noreply@github.com> 2020-11-16 20:41:12 -0500
commit: ea7b8621c3620ae55d2596f98c26f33b479db01c (patch)
tree: 858e541d688e09365e26e8ee185746ee8fdb71fd /ext
parent: 37ea7e2c9a3d15b6de61972a2163a323572acd28 (diff)
4 files changed, 64 insertions, 56 deletions
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 4feec8d5..959979d9 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -17,48 +17,50 @@
 <body>
 
 <div class="content scrollbar" id="content"><div class="content-body" id="content-body">
+    <div class="content-body-inner">
 
-    <span tabindex="-1" id="content-scroll-focus"></span>
+        <span tabindex="-1" id="content-scroll-focus"></span>
 
-    <div id="intro">
-        <h1>Yomichan Search</h1>
-    </div>
+        <div id="intro">
+            <h1>Yomichan Search</h1>
+        </div>
 
-    <div class="scan-disable">
-        <div class="search-options">
-            <label class="search-option">
-                <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                <span class="search-option-label">Automatic kana conversion</span>
-            </label>
-            <label class="search-option">
-                <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                <span class="search-option-label">Clipboard monitor</span>
-            </label>
-            <div class="search-option" id="query-parser-mode-container" hidden>
-                <span class="search-option-pre-label">Parser:</span>
-                <select id="query-parser-mode-select"></select>
+        <div class="scan-disable">
+            <div class="search-options">
+                <label class="search-option">
+                    <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                    <span class="search-option-label">Automatic kana conversion</span>
+                </label>
+                <label class="search-option">
+                    <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                    <span class="search-option-label">Clipboard monitor</span>
+                </label>
+                <div class="search-option" id="query-parser-mode-container" hidden>
+                    <span class="search-option-pre-label">Parser:</span>
+                    <select id="query-parser-mode-select"></select>
+                </div>
+            </div>
+            <div class="search-textbox-container">
+                <textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="false" autofocus></textarea>
+                <button id="search-button"><span class="icon-button-icon" data-icon="magnifying-glass"></span></button>
             </div>
         </div>
-        <div class="search-textbox-container">
-            <textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="false" autofocus></textarea>
-            <button id="search-button"><span class="icon-button-icon" data-icon="magnifying-glass"></span></button>
-        </div>
-    </div>
 
-    <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
+        <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
 
-    <div class="scan-disable" id="query-parser-container">
-        <div id="query-parser-content"></div>
-    </div>
+        <div class="scan-disable" id="query-parser-container">
+            <div id="query-parser-content"></div>
+        </div>
 
-    <div id="definitions"></div>
+        <div id="definitions"></div>
 
-    <div id="no-results" hidden>
-        <div class="entry">
-            <p>No results found.</p>
+        <div id="no-results" hidden>
+            <div class="entry">
+                <p>No results found.</p>
+            </div>
         </div>
-    </div>
 
+    </div>
 </div></div>
 
 <!-- Scripts -->
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 69418472..174cfe42 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -17,36 +17,38 @@
 
 <div class="content-outer">
 <div class="content scrollbar" id="content"><div class="content-body" id="content-body">
+    <div class="content-body-inner">
 
-    <span tabindex="-1" id="content-scroll-focus"></span>
+        <span tabindex="-1" id="content-scroll-focus"></span>
 
-    <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
+        <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
 
-    <div class="scan-disable" id="query-parser-container" hidden>
-        <div class="search-option" id="query-parser-mode-container" hidden>
-            <select id="query-parser-mode-select"></select>
+        <div class="scan-disable" id="query-parser-container" hidden>
+            <div class="search-option" id="query-parser-mode-container" hidden>
+                <select id="query-parser-mode-select"></select>
+            </div>
+            <div id="query-parser-content"></div>
         </div>
-        <div id="query-parser-content"></div>
-    </div>
 
-    <div id="definitions"></div>
+        <div id="definitions"></div>
 
-    <div id="no-results" hidden>
-        <div class="entry">
-            <p>No results found.</p>
+        <div id="no-results" hidden>
+            <div class="entry">
+                <p>No results found.</p>
+            </div>
         </div>
-    </div>
 
-    <div id="error-extension-unloaded" hidden>
-        <div class="entry">
-            <h1>Yomichan Updated!</h1>
-            <p>
-                The Yomichan extension has been updated to a new version! In order to continue
-                viewing definitions on this page, you must reload this tab or restart your browser.
-            </p>
+        <div id="error-extension-unloaded" hidden>
+            <div class="entry">
+                <h1>Yomichan Updated!</h1>
+                <p>
+                    The Yomichan extension has been updated to a new version! In order to continue
+                    viewing definitions on this page, you must reload this tab or restart your browser.
+                </p>
+            </div>
         </div>
-    </div>
 
+    </div>
 </div></div>
 <div class="content-sidebar scrollbar" id="content-sidebar" hidden><div class="content-sidebar-inner">
     <div class="content-sidebar-top">
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index d4fb8b4c..09fc5703 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -220,16 +220,19 @@ a {
     width: 100%;
     height: 100%;
     display: flex;
-    flex-flow: row nowrap;
+    flex-flow: column nowrap;
     overflow-x: hidden;
     overflow-y: scroll;
     position: relative;
     align-items: stretch;
-    justify-content: center;
+    justify-content: flex-start;
 }
 .content-body {
     flex: 1 1 auto;
-    height: 100%;
+    position: relative;
+}
+.content-body-inner {
+    width: 100%;
 }
 
 
diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css
index 456add33..997c089f 100644
--- a/ext/mixed/css/search.css
+++ b/ext/mixed/css/search.css
@@ -229,11 +229,12 @@ label.toggle {
 }
 
 /* Content layout */
-.content-body {
+.content-body-inner {
     width: var(--main-content-size);
     padding: 0 var(--main-content-padding);
-    max-width: var(--main-content-size);
+    max-width: 100%;
     box-sizing: border-box;
+    margin: 0 auto;
 }
 
 /* Search bar */
author	toasted-nutbread <toasted-nutbread@users.noreply.github.com>	2020-11-16 20:41:12 -0500
committer	GitHub <noreply@github.com>	2020-11-16 20:41:12 -0500
commit	ea7b8621c3620ae55d2596f98c26f33b479db01c (patch)
tree	858e541d688e09365e26e8ee185746ee8fdb71fd /ext
parent	37ea7e2c9a3d15b6de61972a2163a323572acd28 (diff)