gandalf/secubox-openwrt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(haproxy): Improve responsive design for mobile devices

Browse Source 
- Emergency banner stacks vertically on mobile
- Quick actions use CSS grid (3-col → 2-col)
- Tables get horizontal scroll on narrow screens
- Health grid adapts to 3-col → 2-col on mobile
- Stats grid compact layout on small screens
- Reduced padding and font sizes for mobile

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
CyberMind-FR 2026-02-12 06:29:00 +01:00
parent ee9afc0ccf
commit 498c613466
1 changed files with 118 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
package/secubox/luci-app-haproxy/htdocs/luci-static/resources/haproxy/dashboard.css
View File

@ -1059,16 +1059,53 @@ code,
.hp-row {
flex-direction: column;
}
.hp-row > * {
flex: none !important;
}
.hp-emergency-banner {
flex-direction: column !important;
text-align: center;
gap: 16px !important;
}
.hp-emergency-banner > div:first-child {
flex-direction: column !important;
}
.hp-emergency-banner > div:last-child {
width: 100%;
justify-content: center !important;
}
}
@media (max-width: 768px) {
.hp-page-header {
flex-direction: column;
align-items: flex-start;
padding: 16px;
}
.hp-page-title {
font-size: 20px;
}
.hp-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.hp-stat-card {
padding: 16px;
}
.hp-stat-icon {
font-size: 24px;
}
.hp-stat-value {
font-size: 28px;
}
.hp-backends-grid {
@ -1077,25 +1114,104 @@ code,
.hp-quick-actions {
justify-content: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.hp-action-btn {
flex: 1;
min-width: auto;
padding: 12px 8px;
}
.hp-action-icon {
font-size: 22px;
}
.hp-action-label {
font-size: 11px;
}
.hp-table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
.hp-health-grid {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.hp-health-item {
padding: 12px 8px;
}
.hp-health-icon {
font-size: 20px;
}
.hp-health-label {
font-size: 12px;
}
.hp-card-header {
padding: 12px 16px;
}
.hp-card-body {
padding: 16px;
}
}
@media (max-width: 480px) {
.hp-stats-grid {
grid-template-columns: 1fr;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.hp-stat-card {
padding: 12px;
}
.hp-stat-value {
font-size: 28px;
font-size: 24px;
}
.hp-stat-label {
font-size: 11px;
}
.hp-btn {
width: 100%;
justify-content: center;
}
.hp-quick-actions {
grid-template-columns: repeat(2, 1fr);
}
.hp-health-grid {
grid-template-columns: repeat(2, 1fr);
}
.hp-connection-grid {
grid-template-columns: 1fr;
}
.hp-header-badges {
width: 100%;
}
.hp-header-badge {
flex: 1;
justify-content: center;
}
.hp-emergency-banner > div:nth-child(2) {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
width: 100%;
}
}