Merge pull request #114 from CodebreakerApp/92-scrolling-with-lower-vertical-resolution

92 scrolling with lower vertical resolution

Author: christiannagel

src/CodeBreaker.Blazor.Client/Components/Playground.razor

@@ -37,10 +37,10 @@
                 {
                     <div class="selectable-game-buttons">
                         <FluentButton Appearance="Appearance.Stealth" Disabled="PlayButtonDisabled" OnClick="SetMoveAsync">
-                            <FluentIcon Value="new Icons.Filled.Size48.PlayCircle()" />
+                            <FluentIcon Value="new Icons.Filled.Size48.PlayCircle()" Width="100%" />
                         </FluentButton>
                         <FluentButton Appearance="Appearance.Stealth" Disabled="ClearButtonDisabled" OnClick="ResetMove">
-                            <FluentIcon Value="new Icons.Filled.Size48.DismissCircle()" />
+                            <FluentIcon Value="new Icons.Filled.Size48.DismissCircle()" Width="100%" />
                         </FluentButton>
                     </div>
                 }

src/CodeBreaker.Blazor.Client/Components/Playground.razor.css

@@ -32,34 +32,6 @@
     }
 }
 
-@media only screen and (max-width: 763px) {
-    .container {
-        --game-field-width: 2.25rem;
-        --game-field-height: 2.25rem;
-    }
-}
-
-@media only screen and (max-height: 900px) {
-    .container {
-        --game-field-width: 2.25rem;
-        --game-field-height: 2.25rem;
-    }
-}
-
-@media only screen and (max-width: 599px) and (min-height: 800px) {
-    .container {
-        --game-field-width: 2rem;
-        --game-field-height: 2rem;
-    }
-}
-
-@media only screen and (max-width: 599px) and (max-height: 800px) {
-    .container {
-        --game-field-width: 1.5rem;
-        --game-field-height: 1.5rem;
-    }
-}
-
 .container,
 .game-container,
 .colors,
@@ -337,33 +309,6 @@
 
 
 
-fluent-button::part(button) {
-    background-color: red;
-}
-fluent-button::part(.control) {
-    background-color: red;
-}
-fluent-button::part(control) {
-    background-color: red;
-}
-
-fluent-button /deep/ button {
-    background-color: blue;
-}
-FluentButton::part(button) {
-    background-color: red;
-}
-FluentButton::part(button) {
-    background-color: red;
-}
-
-FluentButton::part(.control) {
-    background-color: red;
-}
-
-FluentButton::part(control) {
-    background-color: red;
-}
-FluentButton /deep/ button {
-    background-color: blue;
+.selectable-game-buttons ::deep > fluent-button::part(control) {
+    width: calc(var(--game-field-width) + 7px);
 }

src/CodeBreaker.Blazor.Client/Pages/GamePage.razor

@@ -3,7 +3,7 @@
 @using CodeBreaker.Blazor.Client.Models
 @using Codebreaker.GameAPIs.Client.Models
 
-<FluentCard>
+<FluentCard AreaRestricted="false">
     @if (_gameStatus == GameMode.NotRunning)
     {
         <h2>@Loc["GamePage_Title"]</h2>

src/CodeBreaker.Blazor.Client/Shared/MainLayout.razor

@@ -2,15 +2,17 @@
 @inject IStringLocalizer<Resource> Loc
 @inject NavigationManager NavigationManager
 
-<FluentLayout>
-    <FluentHeader>
-        <h1><span id="welcome-message">@Loc["Index_Welcome"]</span> @Loc["AppDisplayName"]</h1>
-        <FluentSpacer />
-        <LoginDisplay />
-    </FluentHeader>
-    <div id="main-layout-stack">
+<div class="layout">
+    <div class="header-wrapper">
+        <FluentHeader>
+            <h1><span id="welcome-message">@Loc["Index_Welcome"]</span> @Loc["AppDisplayName"]</h1>
+            <FluentSpacer />
+            <LoginDisplay />
+        </FluentHeader>
+    </div>
+    <div class="main-layout-stack">
         @* Desktop navigation *@
-        <div id="large-navigation">
+        <div class="large-navigation">
             <FluentNavMenu Width="200" Style="box-shadow: var(--elevation-shadow-card-rest); height: 100%;">
                 @foreach (var navigationItem in _navigationItems)
                 {
@@ -20,7 +22,7 @@
         </div>
 
         @* Mobile navigation *@
-        <div id="small-navigation">
+        <div class="small-navigation">
             <FluentButton Id="mobile-nav-menu-button" Appearance="Appearance.Stealth" OnClick="ToggleMobileNavMenu" IconStart="@(new Icons.Regular.Size20.Navigation())">
                 @Loc["NavMenu_Title"]
             </FluentButton>
@@ -34,12 +36,12 @@
             </FluentMenu>
         </div>
 
-        <FluentBodyContent>
+        <div class="body-content">
             @Body
             <FluentDialogProvider />
-        </FluentBodyContent>
+        </div>
     </div>
-</FluentLayout>
+</div>
 
 <FluentDialogProvider />
 <FluentMenuProvider />

src/CodeBreaker.Blazor.Client/Shared/MainLayout.razor.css

@@ -9,27 +9,51 @@
     }
 }
 
-#main-layout-stack {
-    display: flex;
-    flex-direction: row;
+.layout {
     height: 100%;
+    display: grid;
+    grid-template-areas:
+        "header"
+        "rest";
+    grid-template-rows: auto 1fr;
 }
 
-#small-navigation {
-    display: none;
+.layout > .header-wrapper {
+    grid-area: header;
 }
-#large-navigation {
-    height: 100%;
+
+.layout > .main-layout-stack {
+    grid-area: rest;
+    display: grid;
+    grid-template-areas:
+        "mobile-menu mobile-menu"
+        "sidenav content";
+    grid-template-rows: auto 1fr;
+    grid-template-columns: auto 1fr;
+}
+
+.layout > .main-layout-stack > .large-navigation {
+    grid-area: sidenav;
+    box-shadow: var(--elevation-shadow-card-rest);
+    position: sticky;
+    top: 0;
+    overflow: hidden;
+}
+.layout > .main-layout-stack > .small-navigation {
+    grid-area: mobile-menu;
+    display: none;
 }
 
 @media only screen and (max-width: 1000px) {
-    #large-navigation {
+    .layout > .main-layout-stack > .large-navigation {
         display: none;
     }
-    #small-navigation {
+    .layout > .main-layout-stack > .small-navigation {
         display: block;
     }
-    #main-layout-stack {
-        flex-direction: column;
-    }
+}
+
+.layout > .main-layout-stack > .body-content {
+    grid-area: content;
+    padding: 1rem;
 }

src/CodeBreaker.Blazor/wwwroot/css/app.css

@@ -42,10 +42,6 @@ html, body, #app {
     background-color: var(--neutral-layer-1);
 }
 
-.body-content {
-    padding: 1rem;
-}
-
 :root {
     --primary: #8eb8e5ff;
     --on-primary: #ffffff;