[FIX] point_of_sale: fix css for cash in/out popup

Current behavior:
When the text for the button in the cash in/out popup is too long, the
first number of the amount is hidden behind the currency symbol.

Steps to reproduce:
- Install l10n_bo and PoS
- Switch language to Spanish
- Create and open a PoS with a cash payment method
- Open the cash in/out popup, enter a value.
- The first number of the amount is hidden behind the currency symbol.

opw-3324406

closes odoo/odoo#126120

X-original-commit: decafb5b7d59967d64f5bb553e95fe32c7b0ccb8
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
Signed-off-by: Robin Engels (roen) <roen@odoo.com>
This commit is contained in:
roen-odoo
2023-06-23 15:11:31 +02:00
parent 8e3c9b7656
commit 84d9344e5d
3 changed files with 25 additions and 27 deletions
@@ -4,6 +4,14 @@
.input-amount {
display: flex;
flex-flow: row;
.input-container {
padding: 0px;
padding-left: 5px;
padding-right: 5px;
display: flex;
align-items: center;
}
}
.input-type {
@@ -40,25 +48,6 @@
}
}
.input-field {
position: relative;
flex-grow: 1;
.currency {
position: absolute;
right: 10px;
top: 10px;
}
.left-currency {
position: absolute;
left: 10px;
top: 10px;
background-color: #fff;
padding-right: 8px;
}
}
textarea {
resize: none;
margin-top: 10px;
@@ -85,6 +74,18 @@
margin-right: 0;
}
}
.input-container .input-field,
.input-container .input-field:focus {
position: relative;
flex-grow: 1;
border: none;
outline: none;
box-shadow: none;
background-color: transparent;
padding: 0px;
padding-left: 5px;
}
}
.cash-move {
@@ -12,14 +12,10 @@
<span t-on-click="() => this.onClickButton('out')" class="input-type" t-att-class="{ 'red-highlight': state.type === 'out' }">
Cash Out
</span>
<div class="input-field">
<input type="text" name="amount" t-model="state.amount" t-ref="amountInput" t-on-keypress="_onAmountKeypress"/>
<t t-if="pos.currency.symbol.length > 1">
<span class="left-currency" t-esc="pos.currency.symbol" />
</t>
<t t-else="">
<span class="currency" t-esc="pos.currency.symbol" />
</t>
<div class="input-container popup-input" >
<span class="currency" t-esc="pos.currency.symbol" t-if="pos.currency.position=='before'"/>
<input class="input-field" type="text" name="amount" t-model="state.amount" t-ref="amountInput" t-on-keypress="_onAmountKeypress"/>
<span class="currency" t-esc="pos.currency.symbol" t-if="pos.currency.position=='after'"/>
</div>
</div>
<textarea name="reason" t-model="state.reason" placeholder="Reason"></textarea>
@@ -2755,6 +2755,7 @@ td {
text-align: right;
}
.pos .popup input:focus,
.pos .popup-input:focus-within,
.pos .popup-input.active {
outline: none;
box-shadow: 0px 0px 0px 3px $primary;