Improvements

More styling

frontend/src/pages/basic_pages.rs

@@ -61,8 +61,10 @@ pub fn home_component() -> Html {
                 <h1>{ "Welcome" }</h1>
             </div>
             <crate::utilities::TicketCount/>
-            <p>{ "You are logged in as: " }</p>
-            <p class="text-muted">{ &*name }</p>
+            <div>
+                <p>{ "You are logged in as: " }</p>
+                <p class="text-muted">{ &*name }</p>
+            </div>
         </div>
     }
 }

frontend/src/pages/ticket.rs

@@ -665,25 +665,28 @@ pub fn all_tickets_component() -> Html {
         html! { <p>{ format!("Error: {}", e) }</p> }
     } else {
         html! {
-            <ul>
-            { for tickets.iter().filter(|t| if user.is_admin { true } else if let Some(uid) = user.id { t.user_id == uid } else { false }).map(|t| html! {
-                    <div>
-                        <li key={t.id.to_string()}>
-                            <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{} - #{}", t.betreff, t.id) }</h3></Link<crate::Route>>
-                            <p>{ &t.description }</p>
-                            <p>{ match t.status.as_str() {
-                                "ToDo" => "Zu tun",
-                                "InProgress" => "In Bearbeitung",
-                                "Completed" => "Erledigt",
-                                "Archived" => "Archiviert",
-                                _ => "Ungültiger Status"
-                            }}</p>
-                        </li>
-
-                    </div>
-                })}
-                <Link<crate::Route> to={crate::Route::Ticket}>{ "Zurück zur Startseite" }</Link<crate::Route>>
-            </ul>
+            <div>
+                <ul class="ticket-list">
+                { for tickets.iter().filter(|t| if user.is_admin { true } else if let Some(uid) = user.id { t.user_id == uid } else { false }).map(|t| {
+                        let status_class = match t.status.as_str() {
+                            "ToDo" => "To-Do",
+                            "InProgress" => "InProgress",
+                            "Completed" => "Completed",
+                            "Archived" => "Archived",
+                            _ => "To-Do"
+                        };
+                        html! {
+                            <li key={t.id.to_string()} class={status_class}>
+                                <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{}", t.betreff) }</h3></Link<crate::Route>>
+                                <p>{ &t.description }</p>
+                            </li>
+                        }
+                    })}
+                </ul>
+                <div class="ticket-list-actions">
+                    <Link<crate::Route> to={crate::Route::Ticket}>{ "Zurück zur Startseite" }</Link<crate::Route>>
+                </div>
+            </div>
         }
     }
 }

frontend/src/pages/user.rs

@@ -333,32 +333,34 @@ pub fn login_component() -> Html {
     };
 
     html! {
-        <div class="form-container">
-            <div class="page-header">
-                <h1>{ "Login" }</h1>
+        <main class="content">
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "Login" }</h1>
+                </div>
+                <form {onsubmit}>
+                    <input
+                        placeholder="username"
+                        value={(*username).clone()}
+                        oninput={Callback::from(move |e: InputEvent| {
+                            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+                            username.set(input.value());
+                        })}
+                    />
+                    <input
+                        type="password"
+                        placeholder="password"
+                        value={(*pwd).clone()}
+                        oninput={Callback::from(move |e: InputEvent| {
+                            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+                            pwd.set(input.value());
+                        })}
+                    />
+                    <button type="submit" disabled={*loading}>{ if *loading { "Logging in..." } else { "Login" } }</button>
+                    if !error.is_empty() { <p class="alert error">{(*error).clone()}</p> }
+                </form>
             </div>
-            <form {onsubmit}>
-                <input
-                    placeholder="username"
-                    value={(*username).clone()}
-                    oninput={Callback::from(move |e: InputEvent| {
-                        let input: web_sys::HtmlInputElement = e.target_unchecked_into();
-                        username.set(input.value());
-                    })}
-                />
-                <input
-                    type="password"
-                    placeholder="password"
-                    value={(*pwd).clone()}
-                    oninput={Callback::from(move |e: InputEvent| {
-                        let input: web_sys::HtmlInputElement = e.target_unchecked_into();
-                        pwd.set(input.value());
-                    })}
-                />
-                <button type="submit" disabled={*loading}>{ if *loading { "Logging in..." } else { "Login" } }</button>
-                if !error.is_empty() { <p class="alert error">{(*error).clone()}</p> }
-            </form>
-        </div>
+        </main>
     }
 }
 
@@ -450,10 +452,10 @@ pub fn all_users_component() -> Html {
                 <div class="page-header">
                     <h1>{ "All Users" }</h1>
                 </div>
-                <ul>
+                <ul class="user-list">
                 { for users.iter().map(|t| html! {
                         <li key={t.id.to_string()}>
-                            <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}- #{}", t.first_name, t.last_name, t.id) }</h3></Link<crate::Route>>
+                            <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}", t.first_name, t.last_name) }</h3></Link<crate::Route>>
                         </li>
                     })}
                 </ul>

frontend/src/pages/utilities.rs

@@ -289,7 +289,7 @@ pub fn ticket_count_component() -> Html {
         html! {
             <div>
                 <h2>{ "Offene Tickets" }</h2>
-                <h4>{ count }</h4>
+                <h4 class="ticket_count">{ count }</h4>
             </div>
         }
     }