Sineedge/sparqsineedge
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard UI

Browse Source
This commit is contained in:
saravanakumarkandasami 2018-11-20 16:10:55 +05:30
parent 529f5c6a2c
commit a1ec93cc06
3 changed files with 109 additions and 671 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ng6-seed/src/app/dashboard/dashboard.component.html
View File

@ -1,8 +1,6 @@
<div class="pad-wrap"> <div class="pad-wrap">
<!-- doughnut -->
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100"> <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
<mat-card> <mat-card style="min-height: 110%;">
<mat-card-title> <mat-card-title>
<div fxFlex.gt-sm="25" fxFlex="100"> <div fxFlex.gt-sm="25" fxFlex="100">
{{dashboardTitle}} {{dashboardTitle}}
@ -47,7 +45,7 @@
</mat-card-title> </mat-card-title>
<!-- <pre> Full - {{doughnutChartDataForFullPD}} Smart -{{doughnutChartDataForSmartPD}} TELE -{{doughnutChartDataForTelePD}} </pre> --> <!-- <pre> Full - {{doughnutChartDataForFullPD}} Smart -{{doughnutChartDataForSmartPD}} TELE -{{doughnutChartDataForTelePD}} </pre> -->
<mat-card-content> <mat-card-content>
<div fxLayout="row"> <div fxLayout="row" style="min-height:280px;">
<div fxFlex.gt-sm="30" fxFlex="100"> <div fxFlex.gt-sm="30" fxFlex="100">
<canvas baseChart class="chart" id="FullCanvas" name="FullCanvas" <canvas baseChart class="chart" id="FullCanvas" name="FullCanvas"
height="280px" width="280px" height="280px" width="280px"
@ -59,9 +57,8 @@
[chartType]="doughnutChartType"></canvas> [chartType]="doughnutChartType"></canvas>
<div *ngIf="total1 != 0" class="donut-inner"><span>Full - {{total1}}</span></div> <div *ngIf="total1 != 0" class="donut-inner"><span>Full - {{total1}}</span></div>
</div> </div>
<div fxFlex.gt-sm="5" fxFlex="100">
</div> <div fxFlexOffset.gt-sm="5" fxFlex.gt-sm="30" fxFlex="100">
<div fxFlex.gt-sm="30" fxFlex="100">
<canvas baseChart class="chart" id="SmartCanvas" name="SmartCanvas" <canvas baseChart class="chart" id="SmartCanvas" name="SmartCanvas"
height="280px" width="280px" height="280px" width="280px"
[data]="doughnutChartDataForSmartPD" [data]="doughnutChartDataForSmartPD"
@ -72,9 +69,7 @@
[chartType]="doughnutChartType"></canvas> [chartType]="doughnutChartType"></canvas>
<div *ngIf="total2 != 0" class="donut-inner"><span>Smart - {{total2}}</span></div> <div *ngIf="total2 != 0" class="donut-inner"><span>Smart - {{total2}}</span></div>
</div> </div>
<div fxFlex.gt-sm="5" fxFlex="100"> <div fxFlexOffset.gt-sm="5" fxFlex.gt-sm="30" fxFlex="100">
</div>
<div fxFlex.gt-sm="30" fxFlex="100">
<canvas baseChart class="chart" id="TeleCanvas" name="TeleCanvas" <canvas baseChart class="chart" id="TeleCanvas" name="TeleCanvas"
height="280px" width="280px" height="280px" width="280px"
[data]="doughnutChartDataForTelePD" [data]="doughnutChartDataForTelePD"
@ -86,11 +81,8 @@
<div *ngIf="total3 != 0" class="donut-inner"><span>Tele - {{total3}}</span></div> <div *ngIf="total3 != 0" class="donut-inner"><span>Tele - {{total3}}</span></div>
</div> </div>
</div> </div>
<div fxLayout="row"> <div fxLayout="row">
<div fxFlex.gt-sm="100" fxFlex="100"> <div fxFlex.gt-sm="100" fxFlex="100">
<br><br><br><br><br><br>
<ul class="lengend-list"> <ul class="lengend-list">
<li class="lengend-element"><span class="oval" style="background-color:#c1c1c1"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Draft</li> <li class="lengend-element"><span class="oval" style="background-color:#c1c1c1"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Draft</li>
<li class="lengend-element"><span class="oval" style="background-color:#f44336"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Triggered</li> <li class="lengend-element"><span class="oval" style="background-color:#f44336"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Triggered</li>

568
ng6-seed/src/app/dashboard/dashboard.component.scss
View File

@ -5,34 +5,17 @@ $p: 12px;
mat-card-title{ mat-card-title{
background-color:#E00201 !important; background-color:#E00201 !important;
color:#fff; color:#fff;
//padding-bottom: 1rem;
//margin-bottom: 0px;
} }
.mat-input-wrapper { .mat-input-wrapper {
background: #fff; background: #fff;
} }
// .example-form {
// min-width: 150px;
// max-width: 500px;
// width: 95%;
// }
li li
{ {
display:block; display:inline;
float:left; //float:left;
} }
//::ng-deep {
// .mat-form-field-appearance-outline .mat-form-field-outline {
// color: white;
//}
//mat-form-field {
// .mat-hint, input, ::placeholder, .mat-form-field-label {
// color: white;
//}
//}
//}
.example-full-width { .example-full-width {
width: 95%; width: 95%;
} }
@ -49,23 +32,21 @@ li
.lengend-list { .lengend-list {
list-style-type: none; list-style-type: none;
margin: 0; //margin: 0;
padding: 0; // padding: 0;
overflow: hidden; overflow: hidden;
text-align:justify; text-align:justify;
} }
.lengend-element { .lengend-element {
font-size: 1rem; //font-size: 1rem;
padding-right: 3%; padding-right: 3%;
} }
.donut-inner{ .donut-inner{
margin-top: -171px; margin-top: -171px;
margin-left: 120px; margin-left: 120px;
//margin-bottom: 154px;
//margin-top: -221px;
//margin-left: 145px;
} }
.donut-inner h5 { .donut-inner h5 {
@ -77,545 +58,10 @@ li
font-size:1rems; font-size:1rems;
} }
// .profile {
// position: relative;
// width: 100%;
// height: 100%;
// background: rgba(white, .25);
// border-radius: 2px;
// overflow: hidden;
// box-shadow: 0 0 20px rgba(darken($red, 40%), .2);
// &.pre-enter {
// transform-origin: center center;
// transform: scaleY(0);
// .avatar {
// transform-origin: center top;
// transform: scaleY(0);
// }
// h1,
// h2,
// a.follow,
// a.link {
// opacity: 0;
// transform: translateY(300px);
// }
// }
// &.on-enter {
// animation: scaleYIn 1000ms ease-out forwards;
// .avatar {
// animation: scaleYIn-small 750ms ease-out forwards 1000ms;
// }
// h1,
// h2,
// a.follow,
// a.link {
// opacity: 1;
// animation: slideInUp 1000ms ease-out forwards;
// }
// h1 {
// animation-delay: 1050ms;
// }
// h2 {
// animation-delay: 1100ms;
// }
// a.follow {
// animation-delay: 1250ms;
// }
// li {
// &:nth-child(1) {
// a.link {
// animation-delay: 1300ms;
// }
// }
// &:nth-child(2) {
// a.link {
// animation-delay: 1350ms;
// }
// }
// &:nth-child(3) {
// a.link {
// animation-delay: 1400ms;
// }
// }
// }
// }
// }
// .background {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// background: white;
// border-radius: 2px;
// }
// .avatar,
// .info {
// width: 100%;
// height: 50%;
// }
// .avatar {
// background: url('../../assets/images/1.jpg') no-repeat center center / cover;
// clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
// }
// .prof-list {
// li {
// display: inline-block;
// list-style: none;
// }
// }
// .info {
// display: flex;
// flex-flow: row wrap;
// align-items: center;
// align-content: center;
// justify-content: center;
// position: relative;
// text-align: center;
// h1 {
// padding: $p $p 0;
// width: 100%;
// font-size: 24px;
// font-weight: 800;
// letter-spacing: 2px;
// text-transform: uppercase;
// }
// h2,
// a.follow {
// display: block;
// border-radius: 2px;
// padding: $p/2;
// color: white;
// font-size: 12px;
// font-weight: 500;
// letter-spacing: 1px;
// text-transform: uppercase;
// }
// h2 {
// background: $red;
// background: linear-gradient(135deg, rgba(#f5825f, 1) 0%, rgba(#f5005f, 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5825f', endColorstr='#f5005f', GradientType=1);
// }
// a.follow {
// margin-left: $p;
// background: $blue;
// background: linear-gradient(135deg, rgba(#05c8e0, 1) 0%, rgba(#057fe0, 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05c8e0', endColorstr='#057fe0', GradientType=1);
// &:hover,
// &:focus {
// background: #05c8e0;
// background: linear-gradient(135deg, rgba(lighten(#05c8e0, 10%), 1) 0%, rgba(lighten(#057fe0, 10%), 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#05c8e0, 10%)', endColorstr='lighten(#057fe0, 10%)', GradientType=1);
// }
// &:active {
// background: #057fe0;
// background: linear-gradient(135deg, rgba(darken(#05c8e0, 5%), 1) 0%, rgba(darken(#057fe0, 5%), 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#05c8e0, 5%)', endColorstr='darken(#057fe0, 5%)', GradientType=1);
// }
// }
// ul {
// display: flex;
// justify-content: center;
// padding: $p/2;
// width: 100%;
// li {
// padding: $p/2;
// }
// }
// a.link {
// display: block;
// border-radius: 100%;
// background: $blue;
// width: 30px;
// height: 30px;
// line-height: 30px;
// display: block;
// }
// }
// a.link {
// &.portfolio {
// background: #f5c8bf;
// background: linear-gradient(135deg, rgba(#f5c8bf, 1) 0%, rgba(#f58dbf, 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5c8bf', endColorstr='#f58dbf', GradientType=1);
// box-shadow: inset 0 0 10px rgba(#f58dbf, .5);
// &:hover,
// &:focus {
// background: lighten(#f5c8bf, 5%);
// background: linear-gradient(135deg, rgba(lighten(#f5c8bf, 5%), 1) 0%, rgba(lighten(#f58dbf, 5%), 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#f5c8bf, 5%)', endColorstr='lighten(#f58dbf, 5%)', GradientType=1);
// box-shadow: inset 0 0 10px rgba(lighten(#f58dbf, 5%), .5);
// }
// &:active {
// background: darken(#f5c8bf, 5%);
// background: linear-gradient(135deg, rgba(darken(#f5c8bf, 5%), 1) 0%, rgba(darken(#f58dbf, 5%), 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#f5c8bf, 5%)', endColorstr='darken(#f58dbf, 5%)', GradientType=1);
// box-shadow: inset 0 0 10px rgba(darken(#f58dbf, 5%), .5);
// }
// }
// &.codepen {
// background: #fcd000;
// background: linear-gradient(135deg, rgba(#fcd000, 1) 0%, rgba(#fc9a00, 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd000', endColorstr='#fc9a00', GradientType=1);
// box-shadow: inset 0 0 10px rgba(#fc9a00, .5);
// &:hover,
// &:focus {
// background: lighten(#fcd000, 5%);
// background: linear-gradient(135deg, rgba(lighten(#fcd000, 5%), 1) 0%, rgba(lighten(#fc9a00, 5%), 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#fcd000, 5%)', endColorstr='lighten(#fc9a00, 5%)', GradientType=1);
// box-shadow: inset 0 0 10px rgba(lighten(#fc9a00, 5%), .5);
// }
// &:active {
// background: darken(#fcd000, 5%);
// background: linear-gradient(135deg, rgba(darken(#fcd000, 5%), 1) 0%, rgba(darken(#fc9a00, 5%), 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#fcd000, 5%)', endColorstr='darken(#fc9a00, 5%)', GradientType=1);
// box-shadow: inset 0 0 10px rgba(darken(#fc9a00, 5%), .5);
// }
// }
// &.github {
// background: #41adc4;
// background: linear-gradient(135deg, rgba(#41adc4, 1) 0%, rgba(#4183c4, 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41adc4', endColorstr='#4183c4', GradientType=1);
// box-shadow: inset 0 0 10px rgba(#4183c4, .5);
// &:hover,
// &:focus {
// background: lighten(#41adc4, 5%);
// background: linear-gradient(135deg, rgba(lighten(#41adc4, 5%), 1) 0%, rgba(lighten(#4183c4, 5%), 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#41adc4, 5%)', endColorstr='lighten(#4183c4, 5%)', GradientType=1);
// box-shadow: inset 0 0 10px rgba(lighten(#4183c4, 5%), .5);
// }
// &:active {
// background: darken(#41adc4, 5%);
// background: linear-gradient(135deg, rgba(darken(#41adc4, 5%), 1) 0%, rgba(darken(#4183c4, 5%), 1) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#41adc4, 5%)', endColorstr='darken(#4183c4, 5%)', GradientType=1);
// box-shadow: inset 0 0 10px rgba(darken(#4183c4, 5%), .5);
// }
// }
// }
// @media only screen and (min-width: 470px) {
// .profile {
// display: flex;
// &.pre-enter {
// transform: scaleX(0);
// .avatar {
// transform-origin: left center;
// transform: scaleX(0);
// }
// h1,
// h2,
// a.follow,
// a.link {
// transform: translateX(300px);
// }
// }
// &.on-enter {
// animation-name: scaleXIn;
// .avatar {
// animation-name: scaleXIn-small;
// }
// h1,
// h2,
// a.follow,
// a.link {
// animation-name: slideInLeft;
// }
// }
// }
// .background {
// mix-blend-mode: overlay;
// }
// .avatar,
// .info {
// width: 50%;
// height: 100%;
// }
// .avatar {
// clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
// }
// }
// @media only screen and (min-width: 470px) and (min-height: 600px) {
// .profile {
// max-height: 400px;
// }
// }
// /* https://goo.gl/jIUq3E */
// @keyframes scaleXIn {
// 0% {
// transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 4.7% {
// transform: matrix3d(0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 9.41% {
// transform: matrix3d(0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 14.11% {
// transform: matrix3d(1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 18.72% {
// transform: matrix3d(1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 24.32% {
// transform: matrix3d(1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 29.93% {
// transform: matrix3d(1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 35.54% {
// transform: matrix3d(0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 41.04% {
// transform: matrix3d(0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 52.15% {
// transform: matrix3d(0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 63.26% {
// transform: matrix3d(1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 85.49% {
// transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 100% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// }
// /* https://goo.gl/auuhcg */
// @keyframes scaleYIn {
// 0% {
// transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 4.7% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 9.41% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 14.11% {
// transform: matrix3d(1, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 18.72% {
// transform: matrix3d(1, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 24.32% {
// transform: matrix3d(1, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 29.93% {
// transform: matrix3d(1, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 35.54% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 41.04% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 52.15% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 63.26% {
// transform: matrix3d(1, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 85.49% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 100% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// }
// /* https://goo.gl/dNBqrt */
// @keyframes scaleXIn-small {
// 0% {
// transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 6.31% {
// transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 12.51% {
// transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 18.82% {
// transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 25.03% {
// transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 37.54% {
// transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 50.05% {
// transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 75.08% {
// transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 100% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// }
// /* https://goo.gl/jZL0uj */
// @keyframes scaleYIn-small {
// 0% {
// transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 6.31% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 12.51% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 18.82% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 25.03% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 37.54% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 50.05% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 75.08% {
// transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// 100% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// }
// /* https://goo.gl/Ne0Mkr */
// @keyframes slideInLeft {
// 0% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 300, 0, 0, 1);
// }
// 6.31% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 184.858, 0, 0, 1);
// }
// 12.51% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 113.68, 0, 0, 1);
// }
// 18.82% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 68.663, 0, 0, 1);
// }
// 25.03% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 41.37, 0, 0, 1);
// }
// 37.54% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.382, 0, 0, 1);
// }
// 50.05% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.724, 0, 0, 1);
// }
// 75.08% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.381, 0, 0, 1);
// }
// 100% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// }
// /* https://goo.gl/MSqtd5 */
// @keyframes slideInUp {
// 0% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1);
// }
// 6.31% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 184.858, 0, 1);
// }
// 12.51% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 113.68, 0, 1);
// }
// 18.82% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.663, 0, 1);
// }
// 25.03% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 41.37, 0, 1);
// }
// 37.54% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 14.382, 0, 1);
// }
// 50.05% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.724, 0, 1);
// }
// 75.08% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.381, 0, 1);
// }
// 100% {
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// }
// }
// //wheather
// .card-wheather {
// height: 220px;
// color: #fff;
// }
// .city {
// font-size: 26px;
// }
// .date {
// font-size: 20px;
// line-height: 40px;
// }
// .sun {
// height: 70px;
// }
// .grad-blue {
// background: linear-gradient(58deg, #f44336, #673ab7);
// color: #fff;
// }
// .grad-green {
// background: linear-gradient(58deg, #009688, #673ab7);
// color: #fff;
// }
// .grad-red {
// background: linear-gradient(58deg, #f44336, #673ab7);
// color: #fff;
// }
// .card-wheather{
// padding: 2rem;
// }
// .temp {
// font-size: 50px;
// display: inline-block;
// }
mat-card-content{ mat-card-content{
min-height: 400px; min-height: 400px;
} }
.chart{ .chart{
padding: 0.8rem; padding: 0.8rem;
} }

2
ng6-seed/src/app/layouts/admin/admin-layout.component.html
View File

@ -312,7 +312,7 @@
<div class="body-container"> <div class="body-container">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
<mat-sidenav #end position="end" class="chat-panel" mode="over" opened="false"> <mat-sidenav #end position="end" mode="over" opened="false">
<div style="text-align: center;">Not Yet Scheduled</div> <div style="text-align: center;">Not Yet Scheduled</div>
<mat-tab-group [selectedIndex]="1" mat-stretch-tabs> <mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
<mat-tab> <mat-tab>