From f551e6aee978e372a81745148db538a97f3c0054 Mon Sep 17 00:00:00 2001 From: Trond Schertel Date: Wed, 27 May 2026 11:29:22 +0200 Subject: [PATCH] Design; --- Components/App.razor | 7 + Components/Layout/MainLayout.razor | 22 +-- Components/Layout/MainLayout.razor.css | 98 ------------- Components/Layout/NavMenu.razor | 30 ---- Components/Layout/NavMenu.razor.css | 105 ------------- Components/Pages/Counter.razor | 19 --- Components/Pages/Home.razor | 101 +++++-------- Components/Pages/TicketDetail.razor | 194 +++++++++++++++++++------ Components/Pages/Weather.razor | 64 -------- wwwroot/app.css | 144 +++++++++++++----- 10 files changed, 293 insertions(+), 491 deletions(-) delete mode 100644 Components/Layout/MainLayout.razor.css delete mode 100644 Components/Layout/NavMenu.razor delete mode 100644 Components/Layout/NavMenu.razor.css delete mode 100644 Components/Pages/Counter.razor delete mode 100644 Components/Pages/Weather.razor diff --git a/Components/App.razor b/Components/App.razor index 7780201..5ebba8a 100644 --- a/Components/App.razor +++ b/Components/App.razor @@ -5,6 +5,13 @@ + + + + + + + diff --git a/Components/Layout/MainLayout.razor b/Components/Layout/MainLayout.razor index 9e253ba..b378b5f 100644 --- a/Components/Layout/MainLayout.razor +++ b/Components/Layout/MainLayout.razor @@ -1,23 +1,3 @@ @inherits LayoutComponentBase -
-
- -
- -
-
- About -
- -
- @Body -
-
-
- -
- An unhandled error has occurred. - Reload - 🗙 -
+@Body diff --git a/Components/Layout/MainLayout.razor.css b/Components/Layout/MainLayout.razor.css deleted file mode 100644 index f29f3c3..0000000 --- a/Components/Layout/MainLayout.razor.css +++ /dev/null @@ -1,98 +0,0 @@ -.page { - position: relative; - display: flex; - flex-direction: column; -} - -main { - flex: 1; -} - -.sidebar { - background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); -} - -.top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; - justify-content: flex-end; - height: 3.5rem; - display: flex; - align-items: center; -} - - .top-row ::deep a, .top-row ::deep .btn-link { - white-space: nowrap; - margin-left: 1.5rem; - text-decoration: none; - } - - .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { - text-decoration: underline; - } - - .top-row ::deep a:first-child { - overflow: hidden; - text-overflow: ellipsis; - } - -@media (max-width: 640.98px) { - .top-row { - justify-content: space-between; - } - - .top-row ::deep a, .top-row ::deep .btn-link { - margin-left: 0; - } -} - -@media (min-width: 641px) { - .page { - flex-direction: row; - } - - .sidebar { - width: 250px; - height: 100vh; - position: sticky; - top: 0; - } - - .top-row { - position: sticky; - top: 0; - z-index: 1; - } - - .top-row.auth ::deep a:first-child { - flex: 1; - text-align: right; - width: 0; - } - - .top-row, article { - padding-left: 2rem !important; - padding-right: 1.5rem !important; - } -} - -#blazor-error-ui { - color-scheme: light only; - background: lightyellow; - bottom: 0; - box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); - box-sizing: border-box; - display: none; - left: 0; - padding: 0.6rem 1.25rem 0.7rem 1.25rem; - position: fixed; - width: 100%; - z-index: 1000; -} - - #blazor-error-ui .dismiss { - cursor: pointer; - position: absolute; - right: 0.75rem; - top: 0.5rem; - } diff --git a/Components/Layout/NavMenu.razor b/Components/Layout/NavMenu.razor deleted file mode 100644 index 5f5e6e4..0000000 --- a/Components/Layout/NavMenu.razor +++ /dev/null @@ -1,30 +0,0 @@ -
-
- TodoTicketApp -
-
- - - -
- -
- diff --git a/Components/Layout/NavMenu.razor.css b/Components/Layout/NavMenu.razor.css deleted file mode 100644 index e9ba49d..0000000 --- a/Components/Layout/NavMenu.razor.css +++ /dev/null @@ -1,105 +0,0 @@ -.navbar-toggler { - appearance: none; - cursor: pointer; - width: 3.5rem; - height: 2.5rem; - color: white; - position: absolute; - top: 0.5rem; - right: 1rem; - border: 1px solid rgba(255, 255, 255, 0.1); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); -} - -.navbar-toggler:checked { - background-color: rgba(255, 255, 255, 0.5); -} - -.top-row { - min-height: 3.5rem; - background-color: rgba(0,0,0,0.4); -} - -.navbar-brand { - font-size: 1.1rem; -} - -.bi { - display: inline-block; - position: relative; - width: 1.25rem; - height: 1.25rem; - margin-right: 0.75rem; - top: -1px; - background-size: cover; -} - -.bi-house-door-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); -} - -.bi-plus-square-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); -} - -.bi-list-nested-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); -} - -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; -} - - .nav-item:first-of-type { - padding-top: 1rem; - } - - .nav-item:last-of-type { - padding-bottom: 1rem; - } - - .nav-item ::deep .nav-link { - color: #d7d7d7; - background: none; - border: none; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - width: 100%; - } - -.nav-item ::deep a.active { - background-color: rgba(255,255,255,0.37); - color: white; -} - -.nav-item ::deep .nav-link:hover { - background-color: rgba(255,255,255,0.1); - color: white; -} - -.nav-scrollable { - display: none; -} - -.navbar-toggler:checked ~ .nav-scrollable { - display: block; -} - -@media (min-width: 641px) { - .navbar-toggler { - display: none; - } - - .nav-scrollable { - /* Never collapse the sidebar for wide screens */ - display: block; - - /* Allow sidebar to scroll for tall menus */ - height: calc(100vh - 3.5rem); - overflow-y: auto; - } -} diff --git a/Components/Pages/Counter.razor b/Components/Pages/Counter.razor deleted file mode 100644 index ba08d04..0000000 --- a/Components/Pages/Counter.razor +++ /dev/null @@ -1,19 +0,0 @@ -@page "/counter" -@rendermode InteractiveServer - -Counter - -

Counter

- -

Current count: @currentCount

- - - -@code { - private int currentCount = 0; - - private void IncrementCount() - { - currentCount++; - } -} diff --git a/Components/Pages/Home.razor b/Components/Pages/Home.razor index b16758b..2e9e3b0 100644 --- a/Components/Pages/Home.razor +++ b/Components/Pages/Home.razor @@ -5,12 +5,17 @@ @inject ITicketService TicketService @inject NavigationManager Nav -Ticket Dashboard +Ticket Dashboard | Custom Theme -
-
- +
+

Ticket Dashboard

+

Effiziente FIFO-Verwaltung nach Priorität

+
+ +
+
@@ -21,39 +26,42 @@ } @foreach (var ticket in TicketService.GetPendingTickets()) { - // Sobald das erste wartende Ticket auftaucht und der Trenner noch nicht da ist: @if (ticket.IsWaitingForFeedback && !dividerShown) {
-
- Wartende Tickets -
+
+ WARTENDE TICKETS +
- dividerShown = true; // Trenner wurde gezeichnet, nicht nochmal anzeigen + dividerShown = true; }
-
- @ticket.Priority -
@ticket.Title
- @ticket.CreatedAt.ToLocalTime().ToString("g") -
-
-

@(ticket.Description.Length > 200 ? ticket.Description.Substring(0, 200) + "..." : ticket.Description)

+
+
+ @ticket.Priority + @ticket.CreatedAt.ToLocalTime().ToString("g") +
+ +
@ticket.Title
+ +
+

@(ticket.Description.Length > 200 ? ticket.Description.Substring(0, 200) + "..." : ticket.Description)

+
-
- - @ticket.Comments.Count Kommentare - -
- - - - @(ticket.IsCompleted ? "Erledigt" : "Offen") - +
+ +
+ @if (ticket.IsWaitingForFeedback) + { + Wartet auf Rückmeldung + } + @if (ticket.IsCompleted) + { + Erledigt + } + else if (!ticket.IsWaitingForFeedback) + { + Aktiv + } +
-
-
- - +
+
+ +
-
-
- - @foreach (var prio in Enum.GetValues()) { }
-
-
- - -
-
- - -
+ +
+ +
-
- - +
+ +
-
- +
+
-
-
-
Kommentare (@ticket.Comments.Count)
-
+
+
+

Kommentare (@ticket.Comments.Count)

+ +
@foreach (var c in ticket.Comments.OrderByDescending(x => x.CreatedAt)) { -
- @c.CreatedAt.ToLocalTime().ToString("g") -

@c.Text

+
+
@c.CreatedAt.ToLocalTime().ToString("g")
+
@c.Text
} + @if (!ticket.Comments.Any()) + { +
Noch keine Kommentare vorhanden.
+ }
-
- - + +
+ +
-
-
Anhänge
-
+
+

Anhänge (@ticket.AttachmentNames.Count)

+ +
@foreach (var file in ticket.AttachmentNames) { -
- @file +
+ + @file
} + @if (!ticket.AttachmentNames.Any()) + { +
Keine Anhänge vorhanden.
+ }
- + +
} @@ -126,6 +161,71 @@ } \ No newline at end of file diff --git a/Components/Pages/Weather.razor b/Components/Pages/Weather.razor deleted file mode 100644 index d00febb..0000000 --- a/Components/Pages/Weather.razor +++ /dev/null @@ -1,64 +0,0 @@ -@page "/weather" -@attribute [StreamRendering] - -Weather - -

Weather

- -

This component demonstrates showing data.

- -@if (forecasts == null) -{ -

Loading...

-} -else -{ - - - - - - - - - - - @foreach (var forecast in forecasts) - { - - - - - - - } - -
DateTemp. (C)Temp. (F)Summary
@forecast.Date.ToShortDateString()@forecast.TemperatureC@forecast.TemperatureF@forecast.Summary
-} - -@code { - private WeatherForecast[]? forecasts; - - protected override async Task OnInitializedAsync() - { - // Simulate asynchronous loading to demonstrate streaming rendering - await Task.Delay(500); - - var startDate = DateOnly.FromDateTime(DateTime.Now); - var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" }; - forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast - { - Date = startDate.AddDays(index), - TemperatureC = Random.Shared.Next(-20, 55), - Summary = summaries[Random.Shared.Next(summaries.Length)] - }).ToArray(); - } - - private class WeatherForecast - { - public DateOnly Date { get; set; } - public int TemperatureC { get; set; } - public string? Summary { get; set; } - public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); - } -} diff --git a/wwwroot/app.css b/wwwroot/app.css index 20b5582..d967b7b 100644 --- a/wwwroot/app.css +++ b/wwwroot/app.css @@ -1,60 +1,126 @@ -html, body { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; +/* 1. Globale Theme-Variablen */ +:root { + --bg-main: #121212; + --bg-card: #1a1a1a; + --text-main: #daffde; + --text-muted: #888; + --accent-green: #deff9a; + --accent-yellow: #ffeb3b; + --border-color: #222; + --prio-critical: #ff4444; + --prio-high: #fd7e14; + --font-family: 'Urbanist', sans-serif; + --radius-main: 4px; + --radius-small: 2px; } -a, .btn-link { - color: #006bb7; +/* 2. Container & Layout */ +body { + background-color: var(--bg-main); + color: var(--text-main); + font-family: var(--font-family); } -.btn-primary { - color: #fff; - background-color: #1b6ec2; - border-color: #1861ac; +.main-container { + max-width: 1100px; + margin: 0 auto; + padding: 40px 20px; } -.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { - box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; -} +.dashboard-header { text-align: center; margin-bottom: 50px; } +.dashboard-header h1 { font-weight: 500; font-size: 48px; color: #f5f5f5; } +.dashboard-header h1 span { color: var(--accent-green); } +.subtitle { color: #888; font-size: 18px; margin-top: 10px; } -.content { - padding-top: 1.1rem; +/* 3. Ticket Anlage (Input) */ +.ticket-anlage { margin-bottom: 40px; text-align: center; } +.custom-input { + width: 100%; + max-width: 700px; + padding: 18px 25px; + background: rgba(0, 0, 0, 0.3); + border: 1px solid #333; + border-radius: var(--radius-small); + color: var(--text-main); + font-size: 18px; + transition: border-color 0.2s, box-shadow 0.2s; } - -h1:focus { +.custom-input:focus { outline: none; + border-color: var(--accent-green); + box-shadow: 0 0 10px rgba(222, 255, 154, 0.1); } -.valid.modified:not([type=checkbox]) { - outline: 1px solid #26b050; +/* 4. Ticket Cards */ +.ticket-list { display: flex; flex-direction: column; gap: 20px; } +.ticket-card { + background: var(--bg-card); + border-radius: var(--radius-main); + padding: 25px; + border-left: 4px solid var(--border-color); + box-shadow: 0 5px 15px rgba(0,0,0,0.2); + transition: transform 0.2s, box-shadow 0.2s; + display: flex; + flex-direction: column; +} +.ticket-card:hover:not(.is-waiting) { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(0,0,0,0.3); } -.invalid { - outline: 1px solid #e50000; +/* Prio-Farben am Rand */ +.priority-critical { border-left-color: var(--prio-critical); } +.priority-high { border-left-color: var(--prio-high); } +.priority-medium { border-left-color: var(--accent-green); } + +/* Card Content */ +.ticket-main-click { cursor: pointer; flex-grow: 1; } +.card-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } +.prio-badge { + font-size: 12px; font-weight: bold; text-transform: uppercase; + padding: 5px 12px; + border-radius: var(--radius-small); + background: rgba(222, 255, 154, 0.1); color: var(--accent-green); } +.priority-critical .prio-badge { color: var(--prio-critical); background: rgba(255, 68, 68, 0.1); } -.validation-message { - color: #e50000; +.ticket-date { color: var(--text-muted); } +.ticket-title { font-size: 24px; font-weight: 500; color: #f5f5f5; margin: 0 0 10px 0; } +.ticket-preview p { color: #daffde; opacity: 0.8; line-height: 1.6; margin: 0; } + +/* Actions Row */ +.ticket-actions-row { + display: flex; justify-content: space-between; align-items: center; + margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.05); } +.meta-info { color: var(--text-muted); font-size: 14px; } +.meta-info i { margin-right: 5px; color: var(--accent-green); } +.action-buttons { display: flex; gap: 10px; } -.blazor-error-boundary { - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; - padding: 1rem 1rem 1rem 3.7rem; - color: white; +/* Custom Buttons */ +.custom-btn { + padding: 8px 20px; + border-radius: var(--radius-main); + font-weight: 500; font-size: 14px; + cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; + border: 1px solid transparent; } +.btn-complete { background: transparent; border-color: var(--accent-green); color: var(--accent-green); } +.btn-complete:hover { background: var(--accent-green); color: #121212; } - .blazor-error-boundary::after { - content: "An error has occurred." - } +.btn-wait { background: transparent; border-color: var(--accent-yellow); color: var(--accent-yellow); } +.btn-wait:hover { background: var(--accent-yellow); color: #121212; } -.darker-border-checkbox.form-check-input { - border-color: #929292; +/* 5. Waiting Status & Trenner */ +.is-waiting { opacity: 0.6; background-color: #1a1a1a; border-left-color: #555 !important; } +.is-waiting .prio-badge { background: rgba(100,100,100,0.1); color: #777; } +.is-waiting .ticket-title { color: #bbb; } +.is-waiting .ticket-actions-row { border-top-color: rgba(255,255,255,0.02); } + +.waiting-separator { + display: flex; align-items: center; text-align: center; + margin: 50px 0 30px 0; color: #6c757d; font-size: 14px; font-weight: bold; + text-transform: uppercase; letter-spacing: 1.5px; } - -.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { - color: var(--bs-secondary-color); - text-align: end; -} - -.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { - text-align: start; -} \ No newline at end of file +.dashed-line { flex-grow: 1; border: none; border-top: 2px dashed #444; margin: 0 1.5rem; opacity: 1; } +.separator-text { color: var(--text-muted); } \ No newline at end of file