summaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-16 20:41:12 -0500
committerGitHub <noreply@github.com>2020-11-16 20:41:12 -0500
commitea7b8621c3620ae55d2596f98c26f33b479db01c (patch)
tree858e541d688e09365e26e8ee185746ee8fdb71fd /ext
parent37ea7e2c9a3d15b6de61972a2163a323572acd28 (diff)
Update layout to have better sizing properties (#1040)
Diffstat (limited to 'ext')
-rw-r--r--ext/bg/search.html64
-rw-r--r--ext/fg/float.html42
-rw-r--r--ext/mixed/css/display.css9
-rw-r--r--ext/mixed/css/search.css5
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 */