From 79f7d92872b27b9e730ce9a65aea616d1ebd03f9 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Thu, 19 Jul 2018 22:08:14 +0200
Subject: [PATCH] aside responsive fixes

---
 src/_layouts/default.html              | 52 +++++++++++++-------------
 src/assets/scss/dashboard/_aside.scss  | 11 +++++-
 src/assets/scss/dashboard/_layout.scss | 16 ++++++++
 3 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/src/_layouts/default.html b/src/_layouts/default.html
index 260938e7e..73147435d 100644
--- a/src/_layouts/default.html
+++ b/src/_layouts/default.html
@@ -6,33 +6,31 @@ layout: base
 {% include aside.html %}
 {% endcomment %}
 
-<div class="flex-fill d-flex">
-
-	<div class="aside">
-		<div class="aside-body">
-			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam assumenda blanditiis consectetur culpa, cumque expedita illo in pariatur quibusdam voluptates? Eligendi est ex vero voluptate! In maxime optio perspiciatis repellat!
-		</div>
-		<div class="aside-footer">
-			Aside footer
-		</div>
+<div class="aside">
+	<div class="aside-body">
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam assumenda blanditiis consectetur culpa, cumque expedita illo in pariatur quibusdam voluptates? Eligendi est ex vero voluptate! In maxime optio perspiciatis repellat!
 	</div>
-
-	<div class="flex-fill d-flex flex-column">
-		{% include header.html %}
-
-		<div class="my-3 my-md-5 flex-fill">
-			{% if page.page-title %}
-			<div class="container">
-				<div class="page-header">
-					<h1 class="page-title">{{ page.page-title }}</h1>
-				</div>
-			</div>
-			{% endif %}
-
-			{{ content }}
-		</div>
-
-		{% include footer-sub.html %}
-		{% include footer.html %}
+	<div class="aside-footer">
+		Aside footer
 	</div>
 </div>
+
+<div class="page-main">
+
+	{% include header.html %}
+
+	<div class="my-3 my-md-5 flex-fill">
+		{% if page.page-title %}
+		<div class="container">
+			<div class="page-header">
+				<h1 class="page-title">{{ page.page-title }}</h1>
+			</div>
+		</div>
+		{% endif %}
+
+		{{ content }}
+	</div>
+
+	{% include footer-sub.html %}
+	{% include footer.html %}
+</div>
diff --git a/src/assets/scss/dashboard/_aside.scss b/src/assets/scss/dashboard/_aside.scss
index f5d37d776..0d48f2edd 100644
--- a/src/assets/scss/dashboard/_aside.scss
+++ b/src/assets/scss/dashboard/_aside.scss
@@ -1,9 +1,18 @@
 .aside {
 	background: #fff;
-	display: flex;
+	display: none;
 	flex-direction: column;
 	width: 16rem;
 	border-right: 1px solid $border-color;
+
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	top: 0;
+
+	@include media-breakpoint-up(xl) {
+		display: flex;
+	}
 }
 
 .aside-body {
diff --git a/src/assets/scss/dashboard/_layout.scss b/src/assets/scss/dashboard/_layout.scss
index fe5abde62..9f3988066 100644
--- a/src/assets/scss/dashboard/_layout.scss
+++ b/src/assets/scss/dashboard/_layout.scss
@@ -1,3 +1,10 @@
+.container {
+	@include media-breakpoint-up(md) {
+		padding-left: 1.5rem;
+		padding-right: 1.5rem;
+	}
+}
+
 .page {
 	display: flex;
 	flex-direction: column;
@@ -15,6 +22,15 @@
 	}
 }
 
+.page-main {
+	flex: 1 1 auto;
+
+	//body.show-aside & {
+		@include media-breakpoint-up(xl) {
+			margin-left: 16rem;
+		}
+	//}
+}
 
 .page-content {
 	margin: .75rem 0;