Compare commits

...

4 Commits

Author SHA1 Message Date
9986b4acac UI: Improve cluster view error styling
Add scoped styles for #cluster-members-container .error: better contrast, spacing, icon; override global centering for left-aligned layout.
2025-09-02 13:25:08 +02:00
d49a586eb0 chore: remove obsolete components file 2025-08-31 18:20:45 +02:00
ab20128008 UI (mobile): prevent firmware view flicker on touch by disabling hover effects and tap highlight 2025-08-31 17:51:04 +02:00
a4736948f5 UI (mobile): fix member tile flicker on touch; compact primary node header; unify to single page scroll on mobile 2025-08-31 17:46:48 +02:00
2 changed files with 125 additions and 3125 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -3335,4 +3335,129 @@ html {
.main-navigation {
padding: 0.25rem;
}
}
@media (max-width: 768px) {
/* Use single scroll on mobile: let the page/body scroll */
body {
height: auto;
min-height: 100vh;
overflow-y: auto;
}
.container {
max-height: none;
overflow: visible;
}
.view-content,
#cluster-view.active {
max-height: none;
overflow: visible;
}
#cluster-members-container,
#firmware-container,
.firmware-nodes-list {
max-height: none;
overflow: visible;
padding-right: 0;
}
}
@media (max-width: 480px) {
/* Make primary node section more compact */
.cluster-header {
gap: 0.5rem;
padding: 0.5rem 0;
}
.primary-node-info {
gap: 0.35rem;
padding: 0.35rem 0.5rem;
}
.primary-node-label {
font-size: 0.8rem;
}
.primary-node-ip {
font-size: 0.85rem;
padding: 0.2rem 0.4rem;
}
.primary-node-refresh {
padding: 0.3rem;
}
}
/* Reduce tap highlight and flicker in firmware view */
#firmware-view,
.upload-btn,
.upload-btn-compact,
.deploy-btn,
.cap-call-btn,
.progress-refresh-btn,
.clear-btn,
.refresh-btn,
.progress-item,
.result-item,
.file-info {
-webkit-tap-highlight-color: transparent;
}
/* Disable hover-driven animations/effects on touch devices in firmware view */
@media (hover: none) {
#firmware-view .upload-btn:hover,
#firmware-view .upload-btn-compact:hover,
#firmware-view .deploy-btn:hover:not(:disabled),
#firmware-view .progress-refresh-btn:hover,
#firmware-view .cap-call-btn:hover,
#firmware-view .clear-btn:hover,
#firmware-view .refresh-btn:hover,
#firmware-view .progress-item:hover,
#firmware-view .result-item:hover,
#firmware-view .firmware-upload-progress:hover,
#firmware-view .firmware-upload-results:hover,
#firmware-view .file-info:hover {
transform: none !important;
box-shadow: none !important;
}
#firmware-view .progress-item:hover::before,
#firmware-view .result-item:hover::before {
opacity: 0 !important;
}
/* Prevent shimmer animation on deploy button hover */
#firmware-view .deploy-btn:hover:not(:disabled)::before {
left: -100% !important;
}
}
/* Cluster view specific error styling */
#cluster-members-container .error {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.9rem 1.1rem;
margin-top: 0.75rem;
border-radius: 12px;
background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.08) 100%);
border: 1px solid rgba(244, 67, 54, 0.35);
color: #ffcdd2;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
height: auto; /* override global 100% height */
justify-content: flex-start; /* override global centering */
text-align: left; /* ensure left alignment */
}
#cluster-members-container .error::before {
content: '⚠️';
font-size: 1.2rem;
line-height: 1;
flex-shrink: 0;
}
#cluster-members-container .error strong {
color: #ffebee;
font-weight: 700;
margin-right: 0.25rem;
}
#cluster-members-container .error br {
display: none; /* tighten layout by avoiding forced line-breaks */
}