alex/yomichan
1
Fork 0
Code Releases Activity

Update layout to have better sizing properties (#1040)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
ext/bg/search.html
View File

@ -17,48 +17,50 @@
<body> <body>
<div class="content scrollbar" id="content"><div class="content-body" id="content-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"> <div id="intro">
<h1>Yomichan Search</h1> <h1>Yomichan Search</h1>
</div> </div>
<div class="scan-disable"> <div class="scan-disable">
<div class="search-options"> <div class="search-options">
<label class="search-option"> <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> <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> <span class="search-option-label">Automatic kana conversion</span>
</label> </label>
<label class="search-option"> <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> <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> <span class="search-option-label">Clipboard monitor</span>
</label> </label>
<div class="search-option" id="query-parser-mode-container" hidden> <div class="search-option" id="query-parser-mode-container" hidden>
<span class="search-option-pre-label">Parser:</span> <span class="search-option-pre-label">Parser:</span>
<select id="query-parser-mode-select"></select> <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> </div>
<div class="search-textbox-container">
<textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="false" autofocus></textarea> <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
<button id="search-button"><span class="icon-button-icon" data-icon="magnifying-glass"></span></button>
<div class="scan-disable" id="query-parser-container">
<div id="query-parser-content"></div>
</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="no-results" hidden>
<div id="query-parser-content"></div> <div class="entry">
</div> <p>No results found.</p>
</div>
<div id="definitions"></div>
<div id="no-results" hidden>
<div class="entry">
<p>No results found.</p>
</div> </div>
</div>
</div>
</div></div> </div></div>
<!-- Scripts --> <!-- Scripts -->

42
ext/fg/float.html
View File

@ -17,36 +17,38 @@
<div class="content-outer"> <div class="content-outer">
<div class="content scrollbar" id="content"><div class="content-body" id="content-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="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="scan-disable" id="query-parser-container" hidden>
<div class="search-option" id="query-parser-mode-container" hidden> <div class="search-option" id="query-parser-mode-container" hidden>
<select id="query-parser-mode-select"></select> <select id="query-parser-mode-select"></select>
</div>
<div id="query-parser-content"></div>
</div> </div>
<div id="query-parser-content"></div>
</div>
<div id="definitions"></div> <div id="definitions"></div>
<div id="no-results" hidden> <div id="no-results" hidden>
<div class="entry"> <div class="entry">
<p>No results found.</p> <p>No results found.</p>
</div>
</div> </div>
</div>
<div id="error-extension-unloaded" hidden> <div id="error-extension-unloaded" hidden>
<div class="entry"> <div class="entry">
<h1>Yomichan Updated!</h1> <h1>Yomichan Updated!</h1>
<p> <p>
The Yomichan extension has been updated to a new version! In order to continue 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. viewing definitions on this page, you must reload this tab or restart your browser.
</p> </p>
</div>
</div> </div>
</div>
</div>
</div></div> </div></div>
<div class="content-sidebar scrollbar" id="content-sidebar" hidden><div class="content-sidebar-inner"> <div class="content-sidebar scrollbar" id="content-sidebar" hidden><div class="content-sidebar-inner">
<div class="content-sidebar-top"> <div class="content-sidebar-top">

9
ext/mixed/css/display.css
View File

@ -220,16 +220,19 @@ a {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: column nowrap;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
position: relative; position: relative;
align-items: stretch; align-items: stretch;
justify-content: center; justify-content: flex-start;
} }
.content-body { .content-body {
flex: 1 1 auto; flex: 1 1 auto;
height: 100%; position: relative;
}
.content-body-inner {
width: 100%;
} }

5
ext/mixed/css/search.css
View File

@ -229,11 +229,12 @@ label.toggle {
} }
/* Content layout */ /* Content layout */
.content-body { .content-body-inner {
width: var(--main-content-size); width: var(--main-content-size);
padding: 0 var(--main-content-padding); padding: 0 var(--main-content-padding);
max-width: var(--main-content-size); max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto;
} }
/* Search bar */ /* Search bar */