From 764ee3b3f2adffa28c9028def28609a3f1ab8b68 Mon Sep 17 00:00:00 2001
From: Carlo Nomes <carlo.nomes@optis.be>
Date: Tue, 5 Mar 2019 17:33:56 +0100
Subject: [PATCH] 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: #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)
---
 packages/stark-ui/assets/styles/_base.scss    |  3 +-
 .../components/_app-footer.component.scss     |  2 +-
 .../components/_app-sidebar.component.scss    | 33 ++++++++-----------
 showcase/src/app/app.component.html           | 15 ++++-----
 starter/src/app/app.component.html            | 15 ++++-----
 5 files changed, 28 insertions(+), 40 deletions(-)

diff --git a/packages/stark-ui/assets/styles/_base.scss b/packages/stark-ui/assets/styles/_base.scss
index 1fca58d2e2..6894799374 100644
--- 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
index e2885fcb10..912d398d25 100644
--- 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
index cc81b13d04..e4018433d1 100644
--- 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
index 3780d8e54b..61580c5510 100644
--- 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
index 195bd27f27..ed23177467 100644
--- 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>