Decrease website sidebar width, push down for mobile (#3864)

frappe/public/css/website.css

@@ -588,9 +588,14 @@ fieldset {
   width: 100%;
 }
 .page-container {
-  padding: 0px;
+  display: flex;
   max-width: 970px;
-  margin: auto;
+  margin: 0 auto;
+}
+@media (max-width: 767px) {
+  .page-container {
+    flex-direction: column-reverse;
+  }
 }
 .page-max-width {
   max-width: 800px;
@@ -603,30 +608,28 @@ fieldset {
 .web-sidebar {
   position: relative;
 }
-.web-sidebar .sidebar-item {
+.web-sidebar .sidebar-item:not(:last-child) {
   margin: 0px;
   padding-bottom: 12px;
   border: none;
   color: #8D99A6;
-  font-size: 12px;
 }
-.web-sidebar .sidebar-item .badge {
+.web-sidebar .sidebar-item:not(:last-child) .badge {
   font-weight: normal;
 }
 .web-sidebar .sidebar-item a {
-  color: #36414C !important;
+  color: #8D99A6;
 }
 .web-sidebar .sidebar-item a.active {
-  color: #36414C !important;
-  font-weight: 500 !important;
-}
-.web-sidebar .sidebar-items {
-  margin-bottom: 30px;
+  color: #36414C;
 }
 .web-sidebar .sidebar-items .title {
   font-size: 14px;
   font-weight: bold;
 }
+.web-sidebar .sidebar-items ul {
+  margin-bottom: 0;
+}
 .page-footer {
   padding: 15px 0px;
   border-top: 1px solid #EBEFF2;
@@ -785,13 +788,30 @@ a.active {
 .btn-next-wrapper {
   margin-top: 60px;
 }
-.sidebar-block,
+.sidebar-block {
+  flex: 1;
+  font-size: 12px;
+  border-right: 1px solid #d1d8dd;
+  padding: 30px;
+  padding-left: 0px;
+}
+@media (max-width: 767px) {
+  .sidebar-block {
+    font-size: 14px;
+    border-right: none;
+    border-top: 1px solid #d1d8dd;
+    padding-left: 20px;
+  }
+}
 .page-content {
-  padding-top: 30px;
-  padding-bottom: 50px;
+  flex: 6;
+}
+.page-content h1:first-child {
+  margin-top: 0;
 }
 .page-content.with-sidebar {
-  padding-left: 50px;
+  padding: 30px;
+  padding-left: 40px;
 }
 .your-account-info {
   margin-top: 30px;
@@ -803,11 +823,6 @@ a.active {
   .sidebar-block {
     width: 100%;
   }
-  .sidebar-block .web-sidebar {
-    margin: 0px -15px;
-    padding: 0px 30px;
-    border-bottom: 1px solid #d1d8dd;
-  }
   .page-content.with-sidebar {
     width: 100%;
     padding-left: 20px;

frappe/public/less/website.less

@@ -221,9 +221,13 @@ fieldset {
 }
 
 .page-container {
-	padding: 0px;
+	display: flex;
 	max-width: 970px;
-	margin: auto;
+	margin: 0 auto;
+
+	@media(max-width: @screen-xs) {
+		flex-direction: column-reverse;
+	}
 }
 
 .page-max-width {
@@ -241,12 +245,11 @@ fieldset {
 .web-sidebar {
 	position: relative;
 
-	.sidebar-item {
+	.sidebar-item:not(:last-child) {
 		margin: 0px;
 		padding-bottom: 12px;
 		border: none;
 		color: @text-muted;
-		font-size: 12px;
 
 		.badge {
 			font-weight: normal;
@@ -255,21 +258,22 @@ fieldset {
 	}
 
 	.sidebar-item a {
-		color: @text-color !important;
-	}
+		color: @text-muted;
 
-	.sidebar-item a.active {
-		color: @text-color !important;
-		font-weight: 500 !important;
+		&.active {
+			color: @text-color;
+		}
 	}
 
 	.sidebar-items {
-		// margin-top:30px;
-		margin-bottom:30px;
 		.title{
 			font-size: 14px;
 			font-weight: bold;
 		}
+
+		ul {
+			margin-bottom: 0;
+		}
 	}
 }
 
@@ -472,15 +476,32 @@ a.active {
 	margin-top: 60px;
 }
 
-.sidebar-block, .page-content {
-	padding-top: 30px;
-	padding-bottom: 50px;
-	//width: 20%;
+.sidebar-block {
+	flex: 1;
+	font-size: @text-medium;
+	border-right: 1px solid @border-color;
+	padding: 30px;
+	padding-left: 0px;
+
+	@media(max-width: @screen-xs) {
+		font-size: @text-regular;
+		border-right: none;
+		border-top: 1px solid @border-color;
+		padding-left: 20px;
+	}
+}
+
+.page-content {
+	flex: 6;
+
+	h1:first-child {
+		margin-top: 0;
+	}
 }
 
 .page-content.with-sidebar {
-	padding-left: 50px;
-	//width: 80%;
+	padding: 30px;
+	padding-left: 40px;
 }
 
 .your-account-info {
@@ -493,12 +514,6 @@ a.active {
 	}
 	.sidebar-block {
 		width: 100%;
-
-		.web-sidebar {
-			margin: 0px -15px;
-			padding: 0px 30px;
-			border-bottom: 1px solid @border-color;
-		}
 	}
 	.page-content.with-sidebar {
 		width: 100%;

frappe/templates/web.html

@@ -6,13 +6,12 @@
 	data-path="{{ pathname }}"
 	{%- if page_or_generator=="Generator" %}
 		data-doctype="{{ doctype }}"{% endif %}>
-	<div class="row {% if show_sidebar %}vert-line{% endif %}">
 		{% if show_sidebar %}
-			<div class="col-sm-3 sidebar-block">
+			<div class="sidebar-block">
 				{% include "templates/includes/web_sidebar.html" %}
 			</div>
 		{% endif %}
-		<div class="{% if show_sidebar %}page-content with-sidebar col-sm-9{% else %} page-content col-sm-12 {% endif %}">
+		<div class="{% if show_sidebar %}page-content with-sidebar{% else %} page-content {% endif %}">
 			<div class="page-content-wrapper">
 				<div class="row page-head">
 					<div class='col-sm-12'>
@@ -50,6 +49,5 @@
 			</div>
 			<!-- sidebar ends -->
 		</div>
-	</div>
 </div>
 {% endblock %}