admin/freealberta
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed the preview on moblie for the walk sheet

Browse Source
This commit is contained in:
admin 2025-07-08 23:21:51 -06:00
parent e31b77017c
commit ab2e91ec12
1 changed files with 54 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
map/app/public/css/admin.css
View File

@ -575,26 +575,41 @@
}
}
/* Mobile/Small Screen Layout - Stack config above preview */
@media (max-width: 1200px) {
.walk-sheet-container {
grid-template-columns: 1fr;
display: flex !important; /* Change from grid to flex */
flex-direction: column !important; /* Stack vertically */
gap: 20px;
}
.walk-sheet-config {
order: 1 !important; /* Config first */
margin-bottom: 20px;
}
.walk-sheet-preview {
order: -1;
order: 2 !important; /* Preview second */
padding: 20px;
min-height: auto;
max-width: 100vw;
min-height: 750px;
overflow-x: auto; /* Allow horizontal scroll if needed */
display: flex;
justify-content: center; /* Center the page */
}
.walk-sheet-preview .walk-sheet-page {
transform: scale(0.75);
transform-origin: top center;
margin-bottom: -200px;
max-width: 100%; /* Prevent overflow */
}
}
@media (max-width: 1000px) {
.walk-sheet-preview .walk-sheet-page {
transform: scale(0.65);
}
.walk-sheet-preview {
min-height: 700px;
transform: scale(0.5);
margin-bottom: -400px;
}
}
@ -635,17 +650,43 @@
}
.walk-sheet-preview {
min-width: 0;
max-width: 100vw;
max-width: 100%;
width: 100%;
min-height: 500px;
padding: 10px;
overflow: hidden; /* Change from overflow-x: hidden to overflow: hidden */
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
.walk-sheet-preview .walk-sheet-page {
transform: scale(0.45);
/* Container for the scaled page */
.walk-sheet-preview #walk-sheet-preview-content {
transform: scale(0.35);
transform-origin: top center;
margin: 0 auto;
width: 816px;
max-width: none;
margin-bottom: -600px;
position: relative;
left: 50%;
margin-left: -408px; /* Half of 816px to center it */
}
.walk-sheet-page {
font-size: 8px;
padding: 8px;
}
/* Even smaller screens */
@media (max-width: 480px) {
.walk-sheet-preview {
padding: 5px;
width: 100%;
}
.walk-sheet-preview #walk-sheet-preview-content {
transform: scale(0.25);
margin-bottom: -750px;
left: 50%;
margin-left: -408px; /* Keep centered */
}
}