Fixing footer styling

7 years ago · 374c950a49
4 changed files with 39 additions and 26 deletions
--- a/src/Web/Views/Shared/_Layout.cshtml
+++ b/src/Web/Views/Shared/_Layout.cshtml
@ -24,29 +24,31 @@
    </environment>
 </head>
 <body>
-    <header class="esh-app-header">
-        <div class="container">
-            <article class="row">
-                <section class="col-lg-7 col-md-6 col-xs-12">
-                    <a asp-area="" asp-page="/Index">
-                        <img src="~/images/brand.png" alt="eShop On Web" />
-                    </a>
-                </section>
-                <partial name="_LoginPartial" />
-            </article>
-        </div>
-    </header>
-    @RenderBody()
-    <footer class="esh-app-footer footer">
-        <div class="container">
-            <article class="row">
-                <section class="col-sm-6"></section>
-                <section class="col-sm-6">
-                    <div class="esh-app-footer-text hidden-xs"> e-ShopOnWeb. All rights reserved </div>
-                </section>
-            </article>
-        </div>
-    </footer>
+    <div class="esh-app-wrapper">
+        <header class="esh-app-header">
+            <div class="container">
+                <article class="row">
+                    <section class="col-lg-7 col-md-6 col-xs-12">
+                        <a asp-area="" asp-page="/Index">
+                            <img src="~/images/brand.png" alt="eShop On Web" />
+                        </a>
+                    </section>
+                    <partial name="_LoginPartial" />
+                </article>
+            </div>
+        </header>
+        @RenderBody()
+        <footer class="esh-app-footer footer">
+            <div class="container">
+                <article class="row">
+                    <section class="col-sm-6"></section>
+                    <section class="col-sm-6">
+                        <div class="esh-app-footer-text hidden-xs"> e-ShopOnWeb. All rights reserved </div>
+                    </section>
+                </article>
+            </div>
+        </footer>
+    </div>
    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
--- a/src/Web/wwwroot/css/app.component.css
+++ b/src/Web/wwwroot/css/app.component.css
@ -12,3 +12,9 @@

 .esh-app-header {
  margin: 15px; }
+
+.esh-app-wrapper {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  justify-content: space-between; }
--- a/src/Web/wwwroot/css/app.component.min.css
+++ b/src/Web/wwwroot/css/app.component.min.css
@ -1 +1 @@
-.esh-app-footer{background-color:#000;border-top:1px solid #eee;margin-top:2.5rem;padding-bottom:2.5rem;padding-top:2.5rem;width:100%;bottom:0;}.esh-app-footer-brand{height:50px;width:230px;}.esh-app-header{margin:15px;}
+.esh-app-footer{background-color:#000;border-top:1px solid #eee;margin-top:2.5rem;padding-bottom:2.5rem;padding-top:2.5rem;width:100%;bottom:0;}.esh-app-footer-brand{height:50px;width:230px;}.esh-app-header{margin:15px;}.esh-app-wrapper{display:flex;min-height:100vh;flex-direction:column;justify-content:space-between;}
--- a/src/Web/wwwroot/css/app.component.scss
+++ b/src/Web/wwwroot/css/app.component.scss
@ -11,7 +11,6 @@
        padding-bottom: $padding;
        padding-top: $padding;
        width: 100%;
-
        bottom: 0;
        $height: 50px;

@ -19,10 +18,16 @@
            height: $height;
            width: 230px;
        }
-
    }

    &-header {
        margin: 15px;
    }
+
+    &-wrapper {
+        display: flex;
+        min-height: 100vh;
+        flex-direction: column;
+        justify-content: space-between
+    }
 }