Improved visual briefing layout

This commit is contained in:
Thorsten Sommer 2026-07-30 20:29:16 +02:00
parent 51ca046f97
commit 39aae9a923
Signed by untrusted user who does not match committer: tsommer
GPG Key ID: 371BBA77A02C0108
2 changed files with 31 additions and 50 deletions

View File

@ -8,20 +8,18 @@
<CascadingValue Value="@this.CurrentMediaOwner"> <CascadingValue Value="@this.CurrentMediaOwner">
<PreviewPrototype ApplyInnerScrollingFix="true"/> <PreviewPrototype ApplyInnerScrollingFix="true"/>
<div class="visual-briefing-shell"> <div class="visual-briefing-shell">
<MudPaper Class="visual-briefing-projects pa-3" Outlined="true"> <MudText Typo="Typo.h4" Class="mb-3">@T("Visual Briefings")</MudText>
<MudText Typo="Typo.h5">@T("Visual Briefings")</MudText>
<MudStack Row="true" Spacing="1" Class="my-3" Wrap="Wrap.Wrap"> <MudList T="Guid"
<MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" OnClick="@this.CreateBriefingAsync">@T("New briefing")</MudButton> Color="Color.Primary"
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.FileUpload" OnClick="@this.ImportAsync">@T("Import")</MudButton> Class="mb-1"
</MudStack> SelectedValue="@(this.selectedBriefing?.BriefingId ?? Guid.Empty)"
<MudList T="Guid" Dense="true"> SelectedValueChanged="@this.SelectBriefingAsync">
@foreach (var briefing in this.briefings) @foreach (var briefing in this.briefings)
{ {
<MudListItem T="Guid" <MudListItem T="Guid"
Value="@briefing.BriefingId" Value="@briefing.BriefingId"
Icon="@Icons.Material.Filled.Dashboard" Icon="@Icons.Material.Filled.Dashboard">
OnClick="@(() => this.SelectBriefingAsync(briefing.BriefingId))"
Class="@(this.selectedBriefing?.BriefingId == briefing.BriefingId ? "mud-theme-primary" : string.Empty)">
<MudStack Spacing="0"> <MudStack Spacing="0">
<MudText Typo="Typo.body1">@briefing.Name</MudText> <MudText Typo="Typo.body1">@briefing.Name</MudText>
<MudText Typo="Typo.caption">@briefing.ModifiedAtUtc.ToLocalTime().ToString("g")</MudText> <MudText Typo="Typo.caption">@briefing.ModifiedAtUtc.ToLocalTime().ToString("g")</MudText>
@ -34,7 +32,13 @@
</MudListItem> </MudListItem>
} }
</MudList> </MudList>
</MudPaper>
<MudStack Row="true" Spacing="1" Class="mt-1" Wrap="Wrap.Wrap">
<MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" OnClick="@this.CreateBriefingAsync">@T("New briefing")</MudButton>
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.FileUpload" OnClick="@this.ImportAsync">@T("Import")</MudButton>
</MudStack>
<MudDivider Style="height: 0.25ch; margin: 1rem 0;" Class="mt-6"/>
<main class="visual-briefing-main"> <main class="visual-briefing-main">
@if (this.selectedBriefing is null) @if (this.selectedBriefing is null)

View File

@ -1,22 +1,10 @@
.visual-briefing-shell { .visual-briefing-shell {
display: grid;
grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
gap: 1rem;
align-content: start;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
.visual-briefing-projects {
align-self: start;
max-height: calc(100vh - 7rem);
overflow-y: auto;
position: sticky;
top: 1rem;
}
.visual-briefing-main { .visual-briefing-main {
min-width: 0; min-width: 0;
padding-bottom: 1rem; padding-bottom: 1rem;
@ -51,14 +39,3 @@
height: 72vh; height: 72vh;
width: 100%; width: 100%;
} }
@media (max-width: 960px) {
.visual-briefing-shell {
grid-template-columns: 1fr;
}
.visual-briefing-projects {
max-height: none;
position: static;
}
}