Rearrange form to be vertical layoutHEADmain

3 files changed, 64 insertions, 82 deletions

diff --git a/css/style.css b/css/style.css
index 29b62e3..e27406f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -16,6 +16,10 @@ h1 {
     font-size: 24pt;
 }
 
+h2 {
+    margin-top: 30px;
+}
+
 header > h1 {
     margin-bottom: 0;
     text-align: center;
@@ -30,9 +34,13 @@ p {
 }
 
 label {
-    min-width: 200px;
-    display: inline-block;
-    margin-bottom: 5px;
+    display: block;
+    margin: 5px 0;
+}
+
+select, input[type="text"] {
+    display: block;
+    min-width: 300px;
 }
 
 pre {
diff --git a/src/form.rs b/src/form.rs
index e424a28..16e9d61 100644
--- a/src/form.rs
+++ b/src/form.rs
@@ -1,4 +1,5 @@
-use crate::links::TemplatingEngine;
+use crate::{links::TemplatingEngine, Msg};
+use seed::{prelude::*, *};
 use structform::{derive_form_input, impl_text_input_with_stringops, ParseAndFormat, ParseError};
 
 derive_form_input! {FormTextInput}
@@ -30,3 +31,27 @@ impl ParseAndFormat<TemplatingEngine> for FormSelectInput<TemplatingEngine> {
         value.to_string()
     }
 }
+
+pub fn checkbox(
+    name: &str,
+    input_value: &str,
+    label: &str,
+    on_input: impl Fn(bool) -> Msg + Clone + 'static,
+) -> Node<Msg> {
+    let is_checked = input_value == "true";
+    div![label![
+        attrs! {
+            At::For => name,
+        },
+        input![
+            attrs! {
+                At::Id => name,
+                At::Name => name,
+                At::Type => "checkbox",
+                At::Checked => is_checked.as_at_value(),
+            },
+            input_ev(Ev::Input, move |_| on_input(!is_checked))
+        ],
+        label
+    ],]
+}
diff --git a/src/lib.rs b/src/lib.rs
index 691e309..3ebb473 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -142,6 +142,7 @@ fn view(model: &Model) -> Node<Msg> {
                 select![
                     attrs! {
                         At::Name => "template_engine",
+                        At::Id => "template_engine",
                     },
                     TemplatingEngine::all().into_iter().map(|engine| {
                         let engine_str = engine.to_string();
@@ -154,7 +155,7 @@ fn view(model: &Model) -> Node<Msg> {
                             
                         ]
                     }),
-                    input_ev(Ev::Input, |val| Msg::Input(ShareLinksOptionsFormField::TemplateEngine, val) )
+                    input_ev(Ev::Input, |val| Msg::Input(ShareLinksOptionsFormField::TemplateEngine, val))
                 ],
             ],
             div![
@@ -166,13 +167,14 @@ fn view(model: &Model) -> Node<Msg> {
                         Ok(TemplatingEngine::None) | Err(_) => "URL to Share",
                         Ok(TemplatingEngine::Jekyll) => "Jekyll Expression for URL to Share",
                         Ok(TemplatingEngine::Other) => "Template Expression for URL to Share",
-                    }
-                    
+                    }  
                 ],
                 input![
                     attrs! {
                         At::Name => "url",
+                        At::Id => "url",
                         At::Value => model.form.url.input,
+                        At::Type => "text",
                         At::Placeholder => match model.form.template_engine.value {
                             Ok(TemplatingEngine::None) => "https://example.com",
                             Ok(TemplatingEngine::Jekyll) => "page.url | absolute_url",
@@ -182,83 +184,30 @@ fn view(model: &Model) -> Node<Msg> {
                     },
                     input_ev(Ev::Input, |val| Msg::Input(ShareLinksOptionsFormField::Url, val) )
                 ],
-            ],
-            div![
-                label![
-                    attrs! {
-                        At::For => "facebook",
-                    },
-                    "Facebook"
-                ],
-                {
-                    let is_checked = model.form.facebook.input == "true";
-                input![
-                    attrs!{
-                        At::Name => "facebook",
-                        At::Type => "checkbox",
-                        At::Checked => is_checked.as_at_value(),
-                    },
-                    input_ev(Ev::Input, move |_| Msg::Input(ShareLinksOptionsFormField::Facebook, (!is_checked).to_string()))
-                ]
-                },
-            ],
-            div![
-                label![
-                    attrs! {
-                        At::For => "twitter",
-                    },
-                    "Twitter"
-                ],
-                {
-                    let is_checked = model.form.twitter.input == "true";
-                    input![
-                        attrs!{
-                            At::Name => "twitter",
-                            At::Type => "checkbox",
-                            At::Checked => is_checked.as_at_value(),
-                        },
-                        input_ev(Ev::Input, move |_| Msg::Input(ShareLinksOptionsFormField::Twitter, (!is_checked).to_string()))
-                    ]
-                },
-            ],
-            div![
-                label![
-                    attrs! {
-                        At::For => "whatsapp",
-                    },
-                    "Whatsapp"
-                ],
-                {
-                    let is_checked = model.form.whatsapp.input == "true";
-                    input![
-                        attrs!{
-                            At::Name => "whatsapp",
-                            At::Type => "checkbox",
-                            At::Checked => is_checked.as_at_value(),
-                        },
-                        input_ev(Ev::Input, move |_| Msg::Input(ShareLinksOptionsFormField::Whatsapp, (!is_checked).to_string()))
-                    ]
+                match model.form.template_engine.value {
+                    Ok(TemplatingEngine::None) | Err(_) => empty![],
+                    Ok(TemplatingEngine::Jekyll) => small![
+                        "This can be just a variable name, or a variable being passed to a filter (like ",
+                        code!["page.url | absolute_url"],
+                        ". Do not include {{ liquid tags }}."
+                    ],
+                    Ok(TemplatingEngine::Other) => small![
+                        "This expression needs to contain all templating engine markup, and must also do ",
+                        a![
+                            attrs! {
+                                At::Href => "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent",
+                                At::Target => "_blank"
+                            },
+                            "URI encoding"
+                        ],
+                        " on the URL"
+                    ],
                 },
             ],
-            div![
-                label![
-                    attrs! {
-                        At::For => "telegram",
-                    },
-                    "Telegram"
-                ],
-                {
-                    let is_checked = model.form.telegram.input == "true";
-                    input![
-                        attrs!{
-                            At::Name => "telegram",
-                            At::Type => "checkbox",
-                            At::Checked => is_checked.as_at_value(),
-                        },
-                        input_ev(Ev::Input, move |_| Msg::Input(ShareLinksOptionsFormField::Telegram, (!is_checked).to_string()))
-                    ]
-                },
-            ]
+            checkbox("facebook", &model.form.facebook.input, "Facebook", |val| Msg::Input(ShareLinksOptionsFormField::Facebook, val.to_string())),
+            checkbox("twitter", &model.form.twitter.input, "Twitter", |val| Msg::Input(ShareLinksOptionsFormField::Twitter, val.to_string())),
+            checkbox("whatsapp", &model.form.whatsapp.input, "Whatsapp", |val| Msg::Input(ShareLinksOptionsFormField::Whatsapp, val.to_string())),
+            checkbox("telegram", &model.form.telegram.input, "Telegram", |val| Msg::Input(ShareLinksOptionsFormField::Telegram, val.to_string())),
         ],
         (!model.links.is_empty()).then(|| nodes![
             h2!["Here's Your Social Sharing Links"],