romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(data-entry): Fix layout overlap and dropdown styling in receipt form

Browse Source 
- Use CSS Grid with fixed columns (140px/120px/200px) to prevent TOTAL/CARD/MOD PLATA overlap
- Move MOD PLATA to end of row to avoid overlapping other fields
- Add borderless dropdown styling matching AutoComplete look
- Remove showClear (X button) from MOD PLATA dropdown
- Align dropdown height (44px) with text inputs for consistent vertical alignment
- Add non-scoped CSS for PrimeVue dropdown overrides (per CSS rules)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Marius Mutu
2025-12-30 21:59:08 +02:00
parent 77d74a9ea0
commit c5682ead42
1 changed files with 89 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/modules/data-entry/views/receipts/ReceiptCreateView.vue
View File

@@ -293,7 +293,7 @@
optionValue="value"
placeholder="Tip"
:disabled="isReadOnly"
class="dropdown-compact"
class="dropdown-compact dropdown-borderless"
/>
</div>
<div class="form-field">
@@ -328,7 +328,7 @@
placeholder="Tip"
:disabled="isReadOnly"
@change="directionAutoDetected = false"
class="dropdown-compact"
class="dropdown-compact dropdown-borderless"
/>
</div>
</div>
@@ -340,7 +340,7 @@
<!-- SECTION: VALORI (compact inline layout) -->
<div class="form-group values-section">
<!-- Row 1: TOTAL + Mod Plata + Payment details -->
<!-- Row 1: TOTAL + Payment methods (CARD/NUMERAR) + Mod Plata (at END to avoid overlap) -->
<div class="values-row-inline">
<div class="value-item value-item-total">
<label>TOTAL *</label>
@@ -351,22 +351,10 @@
required
:disabled="isReadOnly"
class="input-compact"
:pt="{ root: { style: 'width: 130px' } }"
/>
</div>
<div class="value-item value-item-payment">
<label>Mod Plata</label>
<Dropdown
v-model="form.payment_mode"
:options="paymentModeOptions"
optionLabel="label"
optionValue="value"
placeholder="Selecteaza"
showClear
:disabled="isReadOnly"
class="dropdown-payment"
/>
</div>
<!-- Payment methods from OCR (CARD, NUMERAR) - editable -->
<!-- Payment methods from OCR (CARD, NUMERAR) - BEFORE Mod Plata -->
<div class="value-item payment-method-item" v-for="(pm, idx) in form.payment_methods" :key="pm.method">
<label>{{ pm.method }}</label>
<InputNumber
@@ -379,6 +367,19 @@
class="input-payment-method"
/>
</div>
<!-- Mod Plata at END - can't overlap anything after it -->
<div class="value-item value-item-payment">
<label>Mod Plata</label>
<Dropdown
v-model="form.payment_mode"
:options="paymentModeOptions"
optionLabel="label"
optionValue="value"
placeholder="Selecteaza"
:disabled="isReadOnly"
class="dropdown-payment dropdown-borderless"
/>
</div>
</div>
<!-- Row 2: TVA entries inline (only if present) -->
@@ -414,6 +415,7 @@
placeholder="Selecteaza tip cheltuiala"
required
:disabled="isReadOnly"
class="dropdown-borderless"
/>
</div>
</div>
@@ -2404,12 +2406,11 @@ const submitForReview = async () => {
padding: 0.5rem 0.75rem;
}
/* CSS Grid layout for precise column control - PREVENTS OVERLAP */
/* CSS Grid layout with FIXED columns to prevent overlap */
.values-row-inline {
display: grid;
grid-template-columns: 150px 200px auto;
column-gap: 3rem;
row-gap: 0.5rem;
grid-template-columns: 140px 120px 200px; /* TOTAL | CARD | MOD PLATA - fixed widths */
column-gap: 2rem; /* 32px gap between columns */
align-items: start;
}
@@ -2417,15 +2418,26 @@ const submitForReview = async () => {
display: flex;
flex-direction: column;
gap: 0.2rem;
max-width: 100%; /* Prevent overflow */
overflow: hidden;
}
/* Explicit widths for inputs */
/* TOTAL - first column */
.value-item-total {
width: 150px;
width: 140px;
max-width: 140px;
}
/* Payment methods (CARD, NUMERAR) - middle columns */
.payment-method-item {
width: 120px;
max-width: 120px;
}
/* MOD PLATA - last column */
.value-item-payment {
width: 200px;
max-width: 200px;
}
.value-item label {
@@ -2435,26 +2447,44 @@ const submitForReview = async () => {
text-transform: uppercase;
}
/* Force InputNumber to respect container width */
.input-compact {
width: 130px;
width: 100% !important;
max-width: 130px !important;
}
:deep(.value-item-total .p-inputnumber) {
width: 100% !important;
max-width: 130px !important;
}
:deep(.value-item-total .p-inputnumber-input) {
width: 100% !important;
}
:deep(.payment-method-item .p-inputnumber) {
width: 100% !important;
max-width: 110px !important;
}
:deep(.payment-method-item .p-inputnumber-input) {
width: 100% !important;
}
.dropdown-payment {
width: 180px; /* Fixed width to prevent overlap */
width: 100% !important;
max-width: 190px !important;
}
:deep(.dropdown-payment) {
width: 180px !important;
width: 100% !important;
max-width: 190px !important;
}
:deep(.dropdown-payment .p-dropdown) {
width: 100% !important;
}
.payment-method-item {
padding-left: 0.5rem;
}
.payment-method-value {
display: inline-block;
font-size: 0.95rem;
@@ -2951,3 +2981,32 @@ const submitForReview = async () => {
color: #f57c00;
}
</style>
<!-- Non-scoped styles for PrimeVue overrides (per CSS rules - no :deep()) -->
<style>
/* Borderless dropdown - matches InputText height (44px) */
.dropdown-borderless.p-dropdown {
border: none !important;
background: transparent !important;
box-shadow: none !important;
min-height: 44px !important;
height: 44px !important;
padding: 0 !important;
}
.dropdown-borderless.p-dropdown:hover,
.dropdown-borderless.p-dropdown.p-focus {
border: none !important;
box-shadow: none !important;
}
.dropdown-borderless .p-dropdown-label {
padding: 0.6rem 0.75rem !important;
line-height: 1.4 !important;
}
.dropdown-borderless .p-dropdown-trigger {
background: transparent !important;
width: 2.5rem !important;
}
</style>