fix: Restructure print_module layout - label preview on left side
- Changed main container to flexbox layout with gap - Left column: Fixed width (400px) for label preview card - Right column: Flexible width for data preview table - Label preview now positioned on left as in original app - Data table fills remaining space on the right - Responsive flexbox layout preserves functionality
This commit is contained in:
@@ -113,7 +113,9 @@
|
|||||||
</a>
|
</a>
|
||||||
</div> #}
|
</div> #}
|
||||||
|
|
||||||
<div class="scan-container">
|
<div class="scan-container" style="display: flex; gap: 15px; flex-wrap: nowrap;">
|
||||||
|
<!-- Left Column: Label Preview (Fixed width ~400px) -->
|
||||||
|
<div style="flex-shrink: 0; width: 400px;">
|
||||||
<!-- Label Preview Card -->
|
<!-- Label Preview Card -->
|
||||||
<div class="card scan-form-card">
|
<div class="card scan-form-card">
|
||||||
<div class="label-view-title" style="width: 100%; text-align: center; padding: 0 0 15px 0; font-size: 18px; font-weight: bold; letter-spacing: 0.5px;">Label View</div>
|
<div class="label-view-title" style="width: 100%; text-align: center; padding: 0 0 15px 0; font-size: 18px; font-weight: bold; letter-spacing: 0.5px;">Label View</div>
|
||||||
@@ -132,7 +134,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Label Preview Section -->
|
<!-- Label Preview Section -->
|
||||||
<div id="label-preview" style="padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px;">
|
<div id="label-preview" style="padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px; margin: 0 auto;">
|
||||||
<!-- Label content rectangle -->
|
<!-- Label content rectangle -->
|
||||||
<div id="label-content" style="position: absolute; top: 65.7px; left: 11.34px; width: 227.4px; height: 321.3px; background: white;">
|
<div id="label-content" style="position: absolute; top: 65.7px; left: 11.34px; width: 227.4px; height: 321.3px; background: white;">
|
||||||
<!-- Top row content: Company name (removed) -->
|
<!-- Top row content: Company name (removed) -->
|
||||||
@@ -299,7 +301,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right Column: Data Preview (Flexible width) -->
|
||||||
|
<div style="flex: 1; min-width: 0;">
|
||||||
<!-- Data Preview Card -->
|
<!-- Data Preview Card -->
|
||||||
<div class="card scan-table-card">
|
<div class="card scan-table-card">
|
||||||
<h3>Data Preview (Unprinted Orders)</h3>
|
<h3>Data Preview (Unprinted Orders)</h3>
|
||||||
@@ -332,6 +337,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- JavaScript Libraries -->
|
<!-- JavaScript Libraries -->
|
||||||
<!-- JsBarcode library for real barcode generation -->
|
<!-- JsBarcode library for real barcode generation -->
|
||||||
|
|||||||
Reference in New Issue
Block a user