From 928ca1de11b5eeb5a97ad7cae8449f183138c1ef Mon Sep 17 00:00:00 2001 From: schn33fuchs Date: Mon, 11 May 2026 19:53:30 +0200 Subject: [PATCH] Improvements More styling --- frontend/Trunk.toml | 2 +- frontend/src/pages/basic_pages.rs | 6 +- frontend/src/pages/ticket.rs | 41 ++++---- frontend/src/pages/user.rs | 56 +++++------ frontend/src/pages/utilities.rs | 2 +- frontend/src/styles/_variables.scss | 2 + .../src/styles/components/_alltickets.scss | 82 ++++++++++++++++ frontend/src/styles/components/_allusers.scss | 13 +++ frontend/src/styles/components/_forms.scss | 97 +++++++++++++++++++ frontend/src/styles/components/_login.scss | 39 ++++++++ frontend/src/styles/components/_pages.scss | 87 +---------------- frontend/src/styles/components/_tickets.scss | 19 ++++ frontend/src/styles/main.scss | 74 ++++---------- 13 files changed, 331 insertions(+), 189 deletions(-) create mode 100644 frontend/src/styles/components/_alltickets.scss create mode 100644 frontend/src/styles/components/_allusers.scss create mode 100644 frontend/src/styles/components/_forms.scss create mode 100644 frontend/src/styles/components/_login.scss diff --git a/frontend/Trunk.toml b/frontend/Trunk.toml index f218f3a..f743902 100644 --- a/frontend/Trunk.toml +++ b/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. diff --git a/frontend/src/pages/basic_pages.rs b/frontend/src/pages/basic_pages.rs index 4f948ce..d689e50 100644 --- a/frontend/src/pages/basic_pages.rs +++ b/frontend/src/pages/basic_pages.rs @@ -61,8 +61,10 @@ pub fn home_component() -> Html {

{ "Welcome" }

-

{ "You are logged in as: " }

-

{ &*name }

+
+

{ "You are logged in as: " }

+

{ &*name }

+
} } diff --git a/frontend/src/pages/ticket.rs b/frontend/src/pages/ticket.rs index b3d76a4..cb9182e 100644 --- a/frontend/src/pages/ticket.rs +++ b/frontend/src/pages/ticket.rs @@ -665,25 +665,28 @@ pub fn all_tickets_component() -> Html { html! {

{ format!("Error: {}", e) }

} } else { html! { - +
+
    + { 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! { +
  • + to={crate::Route::TicketById{id: t.id}}>

    { format!("{}", t.betreff) }

    > +

    { &t.description }

    +
    • + } + })} +
+
+ to={crate::Route::Ticket}>{ "Zurück zur Startseite" }> +
+
} } } diff --git a/frontend/src/pages/user.rs b/frontend/src/pages/user.rs index 5893032..6a25b63 100644 --- a/frontend/src/pages/user.rs +++ b/frontend/src/pages/user.rs @@ -333,32 +333,34 @@ pub fn login_component() -> Html { }; html! { -
-
-

{ "Login" }

+
+
+
+

{ "Login" }

+
+
+ + + + if !error.is_empty() {

{(*error).clone()}

} +
-
- - - - if !error.is_empty() {

{(*error).clone()}

} -
-
+ } } @@ -450,10 +452,10 @@ pub fn all_users_component() -> Html {

{ "All Users" }

-
    +
      { for users.iter().map(|t| html! {
    • - to={crate::Route::UserByID{id: t.id}}>

      { format!("{} {}- #{}", t.first_name, t.last_name, t.id) }

      > + to={crate::Route::UserByID{id: t.id}}>

      { format!("{} {}", t.first_name, t.last_name) }

      >
      • })}
    diff --git a/frontend/src/pages/utilities.rs b/frontend/src/pages/utilities.rs index 861cb99..299f9a9 100644 --- a/frontend/src/pages/utilities.rs +++ b/frontend/src/pages/utilities.rs @@ -289,7 +289,7 @@ pub fn ticket_count_component() -> Html { html! {

    { "Offene Tickets" }

    -

    { count }

    +

    { count }

    } } diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss index c04e99f..6fa9c07 100644 --- a/frontend/src/styles/_variables.scss +++ b/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; diff --git a/frontend/src/styles/components/_alltickets.scss b/frontend/src/styles/components/_alltickets.scss new file mode 100644 index 0000000..151e488 --- /dev/null +++ b/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; + } + } +} + diff --git a/frontend/src/styles/components/_allusers.scss b/frontend/src/styles/components/_allusers.scss new file mode 100644 index 0000000..7e08827 --- /dev/null +++ b/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; + } + } +} diff --git a/frontend/src/styles/components/_forms.scss b/frontend/src/styles/components/_forms.scss new file mode 100644 index 0000000..392f60a --- /dev/null +++ b/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; + } + } +} diff --git a/frontend/src/styles/components/_login.scss b/frontend/src/styles/components/_login.scss new file mode 100644 index 0000000..8367d27 --- /dev/null +++ b/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); + } +} diff --git a/frontend/src/styles/components/_pages.scss b/frontend/src/styles/components/_pages.scss index f418196..f9343b0 100644 --- a/frontend/src/styles/components/_pages.scss +++ b/frontend/src/styles/components/_pages.scss @@ -42,91 +42,8 @@ } } -.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; - } - } - } +input[type="checkbox"] { + width: fit-content; } .grid-list { diff --git a/frontend/src/styles/components/_tickets.scss b/frontend/src/styles/components/_tickets.scss index 6c20248..1bd7500 100644 --- a/frontend/src/styles/components/_tickets.scss +++ b/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; +} diff --git a/frontend/src/styles/main.scss b/frontend/src/styles/main.scss index f4fc7f3..aad6604 100644 --- a/frontend/src/styles/main.scss +++ b/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 { - display: inline-block; - padding: 12px 400px; - background: variables.$color-primary; - color: white; - border-radius: variables.$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; +.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); - &:hover { - background: variables.$color-primary-hover; - transform: scale(1.05); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + @media (prefers-color-scheme: dark) { + background: variables.$color-container-dark; } } -.logout-btn { - display: inline-block; - padding: 10px 20px; - background: variables.$color-logout; - color: white; - border-radius: variables.$border-radius-lg; - text-decoration: none; - font-weight: bold; - transition: 0.2s ease-in-out; +.header-with-image { + display: flex; + justify-content: space-between; + align-items: center; margin-bottom: 20px; +} - &:hover { - background: variables.$color-logout-hover; - transform: scale(1.05); - } +.header-with-image img { + height: 60px; } .admin { display: flex; }