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/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>