From 9be6abf776c55c9e864e34dbcd9624390058f237 Mon Sep 17 00:00:00 2001
From: Felix Ableitner <me@nutomic.com>
Date: Wed, 30 Oct 2024 13:02:27 +0100
Subject: [PATCH] various improvements

---
 src/frontend/app.rs                   |  2 +-
 src/frontend/components/editor.rs     | 53 +++++++++++++++------------
 src/frontend/pages/article/create.rs  | 40 +++++++++++---------
 src/frontend/pages/article/edit.rs    |  8 ++--
 src/frontend/pages/article/history.rs | 15 +++++---
 src/frontend/pages/diff.rs            | 11 +++---
 6 files changed, 72 insertions(+), 57 deletions(-)
diff --git a/src/frontend/app.rs b/src/frontend/app.rs
index fbd6e82..c0ed2f7 100644
--- a/src/frontend/app.rs
+++ b/src/frontend/app.rs
@@ -91,7 +91,7 @@ pub fn App() -> impl IntoView {
     provide_context(create_rw_signal(global_state));
 
     view! {
-        <Html attr:data-theme="emerald"/>
+        <Html attr:data-theme="emerald" />
         <>
             <Stylesheet id="daisyui" href="/daisyui.css" />
             <Stylesheet id="ibis" href="/ibis.css" />
diff --git a/src/frontend/components/editor.rs b/src/frontend/components/editor.rs
index 7d468a2..34ca32a 100644
--- a/src/frontend/components/editor.rs
+++ b/src/frontend/components/editor.rs
@@ -13,30 +13,35 @@ pub fn EditorView(
     let (show_preview, set_show_preview) = create_signal(false);
 
     view! {
-        <textarea
-            value=content
-            placeholder="Article text..."
-            class="textarea textarea-bordered textarea-primary min-w-full"
-            on:input=move |evt| {
-                let val = event_target_value(&evt);
-                set_preview.set(render_markdown(&val));
-                set_content.set(val);
-            }
-            node_ref=textarea_ref
-        >
-            {content.get()}
-        </textarea>
-        <button class="btn" on:click=move |_| { set_show_preview.update(|s| *s = !*s) }>
-            Preview
-        </button>
-        <Show when=move || { show_preview.get() }>
-            <div id="preview" inner_html=move || preview.get()></div>
-        </Show>
-        <div>
-            <a href="https://commonmark.org/help/" target="blank_">
-                Markdown
-            </a>
-            " formatting is supported"
+        <div class="my-4">
+            <textarea
+                value=content
+                placeholder="Article text..."
+                class="textarea textarea-primary min-w-full min-h-80 resize-none"
+                on:input=move |evt| {
+                    let val = event_target_value(&evt);
+                    set_preview.set(render_markdown(&val));
+                    set_content.set(val);
+                }
+                node_ref=textarea_ref
+            >
+                {content.get()}
+            </textarea>
+            <button
+                class="btn btn-secondary my-4"
+                on:click=move |_| { set_show_preview.update(|s| *s = !*s) }
+            >
+                Preview
+            </button>
+            <Show when=move || { show_preview.get() }>
+                <div id="preview" inner_html=move || preview.get()></div>
+            </Show>
+            <div>
+                <a class="link link-secondary" href="https://commonmark.org/help/" target="blank_">
+                    Markdown
+                </a>
+                " formatting is supported"
+            </div>
         </div>
     }
 }
diff --git a/src/frontend/pages/article/create.rs b/src/frontend/pages/article/create.rs
index 9c409e3..d0a650c 100644
--- a/src/frontend/pages/article/create.rs
+++ b/src/frontend/pages/article/create.rs
@@ -50,13 +50,14 @@ pub fn CreateArticle() -> impl IntoView {
     });
 
     view! {
-        <h1>Create new Article</h1>
+        <h1 class="text-4xl font-bold font-serif my-4">Create new Article</h1>
         <Show
             when=move || create_response.get().is_some()
             fallback=move || {
                 view! {
                     <div class="item-view">
                         <input
+                            class="input input-primary w-full"
                             type="text"
                             required
                             placeholder="Title"
@@ -77,23 +78,28 @@ pub fn CreateArticle() -> impl IntoView {
                                 })
                         }}
 
-                        <input
-                            type="text"
-                            placeholder="Edit summary"
-                            on:keyup=move |ev| {
-                                let val = event_target_value(&ev);
-                                set_summary.update(|p| *p = val);
-                            }
-                        />
+                        <div class="flex flex-row">
+                            <input
+                                class="input input-primary grow mr-2"
+                                type="text"
+                                placeholder="Edit summary"
+                                on:keyup=move |ev| {
+                                    let val = event_target_value(&ev);
+                                    set_summary.update(|p| *p = val);
+                                }
+                            />
 
-                        <button
-                            prop:disabled=move || button_is_disabled.get()
-                            on:click=move |_| {
-                                submit_action.dispatch((title.get(), content.get(), summary.get()))
-                            }
-                        >
-                            Submit
-                        </button>
+                            <button
+                                class="btn btn-primary"
+                                prop:disabled=move || button_is_disabled.get()
+                                on:click=move |_| {
+                                    submit_action
+                                        .dispatch((title.get(), content.get(), summary.get()))
+                                }
+                            >
+                                Submit
+                            </button>
+                        </div>
                     </div>
                 }
             }
diff --git a/src/frontend/pages/article/edit.rs b/src/frontend/pages/article/edit.rs
index ad8e636..2e62872 100644
--- a/src/frontend/pages/article/edit.rs
+++ b/src/frontend/pages/article/edit.rs
@@ -136,13 +136,11 @@ pub fn EditArticle() -> impl IntoView {
                                                     .map(|err| {
                                                         view! { <p style="color:red;">{err}</p> }
                                                     })
-                                            }}
-                                            <EditorView textarea_ref content set_content />
-
-                                            <div class="inputs">
+                                            }} <EditorView textarea_ref content set_content />
+                                            <div class="flex flex-row mr-2">
                                                 <input
                                                     type="text"
-                                                    class="input input-secondary"
+                                                    class="input input-secondary grow"
                                                     placeholder="Edit summary"
                                                     value=summary.get_untracked()
                                                     on:keyup=move |ev| {
diff --git a/src/frontend/pages/article/history.rs b/src/frontend/pages/article/history.rs
index 5a2f0ac..a0cf4d9 100644
--- a/src/frontend/pages/article/history.rs
+++ b/src/frontend/pages/article/history.rs
@@ -35,11 +35,16 @@ pub fn ArticleHistory() -> impl IntoView {
                                                 edit.edit.hash.0,
                                             );
                                             view! {
-                                                <li>
-                                                    {render_date_time(edit.edit.created)}": "
-                                                    <a class="link link-primary" href=path>
-                                                        {edit.edit.summary}
-                                                    </a> " by " {user_link(&edit.creator)}
+                                                <li class="card card-compact bg-base-100 card-bordered m-2 rounded-s">
+                                                    <div class="card-body">
+                                                        <a class="link link-primary text-lg w-full" href=path>
+                                                            {edit.edit.summary}
+                                                        </a>
+                                                        <p>
+                                                            {render_date_time(edit.edit.created)}" by "
+                                                            {user_link(&edit.creator)}
+                                                        </p>
+                                                    </div>
                                                 </li>
                                             }
                                         })
diff --git a/src/frontend/pages/diff.rs b/src/frontend/pages/diff.rs
index 7b7769c..a33d0f2 100644
--- a/src/frontend/pages/diff.rs
+++ b/src/frontend/pages/diff.rs
@@ -33,11 +33,12 @@ pub fn EditDiff() -> impl IntoView {
                             render_date_time(edit.edit.created),
                         );
                         view! {
-                            <div class="item-view">
-                                <h1>{article.article.title.replace('_', " ")}</h1>
-                                <h2>{label}</h2>
-                                <p>"by " {user_link(&edit.creator)}</p>
-                                <pre>{edit.edit.diff.clone()}</pre>
+                            <h2 class="text-xl font-bold font-serif my-2">{label}</h2>
+                            <p>"by " {user_link(&edit.creator)}</p>
+                            <div class="bg-gray-200 p-2 rounded my-2">
+                                <pre>
+                                    <code>{edit.edit.diff.clone()}</code>
+                                </pre>
                             </div>
                         }
                     })
