Update layout to have better sizing properties (#1040)

This commit is contained in:
toasted-nutbread 2020-11-16 20:41:12 -05:00 committed by GitHub
parent 37ea7e2c9a
commit ea7b8621c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 65 additions and 57 deletions

View File

@ -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 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>
<div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
<div id="definitions"></div>
<div class="scan-disable" id="query-parser-container">
<div id="query-parser-content"></div>
</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 -->

View File

@ -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">

View File

@ -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%;
}

View File

@ -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 */