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>
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
parent: ebbda2484a47054aa16946d40c10130608c6e15a (diff)
4 files changed, 73 insertions, 37 deletions
diff --git a/users/tazjin/predlozhnik/.gitignore b/users/tazjin/predlozhnik/.gitignore
index eccd7b4ab8..58eaf3e326 100644
--- a/users/tazjin/predlozhnik/.gitignore
+++ b/users/tazjin/predlozhnik/.gitignore
@@ -1,2 +1,3 @@
 /target/
 **/*.rs.bk
+dist/
diff --git a/users/tazjin/predlozhnik/index.css b/users/tazjin/predlozhnik/index.css
new file mode 100644
index 0000000000..3529574c4f
--- /dev/null
+++ b/users/tazjin/predlozhnik/index.css
@@ -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;
+}
diff --git a/users/tazjin/predlozhnik/index.html b/users/tazjin/predlozhnik/index.html
index a5b112ea32..631cf4f6da 100644
--- a/users/tazjin/predlozhnik/index.html
+++ b/users/tazjin/predlozhnik/index.html
@@ -2,6 +2,10 @@
 <html>
   <head>
     <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>
   </head>
 </html>
diff --git a/users/tazjin/predlozhnik/src/main.rs b/users/tazjin/predlozhnik/src/main.rs
index 98d5703c79..1d864a37b9 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}
             </>
         }
     }
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
parent	ebbda2484a47054aa16946d40c10130608c6e15a (diff)