Improved UI

This commit is contained in:
Aodhan
2025-07-20 01:56:24 +01:00
parent 7bebc95c09
commit dc7db1a44a
5 changed files with 96 additions and 38 deletions

View File

@@ -809,33 +809,55 @@ html, body {
content: "↓";
}
}
/* ---------------- MOBILE VIEW TWEAKS ---------------- */
@media (max-width: 767px) {
/* tighter spacing between panels */
.side-panel {
gap: 10px;
}
.filter-controls,
.action-buttons,
.status-area {
padding: 10px;
}
/* combined action buttons */
.action-buttons {
flex-direction: row;
gap: 0;
}
.action-buttons .action-btn {
flex: 1;
border-radius: 0;
padding: 16px 0;
}
/* minimal spacing between blocks */
.side-panel > * + * {
margin-top: 4px;
border-top: 1px solid #ccc;
}
}
/* ---------------- MOBILE VIEW TWEAKS ---------------- */
@media (max-width: 991px) {
/* tighter spacing between panels */
.side-panel {
gap: 10px;
}
.filter-controls,
.action-buttons,
.status-area {
padding: 10px;
}
/* combined action buttons */
.action-buttons {
flex-direction: row;
gap: 0;
order: 1; /* First element in side panel */
flex-wrap: wrap;
}
.action-buttons .action-btn {
flex: 1;
min-width: 25%;
border-radius: 0;
padding: 16px 0;
}
/* Ensure all other elements come after action buttons */
.search-controls,
.sort-controls,
.filter-controls,
.status-area,
#btn-history {
order: 2;
}
/* minimal spacing between blocks */
.side-panel > * + * {
margin-top: 4px;
border-top: 1px solid #ccc;
}
/* Move action buttons below swipe window */
.main-section {
flex-direction: column;
}
.swipe-container {
order: 1;
}
.side-panel {
order: 2;
}
}
/* ---------------- DESKTOP 2x2 ACTION GRID ---------------- */
@media (min-width: 992px) {
.action-buttons {