maurice/snix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(predlozhnik): make the page look a bit more inviting

Browse source 
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>
This commit is contained in:
Vincent Ambo 2022-07-28 16:38:35 +03:00 • committed by tazjin
parent ebbda2484a
commit ca608d3e9c
4 changed files with 73 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

1
users/tazjin/predlozhnik/.gitignore vendored
View file

@ -1,2 +1,3 @@
/target/ /target/
**/*.rs.bk **/*.rs.bk
dist/

29
users/tazjin/predlozhnik/index.css Normal file
View file

@ -0,0 +1,29 @@
body {
max-width: 800px;
margin: 40px auto;
}
#header {
display: flex;
flex-direction: column;
}
.btn.btn-ghost:disabled {
border-color: #9f9f9f;
color: #9f9f9f;
}
#predlogi,#padezhi {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.btn {
margin: 3px;
flex-grow: 1;
}
.footer {
text-align: right;
}

4
users/tazjin/predlozhnik/index.html
View file

@ -2,6 +2,10 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" />
<link data-trunk rel="inline" href="index.css">
<title>Предложник</title> <title>Предложник</title>
</head> </head>
</html> </html>

76
users/tazjin/predlozhnik/src/main.rs
View file

@ -5,7 +5,6 @@ use lazy_static::lazy_static;
use maplit::hashmap; use maplit::hashmap;
use std::collections::BTreeSet; use std::collections::BTreeSet;
use std::collections::HashMap; use std::collections::HashMap;
use std::fmt::Write;
#[derive(Clone, Copy, Debug, Hash, PartialEq, Eq, PartialOrd, Ord)] #[derive(Clone, Copy, Debug, Hash, PartialEq, Eq, PartialOrd, Ord)]
enum Падеж { 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 Сообщение { enum Сообщение {
ВыбралПадеж(Option<Падеж>), ВыбралПадеж(Option<Падеж>),
ВыбралПредлог(Option<&'static str>), ВыбралПредлог(Option<&'static str>),
@ -140,9 +126,13 @@ struct Вывод {
объяснение: Option<Html>, объяснение: Option<Html>,
} }
fn объяснить(падеж: Падеж, предлог: &str) -> Html { fn объясни(падеж: Падеж, предлог: &str) -> Html {
html! { html! {
{format!("{} {}", предлог, падеж.вопрос())} <div id="obyasnenie">
<hr/>
<h2>{"Пример:"}</h2>
{format!("{} {}", предлог, падеж.вопрос())}
</div>
} }
} }
@ -151,7 +141,7 @@ fn ограничить(м: &Модель) -> Вывод {
(Some(пж), Some(пл)) => Вывод { (Some(пж), Some(пл)) => Вывод {
доступные_падежи: BTreeSet::from([пж]), доступные_падежи: BTreeSet::from([пж]),
доступные_предлоги: BTreeSet::from([*пл]), доступные_предлоги: BTreeSet::from([*пл]),
объяснение: Some(объяснить(пж, пл)), объяснение: Some(объясни(пж, пл)),
}, },
(Some(пж), None) => Вывод { (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 покажи_предлог( fn покажи_предлог(
link: &Scope<Модель>, link: &Scope<Модель>,
м: &Модель, м: &Модель,
@ -182,13 +182,7 @@ fn покажи_предлог(
) -> Html { ) -> Html {
let выбран = м.предлог == Some(п); let выбран = м.предлог == Some(п);
let доступен = вв.доступные_предлоги.contains(п); let доступен = вв.доступные_предлоги.contains(п);
let класс = класс_кнопки(выбран, доступен);
let mut класс = "btn btn-ghost ".to_string();
класс += match (выбран, доступен) {
(true, _) => "btn-error",
(false, true) => "btn-primary",
(false, false) => "btn-default",
};
html! { html! {
<button class={класс} <button class={класс}
@ -208,13 +202,7 @@ fn покажи_падеж(
) -> Html { ) -> Html {
let выбран = м.падеж == Some(п); let выбран = м.падеж == Some(п);
let доступен = вв.доступные_падежи.contains(&п); let доступен = вв.доступные_падежи.contains(&п);
let класс = класс_кнопки(выбран, доступен);
let mut класс = "btn btn-ghost ".to_string();
класс += match (выбран, доступен) {
(true, _) => "btn-error",
(false, true) => "btn-primary",
(false, false) => "btn-default",
};
html! { html! {
<button class={класс} <button class={класс}
@ -262,26 +250,40 @@ impl Component for Модель {
let объяснение = вв let объяснение = вв
.объяснение .объяснение
.map(|s| html! {{s}}) .map(|exp| exp)
.unwrap_or_else(|| html! {}); .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! { html! {
<> <>
<link rel="stylesheet" <div id="header">
href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" /> <h1>{"Прелдожник"}</h1>
<p>{"... показывает которые предлоги употребляются в каких падежах на русском языке."}</p>
</div>
<h2>{"Выбирай предлог:"}</h2>
<div id="predlogi"> <div id="predlogi">
<h2>{"Предлоги:"}</h2>
{кнапки_предлогов} {кнапки_предлогов}
</div> </div>
<hr/> <hr/>
<h2>{"Выбирай падеж:"}</h2>
<div id="padezhi"> <div id="padezhi">
<h2>{"Падежи:"}</h2>
{кнапки_падежов} {кнапки_падежов}
</div> </div>
<hr/>
{объяснение} {объяснение}
{footer}
</> </>
} }
} }