diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2019-10-13 18:23:59 -0400 |
|---|---|---|
| committer | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2019-10-13 18:23:59 -0400 |
| commit | d42a07dc0b722f77f64acf14ce818a2be532ea3f (patch) | |
| tree | ef9dc843a601831a5229f8aac77c03f244257cb0 | |
| parent | ba27ea2c9dd6357fa242c7c222503b7c85ec22a0 (diff) | |
Improve layout of context.html on Firefox Mobile
| -rw-r--r-- | ext/bg/context.html | 96 | ||||
| -rw-r--r-- | ext/bg/js/context.js | 25 |
2 files changed, 111 insertions, 10 deletions
diff --git a/ext/bg/context.html b/ext/bg/context.html index 843d3fd5..07dead87 100644 --- a/ext/bg/context.html +++ b/ext/bg/context.html @@ -9,25 +9,107 @@ <style type="text/css"> body { padding: 10px; - text-align: center; } + h3 { + margin-top: 10px; + } + label { + font-weight: normal; + } + + #mini { + text-align: center; + } + #full { + display: none; + } .btn-group { display: flex; justify-content: center; margin-top: 10px; white-space: nowrap; } + + html:root[data-mode=full] #mini { + display: none; + } + html:root[data-mode=full] #full { + display: initial; + } + + .link-group { + display: block; + line-height: 1.5em; + margin: 0 -10px; + padding: 0.5em 10px; + cursor: pointer; + color: #333; + text-decoration: none; + background-color: transparent; + transition: background-color 0.125s linear 0s; + max-width: none; + } + .link-group:hover, + .link-group:active { + color: #333; + text-decoration: none; + } + .link-group:hover>.link-group-label, + .link-group:active>.link-group-label { + text-decoration: underline; + } + .link-group:hover { + background-color: rgba(0, 0, 0, 0.05); + } + .link-group:active { + background-color: rgba(0, 0, 0, 0.1); + } + .link-group-icon { + width: 16px; + height: 16px; + text-align: center; + vertical-align: middle; + display: inline-block; + margin-right: 0.25em; + } + .link-group-icon>input { + margin: 0; + padding: 0; + } + .link-group-icon>.glyphicon { + top: 0; + } + .link-group-label { + vertical-align: middle; + } </style> </head> <body> - <div> - <input type="checkbox" id="enable-search"> + <div id="mini"> + <div> + <input type="checkbox" id="enable-search"> + </div> + <div class="btn-group"> + <button type="button" title="Search (Alt + Insert)" class="btn btn-default btn-xs action-open-search"><span class="glyphicon glyphicon-search"></span></button> + <button type="button" title="Options" class="btn btn-default btn-xs action-open-options"><span class="glyphicon glyphicon-wrench"></span></button> + <button type="button" title="Help" class="btn btn-default btn-xs action-open-help"><span class="glyphicon glyphicon-question-sign"></span></button> + </div> </div> - <div class="btn-group"> - <button type="button" id="open-search" title="Search (Alt + Insert)" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button> - <button type="button" id="open-options" title="Options" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-wrench"></span></button> - <button type="button" id="open-help" title="Help" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-question-sign"></span></button> + <div id="full"> + <h3 id="extension-info">Yomichan</h3> + <label class="link-group"> + <span class="link-group-icon"><input type="checkbox" id="enable-search2" /></span><span class="link-group-label">Enable content scanning</span> + </label> + <a class="link-group action-open-search"> + <span class="link-group-icon"><span class="glyphicon glyphicon-chevron-right"></span></span><span class="link-group-label">Search</span> + </a> + <a class="link-group action-open-options"> + <span class="link-group-icon"><span class="glyphicon glyphicon-chevron-right"></span></span><span class="link-group-label">Options</span> + </a> + <a class="link-group action-open-help"> + <span class="link-group-icon"><span class="glyphicon glyphicon-chevron-right"></span></span><span class="link-group-label">Help</span> + </a> </div> <script src="/mixed/lib/jquery.min.js"></script> diff --git a/ext/bg/js/context.js b/ext/bg/js/context.js index 0f88e9c0..a29f7aa7 100644 --- a/ext/bg/js/context.js +++ b/ext/bg/js/context.js @@ -17,10 +17,25 @@ */ +function showExtensionInfo() { + const node = document.getElementById('extension-info'); + if (node === null) { return; } + + const manifest = chrome.runtime.getManifest(); + node.textContent = `${manifest.name} v${manifest.version}`; +} + $(document).ready(utilAsync(() => { - $('#open-search').click(() => apiCommandExec('search')); - $('#open-options').click(() => apiCommandExec('options')); - $('#open-help').click(() => apiCommandExec('help')); + showExtensionInfo(); + + apiGetEnvironmentInfo().then(({browser}) => { + // Firefox mobile opens this page as a full webpage. + document.documentElement.dataset.mode = (browser === 'firefox-mobile' ? 'full' : 'mini'); + }); + + $('.action-open-search').click(() => apiCommandExec('search')); + $('.action-open-options').click(() => apiCommandExec('options')); + $('.action-open-help').click(() => apiCommandExec('help')); const optionsContext = { depth: 0, @@ -31,5 +46,9 @@ $(document).ready(utilAsync(() => { toggle.prop('checked', options.general.enable).change(); toggle.bootstrapToggle(); toggle.change(() => apiCommandExec('toggle')); + + const toggle2 = $('#enable-search2'); + toggle2.prop('checked', options.general.enable).change(); + toggle2.change(() => apiCommandExec('toggle')); }); })); |