Skip to content

Commit 870a9c6

Browse files
rjordanrjordan
committed
Change the way online/offline display
1 parent f90635e commit 870a9c6

File tree

10 files changed

+42
-96
lines changed

10 files changed

+42
-96
lines changed

‎AI_DEVELOPMENT_NOTES.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@
4747
- **Reactive data** with createSignal/createMemo
4848
- **Clean separation** between data and presentation
4949

50+
### **UI Components**
51+
- **OfflineIndicator** - Simple text status in footer showing "Online" or "Offline"
52+
- **ResponsiveTable** - JavaScript-controlled responsive tables
53+
- **Layout** - Main layout component with header, nav, main, footer structure
54+
5055
### **File Organization**
5156
- **Element styles first** in SCSS
5257
- **Component-specific classes** grouped logically
@@ -55,7 +60,8 @@
5560
## 🚀 Build & Performance
5661

5762
### **Current Metrics** *(as of October 2025)*
58-
- **CSS bundle size**: ~12.34 kB (reduced from 16.36 kB via reorganization)
63+
- **CSS bundle size**: ~12.44 kB (reduced from 16.36 kB via reorganization)
64+
- **JS bundle size**: ~122.54 kB
5965
- **Build tool**: Vite 7.1.10
6066
- **SCSS compiler**: Dart Sass (with deprecation warnings for old color functions)
6167

‎docs/assets/index-Cs1iad7L.css‎ renamed to ‎docs/assets/index-BkP9GVF6.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/index-Cmv4S5WV.js‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎docs/assets/index-DyjEberd.js‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/virtual_pwa-register-CuZMVzpX.js‎ renamed to ‎docs/assets/virtual_pwa-register-BuWKHZXo.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<meta name="theme-color" content="#000000" />
77
<title>Aetheria World</title>
8-
<script type="module" crossorigin src="/assets/index-Cmv4S5WV.js"></script>
9-
<link rel="stylesheet" crossorigin href="/assets/index-Cs1iad7L.css">
8+
<script type="module" crossorigin src="/assets/index-DyjEberd.js"></script>
9+
<link rel="stylesheet" crossorigin href="/assets/index-BkP9GVF6.css">
1010
<link rel="manifest" href="/manifest.webmanifest"></head>
1111
<body>
1212
<noscript>You need to enable JavaScript to run this app.</noscript>

‎docs/sw.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/components/Layout.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import OfflineIndicator from './OfflineIndicator'
44
function Layout(props: RouteSectionProps) {
55
return (
66
<>
7-
<OfflineIndicator />
87
<header>
98
<div class="container">
109
<h1>🌍 Aetheria</h1>
@@ -34,7 +33,7 @@ function Layout(props: RouteSectionProps) {
3433

3534
<footer>
3635
<div class="container">
37-
<p>Generated on {new Date().toLocaleDateString()} | <a href="https://github.com/rjordan/Aetheria">View on GitHub</a></p>
36+
<p>Generated on {new Date().toLocaleDateString()} | <a href="https://github.com/rjordan/Aetheria">View on GitHub</a> | <OfflineIndicator /></p>
3837
</div>
3938
</footer>
4039
</>

‎site/src/components/OfflineIndicator.tsx‎

Lines changed: 3 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -3,65 +3,18 @@ import { pwaManager } from '../sw-manager'
33

44
function OfflineIndicator() {
55
const [isOnline, setIsOnline] = createSignal(navigator.onLine)
6-
const [showIndicator, setShowIndicator] = createSignal(false)
7-
const [updateAvailable, setUpdateAvailable] = createSignal(false)
86

97
onMount(() => {
108
// Register for online/offline events
119
pwaManager.onOfflineChange((online) => {
1210
setIsOnline(online)
13-
14-
// Show indicator briefly when status changes
15-
setShowIndicator(true)
16-
setTimeout(() => setShowIndicator(false), 5000)
1711
})
18-
19-
// Show indicator on initial offline state
20-
if (!navigator.onLine) {
21-
setShowIndicator(true)
22-
}
23-
24-
// Check for PWA update status
25-
if (pwaManager.updateAvailable) {
26-
setUpdateAvailable(true)
27-
setShowIndicator(true)
28-
}
2912
})
3013

31-
const handleUpdateClick = () => {
32-
pwaManager.updateServiceWorker()
33-
setUpdateAvailable(false)
34-
setShowIndicator(false)
35-
}
36-
3714
return (
38-
<div
39-
class={`offline-indicator ${showIndicator() ? 'visible' : ''} ${
40-
updateAvailable() ? 'update-available' : isOnline() ? 'online' : 'offline'
41-
}`}
42-
>
43-
<div class="indicator-content">
44-
{updateAvailable() ? (
45-
<>
46-
<span class="status-icon">🔄</span>
47-
<span class="status-text">Update available</span>
48-
<button class="update-button" onClick={handleUpdateClick}>
49-
Update
50-
</button>
51-
</>
52-
) : isOnline() ? (
53-
<>
54-
<span class="status-icon">🌐</span>
55-
<span class="status-text">Back online</span>
56-
</>
57-
) : (
58-
<>
59-
<span class="status-icon">📱</span>
60-
<span class="status-text">Offline mode - cached data available</span>
61-
</>
62-
)}
63-
</div>
64-
</div>
15+
<span class={`online-status ${isOnline() ? 'online' : 'offline'}`}>
16+
{isOnline() ? 'Online' : 'Offline'}
17+
</span>
6518
)
6619
}
6720

‎site/src/index.scss‎

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -691,32 +691,20 @@ p {
691691
}
692692

693693
/* Component Classes */
694-
.offline-indicator {
695-
position: fixed;
696-
bottom: 20px;
697-
right: 20px;
698-
background: $error-color;
699-
color: $white;
700-
padding: 1rem 1.5rem;
701-
border-radius: 8px;
702-
box-shadow: $shadow-medium;
703-
z-index: 1000;
694+
.online-status {
704695
font-weight: 500;
705-
animation: slideIn 0.3s ease;
696+
padding: 0.2rem 0.5rem;
697+
border-radius: 4px;
698+
font-size: 0.8rem;
706699

707-
@keyframes slideIn {
708-
from {
709-
transform: translateX(100%);
710-
opacity: 0;
711-
}
712-
to {
713-
transform: translateX(0);
714-
opacity: 1;
715-
}
700+
&.online {
701+
color: $accent-color;
702+
background: rgba(40, 167, 69, 0.1);
716703
}
717704

718-
&.online {
719-
background: $accent-color;
705+
&.offline {
706+
color: $warning-color;
707+
background: rgba(255, 193, 7, 0.1);
720708
}
721709
}
722710

0 commit comments

Comments
 (0)