Invario/Inventarsystem
3
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases 41 Wiki Activity

Improve mobile layout with viewport adjustments, scrolling enhancements, and refined modal styling

Browse Source
This commit is contained in:
AIIrondev
2026-04-20 09:31:11 +02:00
parent bfbc8b6796
commit 3a9d45327a
1 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/main.html
+24 -8
View File
@@ -3097,6 +3097,8 @@
scroll-snap-align: center; scroll-snap-align: center;
cursor: pointer; cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}
.item-card:hover { .item-card:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
@@ -3468,6 +3470,19 @@
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width: 768px) { @media (max-width: 768px) {
/* Mobile viewport and scrolling improvements */
html, body {
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-y !important;
height: 100% !important;
}
body {
padding: 0 !important;
margin: 0 !important;
}
.filter-container { .filter-container {
flex-direction: column; flex-direction: column;
} }
@@ -3553,8 +3568,9 @@
display: grid !important; display: grid !important;
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 15px !important; gap: 15px !important;
padding: 10px 0 0 !important; padding: 10px 0 !important;
overflow-x: visible !important; overflow-x: visible !important;
scroll-snap-type: none !important;
} }
.item-card { .item-card {
@@ -4098,6 +4114,7 @@
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: none !important; box-shadow: none !important;
box-sizing: border-box !important;
} }
.filter-group { .filter-group {
@@ -4314,13 +4331,12 @@
} }
.modal-content { .modal-content {
width: 100% !important; width: calc(100vw - 16px) !important;
max-width: 100% !important; max-width: none !important;
height: 100vh !important; margin: 80px auto 10px !important;
max-height: 100vh !important; max-height: 85vh !important;
margin: 0 !important; overflow-y: auto !important;
border: none !important; border-radius: 8px !important;
border-radius: 0 !important;
padding: 16px !important; padding: 16px !important;
} }