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) { @media (max-width: 1200px) {
.walk-sheet-container { .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 { .walk-sheet-preview {
order: -1; order: 2 !important; /* Preview second */
padding: 20px;
min-height: auto;
max-width: 100vw; 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 { .walk-sheet-preview .walk-sheet-page {
transform: scale(0.75); transform: scale(0.75);
transform-origin: top center;
margin-bottom: -200px;
max-width: 100%; /* Prevent overflow */
} }
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.walk-sheet-preview .walk-sheet-page { .walk-sheet-preview .walk-sheet-page {
transform: scale(0.65); transform: scale(0.5);
} margin-bottom: -400px;
.walk-sheet-preview {
min-height: 700px;
} }
} }
@ -635,17 +650,43 @@
} }
.walk-sheet-preview { .walk-sheet-preview {
min-width: 0; min-width: 0;
max-width: 100vw; max-width: 100%;
width: 100%;
min-height: 500px; min-height: 500px;
padding: 10px; 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; 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 */
} }
} }