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,33 +8,37 @@
<CascadingValue Value="@this.CurrentMediaOwner">
<PreviewPrototype ApplyInnerScrollingFix="true"/>
<div class="visual-briefing-shell">
<MudPaper Class="visual-briefing-projects pa-3" Outlined="true">
<MudText Typo="Typo.h5">@T("Visual Briefings")</MudText>
<MudStack Row="true" Spacing="1" Class="my-3" 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>
<MudList T="Guid" Dense="true">
@foreach (var briefing in this.briefings)
{
<MudListItem T="Guid"
Value="@briefing.BriefingId"
Icon="@Icons.Material.Filled.Dashboard"
OnClick="@(() => this.SelectBriefingAsync(briefing.BriefingId))"
Class="@(this.selectedBriefing?.BriefingId == briefing.BriefingId ? "mud-theme-primary" : string.Empty)">
<MudStack Spacing="0">
<MudText Typo="Typo.body1">@briefing.Name</MudText>
<MudText Typo="Typo.caption">@briefing.ModifiedAtUtc.ToLocalTime().ToString("g")</MudText>
@if (this.IsGenerating(briefing.BriefingId))
{
<MudProgressLinear Indeterminate="true" Color="Color.Primary" Class="mt-1"/>
}
<MediaTranscriptionStatus Owner="@MediaImportOwner.ForVisualBriefing(briefing.BriefingId)" Compact="true"/>
</MudStack>
</MudListItem>
}
</MudList>
</MudPaper>
<MudText Typo="Typo.h4" Class="mb-3">@T("Visual Briefings")</MudText>
<MudList T="Guid"
Color="Color.Primary"
Class="mb-1"
SelectedValue="@(this.selectedBriefing?.BriefingId ?? Guid.Empty)"
SelectedValueChanged="@this.SelectBriefingAsync">
@foreach (var briefing in this.briefings)
{
<MudListItem T="Guid"
Value="@briefing.BriefingId"
Icon="@Icons.Material.Filled.Dashboard">
<MudStack Spacing="0">
<MudText Typo="Typo.body1">@briefing.Name</MudText>
<MudText Typo="Typo.caption">@briefing.ModifiedAtUtc.ToLocalTime().ToString("g")</MudText>
@if (this.IsGenerating(briefing.BriefingId))
{
<MudProgressLinear Indeterminate="true" Color="Color.Primary" Class="mt-1"/>
}
<MediaTranscriptionStatus Owner="@MediaImportOwner.ForVisualBriefing(briefing.BriefingId)" Compact="true"/>
</MudStack>
</MudListItem>
}
</MudList>
<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">
@if (this.selectedBriefing is null)

View File

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