iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: iot:2cf3fb28523d62d9fa4e3a8efcf98b89ebfc504e
Branches Tags
iot:main
...
compare: iot:0b341ad6ddbf4636c124c46b20aae52024eb691a
Branches Tags
iot:main

2 Commits
2cf3fb2852 ... 0b341ad6dd

Author SHA1 Message Date
Patrick Balsiger
0b341ad6dd fix: capabilities endpoint 2025-09-13 13:46:30 +02:00
Patrick Balsiger
103aeabea7 Fix mobile navigation light theme 
- Replace hardcoded dark colors in main.css with CSS variables
- Add comprehensive light theme overrides for mobile navigation
- Implement cool glass-morphism styling for mobile expanded state
- Ensure proper contrast and readability on all screen sizes
- Add cache-busting parameter to theme.css for browser refresh

Mobile navigation now properly displays light theme when expanded.
 2025-09-06 14:02:48 +02:00
6 changed files with 479 additions and 31 deletions
Expand all files Collapse all files

2
index.js
View File

@@ -466,7 +466,7 @@ app.get('/api/node/status', async (req, res) => {
});
// Proxy endpoint to get node capabilities (optionally for a specific node via ?ip=)
app.get('/api/capabilities', async (req, res) => {
app.get('/api/node/capabilities', async (req, res) => {
try {
const { ip } = req.query;

2
public/index.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPORE UI</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/theme.css">
<link rel="stylesheet" href="styles/theme.css?v=1757159926">
</head>
<body>

2
public/scripts/api-client.js
View File

@@ -81,7 +81,7 @@ class ApiClient {
}
async getCapabilities(ip) {
return this.request('/api/capabilities', { method: 'GET', query: ip ? { ip } : undefined });
return this.request('/api/node/capabilities', { method: 'GET', query: ip ? { ip } : undefined });
}
async callCapability({ ip, method, uri, params }) {

25
public/styles/main.css
View File

@@ -2271,7 +2271,7 @@ p {
/* Lighter Tab Theme (final overrides) */
.tabs-container {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--border-primary);
}
.tabs-header {
@@ -2299,7 +2299,7 @@ p {
}
.tab-content {
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--border-primary);
background: rgba(255, 255, 255, 0.08);
}
@@ -2562,8 +2562,8 @@ p {
top: 100%;
left: 0;
right: 0;
background: linear-gradient(135deg, #1c2a38 0%, #283746 50%, #1a252f 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
background: var(--bg-primary);
border: 1px solid var(--border-primary);
border-radius: 12px;
padding: 0.5rem;
gap: 0.25rem;
@@ -2690,8 +2690,8 @@ p {
}
.member-overlay-content {
background: linear-gradient(135deg, #1c2a38 0%, #283746 50%, #1a252f 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
background: var(--bg-primary);
border: 1px solid var(--border-primary);
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
max-width: 800px;
@@ -2792,9 +2792,6 @@ p {
height: 20px;
}
.member-overlay-body {
padding: 24px;
}
.member-overlay-section {
margin-bottom: 24px;
@@ -2821,10 +2818,6 @@ p {
border-bottom: none;
}
.member-overlay-body .member-card .member-details {
padding: 0px 24px;
}
/* Hide expand icon in overlay since card is always expanded */
.member-overlay-body .member-card .expand-icon {
display: none;
@@ -2951,7 +2944,7 @@ p {
}
.member-overlay-body {
padding: 20px;
padding: 0px;
}
.member-overlay-actions {
@@ -3013,10 +3006,6 @@ p {
max-height: calc(90vh - 80px);
}
.member-overlay-body .member-card .member-details {
padding: 0 12px;
}
/* Further compact layout for very small screens */
.member-overlay-header .member-info .member-row-1 {
gap: 0.25rem;

477
public/styles/theme.css
View File

@@ -531,11 +531,6 @@
}
[data-theme="light"] .member-overlay-body .member-card .member-details {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(12px);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 8px rgba(148, 163, 184, 0.06);
}
@@ -629,10 +624,6 @@
}
[data-theme="dark"] .member-overlay-body .member-card .member-details {
background: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .member-overlay-body .detail-section-title {
@@ -687,3 +678,471 @@
backdrop-filter: blur(35px);
}
}
/* Enhanced Mobile Responsive Adjustments for Light Theme */
@media (max-width: 768px) {
[data-theme="light"] .main-navigation {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(30px);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.12);
}
[data-theme="light"] .nav-tab {
background: transparent;
border: 1px solid transparent;
backdrop-filter: none;
color: var(--text-secondary);
padding: 0.75rem 1rem;
}
[data-theme="light"] .nav-tab:hover {
background: rgba(255, 255, 255, 0.12);
border: 1px solid transparent;
color: var(--text-primary);
}
[data-theme="light"] .nav-tab.active {
background: rgba(255, 255, 255, 0.25);
border: 1px solid var(--accent-secondary);
color: var(--text-primary);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}
[data-theme="light"] .cluster-status {
background: linear-gradient(135deg, rgba(5, 150, 105, 0.18) 0%, rgba(5, 150, 105, 0.12) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(5, 150, 105, 0.3);
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.12);
color: #059669;
}
[data-theme="light"] .theme-switcher {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(25px);
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.1);
}
[data-theme="light"] .theme-switcher:hover {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(148, 163, 184, 0.4);
box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15);
}
[data-theme="light"] .view-content {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(25px);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.12);
/* Enhanced Mobile Responsive Adjustments for Light Theme */
@media (max-width: 768px) {
[data-theme="light"] .main-navigation {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(30px);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.12);
}
[data-theme="light"] .nav-tab {
background: transparent;
border: 1px solid transparent;
backdrop-filter: none;
color: var(--text-secondary);
padding: 0.75rem 1rem;
}
[data-theme="light"] .nav-tab:hover {
background: rgba(255, 255, 255, 0.12);
border: 1px solid transparent;
color: var(--text-primary);
}
[data-theme="light"] .nav-tab.active {
background: rgba(255, 255, 255, 0.25);
border: 1px solid var(--accent-secondary);
color: var(--text-primary);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}
[data-theme="light"] .cluster-status {
background: linear-gradient(135deg, rgba(5, 150, 105, 0.18) 0%, rgba(5, 150, 105, 0.12) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(5, 150, 105, 0.3);
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.12);
color: #059669;
}
[data-theme="light"] .theme-switcher {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(25px);
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.1);
}
[data-theme="light"] .theme-switcher:hover {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(148, 163, 184, 0.4);
box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15);
}
[data-theme="light"] .view-content {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(25px);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.12);
}
[data-theme="light"] .cluster-section,
[data-theme="light"] .firmware-section {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(30px);
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15);
}
}
@media (max-width: 480px) {
[data-theme="light"] .main-navigation {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(35px);
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15);
}
[data-theme="light"] .nav-tab {
padding: 0.6rem 0.8rem;
font-size: 0.9rem;
}
[data-theme="light"] .nav-tab.active {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
}
[data-theme="light"] .cluster-status {
background: linear-gradient(135deg, rgba(5, 150, 105, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%);
backdrop-filter: blur(25px);
border: 1px solid rgba(5, 150, 105, 0.35);
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.15);
}
[data-theme="light"] .theme-switcher {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(30px);
border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.12);
}
[data-theme="light"] .view-content {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(30px);
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15);
}
}
/* Mobile Navigation Expanded State - Light Theme */
@media (max-width: 768px) {
[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 50%, rgba(241, 245, 249, 0.95) 100%);
backdrop-filter: blur(25px);
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15);
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary);
backdrop-filter: none;
margin-bottom: 0.25rem;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab:hover {
background: rgba(255, 255, 255, 0.15);
border: 1px solid transparent;
color: var(--text-primary);
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.25);
border: 1px solid var(--accent-secondary);
color: var(--text-primary);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}
[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(148, 163, 184, 0.25);
color: var(--text-secondary);
backdrop-filter: blur(15px);
}
[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(148, 163, 184, 0.35);
color: var(--text-primary);
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.1);
}
}
@media (max-width: 480px) {
[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 50%, rgba(241, 245, 249, 0.98) 100%);
backdrop-filter: blur(30px);
border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 12px 40px rgba(148, 163, 184, 0.2);
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
padding: 0.75rem 1rem;
font-size: 0.95rem;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
}
[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(148, 163, 184, 0.3);
backdrop-filter: blur(20px);
}
[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(148, 163, 184, 0.4);
box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15);
}
}
/* Mobile Navigation Expanded State - Light Theme (Higher Specificity) */
@media (max-width: 768px) {
[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 50%, rgba(241, 245, 249, 0.95) 100%) !important;
backdrop-filter: blur(25px) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15) !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
background: transparent !important;
border: 1px solid transparent !important;
color: var(--text-secondary) !important;
backdrop-filter: none !important;
margin-bottom: 0.25rem !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid transparent !important;
color: var(--text-primary) !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.25) !important;
border: 1px solid var(--accent-secondary) !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15) !important;
}
[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(148, 163, 184, 0.25) !important;
color: var(--text-secondary) !important;
backdrop-filter: blur(15px) !important;
}
[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.1) !important;
}
}
@media (max-width: 480px) {
[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 50%, rgba(241, 245, 249, 0.98) 100%) !important;
backdrop-filter: blur(30px) !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
box-shadow: 0 12px 40px rgba(148, 163, 184, 0.2) !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
padding: 0.75rem 1rem !important;
font-size: 0.95rem !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2) !important;
}
[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
backdrop-filter: blur(20px) !important;
}
[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.18) !important;
border: 1px solid rgba(148, 163, 184, 0.4) !important;
box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15) !important;
}
}
/* Ultra-specific mobile navigation override for light theme */
@media (max-width: 768px) {
html[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 50%, rgba(241, 245, 249, 0.95) 100%) !important;
backdrop-filter: blur(25px) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15) !important;
}
html[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
background: transparent !important;
border: 1px solid transparent !important;
color: var(--text-secondary) !important;
backdrop-filter: none !important;
margin-bottom: 0.25rem !important;
}
html[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid transparent !important;
color: var(--text-primary) !important;
}
html[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.25) !important;
border: 1px solid var(--accent-secondary) !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15) !important;
}
html[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(148, 163, 184, 0.25) !important;
color: var(--text-secondary) !important;
backdrop-filter: blur(15px) !important;
}
html[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.1) !important;
}
}
@media (max-width: 480px) {
html[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 50%, rgba(241, 245, 249, 0.98) 100%) !important;
backdrop-filter: blur(30px) !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
box-shadow: 0 12px 40px rgba(148, 163, 184, 0.2) !important;
}
html[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
padding: 0.75rem 1rem !important;
font-size: 0.95rem !important;
}
html[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2) !important;
}
html[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
backdrop-filter: blur(20px) !important;
}
html[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.18) !important;
border: 1px solid rgba(148, 163, 184, 0.4) !important;
box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15) !important;
}
}
/* Mobile Navigation Override - Light Theme */
@media (max-width: 768px) {
[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 50%, rgba(241, 245, 249, 0.95) 100%) !important;
backdrop-filter: blur(25px) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15) !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
background: transparent !important;
border: 1px solid transparent !important;
color: var(--text-secondary) !important;
backdrop-filter: none !important;
margin-bottom: 0.25rem !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid transparent !important;
color: var(--text-primary) !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.25) !important;
border: 1px solid var(--accent-secondary) !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15) !important;
}
[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(148, 163, 184, 0.25) !important;
color: var(--text-secondary) !important;
backdrop-filter: blur(15px) !important;
}
[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 16px rgba(148, 163, 184, 0.1) !important;
}
}
@media (max-width: 480px) {
[data-theme="light"] .main-navigation.mobile-open .nav-left {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 50%, rgba(241, 245, 249, 0.98) 100%) !important;
backdrop-filter: blur(30px) !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
box-shadow: 0 12px 40px rgba(148, 163, 184, 0.2) !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab {
padding: 0.75rem 1rem !important;
font-size: 0.95rem !important;
}
[data-theme="light"] .main-navigation.mobile-open .nav-left .nav-tab.active {
background: rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2) !important;
}
[data-theme="light"] .burger-btn {
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
backdrop-filter: blur(20px) !important;
}
[data-theme="light"] .burger-btn:hover {
background: rgba(255, 255, 255, 0.18) !important;
border: 1px solid rgba(148, 163, 184, 0.4) !important;
box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15) !important;
}
}

2
src/client/index.js
View File

@@ -89,7 +89,7 @@ class SporeApiClient {
* @returns {Promise<Object>} Capabilities response
*/
async getCapabilities() {
return this.request('GET', '/api/capabilities');
return this.request('GET', '/api/node/capabilities');
}
/**