forked from akai/readest
fix(settings): tidy Word Lens data pack and level rows on mobile (#4655)
Move the informational Data pack hints ("Open a book…" / "No data available…")
from the inline trailing slot into the row description so they wrap under the
label instead of stretching the row wide on mobile. Drop the size from the
Download button label and surface it as the row description (matching the
"Downloaded · size" state). Add a "CEFR level" description under the Level row.
Includes translations for the three new i18n keys across all locales.
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -205,11 +205,10 @@ const WordLensPanel: React.FC<WordLensPanelProps> = ({ bookKey, onBack }) => {
|
||||
const renderDataPackRow = () => {
|
||||
if (!bookSource) {
|
||||
return (
|
||||
<SettingsRow label={_('Data pack')}>
|
||||
<span className='text-base-content/60 settings-content text-end'>
|
||||
{_('Open a book to manage its data pack.')}
|
||||
</span>
|
||||
</SettingsRow>
|
||||
<SettingsRow
|
||||
label={_('Data pack')}
|
||||
description={_('Open a book to manage its data pack.')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (resolving) {
|
||||
@@ -221,11 +220,10 @@ const WordLensPanel: React.FC<WordLensPanelProps> = ({ bookKey, onBack }) => {
|
||||
}
|
||||
if (!packStatus) {
|
||||
return (
|
||||
<SettingsRow label={_('Data pack')}>
|
||||
<span className='text-base-content/60 settings-content text-end'>
|
||||
{_('No data available for this language pair yet.')}
|
||||
</span>
|
||||
</SettingsRow>
|
||||
<SettingsRow
|
||||
label={_('Data pack')}
|
||||
description={_('No data available for this language pair yet.')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const size = formatBytes(packStatus.pack.bytes);
|
||||
@@ -243,7 +241,7 @@ const WordLensPanel: React.FC<WordLensPanelProps> = ({ bookKey, onBack }) => {
|
||||
);
|
||||
}
|
||||
return (
|
||||
<SettingsRow label={_('Data pack')}>
|
||||
<SettingsRow label={_('Data pack')} description={size}>
|
||||
<div className='flex items-center gap-2'>
|
||||
{downloading && progress !== null && progress > 0 && (
|
||||
<div
|
||||
@@ -268,7 +266,7 @@ const WordLensPanel: React.FC<WordLensPanelProps> = ({ bookKey, onBack }) => {
|
||||
disabled={downloading}
|
||||
className='btn btn-primary btn-contrast btn-sm shrink-0'
|
||||
>
|
||||
{_('Download {{size}}', { size })}
|
||||
{_('Download')}
|
||||
</button>
|
||||
</div>
|
||||
</SettingsRow>
|
||||
@@ -293,7 +291,7 @@ const WordLensPanel: React.FC<WordLensPanelProps> = ({ bookKey, onBack }) => {
|
||||
onChange={() => setWordLensEnabled(!wordLensEnabled)}
|
||||
data-setting-id='settings.wordlens.enabled'
|
||||
/>
|
||||
<SettingsRow label={_('Level')} disabled={!wordLensEnabled}>
|
||||
<SettingsRow label={_('Level')} description={_('CEFR level')} disabled={!wordLensEnabled}>
|
||||
<div className='flex items-center gap-2'>
|
||||
<input
|
||||
type='range'
|
||||
|
||||
Reference in New Issue
Block a user