From 2bfa60642e142296f080d67af49e123208e3416d Mon Sep 17 00:00:00 2001
From: Gabor PEK <gabor.pek@avatao.com>
Date: Thu, 8 Mar 2018 13:43:53 +0100
Subject: [PATCH] Add simple and more easy to use grid layout framework

---
 src/app/dashboard/dashboard.component.html | 12 ++----
 src/app/dashboard/dashboard.component.scss | 49 ++++++++++------------
 src/app/messages/messages.component.scss   |  2 -
 3 files changed, 25 insertions(+), 38 deletions(-)

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 8f432cd..d18fd75 100755
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,13 +1,7 @@
 <app-header></app-header>
 <div class="tao-grid-main-components">
-  <div class="tao-grid-main-left-components">
-    <div class="tao-grid-inner-left-components">
-      <div class="tao-messages-component"><app-messages></app-messages></div>
-      <div class="tao-web-component tao-grid-top-left"><app-login></app-login></div>
-    </div>
-    <div><app-terminal></app-terminal></div>
-  </div>
+  <div class="tao-messages-component"><app-messages></app-messages></div>
+  <div class="tao-web-component tao-grid-top-left"><app-login></app-login></div>
   <div class="tao-webide-component"><app-webide></app-webide></div>
-
+  <div class="tao-terminal-component"><app-terminal></app-terminal></div>
 </div>
-
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index ea554fd..31c8ee3 100755
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -140,42 +140,37 @@ $tao-gray-900: #000000;
 $tao-navbar-height: 67px;
 
 .tao-grid-main-components {
-  display: grid;
-  margin-top: $tao-navbar-height;
-  grid-template-columns: 3fr 2fr;
-  grid-column-gap: 0;
-  width: 100%;
-}
 
-
-.tao-grid-main-left-components {
   display: grid;
-  width: 100%;
+  padding-top: $tao-navbar-height;
+  width: 100vw;
   height: 100vh;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr 1fr;
-  grid-row-gap: 0;
-}
-
-.tao-grid-inner-left-components {
-  display: grid;
-  width: 100%;
-  grid-template-columns: 1fr 2fr;
-  grid-auto-rows: auto;
-  grid-template-rows: auto;
-}
-
-.tao-messages-component {
-  background-color: $tao-gray-50;
-  padding: $space;
-  height: calc(50vh - 10px);
-
+  justify-content: center;
+  align-content: center;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(5, 1fr)
 }
 
 .tao-web-component {
   padding: $space;
+  grid-column: 2 / 4;
+  grid-row: 1 / 4;
+}
+
+.tao-messages-component {
+  padding: $space;
+  background-color: $tao-gray-50;
+  grid-column: 1 / 2;
+  grid-row: 1 / 4;
 }
 
 .tao-webide-component {
   background-color: $tao-plum-900;
+  grid-column: 4 / -1;
+  grid-row: 1 / -1;
+}
+
+.tao-terminal-component {
+  grid-row: 4 / -1;
+  grid-column: 1 / 4;
 }
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss
index 3506892..54ce972 100755
--- a/src/app/messages/messages.component.scss
+++ b/src/app/messages/messages.component.scss
@@ -150,8 +150,6 @@ $font-size-base:          14px;
 
 
 .tao-messages-main {
-  display: block;
-
   h5 {
     margin-bottom: $small;
     color: $tao-blue-500;