From 6ed1ce415492195fb8da3ba2793d9bc33b10686e Mon Sep 17 00:00:00 2001 From: yukkop Date: Tue, 15 Sep 2026 14:15:05 +0000 Subject: [PATCH] reading --- site/src/main.rs | 44 +++++++++++++++++++++++--------------------- site/style.css | 13 +++++++++++-- 2 files changed, 34 insertions(+), 23 deletions(-) diff --git a/site/src/main.rs b/site/src/main.rs index dbe866b..d1a0f85 100644 --- a/site/src/main.rs +++ b/site/src/main.rs @@ -73,29 +73,31 @@ fn App() -> impl IntoView {

{format!("{word_count} слов для спокойной тренировки. Нажмите на слово, чтобы увидеть его чтение.")}

-
-
-

"01"

-
-

{reading_text.title}

-

"Каждое слово — отдельная карточка для слуха и произношения."

-
-

{format!("{word_count} слов")}

-
-

- {render_reading_text(reading_text, selected_id, select_word, activate_key)} -

-
+
+
+ {move || selected_id.get().and_then(word_by_id).map(|word| detail_view(word, audio_ref, audio_state, toggle_audio)).unwrap_or_else(|| view! { +
+

"Словарная карточка"

+

"Выберите слово в тексте"

+

"Карточка покажет написание, американское произношение и русскую подсказку."

+
+ }.into_any())} +
-
- {move || selected_id.get().and_then(word_by_id).map(|word| detail_view(word, audio_ref, audio_state, toggle_audio)).unwrap_or_else(|| view! { -
-

"Словарная карточка"

-

"Выберите слово в тексте"

-

"Карточка покажет написание, американское произношение и русскую подсказку."

+
+
+

"01"

+
+

{reading_text.title}

+

"Каждое слово — отдельная карточка для слуха и произношения."

+
+

{format!("{word_count} слов")}

- }.into_any())} -
+

+ {render_reading_text(reading_text, selected_id, select_word, activate_key)} +

+
+
diff --git a/site/style.css b/site/style.css index 1d6e383..5546c7c 100644 --- a/site/style.css +++ b/site/style.css @@ -35,6 +35,10 @@ --type-detail: 1.4rem; --type-heading: clamp(1.8rem, 4vw, 3.2rem); --type-display: clamp(2.8rem, 8vw, 6.5rem); + --workspace-detail-min: 18rem; + --workspace-detail-column: 1fr; + --workspace-reading-column: 1.65fr; + --workspace-height: min(44rem, calc(100svh - var(--space-7) - var(--space-7) - var(--space-6))); } * { box-sizing: border-box; } @@ -49,8 +53,10 @@ h1 { font-family: var(--serif); font-size: var(--type-display); font-weight: 400 h1 em { color: var(--coral); display: block; } h2 { font-family: var(--serif); font-size: var(--type-heading); font-weight: 400; letter-spacing: -0.04em; margin-bottom: var(--space-2); } .lede { font-size: var(--type-lede); line-height: 1.55; max-width: 36rem; } -.reading-card, .detail-panel, .dictionary-section { border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--space-6); } +.reading-card, .detail-panel, .dictionary-section { border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); } +.reader-workspace { display: grid; gap: var(--space-6); grid-template-columns: minmax(var(--workspace-detail-min), var(--workspace-detail-column)) minmax(0, var(--workspace-reading-column)); height: var(--workspace-height); margin-bottom: var(--space-6); } .reading-card { background: var(--surface); box-shadow: var(--shadow); padding: var(--space-6); } +.reader-workspace .reading-card { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding: var(--space-4); } .section-heading, .dictionary-heading { align-items: flex-start; display: flex; gap: var(--space-4); } .section-heading > div, .dictionary-heading > div { flex: 1; } .section-heading p:not(.section-number), .dictionary-heading p:not(.section-number) { color: var(--ink-muted); line-height: 1.5; } @@ -60,6 +66,7 @@ h2 { font-family: var(--serif); font-size: var(--type-heading); font-weight: 400 .reading-word:hover, .reading-word:focus-visible, .reading-word.active { background: var(--sun); border-color: var(--coral); color: var(--ink); outline: none; } .punctuation { white-space: pre; } .detail-panel { background: var(--forest); color: var(--paper); min-height: 17rem; padding: var(--space-6); } +.reader-workspace .detail-panel { align-self: start; position: sticky; top: var(--space-5); } .detail-kicker { color: var(--sun); } .detail-content h2 { color: var(--sun); } .pronunciation-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-5) 0; } @@ -71,7 +78,7 @@ dd { font-family: var(--serif); font-size: var(--type-detail); margin: 0; } .audio-button:disabled { background: transparent; border-color: var(--forest-light); color: var(--forest-pale); cursor: not-allowed; } .audio-note { color: var(--forest-pale); font-size: var(--type-caption); margin: var(--space-3) 0 0; } .detail-empty { max-width: 32rem; } -.dictionary-section { background: var(--mist); padding: var(--space-6); } +.dictionary-section { background: var(--mist); margin-bottom: var(--space-6); padding: var(--space-6); } .search-label { display: block; font-size: var(--type-caption); font-weight: 800; margin: var(--space-5) 0 var(--space-2); } input { background: var(--input); border: var(--border-width) solid var(--ink); border-radius: var(--radius-sm); color: var(--ink); padding: var(--space-3); width: min(100%, 34rem); } input:focus-visible { outline: var(--space-1) solid var(--coral); outline-offset: var(--space-1); } @@ -81,4 +88,6 @@ th, td { border-bottom: var(--border-width) solid var(--line); padding: var(--sp th { color: var(--forest); font-size: var(--type-overline); letter-spacing: 0.08em; text-transform: uppercase; } .table-word { background: none; border: 0; border-bottom: 1px solid var(--forest); color: var(--forest); font-weight: 800; padding: 0; } .table-word:hover, .table-word:focus-visible { color: var(--coral); outline: none; } +@media (min-width: 80rem) { .lesson-shell { width: calc(100% - clamp(4rem, 5vw, 12rem)); } } +@media (max-width: 58rem) { .reader-workspace { display: flex; flex-direction: column; height: auto; } .reader-workspace .reading-card { order: -1; overflow: visible; } .reader-workspace .detail-panel { position: static; } } @media (max-width: 38rem) { .lesson-shell { width: min(100% - var(--space-4), 76rem); padding: var(--space-5) 0; } .reading-card, .detail-panel, .dictionary-section { padding: var(--space-4); } .section-heading, .dictionary-heading { gap: var(--space-3); } .word-count { display: none; } .pronunciation-grid { grid-template-columns: 1fr; } }