Improvements

More styling

frontend/Trunk.toml

@@ -1,6 +1,6 @@
 [serve]
 # The address to serve on LAN.
-addresses = ["127.0.0.1"] #,"10.150.9.7"]
+addresses = ["127.0.0.1"] #,"10.150.9.116"]
 # The address to serve on WAN.
 # address = "0.0.0.0"
 # The port to serve on.

frontend/src/pages/basic_pages.rs

@@ -61,9 +61,11 @@ pub fn home_component() -> Html {
                 <h1>{ "Welcome" }</h1>
             </div>
             <crate::utilities::TicketCount/>
+            <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()}>
+                <ul class="ticket-list">
-                            <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{} - #{}", t.betreff, t.id) }</h3></Link<crate::Route>>
+                { 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>
-                            <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 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,6 +333,7 @@ pub fn login_component() -> Html {
     };
 
     html! {
+        <main class="content">
             <div class="form-container">
                 <div class="page-header">
                     <h1>{ "Login" }</h1>
@@ -359,6 +360,7 @@ pub fn login_component() -> Html {
                     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>
         }
     }

frontend/src/styles/_variables.scss

@@ -18,6 +18,8 @@ $color-status-inprogress: #fff3cd;
 $color-status-inprogress-text: #856404;
 $color-status-done: #d4edda;
 $color-status-done-text: #155724;
+$color-status-archived: #e0e0e0;
+$color-status-archived-text: #666666;
 
 // Action Colors
 $color-logout: #ff4d4d;

frontend/src/styles/components/_alltickets.scss

@@ -0,0 +1,82 @@
+@use "../variables" as *;
+
+.ticket-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-bottom: $spacing-lg;
+
+  li {
+    border-left: 4px solid;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: $border-radius-lg;
+    background: $color-container;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+    @media (prefers-color-scheme: dark) {
+      background: $color-container-dark;
+    }
+
+    h3 {
+      margin-top: 0;
+      margin-bottom: $spacing-md;
+      color: $color-primary;
+
+      a {
+        color: $color-primary;
+        text-decoration: none;
+        transition: color 0.2s ease-in-out;
+
+        &:hover {
+          color: $color-primary-hover;
+          text-decoration: underline;
+        }
+      }
+    }
+
+    p {
+      margin: 0.3rem 0;
+    }
+
+    &.To-Do {
+      border-left-color: $color-status-todo-text;
+    }
+
+    &.InProgress {
+      border-left-color: $color-status-inprogress-text;
+    }
+
+    &.Completed {
+      border-left-color: $color-status-done-text;
+    }
+
+    &.Archived {
+      border-left-color: $color-status-archived-text;
+    }
+  }
+}
+
+.ticket-list-actions {
+  display: flex;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+  margin-top: $spacing-lg;
+
+  a {
+    display: inline-block;
+    padding: $spacing-md $spacing-lg;
+    background: $color-primary;
+    color: white;
+    text-decoration: none;
+    border-radius: $border-radius;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background-color: $color-primary-hover;
+    }
+  }
+}
+

frontend/src/styles/components/_allusers.scss

@@ -0,0 +1,13 @@
+@use "../variables" as *;
+
+.user-list {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+
+  li {
+    h3 {
+      margin-top: 0;
+    }
+  }
+}

frontend/src/styles/components/_forms.scss

@@ -0,0 +1,97 @@
+@use "../variables" as *;
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  margin-bottom: $spacing-lg;
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
+
+    label {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-sm;
+      font-weight: 500;
+      color: $color-text;
+
+      @media (prefers-color-scheme: dark) {
+        color: $color-text-dark;
+      }
+    }
+
+    input, textarea, select {
+      padding: $spacing-md;
+      border: 1px solid #ccc;
+      border-radius: $border-radius;
+      font-family: Arial, sans-serif;
+      font-size: 1rem;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: #6b6b6b;
+        color: $color-text-dark;
+        border-color: #555;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: $color-primary;
+        box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
+      }
+    }
+
+    textarea {
+      min-height: 120px;
+      resize: vertical;
+    }
+
+    button {
+      align-self: flex-start;
+      padding: $spacing-md $spacing-lg;
+      background-color: $color-primary;
+      color: white;
+      border: none;
+      border-radius: $border-radius;
+      font-size: 1rem;
+      font-weight: bold;
+      cursor: pointer;
+      transition: background-color 0.2s ease-in-out;
+
+      &:hover {
+        background-color: $color-primary-hover;
+      }
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+
+    a {
+      display: inline-block;
+      padding: $spacing-md $spacing-lg;
+      background: $color-primary;
+      color: white;
+      text-decoration: none;
+      border-radius: $border-radius;
+      text-align: center;
+      transition: background-color 0.2s ease-in-out;
+      align-self: flex-start;
+
+      &:hover {
+        background-color: $color-primary-hover;
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+
+    li h3 {
+      margin-top: 0;
+    }
+  }
+}

frontend/src/styles/components/_login.scss

@@ -0,0 +1,39 @@
+@use "../variables" as *;
+
+.login-btn {
+  display: inline-block;
+  padding: 12px 400px;
+  background: $color-primary;
+  color: white;
+  border-radius: $border-radius-lg;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 1rem;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s ease-in-out;
+  margin-bottom: 15px;
+
+  &:hover {
+    background: $color-primary-hover;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.logout-btn {
+  display: inline-block;
+  padding: 10px 20px;
+  background: $color-logout;
+  color: white;
+  border-radius: $border-radius-lg;
+  text-decoration: none;
+  font-weight: bold;
+  transition: 0.2s ease-in-out;
+  margin-bottom: 20px;
+
+  &:hover {
+    background: $color-logout-hover;
+    transform: scale(1.05);
+  }
+}

frontend/src/styles/components/_pages.scss

@@ -42,91 +42,8 @@
   }
 }
 
-.form-container {
+input[type="checkbox"] {
-  display: flex;
+  width: fit-content;
-  flex-direction: column;
-  gap: $spacing-lg;
-  margin-bottom: $spacing-lg;
-
-  form {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-md;
-
-    label {
-      display: flex;
-      flex-direction: column;
-      gap: $spacing-sm;
-      font-weight: 500;
-      color: $color-text;
-
-      @media (prefers-color-scheme: dark) {
-        color: $color-text-dark;
-      }
-    }
-
-    input, textarea, select {
-      padding: $spacing-md;
-      border: 1px solid #ccc;
-      border-radius: $border-radius;
-      font-family: Arial, sans-serif;
-      font-size: 1rem;
-
-      @media (prefers-color-scheme: dark) {
-        background-color: #6b6b6b;
-        color: $color-text-dark;
-        border-color: #555;
-      }
-
-      &:focus {
-        outline: none;
-        border-color: $color-primary;
-        box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
-      }
-    }
-
-    textarea {
-      min-height: 120px;
-      resize: vertical;
-    }
-
-    button {
-      align-self: flex-start;
-      padding: $spacing-md $spacing-lg;
-      background-color: $color-primary;
-      color: white;
-      border: none;
-      border-radius: $border-radius;
-      font-size: 1rem;
-      font-weight: bold;
-      cursor: pointer;
-      transition: background-color 0.2s ease-in-out;
-
-      &:hover {
-        background-color: $color-primary-hover;
-      }
-
-      &:active {
-        transform: scale(0.98);
-      }
-    }
-
-    a {
-      display: inline-block;
-      padding: $spacing-md $spacing-lg;
-      background: $color-primary;
-      color: white;
-      text-decoration: none;
-      border-radius: $border-radius;
-      text-align: center;
-      transition: background-color 0.2s ease-in-out;
-      align-self: flex-start;
-
-      &:hover {
-        background-color: $color-primary-hover;
-      }
-    }
-  }
 }
 
 .grid-list {

frontend/src/styles/components/_tickets.scss

@@ -55,5 +55,24 @@
     background: $color-status-done; 
     color: $color-status-done-text; 
   }
+
+  &.Completed { 
+    background: $color-status-done; 
+    color: $color-status-done-text; 
   }
 
+  &.Archived { 
+    background: $color-status-archived; 
+    color: $color-status-archived-text; 
+  }
+}
+
+.ticket_count {
+  text-align: center;
+  align-content: center;
+  color: #005f00;
+  border: 2px solid #848484;
+  border-radius: 10px;
+  height: 50px;
+  width: 250px;
+}

frontend/src/styles/main.scss

@@ -3,6 +3,10 @@
 @use "utilities";
 @use "components/sidebar";
 @use "components/tickets";
+@use "components/alltickets";
+@use "components/allusers";
+@use "components/forms";
+@use "components/login";
 @use "components/diagnostics";
 @use "components/pages";
 @use "components/setup";
@@ -24,30 +28,6 @@ body {
   }
 }
 
-.container {
-  max-width: 900px;
-  margin: auto;
-  background: variables.$color-container;
-  padding: variables.$spacing-lg;
-  border-radius: 1rem;
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-
-  @media (prefers-color-scheme: dark) {
-    background: variables.$color-container-dark;
-  }
-}
-
-.header-with-image {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.header-with-image img {
-  height: 60px;
-}
-
 input, textarea, select {
   width: 100%;
   padding: variables.$spacing-md;
@@ -111,42 +91,28 @@ form {
   }
 }
 
-.login-btn {
+.container {
-  display: inline-block;
+  max-width: 900px;
-  padding: 12px 400px;
+  margin: auto;
-  background: variables.$color-primary;
+  background: variables.$color-container;
-  color: white;
+  padding: variables.$spacing-lg;
-  border-radius: variables.$border-radius-lg;
+  border-radius: 1rem;
-  text-decoration: none;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-  font-weight: bold;
-  font-size: 1rem;
-  cursor: pointer;
-  border: none;
-  transition: all 0.2s ease-in-out;
-  margin-bottom: 15px;
 
-  &:hover {
+  @media (prefers-color-scheme: dark) {
-    background: variables.$color-primary-hover;
+    background: variables.$color-container-dark;
-    transform: scale(1.05);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   }
 }
 
-.logout-btn {
+.header-with-image {
-  display: inline-block;
+  display: flex;
-  padding: 10px 20px;
+  justify-content: space-between;
-  background: variables.$color-logout;
+  align-items: center;
-  color: white;
-  border-radius: variables.$border-radius-lg;
-  text-decoration: none;
-  font-weight: bold;
-  transition: 0.2s ease-in-out;
   margin-bottom: 20px;
-
-  &:hover {
-    background: variables.$color-logout-hover;
-    transform: scale(1.05);
 }
+
+.header-with-image img {
+  height: 60px;
 }
 
 .admin { display: flex; }