Add horizontal view, change header layout and fix webide position problems

src/app/dashboard/dashboard.component.html

@@ -1,5 +1,5 @@
-<app-header></app-header>
 <div class="tfw-grid-main-components">
+  <div class="tfw-header"><app-header></app-header></div>
   <div class="tfw-messages"><app-messages></app-messages></div>
   <div class="tfw-web tao-grid-top-left"><app-login></app-login></div>
   <div class="tfw-webide"><app-webide></app-webide></div>

src/app/dashboard/dashboard.component.scss

@@ -1,29 +1,46 @@
 $space: 24px;
+$small: 0.75 * $space;
 
-$tao-plum-900: #272F4C;
-$tao-gray-50:  #FAFAFA;
 
 $tao-navbar-height: 67px;
 
-$layout-template: "default";  // Change this to switch template
+$tao-plum-900: #272F4C;
+$tao-gray-50:  #FAFAFA;
+$tao-gray-100: #F2F2F2;
+$tao-gray-500: #555555;
+
+
+// Change this to switch template. Options: 'default', 'vraw', 'hraw'
+$layout-template: 'hraw';
 
 $default-layout: (
-  'messages': (1, 2, 1, 4),
+  'header': (1, 2, 1, 2),
+  'messages': (1, 2, 2, 10),
   'webide': (4, -1, 1, -1),
-  'terminal': (1, 4, 4, -1),
-  'web': (2, 4, 1, 4)
+  'terminal': (1, 4, 10, -1),
+  'web': (2, 4, 1, 10)
 );
 
-$raw-layout: (
-  'messages': (1, 2, 1, -1),
+$vraw-layout: (
+  'header': (1, 2, 1, 2),
+  'messages': (1, 2, 2, -1),
   'webide': (4, -1, 1, -1),
   'terminal': (2, 4, 1, -1),
   'web': (),
 );
 
+$hraw-layout: (
+  'header': (1, 2, 1, -1),
+  'messages': (1, 2, 2, -1),
+  'webide': (2, -1, 1, 10),
+  'terminal': (2, -1, 10, -1),
+  'web': (),
+);
+
 $layout: (
-  "default": $default-layout,
-  "raw": $raw-layout
+  'default': $default-layout,
+  'vraw': $vraw-layout,
+  'hraw': $hraw-layout
 );
 
 @mixin position-grid-items($map, $sel) {
@@ -48,25 +65,38 @@ $layout: (
 }
 
 .tfw-grid-main-components {
-  overflow-y: hidden;
+ // overflow-y: visible;
   display: grid;
-  padding-top: $tao-navbar-height;
   width: 100vw;
   height: 100vh;
   justify-content: center;
   align-content: center;
   grid-template-columns: repeat(5, 1fr);
-  grid-template-rows: repeat(5, 1fr);
+  grid-template-rows: repeat(15, 1fr);
 
   @include position-grid-items(map_get($layout,$layout-template),'.tfw-');
 
-  .tfw-web {
-    padding: $space;
+  .tfw-header {
+    padding: $small;
+    background-color: $tao-gray-50;
+    height: $tao-navbar-height;
   }
 
   .tfw-messages {
     padding: $space;
     background-color: $tao-gray-50;
+    overflow-y: scroll;
+
+    @if ($layout-template != 'default') {
+      max-height: 95vmin;
+    }
+    @else {
+      max-height: 55vmin;
+    }
+  }
+
+  .tfw-web {
+    padding: $space;
   }
 
   .tfw-webide {
@@ -74,6 +104,16 @@ $layout: (
   }
 
   .tfw-terminal {
-  }
+    border: 1px solid $tao-plum-900;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
 
+    .xterm .xterm-viewport {
+      height: 100vmin;
+    }
+
+
+
+  }
 }

src/app/header/header.component.html

@@ -1,11 +1,4 @@
-<nav class="navbar navbar-default navbar-expand-md navbar-light tfw-navbar fixed-top">
-  <div class="tfw-grid-navbar">
-<!--    <ul class="navbar-nav tao-grid-center-right">
-      <li class="nav-item tao-header-title">an</li>
-    </ul>-->
-    <img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-left tfw-company-logo" alt="">
-    <ul class="navbar-nav">
-      <li class="nav-item tfw-header-title">Tutorials</li>
-    </ul>
-  </div>
-</nav>
+<div class="tfw-grid-navbar tao-grid-center-center">
+  <img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-left tfw-company-logo" alt="">
+  <span class="tfw-header-title">Tutorials</span>
+</div>

src/app/header/header.component.scss

@@ -11,14 +11,6 @@ $company-logo-width: 130px;
   font-size: $font-size-h3;
 }
 
-.tfw-navbar {
-  background-color: rgba(255, 255, 255, 0.96);
-  min-height: $tao-navbar-height;
-  box-shadow: 0px 1px 6px 0px #888;
-  margin-bottom: 12px;
-  border: 1px solid #e7e7e7;
-}
-
 .tfw-grid-navbar {
   display: grid;
   grid-template-columns: $company-logo-width 1fr;
@@ -31,29 +23,3 @@ $company-logo-width: 130px;
   width: $company-logo-width;
 }
 
-.tfw-company-logo-mobile {
-  display: none;
-  width: 130px;
-}
-
-@media (max-width: 767px) {
-  .tfw-grid-navbar {
-    grid-template-columns: 1fr;
-  }
-
-  .tfw-company-logo {
-    display: none;
-  }
-
-  .tfw-company-logo-mobile {
-    display: block;
-  }
-
-  .tfw-navbar-links {
-    justify-self: left !important;
-  }
-}
-
-.jumbotron {
-  padding: 2vh;
-}

src/app/login/login.component.html

@@ -1,4 +1,4 @@
-<div>
+<div [class.deploy-blur]="deployButtonState === 'DEPLOYING'">
   <h1>Login page</h1>
   <form #loginForm="ngForm" (submit)="onSubmit()" [hidden]="submitted">
     <div class="form-group">
@@ -23,7 +23,7 @@
         [(ngModel)]="model.password"
       >
     </div>
-    <button type="submit" class="btn btn-primary">Submit</button>
+    <button type="submit" class="btn tao-btn-primary">Submit</button>
   </form>
   <div [hidden]="!submitted">
     <p>

src/app/login/login.component.scss

@@ -0,0 +1,3 @@
+.deploy-blur {
+  filter: blur(3px);
+}

src/app/messages/messages.component.html

@@ -9,3 +9,4 @@
     <div [innerHtml]="message.message"></div>
   </div>
 </div>
+

src/app/messages/messages.component.scss

@@ -9,14 +9,21 @@ $tao-blue-500: #277EEC;
 $tao-gray-100: #F2F2F2;
 
 $tao-panel-border-radius-sm:	 8px;
+$tao-navbar-height: 67px;
+
 
 $font-size-tiny:          12px;
 $font-size-base:          14px;
 
 
+.tfw-grid-header-messages {
+
+  display: grid;
+  grid-template-rows: $tao-navbar-height auto;
+}
+
 .tfw-messages-main {
-  max-height: 50vmin;
-  overflow-y: scroll;
+
 
   h5 {
     margin-bottom: $small;

src/app/terminal/terminal.component.html

@@ -1 +1 @@
-<div #xterm class="tfw-xterm mt-3 mb-3" (window:resize)="fit()"></div>
+<div #xterm class="tfw-xterm" (window:resize)="fit()"></div>

src/app/webide/webide.component.html

@@ -1,4 +1,4 @@
-<div class="tfw-grid-container">
+<div class="tfw-grid-webide-statusbar">
   <div class="btn-group btn-group-sm flex-wrap tao-grid-center-left">
     <button *ngFor="let file of files"
             class="btn tfw-tab-btn"

src/app/webide/webide.component.scss

@@ -1,5 +1,8 @@
 $space: 24px;
 $small: 0.75 * $space;
+$tiny: 0.5 * $space;
+
+$tao-navbar-height: 67px;
 
 $tao-bright-green-100: #c5f2e4;
 $tao-bright-green-200: #a0ead3;
@@ -11,14 +14,14 @@ $tao-plum-200: #BEC7F3;
 $tao-plum-900: #272F4C;
 $tao-red-500: #FF5252;
 
-
-.tfw-grid-container {
+.tfw-grid-webide-statusbar {
   display: grid;
+  height: $tao-navbar-height;
   grid-template-columns: 8fr 1fr;
 }
 
 .tfw-ace-editor {
-  height: 100%;
+  height: calc(100% - 67px);
   width: 100%;
 }
 
@@ -45,7 +48,7 @@ $tao-red-500: #FF5252;
 }
 
 .tfw-deploy-btn-group {
-  margin: $small;
+  margin: auto $tiny;
 
   .tfw-deploy-btn {
     background: $tao-bright-green-200;
@@ -97,4 +100,3 @@ $tao-red-500: #FF5252;
 
   }
 }
-

src/assets/scss/_variables.scss

@@ -156,5 +156,4 @@ $font-size-h4:            floor(($font-size-base * 1.2));
 $font-size-h5:            floor(($font-size-base * 1.1));
 
 
-
 $tao-navbar-height: 67px;