Styling and improvements

frontend/Cargo.toml

@@ -26,3 +26,4 @@ gloo = "0.12.0"
 chrono = { workspace = true }
 chrono-tz = "0.10.4"
 wasm-bindgen = "0.2.120"
+theme = { version = "0.0.3", features = ["yew"] }

frontend/src/pages/basic_pages.rs

@@ -56,11 +56,11 @@ pub fn home_component() -> Html {
     }
 
     html! {
-        <div class="rundbg">
+        <div class="rundbg home">
             <crate::utilities::TicketCount/>
 
-            <p>{ "You are logged in as: " }</p>
-            <p>{ &*name }</p>
+            <p class="login-status">{ "You are logged in as: " }</p>
+            <p class="name">{ &*name }</p>
         </div>
     }
 }

frontend/src/pages/ticket.rs

@@ -508,7 +508,7 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
         html! { <p>{ format!("Error: {}", e) }</p> }
     } else if let Some(t) = &*ticket {
         html! {
-            <div>
+            <div class="rundbg">
                 <h1>{ format!("Ticket #{}", t.id) }</h1>
                 <p><strong>{ "Kategorie: " }</strong>{ &t.category }</p>
                 <p><strong>{ "Betreff: " }</strong>{ &t.betreff }</p>
@@ -676,21 +676,11 @@ pub fn all_tickets_component() -> Html {
                 html! {
                     <div class={classes!{status_class, "listbox"}}>
                         <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>
+                            <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{}", t.betreff,) }</h3></Link<crate::Route>>
                         </li>
 
                     </div>
                 }})}
-
-                <Link<crate::Route> to={crate::Route::Ticket}>{ "Zurück zur Startseite" }</Link<crate::Route>>
             </ul>
         }
     }
@@ -807,9 +797,9 @@ pub fn archived_tickets_component() -> Html {
         html! { <p>{ format!("Error: {}", e) }</p> }
     } else {
         html! {
-            <ul>
+            <ul class="postits">
             { for tickets.iter().filter(|t| t.status == "Archived" && (user.is_admin || if let Some(uid) = user.id { t.user_id == uid } else { false })).map(|t| html! {
-                    <div>
+                    <div class="listbox">
                         <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>

frontend/src/pages/user.rs

@@ -428,7 +428,7 @@ pub fn all_users_component() -> Html {
             <ul class="postits">
             { for users.iter().map(|t| html! {
                     <li key={t.id.to_string()} class="listbox">
-                        <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>
@@ -670,7 +670,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
         html! { <p>{ format!("Error: {}", e) }</p> }
     } else if let Some(u) = &*user {
         html! {
-            <div>
+            <div class="rundbg">
                 <div>
                     <p><strong>{ "Vorname: " }</strong>{ &u.first_name }</p>
                     <p><strong>{ "Nachname: " }</strong>{ &u.last_name }</p>

frontend/src/pages/utilities.rs

@@ -169,7 +169,7 @@ fn parse_room(r: i16) -> String {
 #[component(Diagnostics)]
 pub fn diagnostics_component() -> Html {
     html! {
-        <div>
+        <div class="rundbg">
             <TicketCount/>
             <SubmitStats/>
         </div>
@@ -287,7 +287,7 @@ pub fn ticket_count_component() -> Html {
             })
             .count();
         html! {
-            <div>
+            <div class="ticket-count">
                 <h2>{ "Offene Tickets" }</h2>
                 <h4>{ count }</h4>
             </div>

frontend/src/styles/components/_diagnostics.scss

@@ -47,6 +47,7 @@
   flex: 1;
   min-width: 60px;
   height: 100%;
+  justify-content: end;
 
   .bar {
     width: 100%;

frontend/src/styles/components/_home.scss

@@ -0,0 +1,9 @@
+.login-status {
+  font-weight: bold;
+  margin: 4px 8px;
+}
+
+.name {
+  font-size: 24px;
+  margin: 4px 8px;
+}

frontend/src/styles/components/_tickets.scss

@@ -18,17 +18,18 @@
   margin:0 0;
   background-color: #90ff82;
   background-color: $rundbgbackgroundcolor;
-  padding-bottom: 96px;
+  padding-bottom: 8px;
   color: white;
-  padding-left: 32px;
-  padding-right: 32px;
-  padding-top: 96px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 8px;
   border-radius: 20px;
   border-color: #000000;
   border-style: double;
   box-shadow: 10px 10px 10px rgba(43, 43, 43, 0.8);
   font-size: 26px;
   list-style-type: none;
+  text-align: center;
 
   
   &.To-Do {
@@ -46,14 +47,33 @@
   &.Archived {
     background-color: #af69ee;
   }
+
+  a {
+    text-decoration: none;
+    color: white;
+  }
 }
 
 .postits {
   display: grid;
-  grid-template-columns: auto auto auto;
   gap: 8px;
   margin-top: 96px; 
 }
 .warning {
   color: #570000;
 }
+
+.ticket-count {
+  border-radius: 10px;
+  border: 2px solid black;
+  width: fit-content;
+  padding: 8px;
+  margin: 0 auto;
+  margin-bottom: 32px;
+
+  h4 {
+    text-align: center;
+    font-size: 32px;
+    margin: 8px;
+  }
+}

frontend/src/styles/main.scss

@@ -60,7 +60,7 @@ body {
   display: flex;
   justify-content: center;
   flex-direction: column;
-  max-width: 40%;
+  max-width: 60%;
   margin: 0 auto;
   background-color: variables.$rundbgbackgroundcolor;
   padding-bottom: 96px;
@@ -106,6 +106,11 @@ body {
 
   &.login {
     margin-top: 96px;
+    max-width: 40%;
+  }
+
+  &.home {
+    padding-top: 16px;
   }
 }