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) - the css selector for `.stark-main-container` has changed and can now be applied directly to the `main` element in app.component.html. (see Starter for an example)
NationalBankBelgium · Mar 7, 2019 · ad12b5a · ad12b5a
1 parent 5a9df97
commit ad12b5a
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 75 deletions.
diff --git a/packages/stark-ui/assets/styles/_base.scss b/packages/stark-ui/assets/styles/_base.scss
@@ -12,45 +12,20 @@ body {
   &.translate-cloak {
     visibility: hidden;
   }
-}
-
-.stark-section {
-  margin-bottom: 64px;
-}
-
-.stark-main-container {
-  align-self: stretch;
-  min-height: 670px;
-  padding: 64px 15px;
-}
-
-@media screen {
-  .stark-app {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
 
-    .content-wrapper {
-      flex: 1;
-      display: flex;
-      overflow-y: hidden;
-      position: relative;
-    }
+  .stark-section {
+    margin-bottom: 64px;
+  }
 
-    main {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
+  main.stark-main-container {
+    flex: 1 0 auto;
+    align-self: center;
 
-      > ui-view {
-        flex: 1 0 auto;
-      }
-    }
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: 64px 15px;
   }
 }
-
 @media #{$tablet-query} {
   .stark-main-container {
     padding-left: 70px;

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
@@ -3,20 +3,20 @@
 /* ============================================================================== */
 /* stark-ui: src/modules/app-footer/components/_app-footer.component.scss */
 stark-app-footer {
-  position: relative;
-  bottom: 0;
-  width: 100%;
+  align-self: stretch;
 }
 
 .stark-app-footer-container {
   display: flex;
   align-items: center;
   justify-content: center;
+
   font-size: 13px;
   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,22 @@
 /* stark-ui: src/modules/app-sidebar/components/_app-sidebar.component.scss */
 
 .stark-app-sidebar {
+  .mat-sidenav-container {
+    height: 100vh;
+    width: 100vw;
+
+    display: flex;
+    flex-direction: column;
+  }
+
   .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%;
+    flex: 1 1 0;
+    align-self: stretch;
+
+    display: flex;
+    flex-direction: column;
   }
 
   .mat-sidenav {
@@ -48,19 +51,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
@@ -4,17 +4,19 @@
 			<stark-app-logo></stark-app-logo>
 			<stark-app-menu [menuConfig]="mainMenu"></stark-app-menu>
 		</ng-container>
+
 		<ng-container stark-app-sidenav-left>
 			<div class="stark-app-sidenav-top m1 center">Top content</div>
 			<div class="stark-app-sidenav-middle m1 center">Middle content</div>
 			<div class="stark-app-sidenav-bottom m1 center">Bottom content</div>
 		</ng-container>
+
 		<ng-container stark-app-sidenav-right>
 			<div class="stark-app-sidenav-top m1 center">Top content</div>
 			<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 +122,15 @@
 					</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>