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
This commit is contained in:
toasted-nutbread 2021-01-29 19:10:57 -05:00 committed by GitHub
parent c7c5bab1a9
commit 04cf4ec8d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 46 deletions

View File

@ -88,9 +88,9 @@ primary language is not English, you may consider also importing the English ver
<a href="resources/images/browser-action-popup1.png"><img src="resources/images/browser-action-popup1.png" width="103" height="100"></a>
* The <img src="ext/mixed/img/cog.svg" alt="" width="16" height="16"> _cog_ button will open the settings page.
* The <img src="ext/mixed/img/magnifying-glass.svg" alt="" width="16" height="16"> _magnifying glass_ button will open the search page.
* The <img src="ext/mixed/img/question-mark-circle.svg" alt="" width="16" height="16"> _question mark_ button will open a page with some general information about Yomichan.
* The <img src="ext/mixed/img/cog.svg" alt="" width="16" height="16"> _cog_ button will open the Settings page.
* The <img src="ext/mixed/img/magnifying-glass.svg" alt="" width="16" height="16"> _magnifying glass_ button will open the Search page.
* The <img src="ext/mixed/img/question-mark-circle.svg" alt="" width="16" height="16"> _question mark_ button will open the Information page.
* The <img src="ext/mixed/img/profile.svg" alt="" width="16" height="16"> _profile_ button will appear when multiple profiles exist, allowing the current profile to be quickly changed.
2. Import the dictionaries you wish to use for term and kanji searches. If you do not have any dictionaries installed
@ -99,7 +99,7 @@ primary language is not English, you may consider also importing the English ver
<a href="resources/images/settings-dictionaries-popup.png"><img src="resources/images/settings-dictionaries-popup-thumb.png" width="128" height="86"></a>
3. Webpage text can be scanned by moving the cursor while holding the scanning modifier key, which is <kbd>Shift</kbd>
3. Webpage text can be scanned by moving the cursor while holding a modifier key, which is <kbd>Shift</kbd>
by default. If definitions are found for the text at the cursor position, a popup window containing term definitions
will open. This window can be dismissed by clicking anywhere outside of it.

View File

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

View File

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

View File

@ -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">
<select data-setting="general.popupTheme" class="short-width">
<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>
</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>

View File

@ -33,7 +33,8 @@
--input-font-size-no-units: 1;
--input-font-size: calc(1em * var(--input-font-size-no-units));
--input-width: calc(100em / (var(--font-size-no-units) * var(--input-font-size-no-units)));
--input-spacing: calc(10em / var(--font-size-no-units));
--input-width: calc(100em / (var(--font-size-no-units) * var(--input-font-size-no-units)) - var(--input-spacing) / 2);
--input-width-large: calc(200em / (var(--font-size-no-units) * var(--input-font-size-no-units)));
--input-height: calc(32em / (var(--font-size-no-units) * var(--input-font-size-no-units)));
--input-border-radius: 0.25em;