diff options
| author | Vincent Ambo <mail@tazj.in> | 2022-07-28T13·38+0300 |
|---|---|---|
| committer | tazjin <tazjin@tvl.su> | 2022-07-28T15·16+0000 |
| commit | ca608d3e9c46c0c713c1fc0ee7e09a2c110c130c (patch) | |
| tree | b66cc78d23c47aeb35702d15d896283223e92cfb /users/tazjin/predlozhnik/src/main.rs | |
| parent | ebbda2484a47054aa16946d40c10130608c6e15a (diff) | |
style(predlozhnik): make the page look a bit more inviting r/4334
with some sprinkling of CSS and some different button classes, this doesn't look half bad! Change-Id: I49a3af4a77ce58713c735b2401b807062a3efb21 Reviewed-on: https://cl.tvl.fyi/c/depot/+/5989 Tested-by: BuildkiteCI Reviewed-by: tazjin <tazjin@tvl.su>
Diffstat (limited to 'users/tazjin/predlozhnik/src/main.rs')
| -rw-r--r-- | users/tazjin/predlozhnik/src/main.rs | 76 |
1 files changed, 39 insertions, 37 deletions
diff --git a/users/tazjin/predlozhnik/src/main.rs b/users/tazjin/predlozhnik/src/main.rs index 98d5703c79cf..1d864a37b945 100644 --- a/users/tazjin/predlozhnik/src/main.rs +++ b/users/tazjin/predlozhnik/src/main.rs @@ -5,7 +5,6 @@ use lazy_static::lazy_static; use maplit::hashmap; use std::collections::BTreeSet; use std::collections::HashMap; -use std::fmt::Write; #[derive(Clone, Copy, Debug, Hash, PartialEq, Eq, PartialOrd, Ord)] enum Падеж { @@ -110,19 +109,6 @@ lazy_static! { }; } -fn example_output() -> String { - let mut out = String::new(); - - for (пд, пги) in &*ПО_ПАДЕЖУ { - write!(out, "Падеж: {:?}\n", пд).ok(); - for п in пги { - write!(out, "\t{}\n", п).ok(); - } - } - - out -} - enum Сообщение { ВыбралПадеж(Option<Падеж>), ВыбралПредлог(Option<&'static str>), @@ -140,9 +126,13 @@ struct Вывод { объяснение: Option<Html>, } -fn объяснить(падеж: Падеж, предлог: &str) -> Html { +fn объясни(падеж: Падеж, предлог: &str) -> Html { html! { - {format!("{} {}", предлог, падеж.вопрос())} + <div id="obyasnenie"> + <hr/> + <h2>{"Пример:"}</h2> + {format!("{} {}", предлог, падеж.вопрос())} + </div> } } @@ -151,7 +141,7 @@ fn ограничить(м: &Модель) -> Вывод { (Some(пж), Some(пл)) => Вывод { доступные_падежи: BTreeSet::from([пж]), доступные_предлоги: BTreeSet::from([*пл]), - объяснение: Some(объяснить(пж, пл)), + объяснение: Some(объясни(пж, пл)), }, (Some(пж), None) => Вывод { @@ -174,6 +164,16 @@ fn ограничить(м: &Модель) -> Вывод { } } +fn класс_кнопки(выбран: bool, доступен: bool) -> String { + let класс = "btn ".to_string(); + класс + + match (выбран, доступен) { + (true, _) => "btn-primary", + (false, true) => "btn-ghost btn-primary", + (false, false) => "btn-ghost btn-default", + } +} + fn покажи_предлог( link: &Scope<Модель>, м: &Модель, @@ -182,13 +182,7 @@ fn покажи_предлог( ) -> Html { let выбран = м.предлог == Some(п); let доступен = вв.доступные_предлоги.contains(п); - - let mut класс = "btn btn-ghost ".to_string(); - класс += match (выбран, доступен) { - (true, _) => "btn-error", - (false, true) => "btn-primary", - (false, false) => "btn-default", - }; + let класс = класс_кнопки(выбран, доступен); html! { <button class={класс} @@ -208,13 +202,7 @@ fn покажи_падеж( ) -> Html { let выбран = м.падеж == Some(п); let доступен = вв.доступные_падежи.contains(&п); - - let mut класс = "btn btn-ghost ".to_string(); - класс += match (выбран, доступен) { - (true, _) => "btn-error", - (false, true) => "btn-primary", - (false, false) => "btn-default", - }; + let класс = класс_кнопки(выбран, доступен); html! { <button class={класс} @@ -262,26 +250,40 @@ impl Component for Модель { let объяснение = вв .объяснение - .map(|s| html! {{s}}) + .map(|exp| exp) .unwrap_or_else(|| html! {}); + let footer = html! { + <footer> + <hr/> + <p class="footer"> + <a href="https://code.tvl.fyi/tree/users/tazjin/predlozhnik">{"код"}</a> + {" | "} + {"сделано "}<a href="https://tvl.su">{"ООО \"ТВЛ\""}</a> + </p> + </footer> + }; + html! { <> - <link rel="stylesheet" - href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" /> + <div id="header"> + <h1>{"Прелдожник"}</h1> + <p>{"... показывает которые предлоги употребляются в каких падежах на русском языке."}</p> + </div> + + <h2>{"Выбирай предлог:"}</h2> <div id="predlogi"> - <h2>{"Предлоги:"}</h2> {кнапки_предлогов} </div> <hr/> + <h2>{"Выбирай падеж:"}</h2> <div id="padezhi"> - <h2>{"Падежи:"}</h2> {кнапки_падежов} </div> - <hr/> {объяснение} + {footer} </> } } |