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

Add simple and more easy to use grid layout framework

Browse Source
This commit is contained in:
Gabor PEK 2018-03-08 13:43:53 +01:00
parent 1b9da0b03c
commit 2bfa60642e
3 changed files with 25 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,7 @@
<app-header></app-header> <app-header></app-header>
<div class="tao-grid-main-components"> <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-messages-component"><app-messages></app-messages></div>
<div class="tao-web-component tao-grid-top-left"><app-login></app-login></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-webide-component"><app-webide></app-webide></div> <div class="tao-webide-component"><app-webide></app-webide></div>
<div class="tao-terminal-component"><app-terminal></app-terminal></div>
</div> </div>

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

@ -140,42 +140,37 @@ $tao-gray-900: #000000;
$tao-navbar-height: 67px; $tao-navbar-height: 67px;
.tao-grid-main-components { .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; display: grid;
width: 100%; padding-top: $tao-navbar-height;
width: 100vw;
height: 100vh; height: 100vh;
grid-template-columns: 1fr; justify-content: center;
grid-template-rows: 1fr 1fr; align-content: center;
grid-row-gap: 0; grid-template-columns: repeat(5, 1fr);
} grid-template-rows: repeat(5, 1fr)
.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);
} }
.tao-web-component { .tao-web-component {
padding: $space; 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 { .tao-webide-component {
background-color: $tao-plum-900; background-color: $tao-plum-900;
grid-column: 4 / -1;
grid-row: 1 / -1;
}
.tao-terminal-component {
grid-row: 4 / -1;
grid-column: 1 / 4;
} }

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

@ -150,8 +150,6 @@ $font-size-base: 14px;
.tao-messages-main { .tao-messages-main {
display: block;
h5 { h5 {
margin-bottom: $small; margin-bottom: $small;
color: $tao-blue-500; color: $tao-blue-500;