Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 04:01:58 +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 a75cc3f207
commit 16f5764f74
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 *ngFor="let g of groupsArr">
<ion-item-divider></ion-item-divider>
<div *ngFor="let r of rowsArr" class="post">
<div class="label"></div>
<div class="note"></div>
</div>
</ng-container>
<ion-item-group>
<ng-container *ngFor="let g of groupsArr">
<ion-item-divider>
<ion-skeleton-text style="width: 15%"></ion-skeleton-text>
</ion-item-divider>
<ion-item *ngFor="let r of rowsArr">
<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 *ngIf="!groups">
<div *ngFor="let r of rowsArr" class="post">
<div class="label"></div>
<div class="note"></div>
</div>
<ion-item *ngFor="let r of rowsArr">
<ion-label>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</ion-label>
<ion-note slot="end">
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</ion-note>
</ion-item>
</ng-container>

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

@@ -1,44 +1,3 @@
$base-color: #3e3e3e;
$shine-color: #454545;
$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; }
}
ion-note {
width: 50%;
}