mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2024-07-06 10:38:46 +00:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gabor PEK 2018-03-12 10:32:01 +01:00
parent 822b65462d
commit 5e0e55eb16
12 changed files with 85 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/dashboard/dashboard.component.html
View File

@ -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>

72
src/app/dashboard/dashboard.component.scss
View File

@ -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;
}
}
}

15
src/app/header/header.component.html
View File

@ -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>

34
src/app/header/header.component.scss
View File

@ -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;
}

4
src/app/login/login.component.html
View File

@ -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>

3
src/app/login/login.component.scss
View File

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

1
src/app/messages/messages.component.html
View File

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

11
src/app/messages/messages.component.scss
View File

@ -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;

2
src/app/terminal/terminal.component.html
View File

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

2
src/app/webide/webide.component.html
View File

@ -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"

12
src/app/webide/webide.component.scss
View File

@ -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;
}
}

1
src/assets/scss/_variables.scss
View File

@ -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;