-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Rename Layout Folder and remove Redirect On Error
- Loading branch information
Showing
7 changed files
with
293 additions
and
308 deletions.
There are no files selected for viewing
56 changes: 28 additions & 28 deletions
56
src/Savings.SPA/Shared/LoginDisplay.razor → src/Savings.SPA/Layout/LoginDisplay.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,28 @@ | ||
| @using Microsoft.AspNetCore.Components.WebAssembly.Authentication | ||
| @using Microsoft.Extensions.Options; | ||
| @inject NavigationManager Navigation | ||
|
|
||
| @inject IOptionsSnapshot<RemoteAuthenticationOptions<ApiAuthorizationProviderOptions>> Options | ||
|
|
||
| <AuthorizeView> | ||
| <Authorized> | ||
| <div class="login-section"> | ||
| Hello, @context.User.Identity?.Name!<br /> | ||
| <button class="btn btn-primary" @onclick="BeginLogOut">Log out</button> | ||
| </div> | ||
| </Authorized> | ||
| <NotAuthorized> | ||
| <div class="login-section"> | ||
| <a href="authentication/login" class="btn btn-primary">Log in</a> | ||
| </div> | ||
| </NotAuthorized> | ||
| </AuthorizeView> | ||
|
|
||
| @code { | ||
| public void BeginLogOut() | ||
| { | ||
| Navigation.NavigateToLogout(Options.Get( | ||
| Microsoft.Extensions.Options.Options.DefaultName) | ||
| .AuthenticationPaths.LogOutPath); | ||
| } | ||
| } | ||
| @using Microsoft.AspNetCore.Components.WebAssembly.Authentication | ||
| @using Microsoft.Extensions.Options; | ||
| @inject NavigationManager Navigation | ||
|
|
||
| @inject IOptionsSnapshot<RemoteAuthenticationOptions<ApiAuthorizationProviderOptions>> Options | ||
|
|
||
| <AuthorizeView> | ||
| <Authorized> | ||
| <div class="login-section"> | ||
| Hello, @context.User.Identity?.Name!<br /> | ||
| <button class="btn btn-primary" @onclick="BeginLogOut">Log out</button> | ||
| </div> | ||
| </Authorized> | ||
| <NotAuthorized> | ||
| <div class="login-section"> | ||
| <a href="authentication/login" class="btn btn-primary">Log in</a> | ||
| </div> | ||
| </NotAuthorized> | ||
| </AuthorizeView> | ||
|
|
||
| @code { | ||
| public void BeginLogOut() | ||
| { | ||
| Navigation.NavigateToLogout(Options.Get( | ||
| Microsoft.Extensions.Options.Options.DefaultName) | ||
| .AuthenticationPaths.LogOutPath); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| @inherits LayoutComponentBase | ||
|
|
||
| <RadzenComponents /> | ||
| <div class="page"> | ||
| <div class="sidebar"> | ||
| <NavMenu /> | ||
| </div> | ||
| <main> | ||
| <article class="content px-4"> | ||
| @Body | ||
| </article> | ||
| </main> | ||
| </div> |
162 changes: 81 additions & 81 deletions
162
src/Savings.SPA/Shared/MainLayout.razor.css → src/Savings.SPA/Layout/MainLayout.razor.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,81 +1,81 @@ | ||
| .page { | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| main { | ||
| flex: 1; | ||
| } | ||
|
|
||
| .sidebar { | ||
| background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); | ||
| } | ||
|
|
||
| .top-row { | ||
| background-color: #f7f7f7; | ||
| border-bottom: 1px solid #d6d5d5; | ||
| justify-content: flex-end; | ||
| height: 3.5rem; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .top-row ::deep a, .top-row ::deep .btn-link { | ||
| white-space: nowrap; | ||
| margin-left: 1.5rem; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .top-row ::deep a:first-child { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| @media (max-width: 640.98px) { | ||
| .top-row:not(.auth) { | ||
| display: none; | ||
| } | ||
|
|
||
| .top-row.auth { | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .top-row ::deep a, .top-row ::deep .btn-link { | ||
| margin-left: 0; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 641px) { | ||
| .page { | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| .sidebar { | ||
| width: 250px; | ||
| height: 100vh; | ||
| position: sticky; | ||
| top: 0; | ||
| } | ||
|
|
||
| .top-row { | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .top-row.auth ::deep a:first-child { | ||
| flex: 1; | ||
| text-align: right; | ||
| width: 0; | ||
| } | ||
|
|
||
| .top-row, article { | ||
| padding-left: 2rem !important; | ||
| padding-right: 1.5rem !important; | ||
| } | ||
| } | ||
| .page { | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| main { | ||
| flex: 1; | ||
| } | ||
|
|
||
| .sidebar { | ||
| background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); | ||
| } | ||
|
|
||
| .top-row { | ||
| background-color: #f7f7f7; | ||
| border-bottom: 1px solid #d6d5d5; | ||
| justify-content: flex-end; | ||
| height: 3.5rem; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .top-row ::deep a, .top-row ::deep .btn-link { | ||
| white-space: nowrap; | ||
| margin-left: 1.5rem; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .top-row ::deep a:first-child { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| @media (max-width: 640.98px) { | ||
| .top-row:not(.auth) { | ||
| display: none; | ||
| } | ||
|
|
||
| .top-row.auth { | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .top-row ::deep a, .top-row ::deep .btn-link { | ||
| margin-left: 0; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 641px) { | ||
| .page { | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| .sidebar { | ||
| width: 250px; | ||
| height: 100vh; | ||
| position: sticky; | ||
| top: 0; | ||
| } | ||
|
|
||
| .top-row { | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .top-row.auth ::deep a:first-child { | ||
| flex: 1; | ||
| text-align: right; | ||
| width: 0; | ||
| } | ||
|
|
||
| .top-row, article { | ||
| padding-left: 2rem !important; | ||
| padding-right: 1.5rem !important; | ||
| } | ||
| } |
164 changes: 82 additions & 82 deletions
164
src/Savings.SPA/Shared/NavMenu.razor → src/Savings.SPA/Layout/NavMenu.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,82 @@ | ||
| @using Microsoft.Extensions.Configuration | ||
| @using Savings.SPA.Services; | ||
| @inject IConfiguration Configuration | ||
| @inject IJSRuntime JS | ||
| @inject ISavingsApi _api; | ||
|
|
||
| <div class="top-row ps-3 navbar navbar-dark"> | ||
| <div class="container-fluid"> | ||
| <a class="navbar-brand" href="">Savings</a> | ||
| <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu"> | ||
|
|
||
| @if (Configuration["AuthenticationToUse"] == AuthenticationToUse.AzureAD) | ||
| { | ||
| <LoginDisplay /> | ||
| } | ||
| <nav class="flex-column"> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> | ||
| <span class="oi oi-timer" aria-hidden="true"></span> Projection | ||
| </NavLink> | ||
| </div> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" href="/fixed-items"> | ||
| <span class="oi oi-pin" aria-hidden="true"></span> Fixed Items | ||
| </NavLink> | ||
| </div> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" href="/recurrent-items"> | ||
| <span class="oi oi-pulse" aria-hidden="true"></span> Recurrent Items | ||
| </NavLink> | ||
| </div> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" href="/history"> | ||
| <span class="oi oi-clock" aria-hidden="true"></span> History | ||
| </NavLink> | ||
| </div> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" href="/reports"> | ||
| <span class="oi oi-document" aria-hidden="true"></span> Reports | ||
| </NavLink> | ||
| </div> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" href="/configuration"> | ||
| <span class="oi oi-beaker" aria-hidden="true"></span> Configuration | ||
| </NavLink> | ||
| </div> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" @onclick="DownloadFileFromStream" href="#"> | ||
| <span class="oi oi-arrow-circle-bottom" aria-hidden="true"></span> Backup | ||
| </NavLink> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
|
|
||
| @code { | ||
|
|
||
| private bool collapseNavMenu = true; | ||
|
|
||
| private string NavMenuCssClass => collapseNavMenu ? "collapse" : string.Empty; | ||
|
|
||
| private void ToggleNavMenu() | ||
| { | ||
| collapseNavMenu = !collapseNavMenu; | ||
| } | ||
|
|
||
| private async Task DownloadFileFromStream() | ||
| { | ||
| var fileStream = await _api.GetBackup(); | ||
| var fileName = "Savings.db"; | ||
|
|
||
| using var streamRef = new DotNetStreamReference(stream: fileStream); | ||
|
|
||
| await JS.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef); | ||
| } | ||
|
|
||
| } | ||
| @using Microsoft.Extensions.Configuration | ||
| @using Savings.SPA.Services; | ||
| @inject IConfiguration Configuration | ||
| @inject IJSRuntime JS | ||
| @inject ISavingsApi _api; | ||
|
|
||
| <div class="top-row ps-3 navbar navbar-dark"> | ||
| <div class="container-fluid"> | ||
| <a class="navbar-brand" href="">Savings</a> | ||
| <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu"> | ||
|
|
||
| @if (Configuration["AuthenticationToUse"] == AuthenticationToUse.AzureAD) | ||
| { | ||
| <LoginDisplay /> | ||
| } | ||
| <nav class="flex-column"> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> | ||
| <span class="oi oi-timer" aria-hidden="true"></span> Projection | ||
| </NavLink> | ||
| </div> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" href="/fixed-items"> | ||
| <span class="oi oi-pin" aria-hidden="true"></span> Fixed Items | ||
| </NavLink> | ||
| </div> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" href="/recurrent-items"> | ||
| <span class="oi oi-pulse" aria-hidden="true"></span> Recurrent Items | ||
| </NavLink> | ||
| </div> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" href="/history"> | ||
| <span class="oi oi-clock" aria-hidden="true"></span> History | ||
| </NavLink> | ||
| </div> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" href="/reports"> | ||
| <span class="oi oi-document" aria-hidden="true"></span> Reports | ||
| </NavLink> | ||
| </div> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" href="/configuration"> | ||
| <span class="oi oi-beaker" aria-hidden="true"></span> Configuration | ||
| </NavLink> | ||
| </div> | ||
| <div class="nav-item px-3"> | ||
| <NavLink class="nav-link" @onclick="DownloadFileFromStream" href="#"> | ||
| <span class="oi oi-arrow-circle-bottom" aria-hidden="true"></span> Backup | ||
| </NavLink> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
|
|
||
| @code { | ||
|
|
||
| private bool collapseNavMenu = true; | ||
|
|
||
| private string NavMenuCssClass => collapseNavMenu ? "collapse" : string.Empty; | ||
|
|
||
| private void ToggleNavMenu() | ||
| { | ||
| collapseNavMenu = !collapseNavMenu; | ||
| } | ||
|
|
||
| private async Task DownloadFileFromStream() | ||
| { | ||
| var fileStream = await _api.GetBackup(); | ||
| var fileName = "Savings.db"; | ||
|
|
||
| using var streamRef = new DotNetStreamReference(stream: fileStream); | ||
|
|
||
| await JS.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef); | ||
| } | ||
|
|
||
| } |
Oops, something went wrong.