Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 12:11:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

use ionic skeleton text

Browse Source
This commit is contained in:
Matt Hill
2021-07-14 09:48:54 -06:00
committed by Aiden McClelland
parent 7c51117a56
commit 7253cd002e
3 changed files with 29 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
ui/src/app/components/skeleton-list/skeleton-list.component.html
View File

@@ -1,16 +1,28 @@
<ng-container *ngIf="groups"> <ng-container *ngIf="groups">
<ng-container *ngFor="let g of groupsArr"> <ion-item-group>
<ion-item-divider></ion-item-divider> <ng-container *ngFor="let g of groupsArr">
<div *ngFor="let r of rowsArr" class="post"> <ion-item-divider>
<div class="label"></div> <ion-skeleton-text style="width: 15%"></ion-skeleton-text>
<div class="note"></div> </ion-item-divider>
</div> <ion-item *ngFor="let r of rowsArr">
</ng-container> <ion-label>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</ion-label>
<ion-note slot="end">
<ion-skeleton-text animated style="width: 100%"></ion-skeleton-text>
</ion-note>
</ion-item>
</ng-container>
</ion-item-group>
</ng-container> </ng-container>
<ng-container *ngIf="!groups"> <ng-container *ngIf="!groups">
<div *ngFor="let r of rowsArr" class="post"> <ion-item *ngFor="let r of rowsArr">
<div class="label"></div> <ion-label>
<div class="note"></div> <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</div> </ion-label>
<ion-note slot="end">
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</ion-note>
</ion-item>
</ng-container> </ng-container>

47
ui/src/app/components/skeleton-list/skeleton-list.component.scss
View File

@@ -1,44 +1,3 @@
$base-color: #3e3e3e; ion-note {
$shine-color: #454545; width: 50%;
$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;
background-color: var(--ion-item-background);
border-style: solid;
border-width: 0 0 1px 0;
border-color: #262626;
.label {
float: left;
left: 30px;
width: 50%;
height: 24px;
margin: 14px 0;
border-radius: 7px;
@include background-gradient;
animation: shine-lines $animation-duration infinite linear
}
.note {
float: right;
position: relative;
right: 24px;
width: 25%;
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; }
}

6
ui/src/app/pages/server-routes/server-metrics/server-metrics.page.html
View File

@@ -8,9 +8,9 @@
</ion-header> </ion-header>
<ion-content> <ion-content>
<skeleton-list groups="3"></skeleton-list> <skeleton-list *ngIf="loading; else loaded" groups="3"></skeleton-list>
<!-- <ng-template #loaded> --> <ng-template #loaded>
<ion-item-group *ngFor="let metricGroup of metrics | keyvalue : asIsOrder"> <ion-item-group *ngFor="let metricGroup of metrics | keyvalue : asIsOrder">
<ion-item-divider class="divider">{{ metricGroup.key }}</ion-item-divider> <ion-item-divider class="divider">{{ metricGroup.key }}</ion-item-divider>
<ion-item *ngFor="let metric of metricGroup.value | keyvalue : asIsOrder"> <ion-item *ngFor="let metric of metricGroup.value | keyvalue : asIsOrder">
@@ -22,6 +22,6 @@
</ion-note> </ion-note>
</ion-item> </ion-item>
</ion-item-group> </ion-item-group>
<!-- </ng-template> --> </ng-template>
</ion-content> </ion-content>