Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-31 04:23:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

skeleton list component

Browse Source
This commit is contained in:
Matt Hill
2021-07-14 00:40:36 -06:00
committed by Aiden McClelland
parent fbcaf3070e
commit 7c51117a56
9 changed files with 107 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/app/pages/apps-routes/app-metrics/app-metrics.module.ts
View File

@@ -5,6 +5,7 @@ import { IonicModule } from '@ionic/angular'
import { AppMetricsPage } from './app-metrics.page'
import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
import { SharingModule } from 'src/app/modules/sharing.module'
import { SkeletonListComponentModule } from 'src/app/components/skeleton-list/skeleton-list.component.module'
const routes: Routes = [
{
@@ -20,6 +21,7 @@ const routes: Routes = [
RouterModule.forChild(routes),
PwaBackComponentModule,
SharingModule,
SkeletonListComponentModule,
],
declarations: [AppMetricsPage],
})

15
ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.html
View File

@@ -48,20 +48,7 @@
</ion-card-title>
</ion-card-header>
<ion-card-content>
<ng-container *ngIf="loading">
<div class="post">
<div class="label"></div>
<div class="note"></div>
</div>
<div class="post">
<div class="label"></div>
<div class="note"></div>
</div>
<div class="post">
<div class="label"></div>
<div class="note"></div>
</div>
</ng-container>
<skeleton-list *ngIf="loading" rows="3"></skeleton-list>
<ion-item-group *ngIf="!loading">
<ion-item *ngFor="let metric of metrics | keyvalue : asIsOrder">
<ion-label>

43
ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.scss
View File

@@ -1,44 +1,3 @@
.metric-note {
font-size: 16px;
}
$base-color: #7b7b7b;
$shine-color: #8a8a8a;
$animation-duration: 1.2s;
@mixin background-gradient {
background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px);
background-size: 100px;
}
.post {
height: 52px;
position: relative;
left: 12px;
.label {
float: left;
left: 30px;
width: 55%;
height: 24px;
margin: 14px 0;
border-radius: 7px;
@include background-gradient;
animation: shine-lines $animation-duration infinite linear
}
.note {
float: right;
position: relative;
right: 12px;
width: 30%;
height: 24px;
margin: 14px 0;
border-radius: 7px;
@include background-gradient;
animation: shine-lines $animation-duration infinite linear
}
}
@keyframes shine-lines {
0% { background-position: -100px; }
40%, 100% { background-position: 140px; }
}
}