alex/yomichan
1
Fork 0
Code Releases Activity

Improve layout of context.html on Firefox Mobile

Browse Source
This commit is contained in:
toasted-nutbread 2019-10-13 18:23:59 -04:00
parent ba27ea2c9d
commit d42a07dc0b
2 changed files with 111 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
ext/bg/context.html
View File

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

25
ext/bg/js/context.js
View File

@ -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'));
});
}));