summaryrefslogtreecommitdiff
path: root/ext/bg
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-01-29 19:10:57 -0500
committerGitHub <noreply@github.com>2021-01-29 19:10:57 -0500
commit04cf4ec8d58f3f0802973d1527f173b3926b62d0 (patch)
treed488443d62d9e0a16bd7565fcac7db7356154b29 /ext/bg
parentc7c5bab1a986c2babe40c3b41267ce4303b41499 (diff)
Settings and welcome page improvements (#1326)
* Update wording to be less repetitive * Remove the shadow theme option from the welcome page, to avoid confusion * Update input sizes * Update select text to not clip the triangle icon * Update wording * Update descriptions * Remove "popup" to not exclude the search page
Diffstat (limited to 'ext/bg')
-rw-r--r--ext/bg/css/settings2.css18
-rw-r--r--ext/bg/settings2.html8
-rw-r--r--ext/bg/welcome.html37
3 files changed, 22 insertions, 41 deletions
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 4a465a2c..46e859c1 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -45,9 +45,8 @@
--line-height-default: calc(20 / var(--font-size-no-units));
--outline-item-height: 40px;
--outline-item-icon-size: 32px;
- --input-short: 80px;
- --input-height-short: 24px;
- --input-half-width: calc(var(--input-width-large) / 2 - var(--padding) / 2);
+ --input-short-width: calc(var(--input-width-large) / 2 - var(--padding) / 2);
+ --input-short-height: 24px;
--fab-button-size: 56px;
--fab-button-padding: 16px;
--modal-width: 600px;
@@ -648,19 +647,14 @@ a.settings-item.settings-item-button {
input[type=text].short-width,
input[type=number].short-width,
select.short-width {
- width: var(--input-short);
-}
-input[type=text].half-width,
-input[type=number].half-width,
-select.short-width {
- width: var(--input-half-width);
+ width: var(--input-short-width);
}
input[type=text].short-height,
input[type=number].short-height,
select.short-height {
- height: var(--input-height-short);
- margin-top: calc(var(--settings-group-right-max-height) - var(--input-height-short) - var(--font-size-small));
- line-height: var(--input-height-short);
+ height: var(--input-short-height);
+ margin-top: calc(var(--settings-group-right-max-height) - var(--input-short-height) - var(--font-size-small));
+ line-height: var(--input-short-height);
}
.settings-item-button-group-container {
max-height: none;
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index d29bd4a1..2f1e2f73 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -579,7 +579,7 @@
<div class="settings-item-group-item">
<div class="settings-item-group-item-label">Shadow</div>
<select data-setting="general.popupOuterTheme" class="short-width short-height">
- <option value="auto">Auto-detect</option>
+ <option value="auto">Auto</option>
<option value="default">Light</option>
<option value="dark">Dark</option>
</select>
@@ -876,9 +876,9 @@
</div>
<div class="settings-item-right">
<select data-setting="general.popupVerticalTextPosition">
- <option value="default">Same as for horizontal text</option>
- <option value="before">Before text reading direction</option>
- <option value="after">After text reading direction</option>
+ <option value="default">Same as horizontal text</option>
+ <option value="before">Before reading direction</option>
+ <option value="after">After reading direction</option>
<option value="left">Left of text</option>
<option value="right">Right of text</option>
</select>
diff --git a/ext/bg/welcome.html b/ext/bg/welcome.html
index 5ff3c818..44db4a77 100644
--- a/ext/bg/welcome.html
+++ b/ext/bg/welcome.html
@@ -40,16 +40,16 @@
</div></div></div>
<div class="settings-item-children settings-item-children-group">
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
- The <img src="/mixed/img/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the settings page.
+ The <img src="/mixed/img/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the <a href="settings2.html" target="_blank" rel="noopener">Settings</a> page.
</div></div></div></div>
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
- The <img src="/mixed/img/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open a search page,
+ The <img src="/mixed/img/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open the <a href="/bg/search.html" target="_blank" rel="noopener">Search</a> page,
enabling text and terms to be looked up using the installed dictionaries.
This can even be used in offline mode!
</div></div></div></div>
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
- The <img src="/mixed/img/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open a page
- with some general information about Yomichan.
+ The <img src="/mixed/img/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open the <a href="/bg/info.html" target="_blank" rel="noopener">Information</a> page,
+ which has some helpful information and links about Yomichan.
</div></div></div></div>
</div>
</div>
@@ -74,12 +74,12 @@
</div>
<div class="settings-item">
<div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
- After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding the scanning modifier key.
- The default key is <kbd>Shift</kbd>, which can be configured below.
+ After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding a modifier key.
+ The default key is <kbd>Shift</kbd>, which can be disabled or configured below.
</div></div></div>
<div class="settings-item-children settings-item-children-group">
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
- Clicking the <img src="/mixed/img/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the popup search results
+ Clicking the <img src="/mixed/img/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the search results
will play an audio clip of a term's pronunciation using an online dictionary, if available.
</div></div></div></div>
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
@@ -167,28 +167,15 @@
<div class="settings-item-description">Adjust the style of the popup.</div>
</div>
<div class="settings-item-right">
- <div class="settings-item-group">
- <div class="settings-item-group-item">
- <div class="settings-item-group-item-label">Body</div>
- <select data-setting="general.popupTheme" class="short-width short-height">
- <option value="default">Light</option>
- <option value="dark">Dark</option>
- </select>
- </div>
- <div class="settings-item-group-item">
- <div class="settings-item-group-item-label">Shadow</div>
- <select data-setting="general.popupOuterTheme" class="short-width short-height">
- <option value="auto">Auto-detect</option>
- <option value="default">Light</option>
- <option value="dark">Dark</option>
- </select>
- </div>
- </div>
+ <select data-setting="general.popupTheme" class="short-width">
+ <option value="default">Light</option>
+ <option value="dark">Dark</option>
+ </select>
</div>
</div></div>
<a href="settings2.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner">
<div class="settings-item-left">
- <div class="settings-item-label">View more settings on the Settings page</div>
+ <div class="settings-item-label">More customization options are available on the Settings page</div>
</div>
<div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>