Fill translations and responsively switch them for smaller screens
This commit is contained in:
parent
ad1653ec3f
commit
da80904d54
|
@ -1,4 +1,4 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
@ -24,15 +24,14 @@
|
||||||
<div class="inner-wrapper" id="template-add">
|
<div class="inner-wrapper" id="template-add">
|
||||||
<div class="add-text"></div>
|
<div class="add-text"></div>
|
||||||
<div class="add-buttons">
|
<div class="add-buttons">
|
||||||
<button type="button" class="never-save link"></button>
|
<button type="button" class="never-save link " short-text="" full-text=""></button>
|
||||||
<select class="select-folder"></select>
|
<button type="button" class="add-save" short-text="" full-text=""></button>
|
||||||
<button type="button" class="add-save"></button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="inner-wrapper" id="template-change">
|
<div class="inner-wrapper" id="template-change">
|
||||||
<div class="change-text"></div>
|
<div class="change-text"></div>
|
||||||
<div class="change-buttons">
|
<div class="change-buttons">
|
||||||
<button type="button" class="change-save"></button>
|
<button type="button" class="change-save" short-text="" full-text=""></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -25,33 +25,31 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
? chrome.runtime.getURL('images/icon38_locked.png')
|
? chrome.runtime.getURL('images/icon38_locked.png')
|
||||||
: chrome.runtime.getURL('images/icon38.png');
|
: chrome.runtime.getURL('images/icon38.png');
|
||||||
|
|
||||||
document.getElementById('close').src = chrome.runtime.getURL('images/close.png');
|
|
||||||
document.getElementById('close').alt = i18n.close;
|
|
||||||
|
|
||||||
var closeButton = document.getElementById('close-button'),
|
|
||||||
body = document.querySelector('body'),
|
|
||||||
bodyRect = body.getBoundingClientRect();
|
|
||||||
|
|
||||||
// i18n
|
|
||||||
body.classList.add('lang-' + lang.slice(0, 2));
|
|
||||||
|
|
||||||
document.getElementById('logo-link').title = i18n.appName;
|
document.getElementById('logo-link').title = i18n.appName;
|
||||||
|
|
||||||
|
var neverButton = document.querySelector('#template-add .never-save');
|
||||||
|
neverButton.setAttribute('short-text', i18n.never);
|
||||||
|
neverButton.setAttribute('full-text', i18n.notificationNeverSave);
|
||||||
|
|
||||||
|
var selectFolder = document.querySelector('#template-add .select-folder');
|
||||||
|
selectFolder.setAttribute('aria-label', i18n.folder);
|
||||||
|
|
||||||
|
var addButton = document.querySelector('#template-add .add-save');
|
||||||
|
addButton.setAttribute('short-text', i18n.yes);
|
||||||
|
addButton.setAttribute('full-text', i18n.notificationAddSave);
|
||||||
|
|
||||||
|
var changeButton = document.querySelector('#template-change .change-save');
|
||||||
|
changeButton.setAttribute('short-text', i18n.yes);
|
||||||
|
changeButton.setAttribute('full-text', i18n.notificationChangeSave);
|
||||||
|
|
||||||
|
var closeIcon = document.getElementById('close');
|
||||||
|
closeIcon.src = chrome.runtime.getURL('images/close.png');
|
||||||
|
closeIcon.alt = i18n.close;
|
||||||
|
|
||||||
|
var closeButton = document.getElementById('close-button')
|
||||||
closeButton.title = i18n.close;
|
closeButton.title = i18n.close;
|
||||||
closeButton.setAttribute('aria-label', i18n.close);
|
closeButton.setAttribute('aria-label', i18n.close);
|
||||||
|
|
||||||
if (bodyRect.width < 768) {
|
|
||||||
document.querySelector('#template-add .add-save').textContent = i18n.yes;
|
|
||||||
document.querySelector('#template-add .never-save').textContent = i18n.never;
|
|
||||||
document.querySelector('#template-add .select-folder').style.display = 'none';
|
|
||||||
document.querySelector('#template-change .change-save').textContent = i18n.yes;
|
|
||||||
} else {
|
|
||||||
document.querySelector('#template-add .add-save').textContent = i18n.notificationAddSave;
|
|
||||||
document.querySelector('#template-add .never-save').textContent = i18n.notificationNeverSave;
|
|
||||||
document.querySelector('#template-add .select-folder').style.display = isVaultLocked ? 'none' : 'initial';
|
|
||||||
document.querySelector('#template-add .select-folder').setAttribute('aria-label', i18n.folder);
|
|
||||||
document.querySelector('#template-change .change-save').textContent = i18n.notificationChangeSave;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.querySelector('#template-add .add-text').textContent = i18n.notificationAddDesc;
|
document.querySelector('#template-add .add-text').textContent = i18n.notificationAddDesc;
|
||||||
document.querySelector('#template-change .change-text').textContent = i18n.notificationChangeDesc;
|
document.querySelector('#template-change .change-text').textContent = i18n.notificationChangeDesc;
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
body {
|
body {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -24,7 +24,6 @@
|
||||||
grid-template-columns: auto max-content;
|
grid-template-columns: auto max-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.outer-wrapper > *, .inner-wrapper > * {
|
.outer-wrapper > *, .inner-wrapper > * {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
@ -77,6 +76,35 @@ button.neutral {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
.never-save::after {
|
||||||
|
content: attr(full-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-save::after {
|
||||||
|
content: attr(full-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-save::after {
|
||||||
|
content: attr(full-text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.never-save::after {
|
||||||
|
content: attr(short-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-save::after {
|
||||||
|
content: attr(short-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-save::after {
|
||||||
|
content: attr(short-text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (print) {
|
@media (print) {
|
||||||
body {
|
body {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
Loading…
Reference in New Issue