Overall project list page layout; flex-based, i.e. needs lots of testing

services/web/app/views/project/list.pug

@@ -56,8 +56,8 @@ block content
 							ng-click="showAll();"
 						) Show all
 
-		.row(ng-cloak)
-			span(ng-if="projects.length > 0")
+		.row.project-list-row(ng-cloak)
+			.project-list-container(ng-if="projects.length > 0")
 				aside.project-list-sidebar.col-md-2.col-xs-3
 					include ./list/side-bar
 
@@ -65,7 +65,7 @@ block content
 					include ./list/notifications
 					include ./list/project-list
 			
-			span(ng-if="projects.length === 0")
+			.project-list-empty(ng-if="projects.length === 0")
 				.col-md-offset-2.col-md-8.col-md-offset-2.col-xs-8
 					include ./list/empty-project-list
 

services/web/public/stylesheets/app/project-list.less

@@ -18,21 +18,40 @@
 }
 
 .project-list-page {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
 	position: relative;
 	padding-top: 0;
 	padding-bottom: 0;
+	width: 100%;
 }
 
-	.project-list-sidebar {
-		background-color: @sidebar-bg;
-		padding-top: @content-margin-top;
-		padding-bottom: @content-margin-top;	
-	} 
-
-	.project-list-main {
-		padding-top: @content-margin-top;
-		padding-bottom: @content-margin-top;	
+	.project-list-row {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
 	}
+		.project-list-container {
+			display: flex;
+			align-items: stretch;
+			flex-grow: 1;
+		}
+
+		.project-list-empty {
+
+		}
+
+		.project-list-sidebar {
+			background-color: @sidebar-bg;
+			padding-top: @content-margin-top;
+			padding-bottom: @content-margin-top;	
+		} 
+
+		.project-list-main {
+			padding-top: @content-margin-top;
+			padding-bottom: @content-margin-top;	
+		}
 
 .project-header {
 	.btn-group > .btn {

services/web/public/stylesheets/components/navbar.less

@@ -384,7 +384,7 @@
     position: absolute;
     top: 5px;
     bottom: 5px;
-    width: 180px;
+    width: @navbar-brand-width;
     padding: 0;
     background-image: @navbar-brand-image-url;
     background-size: contain;

services/web/public/stylesheets/core/_common-variables.less

@@ -795,7 +795,7 @@
 @content-alt-bg-color: lighten(@gray-lightest, 2.5%);
 
 @navbar-default-padding: 1rem 2rem;
-
+@navbar-brand-width: 180px;
 @navbar-btn-font-size: @font-size-base * 0.8;
 @navbar-btn-border-radius: @border-radius-base;
 @navbar-btn-font-weight: 700;
@@ -847,6 +847,10 @@
 @folders-tag-menu-hover: @gray-light;
 @folders-untagged-line-height: 1.7;
 
+@footer-link-color: @link-color;
+@footer-link-hover-color: @link-hover-color;
+@footer-bg-color: transparent;
+
 @btn-border-width: 1px;        
 @btn-border-bottom-width: 2px; 
 

services/web/public/stylesheets/core/ol-variables.less

@@ -18,6 +18,7 @@
 @ol-type-color  : @ol-blue-gray-3;
 
 // Navbar customization
+@navbar-brand-width     : 130px;
 @navbar-default-color   : #FFF;
 @navbar-default-bg      : @ol-blue-gray-6;
 @navbar-default-border  : transparent;
@@ -128,6 +129,12 @@
 @folders-tag-menu-hover         : rgba(0, 0, 0, .1);
 @folders-tag-menu-active-hover  : rgba(0, 0, 0, .1);
 @folders-untagged-line-height   : @folders-menu-line-height;
+
+// Footer
+@footer-bg-color                : #FFF;
+@footer-link-color              : @ol-green;
+@footer-link-hover-color        : @ol-dark-green;
+
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.

services/web/public/stylesheets/core/scaffolding.less

@@ -29,6 +29,9 @@ body {
   line-height: @line-height-base;
   color: @text-color;
   background-color: @body-bg;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 // Reset fonts for relevant elements