Improved UI
This commit is contained in:
76
styles.css
76
styles.css
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user