Tokk/TodoTicketApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design;

Browse Source
This commit is contained in:
Tokk
2026-05-27 11:29:22 +02:00
parent 10c5368c64
commit f551e6aee9
10 changed files with 293 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Components/App.razor
+7
View File
@@ -5,6 +5,13 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<ResourcePreloader />
<link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
<link rel="stylesheet" href="@Assets["app.css"]" />
Components/Layout/MainLayout.razor
+1 -21
View File
@@ -1,23 +1,3 @@
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>
</div>
<div id="blazor-error-ui" data-nosnippet>
An unhandled error has occurred.
<a href="." class="reload">Reload</a>
<span class="dismiss">🗙</span>
</div>
@Body
Components/Layout/MainLayout.razor.css
-98
View File
@@ -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;
}
Components/Layout/NavMenu.razor
-30
View File
@@ -1,30 +0,0 @@
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">TodoTicketApp</a>
</div>
</div>
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
<nav class="nav flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="weather">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
</NavLink>
</div>
</nav>
</div>
Components/Layout/NavMenu.razor.css
-105
View File
@@ -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;
}
}
Components/Pages/Counter.razor
-19
View File
@@ -1,19 +0,0 @@
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Components/Pages/Home.razor
+33 -68
View File
@@ -5,12 +5,17 @@
@inject ITicketService TicketService
@inject NavigationManager Nav
<PageTitle>Ticket Dashboard</PageTitle>
<PageTitle>Ticket Dashboard | Custom Theme</PageTitle>
<div class="dashboard-container">
<div class="quick-entry">
<input class="form-control form-control-lg"
placeholder="Ticket-Titel eingeben..."
<div class="main-container">
<header class="dashboard-header">
<h1>Ticket <span>Dashboard</span></h1>
<p class="subtitle">Effiziente FIFO-Verwaltung nach Priorität</p>
</header>
<div class="ticket-anlage">
<input class="custom-input"
placeholder="Neues Ticket-Titel eingeben..."
@bind="newTicketTitle"
@onkeyup="HandleKeyUp" />
</div>
@@ -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)
{
<div class="waiting-separator">
<hr />
<span>Wartende Tickets</span>
<hr />
<hr class="dashed-line" />
<span class="separator-text">WARTENDE TICKETS</span>
<hr class="dashed-line" />
</div>
dividerShown = true; // Trenner wurde gezeichnet, nicht nochmal anzeigen
dividerShown = true;
}
<div class="ticket-card priority-@ticket.Priority.ToString().ToLower() @(ticket.IsWaitingForFeedback ? "is-waiting" : "")">
<div class="ticket-header" @onclick="() => GoToDetails(ticket.Id)">
<span class="prio-tag">@ticket.Priority</span>
<h5>@ticket.Title</h5>
<small>@ticket.CreatedAt.ToLocalTime().ToString("g")</small>
</div>
<div class="ticket-body" @onclick="() => GoToDetails(ticket.Id)">
<p>@(ticket.Description.Length > 200 ? ticket.Description.Substring(0, 200) + "..." : ticket.Description)</p>
<div class="ticket-main-click" @onclick="() => GoToDetails(ticket.Id)">
<div class="card-header-row">
<span class="prio-badge">@ticket.Priority</span>
<small class="ticket-date">@ticket.CreatedAt.ToLocalTime().ToString("g")</small>
</div>
<h5 class="ticket-title">@ticket.Title</h5>
<div class="ticket-preview">
<p>@(ticket.Description.Length > 200 ? ticket.Description.Substring(0, 200) + "..." : ticket.Description)</p>
</div>
</div>
<div class="ticket-footer">
<span class="comments-info">
<i class="bi bi-chat-left-text"></i> @ticket.Comments.Count Kommentare
</span>
<div class="ticket-actions">
<button class="btn btn-sm @(ticket.IsWaitingForFeedback ? "btn-secondary" : "btn-outline-warning")"
<div class="ticket-actions-row">
<div class="meta-info">
<i class="fa fa-comment"></i> @ticket.Comments.Count
</div>
<div class="action-buttons">
<button class="custom-btn btn-wait"
@onclick="() => ToggleWaitingStatus(ticket)"
@onclick:stopPropagation="true">
@(ticket.IsWaitingForFeedback ? "Warten aufheben" : "Auf Rückmeldung warten")
@(ticket.IsWaitingForFeedback ? "Warten aufheben" : "Warten")
</button>
<button class="btn btn-sm btn-outline-success"
<button class="custom-btn btn-complete"
@onclick="() => Complete(ticket.Id)"
@onclick:stopPropagation="true">
Erledigen
@@ -99,46 +107,3 @@
}
private void GoToDetails(Guid id) => Nav.NavigateTo($"/ticket/edit/{id}");
}
<style>
.dashboard-container { max-width: 800px; margin: 2rem auto; }
.quick-entry { margin-bottom: 2rem; }
.ticket-card {
background: #f8f9fa; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;
border-left: 5px solid #ccc; cursor: pointer; transition: transform 0.1s;
}
.is-waiting {
opacity: 0.6;
background-color: #e9ecef;
border-left-color: #6c757d !important; /* Überschreibt die Prio-Farbe mit Grau */
}
.ticket-actions {
display: flex;
gap: 0.5rem;
}
.ticket-card:hover { transform: scale(1.01); }
.priority-critical { border-left-color: #dc3545; }
.priority-high { border-left-color: #fd7e14; }
.ticket-header { display: flex; justify-content: space-between; align-items: center; }
.prio-tag { font-size: 0.7rem; font-weight: bold; text-transform: uppercase; }
.ticket-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.waiting-separator {
display: flex;
align-items: center;
text-align: center;
margin: 2.5rem 0 1.5rem 0;
color: #6c757d;
font-size: 0.85rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.waiting-separator hr {
flex-grow: 1;
border: none;
border-top: 2px dashed #dee2e6;
margin: 0 1rem;
opacity: 1;
}
</style>
Components/Pages/TicketDetail.razor
+147 -47
View File
@@ -5,87 +5,122 @@
@inject ITicketService TicketService
@inject NavigationManager Nav
<div class="detail-container">
<PageTitle>Ticket Bearbeiten</PageTitle>
<div class="main-container detail-wrapper">
@if (ticket == null)
{
<p>Lade Ticket...</p>
<div class="loading-state">Lade Ticket...</div>
}
else
{
<div class="header-actions">
<button class="btn btn-link" @onclick="GoBack">&larr; Zurück zum Dashboard</button>
<span class="badge @(ticket.IsCompleted ? "bg-success" : "bg-warning")">
@(ticket.IsCompleted ? "Erledigt" : "Offen")
</span>
<div class="detail-header">
<button class="custom-btn btn-ghost" @onclick="GoBack">
<i class="fa fa-arrow-left"></i> Zurück zum Dashboard
</button>
<div class="status-badges">
@if (ticket.IsWaitingForFeedback)
{
<span class="badge badge-warning">Wartet auf Rückmeldung</span>
}
@if (ticket.IsCompleted)
{
<span class="badge badge-success">Erledigt</span>
}
else if (!ticket.IsWaitingForFeedback)
{
<span class="badge badge-active">Aktiv</span>
}
</div>
</div>
<div class="card shadow-sm p-4">
<div class="mb-3">
<label class="form-label fw-bold">Titel</label>
<input class="form-control form-control-lg" @bind="ticket.Title" />
<div class="ticket-card detail-main-card">
<div class="form-group">
<label>Titel</label>
<input class="custom-input detail-input" @bind="ticket.Title" placeholder="Titel des Tickets" />
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label fw-bold">Priorität</label>
<select class="form-select" @bind="ticket.Priority">
<div class="form-row">
<div class="form-group half-width">
<label>Priorität</label>
<select class="custom-input detail-input" @bind="ticket.Priority">
@foreach (var prio in Enum.GetValues<TicketPriority>())
{
<option value="@prio">@prio</option>
}
</select>
</div>
<div class="col-md-6 d-flex align-items-end gap-4">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="isWaiting" @bind="ticket.IsWaitingForFeedback">
<label class="form-check-label text-warning" for="isWaiting">Wartet auf Rückmeldung</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="isDone" @bind="ticket.IsCompleted">
<label class="form-check-label text-success" for="isDone">Als erledigt markieren</label>
</div>
<div class="form-group half-width checkboxes-container">
<label class="custom-checkbox text-warning">
<input type="checkbox" @bind="ticket.IsWaitingForFeedback" />
<span class="checkmark"></span>
Wartet auf Rückmeldung
</label>
<label class="custom-checkbox text-success">
<input type="checkbox" @bind="ticket.IsCompleted" />
<span class="checkmark"></span>
Als erledigt markieren
</label>
</div>
</div>
<div class="mb-3">
<label class="form-label fw-bold">Beschreibung</label>
<textarea class="form-control" rows="5" @bind="ticket.Description" placeholder="Beschreibe das Ticket näher..."></textarea>
<div class="form-group">
<label>Beschreibung</label>
<textarea class="custom-input detail-input" rows="6" @bind="ticket.Description" placeholder="Detaillierte Beschreibung..."></textarea>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary px-5" @onclick="Save">Speichern</button>
<div class="action-footer">
<button class="custom-btn btn-primary" @onclick="Save">
<i class="fa fa-save"></i> Ticket Speichern
</button>
</div>
</div>
<div class="row mt-4">
<div class="col-md-7">
<h5 class="mb-3">Kommentare (@ticket.Comments.Count)</h5>
<div class="comment-list mb-3">
<div class="detail-grid">
<div class="ticket-card detail-sub-card">
<h3>Kommentare <span>(@ticket.Comments.Count)</span></h3>
<div class="comment-list">
@foreach (var c in ticket.Comments.OrderByDescending(x => x.CreatedAt))
{
<div class="card mb-2 p-2 bg-light border-0">
<small class="text-muted">@c.CreatedAt.ToLocalTime().ToString("g")</small>
<p class="mb-0">@c.Text</p>
<div class="comment-item">
<div class="comment-meta">@c.CreatedAt.ToLocalTime().ToString("g")</div>
<div class="comment-text">@c.Text</div>
</div>
}
@if (!ticket.Comments.Any())
{
<div class="empty-state">Noch keine Kommentare vorhanden.</div>
}
</div>
<div class="input-group">
<input class="form-control" placeholder="Kommentar schreiben..." @bind="newCommentText" />
<button class="btn btn-outline-secondary" @onclick="AddComment">Senden</button>
<div class="comment-input-group">
<input class="custom-input detail-input" placeholder="Neuen Kommentar schreiben..." @bind="newCommentText" />
<button class="custom-btn btn-outline" @onclick="AddComment">Senden</button>
</div>
</div>
<div class="col-md-5">
<h5 class="mb-3">Anhänge</h5>
<div class="list-group mb-2">
<div class="ticket-card detail-sub-card">
<h3>Anhänge <span>(@ticket.AttachmentNames.Count)</span></h3>
<div class="attachment-list">
@foreach (var file in ticket.AttachmentNames)
{
<div class="list-group-item d-flex justify-content-between align-items-center">
<span><i class="bi bi-file-earmark"></i> @file</span>
<div class="attachment-item">
<i class="fa fa-file-pdf"></i>
<span>@file</span>
</div>
}
@if (!ticket.AttachmentNames.Any())
{
<div class="empty-state">Keine Anhänge vorhanden.</div>
}
</div>
<button class="btn btn-sm btn-outline-primary" @onclick="MockAddFile">+ Datei simulieren</button>
<button class="custom-btn btn-outline full-width mt-15" @onclick="MockAddFile">
<i class="fa fa-plus"></i> Datei simulieren
</button>
</div>
</div>
}
@@ -126,6 +161,71 @@
}
<style>
.detail-container { max-width: 1000px; margin: 2rem auto; }
.header-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
/* Spezifisches Layout für die Detailseite */
.detail-wrapper { max-width: 900px; padding-top: 20px; }
.loading-state, .empty-state { color: var(--text-muted); font-style: italic; text-align: center; padding: 20px; }
/* Header */
.detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.btn-ghost { background: transparent; color: var(--text-muted); padding: 0; }
.btn-ghost:hover { color: var(--text-main); }
.btn-ghost i { margin-right: 8px; }
.status-badges { display: flex; gap: 10px; }
.badge { padding: 6px 12px; border-radius: var(--radius-small); font-size: 12px; font-weight: bold; text-transform: uppercase; }
.badge-warning { background: rgba(255, 235, 59, 0.1); color: var(--accent-yellow); border: 1px solid rgba(255, 235, 59, 0.3); }
.badge-success { background: rgba(222, 255, 154, 0.1); color: var(--accent-green); border: 1px solid rgba(222, 255, 154, 0.3); }
.badge-active { background: rgba(255, 255, 255, 0.05); color: #ccc; border: 1px solid rgba(255, 255, 255, 0.1); }
/* Formularelemente */
.detail-main-card { margin-bottom: 30px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.form-row { display: flex; gap: 20px; }
.half-width { flex: 1; }
.detail-input { background: #121212; border-color: var(--border-color); }
.detail-input:focus { border-color: var(--accent-green); }
select.detail-input { appearance: none; cursor: pointer; }
/* Checkbox Styling (Eckig und modern) */
.checkboxes-container { display: flex; flex-direction: column; justify-content: flex-end; gap: 15px; padding-bottom: 10px; }
.custom-checkbox { position: relative; padding-left: 30px; cursor: pointer; font-size: 15px; display: flex; align-items: center; }
.custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #121212; border: 1px solid var(--border-color); border-radius: var(--radius-small); transition: all 0.2s; }
.custom-checkbox:hover input ~ .checkmark { border-color: #555; }
.custom-checkbox input:checked ~ .checkmark { background-color: var(--accent-green); border-color: var(--accent-green); }
.checkmark:after { content: ""; position: absolute; display: none; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #121212; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.custom-checkbox input:checked ~ .checkmark:after { display: block; }
.text-warning { color: var(--accent-yellow) !important; }
.text-success { color: var(--accent-green) !important; }
/* Buttons */
.action-footer { display: flex; justify-content: flex-end; margin-top: 10px; border-top: 1px solid var(--border-color); padding-top: 20px; }
.btn-primary { background: var(--accent-green); color: #121212; font-weight: bold; border-color: var(--accent-green); }
.btn-primary:hover { background: #c6e589; }
.btn-outline { background: transparent; border: 1px solid var(--border-color); color: #ccc; }
.btn-outline:hover { border-color: var(--text-main); color: var(--text-main); }
.full-width { width: 100%; }
.mt-15 { margin-top: 15px; }
/* Grid (Kommentare & Anhänge nebeneinander) */
.detail-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; }
.detail-sub-card { padding: 20px; }
.detail-sub-card h3 { margin: 0 0 20px 0; font-size: 18px; color: #f5f5f5; font-weight: 500; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.detail-sub-card h3 span { color: var(--text-muted); font-size: 14px; }
/* Kommentare */
.comment-list { max-height: 300px; overflow-y: auto; margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px; padding-right: 5px; }
.comment-item { background: #121212; padding: 12px 15px; border-radius: var(--radius-small); border-left: 2px solid var(--accent-green); }
.comment-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
.comment-text { font-size: 14px; line-height: 1.5; color: var(--text-main); }
.comment-input-group { display: flex; gap: 10px; }
.comment-input-group .custom-input { flex-grow: 1; }
/* Anhänge */
.attachment-list { display: flex; flex-direction: column; gap: 8px; }
.attachment-item { background: #121212; padding: 10px 15px; border-radius: var(--radius-small); display: flex; align-items: center; gap: 10px; font-size: 14px; border: 1px solid var(--border-color); }
.attachment-item i { color: #ff4444; } /* Rotes PDF Icon */
</style>
Components/Pages/Weather.razor
-64
View File
@@ -1,64 +0,0 @@
@page "/weather"
@attribute [StreamRendering]
<PageTitle>Weather</PageTitle>
<h1>Weather</h1>
<p>This component demonstrates showing data.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th aria-label="Temperature in Celsius">Temp. (C)</th>
<th aria-label="Temperature in Fahrenheit">Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@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);
}
}
wwwroot/app.css
+105 -39
View File
@@ -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;
}
.dashed-line { flex-grow: 1; border: none; border-top: 2px dashed #444; margin: 0 1.5rem; opacity: 1; }
.separator-text { color: var(--text-muted); }