mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-06-28 23:55:13 +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>
<div class="container-fluid">
<div class="row tfw-first-row">
<div class="col-sm"><app-login></app-login></div>
<div class="col-sm-6"><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 class="tao-grid-components">
<div><app-messages></app-messages></div>
<div><app-login></app-login></div>
<div><app-webide></app-webide></div>
</div>

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

@ -17,9 +17,20 @@ $nano: 0.125 * $space;
$tao-navbar-height: 67px;
.tfw-first-row {
height: 40vh;
.tao-grid-components {
display: grid;
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;
}