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

New grid layout for dashboard. This is only one suggested template view. Use cases may need different ones

Browse Source
This commit is contained in:
Gabor PEK 2018-03-07 14:20:43 +01:00
parent 1adb32a410
commit 603cdb9911
2 changed files with 159 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/dashboard/dashboard.component.html Normal file → Executable file
View File

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

157
src/app/dashboard/dashboard.component.scss Normal file → Executable file
View File

@ -15,22 +15,161 @@ $tiny: 0.5 * $space;
$hair: 0.25 * $space;
$nano: 0.125 * $space;
// Color system
// Tao blue palette
$tao-blue-50: #F2F7FE;
$tao-blue-100: #C9DFFA;
$tao-blue-200: #A0C6F7;
$tao-blue-300: #77AEF3;
$tao-blue-400: #4E95EF;
$tao-blue-500: #277EEC;
$tao-blue-600: #2170B7;
$tao-blue-700: #195684;
$tao-blue-800: #103B5B;
$tao-blue-900: #081A2B;
// Tao sky palette
$tao-sky-50: #F1FAFD;
$tao-sky-100: #C5E9F5;
$tao-sky-200: #9AD8EE;
$tao-sky-300: #6EC7E6;
$tao-sky-400: #42B7DF;
$tao-sky-500: #19A7D8;
$tao-sky-600: #0E8BA8;
$tao-sky-700: #04647A;
$tao-sky-800: #004251;
$tao-sky-900: #002028;
// Tao phtalo palette
$tao-phtalo-50: #F2FBFC;
$tao-phtalo-100: #C8EDF1;
$tao-phtalo-200: #9FDFE6;
$tao-phtalo-300: #75D1DB;
$tao-phtalo-400: #4CC3D0;
$tao-phtalo-500: #24B6C6;
$tao-phtalo-600: #16989E;
$tao-phtalo-700: #0C7575;
$tao-phtalo-800: #034C4F;
$tao-phtalo-900: #002426;
// Tao turqoise palette
$tao-turqoise-50: #F1FBFB;
$tao-turqoise-100: #C3EFEF;
$tao-turqoise-200: #96E3E3;
$tao-turqoise-300: #68D7D7;
$tao-turqoise-400: #3BCBCB;
$tao-turqoise-500: #10BFBF;
$tao-turqoise-600: #079995;
$tao-turqoise-700: #00726F;
$tao-turqoise-800: #004C4A;
$tao-turqoise-900: #002625;
// Tao bright green palette
$tao-bright-green-50: #effbf7;
$tao-bright-green-100: #c5f2e4;
$tao-bright-green-200: #a0ead3;
$tao-bright-green-300: #7ae2c2;
$tao-bright-green-400: #55d9b0;
$tao-bright-green-500: #2fd19f;
$tao-bright-green-600: #2ab587;
$tao-bright-green-700: #248e63;
$tao-bright-green-800: #1c6844;
$tao-bright-green-900: #114431;
// Tao warm yellow palette
$tao-warm-yellow-50: #FFF8EB;
$tao-warm-yellow-100: #FFEDCE;
$tao-warm-yellow-200: #FFE0A9;
$tao-warm-yellow-300: #FFD283;
$tao-warm-yellow-400: #FFC55E;
$tao-warm-yellow-500: #FFB83B;
$tao-warm-yellow-600: #E59C3C;
$tao-warm-yellow-700: #CC8B36;
$tao-warm-yellow-800: #B2762F;
$tao-warm-yellow-900: #996526;
// Tao plum palette
$tao-plum-50: #F6F8FD;
$tao-plum-100: #DADFF8;
$tao-plum-200: #BEC7F3;
$tao-plum-300: #A2AFED;
$tao-plum-400: #8797E8;
$tao-plum-500: #6C80E3;
$tao-plum-600: #5E77BF;
$tao-plum-700: #4B5E99;
$tao-plum-800: #384672;
$tao-plum-900: #272F4C;
// Tao pink palette
$tao-pink-50: #FFF0F7;
$tao-pink-100: #FFBFDF;
$tao-pink-200: #FF8FC6;
$tao-pink-300: #FF5EAE;
$tao-pink-400: #FF2E95;
$tao-pink-500: #FF007E;
$tao-pink-600: #D8007C;
$tao-pink-700: #B20066;
$tao-pink-800: #8C0050;
$tao-pink-900: #66003A;
// Tao red palette
$tao-red-50: #FFF5F5;
$tao-red-100: #FFD4D4;
$tao-red-200: #FFB3B3;
$tao-red-300: #FF9292;
$tao-red-400: #FF7171;
$tao-red-500: #FF5252;
$tao-red-600: #E54848;
$tao-red-700: #CC3636;
$tao-red-800: #B22424;
$tao-red-900: #991919;
// Tao gray palette
$tao-gray-50: #FAFAFA;
$tao-gray-100: #F2F2F2;
$tao-gray-200: #D6D6D6;
$tao-gray-300: #A0A0A0;
$tao-gray-400: #777777;
$tao-gray-500: #555555;
$tao-gray-600: #323232;
$tao-gray-700: #232323;
$tao-gray-800: #0C0C0C;
$tao-gray-900: #000000;
$tao-navbar-height: 67px;
.tao-grid-components {
.tao-grid-main-components {
display: grid;
margin-top: $tao-navbar-height + $space;
grid-template-columns: 1fr 2fr 2fr;
grid-column-gap: $space;
margin-top: $tao-navbar-height;
grid-template-columns: 3fr 2fr;
grid-column-gap: 0;
width: 100%;
}
.tao-grid-middle-component {
.tao-grid-main-left-components {
display: grid;
width: 100%;
height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: auto;
align-items: start;
justify-items: center;
justify-content: center;
grid-template-rows: 1fr 1fr;
grid-row-gap: 0;
}
.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;
}
.tao-web-component {
padding: $space;
}