fix(stark-ui): update some component styling to fix bugs

- fix footer overflow - fix footer hovering above bottom of screen - removed unused redundant DOM from `app.component.html` (showcase / starter) ISSUES CLOSED: NationalBankBelgium#1169 BREAKING CHANGES: - `stark-app-sidenav-content` should not be applied to a wrapper element (`div`) anymore. Replace it with a `ng-container`. This ensures the footer is always at the bottom. (see Starter for an example)
carlo-nomes · Mar 5, 2019 · 764ee3b · 764ee3b
1 parent 50e9bbe
commit 764ee3b
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 40 deletions.
diff --git a/packages/stark-ui/assets/styles/_base.scss b/packages/stark-ui/assets/styles/_base.scss
@@ -19,8 +19,7 @@ body {
 }
 
 .stark-main-container {
-  align-self: stretch;
-  min-height: 670px;
+  flex: 1;
   padding: 64px 15px;
 }
 

diff --git a/packages/stark-ui/src/modules/app-footer/components/_app-footer.component.scss b/packages/stark-ui/src/modules/app-footer/components/_app-footer.component.scss
@@ -16,7 +16,7 @@ stark-app-footer {
   line-height: 1.1;
   padding-left: 16px;
   padding-right: 16px;
-  height: $stark-footer-size;
+  min-height: $stark-footer-size;
 
   a {
     display: inline-block;

diff --git a/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss
@@ -4,19 +4,18 @@
 /* stark-ui: src/modules/app-sidebar/components/_app-sidebar.component.scss */
 
 .stark-app-sidebar {
+  .mat-sidenav-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
   .mat-sidenav-content {
     margin-top: $stark-header-size;
     overflow: initial; // fixes double scrollbar
-    [stark-app-sidenav-content] {
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-    }
-  }
-
-  .mat-sidenav-container {
-    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
   }
 
   .mat-sidenav {
@@ -48,19 +47,15 @@
   }
 }
 
-@media #{$tablet-query} {
-  .stark-app-sidebar {
-    .mat-sidenav-content {
-      margin-top: $stark-header-size-desktop;
-    }
+@media #{$tablet-screen-query} {
+  .stark-app-sidebar .mat-sidenav-content {
+    margin-top: $stark-header-size-desktop;
   }
 }
 
 @media #{$desktop-lg-query} {
-  .stark-app-sidebar {
-    .stark-app-sidenav-menu {
-      margin-top: $stark-header-size-desktop;
-    }
+  .stark-app-sidebar .stark-app-sidenav-menu {
+    margin-top: $stark-header-size-desktop;
   }
 }
 

diff --git a/showcase/src/app/app.component.html b/showcase/src/app/app.component.html
@@ -14,7 +14,7 @@
 			<div class="stark-app-sidenav-middle m1 center">Middle content</div>
 			<div class="stark-app-sidenav-bottom m1 center">Bottom content</div>
 		</ng-container>
-		<div stark-app-sidenav-content>
+		<ng-container stark-app-sidenav-content>
 			<header class="stark-app-header">
 				<div class="stark-header-container">
 					<div class="stark-app-bar">
@@ -120,16 +120,13 @@
 					</div>
 				</div>
 			</header>
-			<div class="stark-main-container">
-				<main>
-					<ui-view></ui-view>
-				</main>
-			</div>
+			<main class="stark-main-container">
+				<ui-view></ui-view>
+			</main>
 			<stark-app-footer
 				legalInfoUrl="https://www.nbb.be/en/disclaimer-and-legal-information"
 				helpPageUrl="https://www.nbb.be/en/links"
-			>
-			</stark-app-footer>
-		</div>
+			></stark-app-footer>
+		</ng-container>
 	</stark-app-sidebar>
 </stark-app-container>
diff --git a/starter/src/app/app.component.html b/starter/src/app/app.component.html
@@ -4,7 +4,7 @@
 			<stark-app-logo></stark-app-logo>
 			<stark-app-menu [menuConfig]="mainMenu"></stark-app-menu>
 		</ng-container>
-		<div stark-app-sidenav-content>
+		<ng-container stark-app-sidenav-content>
 			<header class="stark-app-header">
 				<div class="stark-header-container">
 					<div class="stark-app-bar">
@@ -55,16 +55,13 @@ <h1>{{ name }}</h1>
 					</div>
 				</div>
 			</header>
-			<div class="stark-main-container">
-				<main>
-					<ui-view></ui-view>
-				</main>
-			</div>
+			<main class="stark-main-container">
+				<ui-view></ui-view>
+			</main>
 			<stark-app-footer
 				legalInfoUrl="https://www.nbb.be/en/disclaimer-and-legal-information"
 				helpPageUrl="https://www.nbb.be/en/links"
-			>
-			</stark-app-footer>
-		</div>
+			></stark-app-footer>
+		</ng-container>
 	</stark-app-sidebar>
 </stark-app-container>