diff --git a/Client/App.razor b/Client/App.razor index 6f67a6e..6fd3ed1 100644 --- a/Client/App.razor +++ b/Client/App.razor @@ -1,10 +1,12 @@ - + + + Not found -

Sorry, there's nothing at this address.

+

Sorry, there's nothing at this address.

 diff --git a/Client/Pages/Index.razor b/Client/Pages/Index.razor index e54d914..6085c4a 100644 --- a/Client/Pages/Index.razor +++ b/Client/Pages/Index.razor @@ -1,5 +1,7 @@ @page "/" +Index +

Hello, world!

Welcome to your new app. diff --git a/Client/Program.cs b/Client/Program.cs index 66ac0ed..ebce703 100644 --- a/Client/Program.cs +++ b/Client/Program.cs @@ -1,25 +1,11 @@ -using System; -using System.Net.Http; -using System.Collections.Generic; -using System.Threading.Tasks; -using System.Text; +using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; -using Microsoft.Extensions.Configuration; -using Microsoft.Extensions.DependencyInjection; -using Microsoft.Extensions.Logging; +using ShoppingCartStarter.Client; -namespace ShoppingCartStarter.Client -{ - public class Program - { - public static async Task Main(string[] args) - { - var builder = WebAssemblyHostBuilder.CreateDefault(args); - builder.RootComponents.Add("app"); +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.RootComponents.Add("#app"); +builder.RootComponents.Add("head::after"); - builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); +builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); - await builder.Build().RunAsync(); - } - } -} +await builder.Build().RunAsync(); diff --git a/Client/Properties/launchSettings.json b/Client/Properties/launchSettings.json index 80be952..53b533e 100644 --- a/Client/Properties/launchSettings.json +++ b/Client/Properties/launchSettings.json @@ -3,11 +3,21 @@ "windowsAuthentication": false, "anonymousAuthentication": true, "iisExpress": { - "applicationUrl": "http://localhost:65269", - "sslPort": 44368 + "applicationUrl": "http://localhost:24471", + "sslPort": 44335 } }, "profiles": { + "ShoppingCartStarter": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + "applicationUrl": "https://localhost:7109;http://localhost:5109", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, "IIS Express": { "commandName": "IISExpress", "launchBrowser": true, @@ -15,15 +25,6 @@ "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } - }, - "ShoppingCartStarter": { - "commandName": "Project", - "launchBrowser": true, - "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", - "applicationUrl": "https://localhost:5001;http://localhost:5000", - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - } } } } diff --git a/Client/Shared/MainLayout.razor b/Client/Shared/MainLayout.razor index 0f4e22a..839b8fe 100644 --- a/Client/Shared/MainLayout.razor +++ b/Client/Shared/MainLayout.razor @@ -1,15 +1,17 @@ @inherits LayoutComponentBase -
- -
- -
-
- About +
+
+
-
- @Body -
+
+
+ About +
+ +
+ @Body +
+
diff --git a/Client/Shared/MainLayout.razor.css b/Client/Shared/MainLayout.razor.css new file mode 100644 index 0000000..c865427 --- /dev/null +++ b/Client/Shared/MainLayout.razor.css @@ -0,0 +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; + } +} diff --git a/Client/Shared/NavMenu.razor b/Client/Shared/NavMenu.razor index 332960b..8dd6afa 100644 --- a/Client/Shared/NavMenu.razor +++ b/Client/Shared/NavMenu.razor @@ -1,24 +1,26 @@ -
- ShoppingCartStarter - +
+
+ ShoppingCartStarter + +
-
    -
  • +
    • -
+
+
@code { private bool collapseNavMenu = true; - private string NavMenuCssClass => collapseNavMenu ? "collapse" : null; + private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; private void ToggleNavMenu() { diff --git a/Client/Shared/NavMenu.razor.css b/Client/Shared/NavMenu.razor.css new file mode 100644 index 0000000..acc5f9f --- /dev/null +++ b/Client/Shared/NavMenu.razor.css @@ -0,0 +1,62 @@ +.navbar-toggler { + background-color: rgba(255, 255, 255, 0.1); +} + +.top-row { + height: 3.5rem; + background-color: rgba(0,0,0,0.4); +} + +.navbar-brand { + font-size: 1.1rem; +} + +.oi { + width: 2rem; + font-size: 1.1rem; + vertical-align: text-top; + top: -2px; +} + +.nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; +} + + .nav-item:first-of-type { + padding-top: 1rem; + } + + .nav-item:last-of-type { + padding-bottom: 1rem; + } + + .nav-item ::deep a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + } + +.nav-item ::deep a.active { + background-color: rgba(255,255,255,0.25); + color: white; +} + +.nav-item ::deep a:hover { + background-color: rgba(255,255,255,0.1); + color: white; +} + +@media (min-width: 641px) { + .navbar-toggler { + display: none; + } + + .collapse { + /* Never collapse the sidebar for wide screens */ + display: block; + } +} diff --git a/Client/Shared/SurveyPrompt.razor b/Client/Shared/SurveyPrompt.razor index 0271409..962027f 100644 --- a/Client/Shared/SurveyPrompt.razor +++ b/Client/Shared/SurveyPrompt.razor @@ -1,10 +1,10 @@ -