ske087/quality_app-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Restructure print_module layout - label preview on left side

Browse Source 
- 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:
Quality App Developer
2026-02-02 01:42:41 +02:00
parent 7d7f3ce4fe
commit b2ac1fad5b
1 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/templates/modules/labels/print_module.html
View File

@@ -113,26 +113,28 @@
</a>
</div> #}
<div class="scan-container">
<!-- Label Preview 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="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 -->
<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>
<!-- Pairing Keys Section - Only show dropdown if multiple keys exist -->
<div style="width: 100%; text-align: center; margin-bottom: 15px;">
<!-- Dropdown for multiple keys (hidden by default) -->
<div id="client-select-container" style="display: none; margin-bottom: 8px;">
<label for="client-select" style="font-size: 11px; font-weight: 600; display: block; margin-bottom: 4px;">Select Printer/Client:</label>
<select id="client-select" class="form-control form-control-sm" style="width: 85%; margin: 0 auto; font-size: 11px;"></select>
<!-- Pairing Keys Section - Only show dropdown if multiple keys exist -->
<div style="width: 100%; text-align: center; margin-bottom: 15px;">
<!-- Dropdown for multiple keys (hidden by default) -->
<div id="client-select-container" style="display: none; margin-bottom: 8px;">
<label for="client-select" style="font-size: 11px; font-weight: 600; display: block; margin-bottom: 4px;">Select Printer/Client:</label>
<select id="client-select" class="form-control form-control-sm" style="width: 85%; margin: 0 auto; font-size: 11px;"></select>
</div>
<!-- Manage Keys Button - Only visible for superadmin -->
{% if session.role == 'superadmin' %}
<a href="{{ url_for('main.download_extension') }}" class="btn btn-info btn-sm" target="_blank" style="font-size: 11px; padding: 4px 12px;">🔑 Manage Keys</a>
{% endif %}
</div>
<!-- Manage Keys Button - Only visible for superadmin -->
{% if session.role == 'superadmin' %}
<a href="{{ url_for('main.download_extension') }}" class="btn btn-info btn-sm" target="_blank" style="font-size: 11px; padding: 4px 12px;">🔑 Manage Keys</a>
{% endif %}
</div>
<!-- Label Preview Section -->
<div id="label-preview" style="padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px;">
<!-- Label Preview Section -->
<div id="label-preview" style="padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px; margin: 0 auto;">
<!-- Label content rectangle -->
<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) -->
@@ -299,13 +301,16 @@
</div>
</div>
</div>
</div>
<!-- Data Preview Card -->
<div class="card scan-table-card">
<h3>Data Preview (Unprinted Orders)</h3>
<button id="check-db-btn" class="btn btn-primary mb-3">Load Orders</button>
<div class="report-table-container">
<table class="scan-table print-module-table">
<!-- Right Column: Data Preview (Flexible width) -->
<div style="flex: 1; min-width: 0;">
<!-- Data Preview Card -->
<div class="card scan-table-card">
<h3>Data Preview (Unprinted Orders)</h3>
<button id="check-db-btn" class="btn btn-primary mb-3">Load Orders</button>
<div class="report-table-container">
<table class="scan-table print-module-table">
<thead>
<tr>
<th>ID</th>
@@ -331,6 +336,7 @@
</table>
</div>
</div>
</div>
</div>
<!-- JavaScript Libraries -->