paulmataruso/qbtmud
1
0
Fork 0
mirror of https://github.com/lantean-code/qbtmud.git synced 2025-10-22 20:42:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update layout to remove hacks and rely only on flexbox

Browse Source
This commit is contained in:
ahjephson
2025-10-20 16:39:20 +01:00
parent 7db4f2f78d
commit 3d0d211d10
21 changed files with 777 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
Lantean.QBTMud/Components/FilesTab.razor
View File

@@ -2,8 +2,9 @@
<MudMenuItem Icon="@Icons.Material.Filled.DriveFileRenameOutline" OnClick="RenameFileContextMenu">Rename</MudMenuItem>
</MudMenu>
<div style="overflow-x: auto; white-space: nowrap; width: 100%;">
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar content-panel__toolbar--scroll">
<MudToolBar Gutters="false" Dense="true">
<MudIconButton Icon="@Icons.Material.Filled.DriveFileRenameOutline" OnClick="RenameFileToolbar" title="Rename" />
<MudDivider Vertical="true" />
<MudIconButton Icon="@Icons.Material.Outlined.ViewColumn" Color="Color.Inherit" OnClick="ColumnOptions" title="Choose Columns" />
@@ -22,10 +23,10 @@
<MudIconButton Icon="@Icons.Material.Outlined.FilterListOff" OnClick="RemoveFilter" title="Remove Filter" />
<MudSpacer />
<MudTextField T="string" Value="SearchText" ValueChanged="SearchTextChanged" Immediate="true" DebounceInterval="500" Placeholder="Filter file list" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
</MudToolBar>
</div>
<DynamicTable
</MudToolBar>
</div>
<div class="content-panel__body">
<DynamicTable
@ref="Table"
T="ContentItem"
ColumnDefinitions="Columns"
@@ -38,8 +39,10 @@
SortDirectionChanged="SortDirectionChanged"
OnTableDataContextMenu="TableDataContextMenu"
OnTableDataLongPress="TableDataLongPress"
Class="file-list"
/>
Class="file-list content-panel__table"
/>
</div>
</div>
@code {
private RenderFragment<RowContext<ContentItem>> NameColumn

14
Lantean.QBTMud/Components/PeersTab.razor
View File

@@ -6,14 +6,18 @@
}
</MudMenu>
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar">
<MudToolBar Gutters="false" Dense="true">
<MudIconButton Icon="@Icons.Material.Filled.AddCircle" Color="Color.Info" OnClick="AddPeer">Add peer</MudIconButton>
<MudIconButton Icon="@Icons.Material.Filled.DisabledByDefault" Color="Color.Error" OnClick="BanPeerToolbar" Disabled="@(SelectedItem is null)">Ban peer</MudIconButton>
<MudDivider Vertical="true" />
<MudIconButton Icon="@Icons.Material.Outlined.ViewColumn" Color="Color.Inherit" OnClick="ColumnOptions" title="Choose Columns" />
</MudToolBar>
</MudToolBar>
</div>
<DynamicTable T="Peer"
<div class="content-panel__body">
<DynamicTable T="Peer"
ColumnDefinitions="Columns"
Items="Peers"
MultiSelection="false"
@@ -21,4 +25,6 @@
OnTableDataLongPress="TableDataLongPress"
OnTableDataContextMenu="TableDataContextMenu"
SelectedItemChanged="SelectedItemChanged"
Class="details-list" />
Class="details-list content-panel__table" />
</div>
</div>

14
Lantean.QBTMud/Components/TrackersTab.razor
View File

@@ -8,16 +8,20 @@
}
</MudMenu>
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar">
<MudToolBar Gutters="false" Dense="true">
<MudIconButton Icon="@Icons.Material.Filled.AddCircle" Color="Color.Info" OnClick="AddTracker">Add trackers</MudIconButton>
<MudIconButton Icon="@Icons.Material.Filled.Edit" Color="Color.Info" OnClick="EditTrackerToolbar" Disabled="@(SelectedItem is null)">Edit tracker URL</MudIconButton>
<MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="RemoveTrackerToolbar" Disabled="@(SelectedItem is null)">Remove tracker</MudIconButton>
<MudIconButton Icon="@Icons.Material.Filled.FolderCopy" Color="Color.Info" OnClick="CopyTrackerUrlToolbar" Disabled="@(SelectedItem is null)">Copy tracker url</MudIconButton>
<MudDivider Vertical="true" />
<MudIconButton Icon="@Icons.Material.Outlined.ViewColumn" Color="Color.Inherit" OnClick="ColumnOptions" title="Choose Columns" />
</MudToolBar>
</MudToolBar>
</div>
<DynamicTable @ref="Table"
<div class="content-panel__body">
<DynamicTable @ref="Table"
T="Lantean.QBitTorrentClient.Models.TorrentTracker"
ColumnDefinitions="Columns"
Items="Trackers"
@@ -29,4 +33,6 @@
OnTableDataLongPress="TableDataLongPress"
OnTableDataContextMenu="TableDataContextMenu"
SelectedItemChanged="SelectedItemChanged"
Class="file-list" />
Class="file-list content-panel__table" />
</div>
</div>

8
Lantean.QBTMud/Components/WebSeedsTab.razor
View File

@@ -1,6 +1,10 @@
<DynamicTable T="Lantean.QBitTorrentClient.Models.WebSeed"
<div class="content-panel">
<div class="content-panel__body">
<DynamicTable T="Lantean.QBitTorrentClient.Models.WebSeed"
ColumnDefinitions="Columns"
Items="WebSeeds"
MultiSelection="false"
SelectOnRowClick="false"
Class="details-list" />
Class="details-list content-panel__table" />
</div>
</div>

10
Lantean.QBTMud/Layout/DetailsLayout.razor
View File

@@ -1,9 +1,11 @@
@inherits LayoutComponentBase
@layout LoggedInLayout
<MudDrawer Open="DrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Overlay="false">
<div class="app-shell__body">
<MudDrawer Open="DrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Overlay="false" Class="app-shell__sidebar">
<TorrentsListNav Torrents="Torrents" SelectedTorrent="@SelectedTorrent" SortDirection="SortDirection" SortColumn="@SortColumn" />
</MudDrawer>
<MudMainContent>
</MudDrawer>
<MudMainContent Class="app-shell__main">
@Body
</MudMainContent>
</MudMainContent>
</div>

10
Lantean.QBTMud/Layout/ListLayout.razor
View File

@@ -1,11 +1,13 @@
@inherits LayoutComponentBase
@layout LoggedInLayout
<MudDrawer Open="DrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Overlay="false">
<div class="app-shell__body">
<MudDrawer Open="DrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Overlay="false" Class="app-shell__sidebar">
<FiltersNav CategoryChanged="CategoryChanged" StatusChanged="StatusChanged" TagChanged="TagChanged" TrackerChanged="TrackerChanged" />
</MudDrawer>
<MudMainContent>
</MudDrawer>
<MudMainContent Class="app-shell__main">
<CascadingValue Value="SearchTermChanged" Name="SearchTermChanged">
@Body
</CascadingValue>
</MudMainContent>
</MudMainContent>
</div>

28
Lantean.QBTMud/Layout/LoggedInLayout.razor
View File

@@ -24,20 +24,9 @@
<CascadingValue Value="SearchTermChanged" Name="SearchTermChanged">
<CascadingValue Value="@(MainData?.LostConnection ?? false)" Name="LostConnection">
<CascadingValue Value="Version" Name="Version">
<div class="app-shell">
@Body
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
<MudAppBar Bottom="true" Fixed="true" Elevation="0" Dense="true" Style="background-color: var(--mud-palette-dark-lighten); z-index: 900">
<MudAppBar Bottom="true" Elevation="0" Dense="true" Class="app-shell__status-bar">
@if (MainData?.LostConnection == true)
{
<MudText Class="mx-2 mb-1 d-none d-sm-flex" Color="Color.Error">qBittorrent client is not reachable</MudText>
@@ -66,6 +55,19 @@
@DisplayHelpers.Size(MainData?.ServerState.UploadInfoData, "(", ")")
</MudText>
</MudAppBar>
</div>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>
</CascadingValue>

10
Lantean.QBTMud/Layout/OtherLayout.razor
View File

@@ -1,11 +1,13 @@
@inherits LayoutComponentBase
@layout LoggedInLayout
<MudDrawer Open="DrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Overlay="false">
<div class="app-shell__body">
<MudDrawer Open="DrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Overlay="false" Class="app-shell__sidebar">
<MudNavMenu>
<ApplicationActions IsMenu="false" Preferences="Preferences" />
</MudNavMenu>
</MudDrawer>
<MudMainContent>
</MudDrawer>
<MudMainContent Class="app-shell__main">
@Body
</MudMainContent>
</MudMainContent>
</div>

6
Lantean.QBTMud/Models/FileRow.cs
View File

@@ -2,14 +2,14 @@
{
public class FileRow
{
public string OriginalName { get; set; }
public required string OriginalName { get; set; }
public string? NewName { get; set; }
public bool IsFolder { get; set; }
public string Name { get; set; }
public required string Name { get; set; }
public int Level { get; set; }
public bool Renamed { get; set; }
public string? ErrorMessage { get; set; }
public string Path { get; set; }
public required string Path { get; set; }
public override bool Equals(object? obj)
{

14
Lantean.QBTMud/Pages/About.razor
View File

@@ -1,18 +1,22 @@
@page "/about"
@layout OtherLayout
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar">
<MudToolBar Gutters="false" Dense="true">
@if (!DrawerOpen)
{
<MudIconButton Icon="@Icons.Material.Outlined.NavigateBefore" OnClick="NavigateBack" title="Back to torrent list" />
<MudDivider Vertical="true" />
}
<MudText Class="px-5 no-wrap">About</MudText>
</MudToolBar>
</MudToolBar>
</div>
<MudTabs Elevation="2" ApplyEffectsToContainer="true">
<div class="content-panel__body">
<MudTabs Elevation="2" ApplyEffectsToContainer="true">
<MudTabPanel Text="About">
<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="mt-3">
<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="mt-3 content-panel__container">
<MudGrid Class="mt-0 mb-4">
<MudItem xs="12" sm="3" md="2" lg="2" xl="1" Class="d-flex justify-center">
<MudImage Src="images/mascot.png" Alt="Mascot" Class="ma-6"
@@ -1105,3 +1109,5 @@
</MudContainer>
</MudTabPanel>
</MudTabs>
</div>
</div>

19
Lantean.QBTMud/Pages/Blocks.razor
View File

@@ -1,7 +1,9 @@
@page "/blocks"
@layout OtherLayout
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar">
<MudToolBar Gutters="false" Dense="true">
@if (!DrawerOpen)
{
<MudIconButton Icon="@Icons.Material.Outlined.NavigateBefore" OnClick="NavigateBack" title="Back to torrent list" />
@@ -9,9 +11,10 @@
}
<MudDivider Vertical="true" />
<MudText Class="pl-5 no-wrap">Blocked IPs</MudText>
</MudToolBar>
<MudCard Elevation="1" Class="ml-4 mr-4 mb-4">
</MudToolBar>
</div>
<div class="content-panel__body">
<MudCard Elevation="1" Class="ml-4 mr-4 mb-4">
<MudCardContent>
<EditForm Model="Model" OnSubmit="Submit">
<MudGrid>
@@ -24,13 +27,15 @@
</MudGrid>
</EditForm>
</MudCardContent>
</MudCard>
</MudCard>
<DynamicTable @ref="Table"
<DynamicTable @ref="Table"
T="Lantean.QBitTorrentClient.Models.PeerLog"
ColumnDefinitions="Columns"
Items="Results"
MultiSelection="false"
SelectOnRowClick="false"
RowClassFunc="RowClass"
Class="search-list" />
Class="search-list content-panel__table" />
</div>
</div>

14
Lantean.QBTMud/Pages/CategoryManagement.razor
View File

@@ -1,7 +1,9 @@
@page "/categories"
@layout OtherLayout
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar">
<MudToolBar Gutters="false" Dense="true">
@if (!DrawerOpen)
{
<MudIconButton Icon="@Icons.Material.Outlined.NavigateBefore" OnClick="NavigateBack" title="Back to torrent list" />
@@ -10,15 +12,19 @@
<MudText Class="px-5 no-wrap">Categories</MudText>
<MudDivider Vertical="true" />
<MudIconButton Icon="@Icons.Material.Filled.PlaylistAdd" OnClick="AddCategory" title="Add Category" />
</MudToolBar>
</MudToolBar>
</div>
<DynamicTable @ref="Table"
<div class="content-panel__body">
<DynamicTable @ref="Table"
T="Category"
ColumnDefinitions="Columns"
Items="Results"
MultiSelection="false"
SelectOnRowClick="false"
Class="details-list" />
Class="details-list content-panel__table" />
</div>
</div>
@code {
private RenderFragment<RowContext<Category>> ActionsColumn

18
Lantean.QBTMud/Pages/Details.razor
View File

@@ -1,8 +1,9 @@
@page "/details/{hash}"
@layout DetailsLayout
<div style="overflow-x: auto; white-space: nowrap; width: 100%;">
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar content-panel__toolbar--scroll">
<MudToolBar Gutters="false" Dense="true">
@if (!DrawerOpen)
{
<MudIconButton Icon="@Icons.Material.Outlined.NavigateBefore" OnClick="NavigateBack" title="Back to torrent list" />
@@ -14,11 +15,12 @@
}
<MudDivider Vertical="true" />
<MudText Class="pl-5 no-wrap">@Name</MudText>
</MudToolBar>
</div>
</MudToolBar>
</div>
@if (ShowTabs)
{
<div class="content-panel__body">
@if (ShowTabs)
{
<CascadingValue Value="RefreshInterval" Name="RefreshInterval">
<MudTabs Elevation="2" ApplyEffectsToContainer="true" @bind-ActivePanelIndex="ActiveTab" KeepPanelsAlive="true" Border="true">
<MudTabPanel Text="General">
@@ -38,4 +40,6 @@
</MudTabPanel>
</MudTabs>
</CascadingValue>
}
}
</div>
</div>

19
Lantean.QBTMud/Pages/Log.razor
View File

@@ -1,7 +1,9 @@
@page "/log"
@layout OtherLayout
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar">
<MudToolBar Gutters="false" Dense="true">
@if (!DrawerOpen)
{
<MudIconButton Icon="@Icons.Material.Outlined.NavigateBefore" OnClick="NavigateBack" title="Back to torrent list" />
@@ -9,9 +11,10 @@
}
<MudDivider Vertical="true" />
<MudText Class="pl-5 no-wrap">Execution Log</MudText>
</MudToolBar>
<MudCard Elevation="1" Class="ml-4 mr-4 mb-4">
</MudToolBar>
</div>
<div class="content-panel__body">
<MudCard Elevation="1" Class="ml-4 mr-4 mb-4">
<MudCardContent>
<EditForm Model="Model" OnSubmit="Submit">
<MudGrid>
@@ -32,13 +35,15 @@
</MudGrid>
</EditForm>
</MudCardContent>
</MudCard>
</MudCard>
<DynamicTable @ref="Table"
<DynamicTable @ref="Table"
T="Lantean.QBitTorrentClient.Models.Log"
ColumnDefinitions="Columns"
Items="Results"
MultiSelection="false"
SelectOnRowClick="false"
RowClassFunc="RowClass"
Class="search-list" />
Class="search-list content-panel__table" />
</div>
</div>

30
Lantean.QBTMud/Pages/Options.razor
View File

@@ -3,7 +3,9 @@
<NavigationLock ConfirmExternalNavigation="@(UpdatePreferences is not null)" OnBeforeInternalNavigation="ValidateExit" />
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar">
<MudToolBar Gutters="false" Dense="true">
@if (!DrawerOpen)
{
<MudIconButton Icon="@Icons.Material.Outlined.NavigateBefore" OnClick="NavigateBack" />
@@ -13,31 +15,51 @@
<MudDivider Vertical="true" />
<MudIconButton Icon="@Icons.Material.Outlined.Save" OnClick="Save" Disabled="@(LostConnection || UpdatePreferences is null)" />
<MudIconButton Icon="@Icons.Material.Outlined.Undo" OnClick="Undo" Disabled="@(LostConnection || UpdatePreferences is null)" />
</MudToolBar>
</MudToolBar>
</div>
<MudTabs Elevation="2" ApplyEffectsToContainer="true" @bind-ActivePanelIndex="ActiveTab" Border="true">
<div class="content-panel__body">
<MudTabs Elevation="2" ApplyEffectsToContainer="true" @bind-ActivePanelIndex="ActiveTab" Border="true">
<MudTabPanel Text="Behaviour">
<div class="options-tab-contents">
<BehaviourOptions @ref="BehaviourOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
</div>
</MudTabPanel>
<MudTabPanel Text="Downloads">
<div class="options-tab-contents">
<DownloadsOptions @ref="DownloadsOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
</div>
</MudTabPanel>
<MudTabPanel Text="Connection">
<div class="options-tab-contents">
<ConnectionOptions @ref="ConnectionOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
</div>
</MudTabPanel>
<MudTabPanel Text="Speed">
<div class="options-tab-contents">
<SpeedOptions @ref="SpeedOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
</div>
</MudTabPanel>
<MudTabPanel Text="BitTorrent">
<div class="options-tab-contents">
<BitTorrentOptions @ref="BitTorrentOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
</div>
</MudTabPanel>
<MudTabPanel Text="RSS">
<div class="options-tab-contents">
<RSSOptions @ref="RSSOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
</div>
</MudTabPanel>
<MudTabPanel Text="Web UI">
<div class="options-tab-contents">
<WebUIOptions @ref="WebUIOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
</div>
</MudTabPanel>
<MudTabPanel Text="Advanced">
<div class="options-tab-contents">
<AdvancedOptions @ref="AdvancedOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
</div>
</MudTabPanel>
</MudTabs>
</MudTabs>
</div>
</div>

14
Lantean.QBTMud/Pages/Rss.razor
View File

@@ -1,7 +1,9 @@
@page "/rss"
@layout OtherLayout
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar">
<MudToolBar Gutters="false" Dense="true">
@if (!DrawerOpen)
{
<MudIconButton Icon="@Icons.Material.Outlined.NavigateBefore" OnClick="NavigateBack" title="Back to torrent list" />
@@ -14,9 +16,11 @@
<MudIconButton Icon="@Icons.Material.Outlined.Update" OnClick="UpdateAll" title="Update all" />
<MudDivider Vertical="true" />
<MudIconButton Icon="@Icons.Material.Outlined.DownloadForOffline" OnClick="EditDownloadRules" title="Edit auto downloading rules" />
</MudToolBar>
</MudToolBar>
</div>
<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge">
<div class="content-panel__body">
<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="content-panel__container">
<MudGrid Class="rss-contents">
<MudItem xs="4" Style="height: 100%">
<MudList T="string" SelectionMode="SelectionMode.SingleSelection" SelectedValue="SelectedFeed" SelectedValueChanged="SelectedFeedChanged" Dense>
@@ -70,4 +74,6 @@
}
</MudItem>
</MudGrid>
</MudContainer>
</MudContainer>
</div>
</div>

19
Lantean.QBTMud/Pages/Search.razor
View File

@@ -1,7 +1,9 @@
@page "/search"
@layout OtherLayout
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar">
<MudToolBar Gutters="false" Dense="true">
@if (!DrawerOpen)
{
<MudIconButton Icon="@Icons.Material.Outlined.NavigateBefore" OnClick="NavigateBack" title="Back to torrent list" />
@@ -9,9 +11,10 @@
}
<MudDivider Vertical="true" />
<MudText Class="pl-5 no-wrap">Search</MudText>
</MudToolBar>
<MudCard Elevation="1" Class="ml-4 mr-4 mb-4">
</MudToolBar>
</div>
<div class="content-panel__body">
<MudCard Elevation="1" Class="ml-4 mr-4 mb-4">
<MudCardContent>
<EditForm Model="Model" OnValidSubmit="DoSearch">
<MudGrid>
@@ -51,12 +54,14 @@
</MudGrid>
</EditForm>
</MudCardContent>
</MudCard>
</MudCard>
<DynamicTable @ref="Table"
<DynamicTable @ref="Table"
T="Lantean.QBitTorrentClient.Models.SearchResult"
ColumnDefinitions="Columns"
Items="Results"
MultiSelection="false"
SelectOnRowClick="false"
Class="search-list" />
Class="search-list content-panel__table" />
</div>
</div>

14
Lantean.QBTMud/Pages/Statistics.razor
View File

@@ -1,7 +1,9 @@
@page "/statistics"
@layout OtherLayout
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar">
<MudToolBar Gutters="false" Dense="true">
@if (!DrawerOpen)
{
<MudIconButton Icon="@Icons.Material.Outlined.NavigateBefore" OnClick="NavigateBack" title="Back to torrent list" />
@@ -9,9 +11,11 @@
}
<MudDivider Vertical="true" />
<MudText Class="pl-5 no-wrap">Statistics</MudText>
</MudToolBar>
</MudToolBar>
</div>
<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="details-tab-contents">
<div class="content-panel__body">
<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="details-tab-contents content-panel__container">
<MudText Typo="Typo.subtitle2" Class="pt-6">User statistics</MudText>
<MudGrid>
<MudItem xs="12">
@@ -59,4 +63,6 @@
<MudField Label="Total queued size">@DisplayHelpers.Size(ServerState?.TotalQueuedSize)</MudField>
</MudItem>
</MudGrid>
</MudContainer>
</MudContainer>
</div>
</div>

14
Lantean.QBTMud/Pages/TagManagement.razor
View File

@@ -1,7 +1,9 @@
@page "/tags"
@layout OtherLayout
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar">
<MudToolBar Gutters="false" Dense="true">
@if (!DrawerOpen)
{
<MudIconButton Icon="@Icons.Material.Outlined.NavigateBefore" OnClick="NavigateBack" title="Back to torrent list" />
@@ -10,15 +12,19 @@
<MudText Class="px-5 no-wrap">Tags</MudText>
<MudDivider Vertical="true" />
<MudIconButton Icon="@Icons.Material.Filled.NewLabel" OnClick="AddTag" title="Add Tag" />
</MudToolBar>
</MudToolBar>
</div>
<DynamicTable @ref="Table"
<div class="content-panel__body">
<DynamicTable @ref="Table"
T="string"
ColumnDefinitions="Columns"
Items="Results"
MultiSelection="false"
SelectOnRowClick="false"
Class="details-list" />
Class="details-list content-panel__table" />
</div>
</div>
@code {
private RenderFragment<RowContext<string>> ActionsColumn

19
Lantean.QBTMud/Pages/TorrentList.razor
View File

@@ -7,8 +7,9 @@
<TorrentActions RenderType="RenderType.MenuItems" Hashes="GetContextMenuTargetHashes()" PrimaryHash="@(ContextMenuItem?.Hash)" Torrents="MainData.Torrents" Preferences="Preferences" />
</MudMenu>
<div style="overflow-x: auto; white-space: nowrap; width: 100%;">
<MudToolBar Gutters="false" Dense="true">
<div class="content-panel">
<div class="content-panel__toolbar content-panel__toolbar--scroll">
<MudToolBar Gutters="false" Dense="true">
<MudIconButton Icon="@Icons.Material.Outlined.AddLink" OnClick="AddTorrentLink" title="Add torrent link" />
<MudIconButton Icon="@Icons.Material.Outlined.AddCircle" OnClick="AddTorrentFile" title="Add torrent file" />
<MudDivider Vertical="true" />
@@ -18,14 +19,14 @@
<MudIconButton Icon="@Icons.Material.Outlined.ViewColumn" Color="Color.Inherit" OnClick="ColumnOptions" title="Choose Columns" />
<MudSpacer />
<MudTextField Value="SearchText" TextChanged="SearchTextChanged" Immediate="true" DebounceInterval="1000" Placeholder="Filter torrent list" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
</MudToolBar>
</div>
<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="ma-0 pa-0">
</MudToolBar>
</div>
<div class="content-panel__body">
<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="ma-0 pa-0 content-panel__container">
<DynamicTable
@ref="Table"
T="Torrent"
Class="torrent-list"
Class="torrent-list content-panel__table"
ColumnDefinitions="Columns"
Items="Torrents"
OnRowClick="RowClick"
@@ -37,7 +38,9 @@
OnTableDataContextMenu="TableDataContextMenu"
OnTableDataLongPress="TableDataLongPress"
/>
</MudContainer>
</MudContainer>
</div>
</div>
@code {
private static RenderFragment<RowContext<Torrent>> ProgressBarColumn

146
Lantean.QBTMud/wwwroot/css/app.css
View File

@@ -1,4 +1,4 @@
#blazor-error-ui {
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
@@ -65,15 +65,16 @@ code {
}
.mud-appbar.mud-appbar-fixed-bottom {
height: 35px;
height: var(--app-status-bar-height);
}
.mud-main-content {
padding-bottom: 35px;
padding: var(--mud-appbar-height) 0 var(--app-status-bar-height);
box-sizing: border-box;
}
.mud-drawer-fixed.mud-drawer-mini.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-persistent:not(.mud-drawer-clipped-never), .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always {
height: calc(100% - var(--mud-appbar-height) - 35px);
height: calc(100% - var(--mud-appbar-height) - var(--app-status-bar-height));
}
.w-100 {
@@ -154,25 +155,68 @@ code {
margin-right: 5px;
}
.torrent-list .mud-table-container {
height: calc(100vh - 160px);
/*. Layout helpers */
.content-panel {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.file-list .mud-table-container {
height: calc(100vh - 245px);
.content-panel__toolbar {
flex: 0 0 auto;
}
.details-list .mud-table-container {
height: calc(100vh - 200px);
.content-panel__toolbar--scroll {
overflow-x: auto;
white-space: nowrap;
}
.details-tab-contents {
height: calc(100vh - 200px);
overflow: auto;
.content-panel__body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.content-panel__container {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
.content-panel__table {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
.content-panel__table .mud-table-container {
flex: 1 1 auto;
height: 100%;
}
.content-panel__body > .mud-tabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.content-panel__body > .mud-tabs .mud-tabs-panels { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.content-panel__body > .mud-tabs .mud-tab-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.content-panel__body > .mud-tabs .mud-tab-panel > .mud-tab-panel-content { flex: 1 1 auto; min-height: 0; overflow: auto; }
.torrent-list .mud-table-container,
.file-list .mud-table-container,
.details-list .mud-table-container,
.search-list .mud-table-container {
height: calc(100vh - 260px);
height: 100%;
}
.details-tab-contents,
.options-tab-contents,
.rss-contents {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
tr.log-normal td {
@@ -220,10 +264,6 @@ td .folder-button {
padding: 6px 16px 6px 16px !important;
}
.rss-contents {
height: calc(100vh - 149px);
}
@keyframes spin {
0% {
transform: rotate(0deg);
@@ -256,3 +296,73 @@ td .folder-button {
.mud-popover .mud-divider:last-child {
display: none;
}
:root {
--app-viewport-height: 100vh;
--app-status-bar-height: 35px;
}
@supports (height: 100dvh) {
:root {
--app-viewport-height: 100dvh;
}
}
html,
body {
height: var(--app-viewport-height);
min-height: var(--app-viewport-height);
}
body {
margin: 0;
overflow: hidden;
overscroll-behavior: none;
}
#app,
.mud-layout {
height: 100%;
min-height: 100%;
}
.app-shell {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
}
.app-shell__body {
display: flex;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.app-shell__sidebar {
flex: 0 0 auto;
}
.app-shell__main {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
padding: var(--mud-appbar-height) 0 var(--app-status-bar-height);
box-sizing: border-box;
}
.app-shell__status-bar.mud-appbar {
flex: 0 0 var(--app-status-bar-height);
height: var(--app-status-bar-height);
width: 100%;
background-color: var(--mud-palette-dark-lighten);
align-items: center;
justify-content: flex-start;
}
.app-shell__status-bar .mud-toolbar {
width: 100%;
}