diff options
| 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 | |
| parent | 37ea7e2c9a3d15b6de61972a2163a323572acd28 (diff) | |
Update layout to have better sizing properties (#1040)
| -rw-r--r-- | ext/bg/search.html | 64 | ||||
| -rw-r--r-- | ext/fg/float.html | 42 | ||||
| -rw-r--r-- | ext/mixed/css/display.css | 9 | ||||
| -rw-r--r-- | ext/mixed/css/search.css | 5 |
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 */ |