From 5c622650562198a8b6758f1509b9f95eff4024c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Fi=C5=A1era?= Date: Tue, 5 May 2026 13:46:57 +0200 Subject: [PATCH 1/7] Add PeriodSelector to Overview, OverviewIncome, and ExpenseChecklist pages Add PeriodSelector component to pages that have period parameters but previously lacked the selector UI: - Overview base class: Add PeriodGuesses, CreatePeriodGuesses(), CreatePeriodsQuery(), GetPeriodsAsync(), and UrlOverview() abstracts - OverviewMonth: Implement with MonthModel periods and month queries - OverviewYear: Implement with YearModel periods and year queries - OverviewIncome base class: Add PeriodGuesses, CreatePeriodGuesses(), CreatePeriodsQuery(), GetPeriodsAsync(), and UrlOverviewIncomes() abstracts - OverviewMonthIncome: Implement with MonthModel periods - OverviewYearIncome: Implement with YearModel periods - ExpenseChecklistMonth: Add PeriodGuesses, GetMonthsAsync(), and selector Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../Pages/ExpenseChecklistMonth.razor | 9 ++ .../Pages/ExpenseChecklistMonth.razor.cs | 7 ++ src/Money.Blazor.Host/Pages/Overview.razor | 9 ++ src/Money.Blazor.Host/Pages/Overview.razor.cs | 14 +++ .../Pages/OverviewIncome.razor | 85 ++++++++++--------- .../Pages/OverviewIncome.razor.cs | 14 +++ src/Money.Blazor.Host/Pages/OverviewMonth.cs | 9 ++ .../Pages/OverviewMonthIncome.cs | 9 ++ src/Money.Blazor.Host/Pages/OverviewYear.cs | 9 ++ .../Pages/OverviewYearIncome.cs | 9 ++ 10 files changed, 135 insertions(+), 39 deletions(-) diff --git a/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor b/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor index afb43356..3ebdbcda 100644 --- a/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor +++ b/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor @@ -5,6 +5,15 @@
+
+
+ + + + +
+
+
  • Incomes diff --git a/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor.cs b/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor.cs index 873f4da3..510a4e83 100644 --- a/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor.cs +++ b/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor.cs @@ -36,6 +36,7 @@ Navigator Navigator public int Month { get; set; } protected MonthModel SelectedPeriod { get; set; } + protected IReadOnlyCollection PeriodGuesses { get; set; } protected List Models { get; set; } = new(); protected LoadingContext Loading { get; set; } = new(); @@ -62,9 +63,15 @@ protected override async Task OnParametersSetAsync() private void EnsureSelectedPeriod() { if (SelectedPeriod == null) + { SelectedPeriod = new MonthModel(Year, Month); + PeriodGuesses = new MonthModel[] { SelectedPeriod - 1, SelectedPeriod - 2 }; + } } + protected async Task> GetMonthsAsync() + => await Queries.QueryAsync(new ListMonthWithExpenseOrIncome()); + private async Task LoadDataAsync() { using (Loading.Start()) diff --git a/src/Money.Blazor.Host/Pages/Overview.razor b/src/Money.Blazor.Host/Pages/Overview.razor index ec0b0a0c..b7e57121 100644 --- a/src/Money.Blazor.Host/Pages/Overview.razor +++ b/src/Money.Blazor.Host/Pages/Overview.razor @@ -20,6 +20,15 @@
    +
    +
    + + + + +
    +
    + @{ var incomeUrl = ListIncomeUrl(); var checklistUrl = ChecklistUrl(); diff --git a/src/Money.Blazor.Host/Pages/Overview.razor.cs b/src/Money.Blazor.Host/Pages/Overview.razor.cs index b6eadc55..93172631 100644 --- a/src/Money.Blazor.Host/Pages/Overview.razor.cs +++ b/src/Money.Blazor.Host/Pages/Overview.razor.cs @@ -45,6 +45,7 @@ public partial class Overview( protected string SubTitle { get; set; } = subTitle; protected T SelectedPeriod { get; set; } + protected IReadOnlyCollection PeriodGuesses { get; set; } protected IKey CategoryKey { get; set; } protected string CategoryName { get; set; } protected List Items { get; set; } @@ -73,6 +74,7 @@ protected async override Task OnParametersSetAsync() { CategoryKey = CreateSelectedCategoryFromParameters(); SelectedPeriod = CreateSelectedItemFromParameters(); + PeriodGuesses = CreatePeriodGuesses(); if (!CategoryKey.IsEmpty) { @@ -96,6 +98,9 @@ protected virtual IKey CreateSelectedCategoryFromParameters() protected virtual T CreateSelectedItemFromParameters() => throw Ensure.Exception.NotImplemented($"Missing override for method '{nameof(CreateSelectedItemFromParameters)}'."); + protected virtual IReadOnlyCollection CreatePeriodGuesses() + => throw Ensure.Exception.NotImplemented($"Missing override for method '{nameof(CreatePeriodGuesses)}'."); + protected virtual string ListIncomeUrl() => null; @@ -152,6 +157,15 @@ protected async Task LoadDataAsync() protected virtual IQuery> CreateItemsQuery(int pageIndex) => throw Ensure.Exception.NotImplemented($"Missing override for method '{nameof(CreateItemsQuery)}'."); + protected virtual IQuery> CreatePeriodsQuery() + => throw Ensure.Exception.NotImplemented($"Missing override for method '{nameof(CreatePeriodsQuery)}'."); + + protected async Task> GetPeriodsAsync() + => await Queries.QueryAsync(CreatePeriodsQuery()); + + protected virtual string UrlOverview(T period) + => throw Ensure.Exception.NotImplemented($"Missing override for method '{nameof(UrlOverview)}'."); + protected async void OnSortChanged() { Items = null; diff --git a/src/Money.Blazor.Host/Pages/OverviewIncome.razor b/src/Money.Blazor.Host/Pages/OverviewIncome.razor index 0b2c0f8f..c3cb1e69 100644 --- a/src/Money.Blazor.Host/Pages/OverviewIncome.razor +++ b/src/Money.Blazor.Host/Pages/OverviewIncome.razor @@ -10,50 +10,57 @@
    - -
      -
    • - Incomes -
      • -
    • - Expenses -
      • - @{ - var checklistUrl = ChecklistUrl(); - } - @if (checklistUrl != null) - { -
    • - Checklist -
      • - } -
    +
    +
    + + + + +
    +
    - @if (Items?.Count > 0) +
      +
    • + Incomes +
      • +
    • + Expenses +
      • + @{ + var checklistUrl = ChecklistUrl(); + } + @if (checklistUrl != null) { - +
    • + Checklist +
      • } -
      +
    + + @if (Items?.Count > 0) + { + + } +
    - @if (Items != null) + @if (Items != null) + { + if (Items.Count > 0) { - if (Items.Count > 0) - { -
    - - @foreach (var item in Items) - { - - } - -
    +
    + + @foreach (var item in Items) + { + + } + +
    - - } - else - { - - } + + } + else + { + } -     + }
    diff --git a/src/Money.Blazor.Host/Pages/OverviewIncome.razor.cs b/src/Money.Blazor.Host/Pages/OverviewIncome.razor.cs index f7b74b01..3098ee9e 100644 --- a/src/Money.Blazor.Host/Pages/OverviewIncome.razor.cs +++ b/src/Money.Blazor.Host/Pages/OverviewIncome.razor.cs @@ -39,6 +39,7 @@ public partial class OverviewIncome( protected string SubTitle { get; set; } = subTitle; protected T SelectedPeriod { get; set; } + protected IReadOnlyCollection PeriodGuesses { get; set; } protected List Items { get; set; } protected IncomeCreate CreateModal { get; set; } @@ -68,6 +69,7 @@ protected override void OnParametersSet() base.OnParametersSet(); SelectedPeriod = CreateSelectedItemFromParameters(); + PeriodGuesses = CreatePeriodGuesses(); Reload(); } @@ -80,6 +82,18 @@ protected virtual T CreateSelectedItemFromParameters() protected virtual IQuery> CreateItemsQuery(int pageIndex) => throw Ensure.Exception.NotImplemented($"Missing override for method '{nameof(CreateItemsQuery)}'."); + protected virtual IReadOnlyCollection CreatePeriodGuesses() + => throw Ensure.Exception.NotImplemented($"Missing override for method '{nameof(CreatePeriodGuesses)}'."); + + protected virtual IQuery> CreatePeriodsQuery() + => throw Ensure.Exception.NotImplemented($"Missing override for method '{nameof(CreatePeriodsQuery)}'."); + + protected async Task> GetPeriodsAsync() + => await Queries.QueryAsync(CreatePeriodsQuery()); + + protected virtual string UrlOverviewIncomes(T period) + => throw Ensure.Exception.NotImplemented($"Missing override for method '{nameof(UrlOverviewIncomes)}'."); + protected virtual string ListExpenseUrl() => null; diff --git a/src/Money.Blazor.Host/Pages/OverviewMonth.cs b/src/Money.Blazor.Host/Pages/OverviewMonth.cs index 382101a9..6ec0dcb8 100644 --- a/src/Money.Blazor.Host/Pages/OverviewMonth.cs +++ b/src/Money.Blazor.Host/Pages/OverviewMonth.cs @@ -56,6 +56,15 @@ protected override void ClearPreviousParameters() protected override MonthModel CreateSelectedItemFromParameters() => new MonthModel(Year.Value, Month.Value); + protected override IReadOnlyCollection CreatePeriodGuesses() + => new MonthModel[] { SelectedPeriod - 1, SelectedPeriod - 2 }; + + protected override IQuery> CreatePeriodsQuery() + => new ListMonthWithExpenseOrIncome(); + + protected override string UrlOverview(MonthModel period) + => CategoryKey.IsEmpty ? Navigator.UrlOverview(period) : Navigator.UrlOverview(period, CategoryKey); + protected override IKey CreateSelectedCategoryFromParameters() => CategoryGuid != null ? GuidKey.Create(CategoryGuid.Value, KeyFactory.Empty(typeof(Category)).Type) : KeyFactory.Empty(typeof(Category)); diff --git a/src/Money.Blazor.Host/Pages/OverviewMonthIncome.cs b/src/Money.Blazor.Host/Pages/OverviewMonthIncome.cs index 078becbf..47ef3c4c 100644 --- a/src/Money.Blazor.Host/Pages/OverviewMonthIncome.cs +++ b/src/Money.Blazor.Host/Pages/OverviewMonthIncome.cs @@ -40,6 +40,15 @@ protected override void ClearPreviousParameters() protected override MonthModel CreateSelectedItemFromParameters() => new MonthModel(Year.Value, Month.Value); + protected override IReadOnlyCollection CreatePeriodGuesses() + => new MonthModel[] { SelectedPeriod - 1, SelectedPeriod - 2 }; + + protected override IQuery> CreatePeriodsQuery() + => new ListMonthWithExpenseOrIncome(); + + protected override string UrlOverviewIncomes(MonthModel period) + => Navigator.UrlOverviewIncomes(period); + protected override IQuery> CreateItemsQuery(int pageIndex) => new ListMonthIncome(SelectedPeriod, SortDescriptor, pageIndex); diff --git a/src/Money.Blazor.Host/Pages/OverviewYear.cs b/src/Money.Blazor.Host/Pages/OverviewYear.cs index b4b2b98a..261f7a88 100644 --- a/src/Money.Blazor.Host/Pages/OverviewYear.cs +++ b/src/Money.Blazor.Host/Pages/OverviewYear.cs @@ -49,6 +49,15 @@ protected override void ClearPreviousParameters() protected override YearModel CreateSelectedItemFromParameters() => new YearModel(Year.Value); + protected override IReadOnlyCollection CreatePeriodGuesses() + => new YearModel[] { SelectedPeriod - 1, SelectedPeriod - 2 }; + + protected override IQuery> CreatePeriodsQuery() + => new ListYearWithExpenseOrIncome(); + + protected override string UrlOverview(YearModel period) + => CategoryKey.IsEmpty ? Navigator.UrlOverview(period) : Navigator.UrlOverview(period, CategoryKey); + protected override IKey CreateSelectedCategoryFromParameters() => CategoryGuid != null ? GuidKey.Create(CategoryGuid.Value, KeyFactory.Empty(typeof(Category)).Type) : KeyFactory.Empty(typeof(Category)); diff --git a/src/Money.Blazor.Host/Pages/OverviewYearIncome.cs b/src/Money.Blazor.Host/Pages/OverviewYearIncome.cs index d3947f86..0d32d036 100644 --- a/src/Money.Blazor.Host/Pages/OverviewYearIncome.cs +++ b/src/Money.Blazor.Host/Pages/OverviewYearIncome.cs @@ -36,6 +36,15 @@ protected override void ClearPreviousParameters() protected override YearModel CreateSelectedItemFromParameters() => new YearModel(Year.Value); + protected override IReadOnlyCollection CreatePeriodGuesses() + => new YearModel[] { SelectedPeriod - 1, SelectedPeriod - 2 }; + + protected override IQuery> CreatePeriodsQuery() + => new ListYearWithExpenseOrIncome(); + + protected override string UrlOverviewIncomes(YearModel period) + => Navigator.UrlOverviewIncomes(period); + protected override IQuery> CreateItemsQuery(int pageIndex) => new ListYearIncome(SelectedPeriod, SortDescriptor, pageIndex); From 23568ca6e6b243af60144948eb86edbcfeb2d3c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Fi=C5=A1era?= Date: Tue, 5 May 2026 13:58:15 +0200 Subject: [PATCH 2/7] Fix DivideByZeroException in TrendsMonth when no data present Guard against MaxAmount == 0 in the bar size calculation, matching the existing pattern in TrendsYear.razor. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/Money.Blazor.Host/Pages/TrendsMonth.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Money.Blazor.Host/Pages/TrendsMonth.razor b/src/Money.Blazor.Host/Pages/TrendsMonth.razor index 94655f75..eac5d9f3 100644 --- a/src/Money.Blazor.Host/Pages/TrendsMonth.razor +++ b/src/Money.Blazor.Host/Pages/TrendsMonth.razor @@ -21,7 +21,7 @@ else
    @foreach (var model in Models) { - var size = model.TotalAmount.Value / MaxAmount * 100; + var size = MaxAmount > 0 ? model.TotalAmount.Value / MaxAmount * 100 : 0;
    From deb7df601989db5ef9ea57955cdf5dbc0a0917d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Fi=C5=A1era?= Date: Tue, 5 May 2026 13:59:30 +0200 Subject: [PATCH 3/7] Add PeriodSelector to TrendsMonth page Adds year period selector to the month trends view, allowing users to quickly navigate between years for category trend comparison. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/Money.Blazor.Host/Pages/TrendsMonth.razor | 6 ++++++ src/Money.Blazor.Host/Pages/TrendsMonth.razor.cs | 5 +++++ 2 files changed, 11 insertions(+) diff --git a/src/Money.Blazor.Host/Pages/TrendsMonth.razor b/src/Money.Blazor.Host/Pages/TrendsMonth.razor index eac5d9f3..9ea39a63 100644 --- a/src/Money.Blazor.Host/Pages/TrendsMonth.razor +++ b/src/Money.Blazor.Host/Pages/TrendsMonth.razor @@ -18,6 +18,12 @@ } else { +
    +
    + +
    +
    +
    @foreach (var model in Models) { diff --git a/src/Money.Blazor.Host/Pages/TrendsMonth.razor.cs b/src/Money.Blazor.Host/Pages/TrendsMonth.razor.cs index dc7f7fc3..b1deb9db 100644 --- a/src/Money.Blazor.Host/Pages/TrendsMonth.razor.cs +++ b/src/Money.Blazor.Host/Pages/TrendsMonth.razor.cs @@ -21,6 +21,7 @@ public partial class TrendsMonth(IQueryDispatcher Queries, Navigator Navigator) public Guid CategoryGuid { get; set; } protected YearModel SelectedPeriod { get; set; } + protected IReadOnlyCollection PeriodGuesses { get; set; } protected IKey CategoryKey { get; set; } protected string CategoryName { get; set; } protected Color CategoryColor { get; set; } @@ -32,6 +33,7 @@ protected override async Task OnInitializedAsync() await base.OnInitializedAsync(); SelectedPeriod = new YearModel(Year); + PeriodGuesses = new YearModel[] { SelectedPeriod - 1, SelectedPeriod - 2 }; CategoryKey = GuidKey.Create(CategoryGuid, KeyFactory.Empty(typeof(Category)).Type); CategoryName = await Queries.QueryAsync(new GetCategoryName(CategoryKey)); CategoryColor = await Queries.QueryAsync(new GetCategoryColor(CategoryKey)); @@ -39,6 +41,9 @@ protected override async Task OnInitializedAsync() await LoadAsync(); } + protected async Task> GetYearsAsync() + => await Queries.QueryAsync(new ListYearWithExpenseOrIncome()); + private async Task LoadAsync() { string defaultCurrency = await Queries.QueryAsync(new FindCurrencyDefault()); From 8ced078fcb4f6229bdbf0dd72c27f9181863504b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Fi=C5=A1era?= Date: Tue, 5 May 2026 14:01:50 +0200 Subject: [PATCH 4/7] Combine PeriodSelector and nav pills into single flex row On Overview, OverviewIncome, and ExpenseChecklistMonth, merge the period selector and tab navigation into a single d-flex line with the selector on the left and nav pills on the right. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../Pages/ExpenseChecklistMonth.razor | 23 ++++--- src/Money.Blazor.Host/Pages/Overview.razor | 62 +++++++++---------- .../Pages/OverviewIncome.razor | 33 +++++----- 3 files changed, 58 insertions(+), 60 deletions(-) diff --git a/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor b/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor index 3ebdbcda..ff4d1726 100644 --- a/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor +++ b/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor @@ -12,20 +12,19 @@
    +
    - - @if (Models.Count == 0) { diff --git a/src/Money.Blazor.Host/Pages/Overview.razor b/src/Money.Blazor.Host/Pages/Overview.razor index b7e57121..a7e90bfc 100644 --- a/src/Money.Blazor.Host/Pages/Overview.razor +++ b/src/Money.Blazor.Host/Pages/Overview.razor @@ -20,6 +20,12 @@
    + @{ + var incomeUrl = ListIncomeUrl(); + var checklistUrl = ChecklistUrl(); + var trendsUrl = TrendsSelectedPeriodUrl(); + } +
    @@ -27,39 +33,33 @@
    -
    - - @{ - var incomeUrl = ListIncomeUrl(); - var checklistUrl = ChecklistUrl(); - var trendsUrl = TrendsSelectedPeriodUrl(); - } - @if (incomeUrl != null || trendsUrl != null) - { -
      - @if (incomeUrl != null) - { -
    • - Incomes -
      • - } -
    • - Expenses -
      • - @if (checklistUrl != null) - { -
    • - Checklist -
      • - } - @if (trendsUrl != null) - { + @if (incomeUrl != null || trendsUrl != null) + { + - } + @if (checklistUrl != null) + { +
    • + Checklist +
      • + } + @if (trendsUrl != null) + { +
    • + Trends +
      • + } +
    + } +
    @if (Items?.Count > 0) { diff --git a/src/Money.Blazor.Host/Pages/OverviewIncome.razor b/src/Money.Blazor.Host/Pages/OverviewIncome.razor index c3cb1e69..56f9dc9c 100644 --- a/src/Money.Blazor.Host/Pages/OverviewIncome.razor +++ b/src/Money.Blazor.Host/Pages/OverviewIncome.razor @@ -17,25 +17,24 @@
    -
    - -
      -
    • - Incomes -
      • -
    • - Expenses -
      • - @{ - var checklistUrl = ChecklistUrl(); - } - @if (checklistUrl != null) - { + +
    • + Expenses +
      • + @{ + var checklistUrl = ChecklistUrl(); + } + @if (checklistUrl != null) + { +
    • + Checklist +
      • + } +
    +
    @if (Items?.Count > 0) { From 95ab64791b0430b762949746ac359ea2f2cfe1d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Fi=C5=A1era?= Date: Tue, 5 May 2026 14:05:06 +0200 Subject: [PATCH 5/7] Replace TrendsMonth header button with pill-based nav Move the 'Year overview' link from the title button area into a nav pills row alongside the PeriodSelector, consistent with other pages. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/Money.Blazor.Host/Pages/TrendsMonth.razor | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/Money.Blazor.Host/Pages/TrendsMonth.razor b/src/Money.Blazor.Host/Pages/TrendsMonth.razor index 9ea39a63..da518b4a 100644 --- a/src/Money.Blazor.Host/Pages/TrendsMonth.razor +++ b/src/Money.Blazor.Host/Pages/TrendsMonth.razor @@ -1,16 +1,7 @@ @attribute [Authorize] @page "/{Year:int}/trends/{CategoryGuid:guid}" - - <ButtonContent> - <button class="btn btn-secondary" @onclick="(() => Navigator.OpenOverview(SelectedPeriod, CategoryKey))"> - <Icon Prefix="fas" Identifier="list-ul" /> - <span class="d-none d-lg-inline"> - Year overview - </span> - </button> - </ButtonContent> - + @if (Models == null) { @@ -22,6 +13,14 @@ else <div> <PeriodSelector Selected="SelectedPeriod" Previous="PeriodGuesses" ExactGetter="GetYearsAsync" LinkFactory="@(year => Navigator.UrlTrends(year, CategoryKey))" /> </div> + <ul class="nav nav-pills"> + <li> + <a class="nav-link" href="@Navigator.UrlOverview(SelectedPeriod, CategoryKey)">Overview</a> + </li> + <li> + <a class="nav-link active" href="@Navigator.UrlTrends(SelectedPeriod, CategoryKey)">Trends</a> + </li> + </ul> </div> <div class="row no-gutters" style="min-height: calc(100vh - 312px)"> From dddf1697e543d1d01aa9dff40bfa3ccef3a414b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Fi=C5=A1era?= <mara@neptuo.com> Date: Tue, 5 May 2026 14:09:01 +0200 Subject: [PATCH 6/7] Move sort button into the period selector flex row On Overview and OverviewIncome, move the SortButton into the same flex line as the PeriodSelector and nav pills, eliminating the extra row. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/Money.Blazor.Host/Pages/Overview.razor | 62 ++++++++++--------- .../Pages/OverviewIncome.razor | 42 +++++++------ 2 files changed, 54 insertions(+), 50 deletions(-) diff --git a/src/Money.Blazor.Host/Pages/Overview.razor b/src/Money.Blazor.Host/Pages/Overview.razor index a7e90bfc..b8d8b73c 100644 --- a/src/Money.Blazor.Host/Pages/Overview.razor +++ b/src/Money.Blazor.Host/Pages/Overview.razor @@ -33,40 +33,42 @@ <Loading Context="@Loading" /> </span> </div> - @if (incomeUrl != null || trendsUrl != null) - { - <ul class="nav nav-pills"> - @if (incomeUrl != null) - { - <li> - <a class="nav-link" href="@incomeUrl">Incomes</a> - </li> - } - <li> - <a class="nav-link active" href="@Navigator.UrlCurrent()">Expenses</a> - </li> - @if (checklistUrl != null) - { - <li> - <a class="nav-link" href="@checklistUrl">Checklist</a> - </li> - } - @if (trendsUrl != null) - { + <div class="d-flex align-items-center"> + @if (incomeUrl != null || trendsUrl != null) + { + <ul class="nav nav-pills"> + @if (incomeUrl != null) + { + <li> + <a class="nav-link" href="@incomeUrl">Incomes</a> + </li> + } <li> - <a class="nav-link" href="@trendsUrl">Trends</a> + <a class="nav-link active" href="@Navigator.UrlCurrent()">Expenses</a> </li> - } - </ul> - } + @if (checklistUrl != null) + { + <li> + <a class="nav-link" href="@checklistUrl">Checklist</a> + </li> + } + @if (trendsUrl != null) + { + <li> + <a class="nav-link" href="@trendsUrl">Trends</a> + </li> + } + </ul> + } + @if (Items?.Count > 0) + { + <span class="ps-2"> + <SortButton TType="@OutcomeOverviewSortType" @bind-Current="@SortDescriptor" Changed="@OnSortChanged" /> + </span> + } + </div> </div> - @if (Items?.Count > 0) - { - <SortButton TType="@OutcomeOverviewSortType" @bind-Current="@SortDescriptor" Changed="@OnSortChanged" /> - } - <div class="clear"></div> - <div class="cards"> <ExpenseCardContext> <AutoLoadListView diff --git a/src/Money.Blazor.Host/Pages/OverviewIncome.razor b/src/Money.Blazor.Host/Pages/OverviewIncome.razor index 56f9dc9c..ca18dd01 100644 --- a/src/Money.Blazor.Host/Pages/OverviewIncome.razor +++ b/src/Money.Blazor.Host/Pages/OverviewIncome.razor @@ -17,31 +17,33 @@ <Loading Context="@Loading" IsOverlay="true" /> </span> </div> - <ul class="nav nav-pills"> - <li> - <a class="nav-link active" href="@Navigator.UrlCurrent()">Incomes</a> - </li> - <li> - <a class="nav-link" href="@ListExpenseUrl()">Expenses</a> - </li> - @{ - var checklistUrl = ChecklistUrl(); - } - @if (checklistUrl != null) - { + <div class="d-flex align-items-center"> + <ul class="nav nav-pills"> <li> - <a class="nav-link" href="@checklistUrl">Checklist</a> + <a class="nav-link active" href="@Navigator.UrlCurrent()">Incomes</a> </li> + <li> + <a class="nav-link" href="@ListExpenseUrl()">Expenses</a> + </li> + @{ + var checklistUrl = ChecklistUrl(); + } + @if (checklistUrl != null) + { + <li> + <a class="nav-link" href="@checklistUrl">Checklist</a> + </li> + } + </ul> + @if (Items?.Count > 0) + { + <span class="ps-2"> + <SortButton TType="@IncomeOverviewSortType" @bind-Current="@SortDescriptor" Changed="@OnSortChanged" /> + </span> } - </ul> + </div> </div> - @if (Items?.Count > 0) - { - <SortButton TType="@IncomeOverviewSortType" @bind-Current="@SortDescriptor" Changed="@OnSortChanged" /> - } - <div class="clear"></div> - @if (Items != null) { if (Items.Count > 0) From 4fb98595210b890545e6c246ae11b1da59677ccc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Fi=C5=A1era?= <mara@neptuo.com> Date: Tue, 5 May 2026 14:12:45 +0200 Subject: [PATCH 7/7] Align period selector and nav pills to start, sort to end Change flex layout so PeriodSelector and nav pills are start-aligned together, while only the sort button is pushed to the end with ms-auto. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../Pages/ExpenseChecklistMonth.razor | 4 +- src/Money.Blazor.Host/Pages/Overview.razor | 64 +++++++++---------- .../Pages/OverviewIncome.razor | 44 ++++++------- src/Money.Blazor.Host/Pages/TrendsMonth.razor | 4 +- 4 files changed, 56 insertions(+), 60 deletions(-) diff --git a/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor b/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor index ff4d1726..16a1c1b8 100644 --- a/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor +++ b/src/Money.Blazor.Host/Pages/ExpenseChecklistMonth.razor @@ -5,14 +5,14 @@ <ExceptionPanel /> <div class="container-narrow"> - <div class="d-flex justify-content-between align-items-center mb-3"> + <div class="d-flex align-items-center mb-3"> <div> <PeriodSelector Selected="SelectedPeriod" Previous="PeriodGuesses" ExactGetter="GetMonthsAsync" LinkFactory="@(month => Navigator.UrlChecklist(month))" /> <span class="ps-2"> <Loading Context="@Loading" /> </span> </div> - <ul class="nav nav-pills"> + <ul class="nav nav-pills ps-3"> <li> <a class="nav-link" href="@Navigator.UrlOverviewIncomes(SelectedPeriod)">Incomes</a> </li> diff --git a/src/Money.Blazor.Host/Pages/Overview.razor b/src/Money.Blazor.Host/Pages/Overview.razor index b8d8b73c..2b50327d 100644 --- a/src/Money.Blazor.Host/Pages/Overview.razor +++ b/src/Money.Blazor.Host/Pages/Overview.razor @@ -26,47 +26,45 @@ var trendsUrl = TrendsSelectedPeriodUrl(); } - <div class="d-flex justify-content-between align-items-center mb-3"> + <div class="d-flex align-items-center mb-3"> <div> <PeriodSelector Selected="SelectedPeriod" Previous="PeriodGuesses" ExactGetter="GetPeriodsAsync" LinkFactory="UrlOverview" /> <span class="ps-2"> <Loading Context="@Loading" /> </span> </div> - <div class="d-flex align-items-center"> - @if (incomeUrl != null || trendsUrl != null) - { - <ul class="nav nav-pills"> - @if (incomeUrl != null) - { - <li> - <a class="nav-link" href="@incomeUrl">Incomes</a> - </li> - } + @if (incomeUrl != null || trendsUrl != null) + { + <ul class="nav nav-pills ps-3"> + @if (incomeUrl != null) + { <li> - <a class="nav-link active" href="@Navigator.UrlCurrent()">Expenses</a> + <a class="nav-link" href="@incomeUrl">Incomes</a> </li> - @if (checklistUrl != null) - { - <li> - <a class="nav-link" href="@checklistUrl">Checklist</a> - </li> - } - @if (trendsUrl != null) - { - <li> - <a class="nav-link" href="@trendsUrl">Trends</a> - </li> - } - </ul> - } - @if (Items?.Count > 0) - { - <span class="ps-2"> - <SortButton TType="@OutcomeOverviewSortType" @bind-Current="@SortDescriptor" Changed="@OnSortChanged" /> - </span> - } - </div> + } + <li> + <a class="nav-link active" href="@Navigator.UrlCurrent()">Expenses</a> + </li> + @if (checklistUrl != null) + { + <li> + <a class="nav-link" href="@checklistUrl">Checklist</a> + </li> + } + @if (trendsUrl != null) + { + <li> + <a class="nav-link" href="@trendsUrl">Trends</a> + </li> + } + </ul> + } + @if (Items?.Count > 0) + { + <span class="ms-auto"> + <SortButton TType="@OutcomeOverviewSortType" @bind-Current="@SortDescriptor" Changed="@OnSortChanged" /> + </span> + } </div> <div class="cards"> diff --git a/src/Money.Blazor.Host/Pages/OverviewIncome.razor b/src/Money.Blazor.Host/Pages/OverviewIncome.razor index ca18dd01..17415a27 100644 --- a/src/Money.Blazor.Host/Pages/OverviewIncome.razor +++ b/src/Money.Blazor.Host/Pages/OverviewIncome.razor @@ -10,38 +10,36 @@ <IncomeCreate @ref="CreateModal" /> <div class="container-narrow"> - <div class="d-flex justify-content-between align-items-center mb-3"> + <div class="d-flex align-items-center mb-3"> <div> <PeriodSelector Selected="SelectedPeriod" Previous="PeriodGuesses" ExactGetter="GetPeriodsAsync" LinkFactory="UrlOverviewIncomes" /> <span class="ps-2"> <Loading Context="@Loading" IsOverlay="true" /> </span> </div> - <div class="d-flex align-items-center"> - <ul class="nav nav-pills"> - <li> - <a class="nav-link active" href="@Navigator.UrlCurrent()">Incomes</a> - </li> + <ul class="nav nav-pills ps-3"> + <li> + <a class="nav-link active" href="@Navigator.UrlCurrent()">Incomes</a> + </li> + <li> + <a class="nav-link" href="@ListExpenseUrl()">Expenses</a> + </li> + @{ + var checklistUrl = ChecklistUrl(); + } + @if (checklistUrl != null) + { <li> - <a class="nav-link" href="@ListExpenseUrl()">Expenses</a> + <a class="nav-link" href="@checklistUrl">Checklist</a> </li> - @{ - var checklistUrl = ChecklistUrl(); - } - @if (checklistUrl != null) - { - <li> - <a class="nav-link" href="@checklistUrl">Checklist</a> - </li> - } - </ul> - @if (Items?.Count > 0) - { - <span class="ps-2"> - <SortButton TType="@IncomeOverviewSortType" @bind-Current="@SortDescriptor" Changed="@OnSortChanged" /> - </span> } - </div> + </ul> + @if (Items?.Count > 0) + { + <span class="ms-auto"> + <SortButton TType="@IncomeOverviewSortType" @bind-Current="@SortDescriptor" Changed="@OnSortChanged" /> + </span> + } </div> @if (Items != null) diff --git a/src/Money.Blazor.Host/Pages/TrendsMonth.razor b/src/Money.Blazor.Host/Pages/TrendsMonth.razor index da518b4a..ed63826d 100644 --- a/src/Money.Blazor.Host/Pages/TrendsMonth.razor +++ b/src/Money.Blazor.Host/Pages/TrendsMonth.razor @@ -9,11 +9,11 @@ } else { - <div class="d-flex justify-content-between align-items-center mb-3"> + <div class="d-flex align-items-center mb-3"> <div> <PeriodSelector Selected="SelectedPeriod" Previous="PeriodGuesses" ExactGetter="GetYearsAsync" LinkFactory="@(year => Navigator.UrlTrends(year, CategoryKey))" /> </div> - <ul class="nav nav-pills"> + <ul class="nav nav-pills ps-3"> <li> <a class="nav-link" href="@Navigator.UrlOverview(SelectedPeriod, CategoryKey)">Overview</a> </li>