mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-11-04 09:22:56 +00:00
Code Issues Releases Wiki Activity

Use grid layout instead of bootstrap columns

Browse Source
This commit is contained in:
Gabor PEK
2018-03-05 16:56:27 +01:00
parent e55248ab30
commit e1f0bdfb57
5 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,6 @@
<app-header></app-header> <app-header></app-header>
<div class="container-fluid"> <div class="tao-grid-components">
<div class="row tfw-first-row"> <div><app-messages></app-messages></div>
<div class="col-sm"><app-login></app-login></div> <div><app-login></app-login></div>
<div class="col-sm-6"><app-webide></app-webide></div> <div><app-webide></app-webide></div>
<div class="col-sm"><app-messages></app-messages></div>
</div>
<div class="row tfw-second-row">
<div class="col-sm-3"><app-testmessager></app-testmessager></div>
<div class="col-sm-9"><app-terminal></app-terminal></div>
</div>
</div> </div>

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

@@ -17,9 +17,20 @@ $nano: 0.125 * $space;
$tao-navbar-height: 67px; $tao-navbar-height: 67px;
.tfw-first-row { .tao-grid-components {
height: 40vh; display: grid;
margin-top: $tao-navbar-height + $space; margin-top: $tao-navbar-height + $space;
grid-template-columns: 1fr 2fr 2fr;
grid-column-gap: $space;
width: 100%;
} }
.tfw-second-row {} .tao-grid-middle-component {
display: grid;
width: 100%;
grid-template-columns: 1fr;
grid-template-rows: auto;
align-items: start;
justify-items: center;
justify-content: center;
}

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

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

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

@@ -21,7 +21,7 @@ $nano: 0.125 * $space;
// //
$tao-blue-500: #277EEC; $tao-blue-500: #277EEC;
$font-size-base: 14px; $font-size-base: 14px;
$font-size-h4: floor(($font-size-base * 1.2)); $font-size-h3: floor(($font-size-base * 1.3));
$tao-navbar-height: 67px; $tao-navbar-height: 67px;
@@ -31,7 +31,7 @@ $tao-navbar-height: 67px;
// //
.tao-header-title { .tao-header-title {
color: $tao-blue-500; color: $tao-blue-500;
font-size: $font-size-h4; font-size: $font-size-h3;
} }
.tao-navbar { .tao-navbar {
@@ -44,7 +44,7 @@ $tao-navbar-height: 67px;
.tao-grid-navbar { .tao-grid-navbar {
display: grid; display: grid;
grid-template-columns: 10fr 1fr 10fr; grid-template-columns: 1fr 1fr;
grid-column-gap: 8px; grid-column-gap: 8px;
width: 100%; width: 100%;
} }

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

@@ -1,5 +1,5 @@
.tfw-ace-editor { .tfw-ace-editor {
min-height: 30vh; min-height: 100vh;
height: 80%; height: 80%;
width: 100%; width: 100%;
overflow: auto; overflow: auto;