self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-23 01:27:14 +02:00
Code Issues Releases Activity

Add background color to loading photos #587

Browse Source
This commit is contained in:
Patrik J. Braun 2023-09-09 23:17:57 +02:00
parent b5a0b353e1
commit 009246707f
9 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/app/ui/albums/album/album.component.css
View File

@ -31,7 +31,7 @@ a {
border: 1px solid #333; border: 1px solid #333;
width: 180px; width: 180px;
height: 180px; height: 180px;
background-color: #bbbbbb; background-color: var(--item-background);
} }
.no-image { .no-image {

2
src/frontend/app/ui/faces/face/face.component.css
View File

@ -40,7 +40,7 @@ a {
border: 1px solid #333; border: 1px solid #333;
width: 180px; width: 180px;
height: 180px; height: 180px;
background-color: #bbbbbb; background-color: var(--item-background);
} }
.no-image { .no-image {

2
src/frontend/app/ui/gallery/directories/directory/directory.gallery.component.css
View File

@ -14,7 +14,7 @@ a {
border: 1px solid #333; border: 1px solid #333;
width: 180px; width: 180px;
height: 180px; height: 180px;
background-color: #bbbbbb; background-color: var(--item-background);
} }

4
src/frontend/app/ui/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css
View File

@ -1,7 +1,7 @@
.static { .static {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #bbbbbb; background-color: var(--item-background);
color: #7f7f7f; color: #7f7f7f;
font-size: 50px; font-size: 50px;
} }
@ -23,7 +23,7 @@
.sk-cube-grid .sk-cube { .sk-cube-grid .sk-cube {
width: calc(100% / 3); width: calc(100% / 3);
height: calc(100% / 3); height: calc(100% / 3);
background-color: #bbbbbb; background-color: var(--item-background);
float: left; float: left;
} }

4
src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css
View File

@ -19,6 +19,10 @@ img {
vertical-align: unset; vertical-align: unset;
} }
img.loading{
background: var(--item-background) ;
}
@keyframes fadein { @keyframes fadein {
from { from {
opacity: 0; opacity: 0;

2
src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
View File

@ -2,6 +2,8 @@
<img alt="{{gridMedia.media.name}}" #img [src]="thumbnail.Src" <img alt="{{gridMedia.media.name}}" #img [src]="thumbnail.Src"
(load)="loaded=true"
[class.loading]="!loaded"
*ngIf="thumbnail.Available"> *ngIf="thumbnail.Available">
<app-gallery-grid-photo-loading <app-gallery-grid-photo-loading

1
src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts
View File

@ -29,6 +29,7 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
searchEnabled = true; searchEnabled = true;
wasInView: boolean = null; wasInView: boolean = null;
loaded = false;
constructor( constructor(
private thumbnailService: ThumbnailManagerService, private thumbnailService: ThumbnailManagerService,

2
src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
View File

@ -138,7 +138,7 @@
} }
::ng-deep .lightbox-map-gallery-component-preview-loading { ::ng-deep .lightbox-map-gallery-component-preview-loading {
background-color: #bbbbbb; background-color: var(--item-background);
color: var(--bs-secondary-color-rgb); color: var(--bs-secondary-color-rgb);
} }

3
src/frontend/styles.css
View File

@ -1,3 +1,6 @@
:root{
--item-background: #bbbbbb
}
a { a {
text-decoration: none; text-decoration: none;