starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-04-24 01:28:42 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat(pwa): better offline page and offline request handler

Browse Source
This commit is contained in:
Herculino Trotta
2025-01-24 14:22:30 -03:00
parent d50c84f8e6
commit dbea78cd3c
5 changed files with 206 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/styles/_animations.scss
View File

@@ -58,13 +58,21 @@
// HTMX Loading
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.show-loading.htmx-request {
@@ -103,7 +111,7 @@
}
.swing-out-top-bck {
animation: swing-out-top-bck 0.45s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
animation: swing-out-top-bck 0.45s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
}
/* ----------------------------------------------
@@ -155,7 +163,7 @@
}
.scale-in-center {
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
@@ -182,5 +190,18 @@
}
.scale-out-center {
animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes flash {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
.flashing {
animation: flash 1s infinite;
}

24
frontend/src/styles/style.scss
View File

@@ -53,3 +53,27 @@ select[multiple] {
.transaction:has(input[type="checkbox"]:checked) > .transaction-item {
background-color: $primary-bg-subtle-dark;
}
.offline {
text-align: center;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
color: #fbb700;
font-family: Arial, sans-serif;
}
.wifi-icon {
width: 100px;
height: 100px;
}
#offline-countdown {
margin-top: 20px;
font-size: 14px;
}