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
GitHub
parent
c7c5bab1a9
commit
04cf4ec8d5
@ -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.
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user