Put error popup inside the basket

This commit is contained in:
Antoine Bartuccio 2024-12-25 20:44:52 +01:00
parent 138e1662c7
commit 280d27343d
2 changed files with 24 additions and 27 deletions

View File

@ -344,24 +344,6 @@ body {
text-align: center; text-align: center;
} }
.popup {
z-index: 10;
/* to get on top of tomselect */
display: inline-block;
text-align: center;
overflow: auto;
margin: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 20vh;
width: 20vw;
align-content: center;
}
.tabs { .tabs {
border-radius: 5px; border-radius: 5px;
@ -1283,6 +1265,18 @@ u,
float: right; float: right;
} }
.basket-error-container {
position: relative;
display: block
}
.basket-error {
z-index: 10; // to get on top of tomselect
text-align: center;
position: absolute;
}
#products { #products {
flex-basis: 100%; flex-basis: 100%;
margin: 0.2em; margin: 0.2em;
@ -1292,6 +1286,7 @@ u,
#click_form { #click_form {
flex: auto; flex: auto;
margin: 0.2em; margin: 0.2em;
width: 20%;
} }
#user_info { #user_info {

View File

@ -31,14 +31,6 @@
<p class="important">Javascript is required for the counter UI.</p> <p class="important">Javascript is required for the counter UI.</p>
</noscript> </noscript>
<p
x-cloak
class="alert alert-red popup"
x-show="alertMessage.show"
x-transition.duration.500ms
x-text="alertMessage.content"
></p>
<div id="user_info"> <div id="user_info">
<h5>{% trans %}Customer{% endtrans %}</h5> <h5>{% trans %}Customer{% endtrans %}</h5>
{{ user_mini_profile(customer.user) }} {{ user_mini_profile(customer.user) }}
@ -51,7 +43,7 @@
</p> </p>
</div> </div>
<div id="click_form" style="width: 20%;"> <div id="click_form">
<h5 id="selling-accordion">{% trans %}Selling{% endtrans %}</h5> <h5 id="selling-accordion">{% trans %}Selling{% endtrans %}</h5>
<div> <div>
{% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %} {% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}
@ -86,6 +78,16 @@
<form x-cloak method="post" action="" x-ref="basketForm"> <form x-cloak method="post" action="" x-ref="basketForm">
<div class="basket-error-container">
<div
x-cloak
class="alert alert-red basket-error"
x-show="alertMessage.show"
x-transition.duration.500ms
x-text="alertMessage.content"
></div>
</div>
{% csrf_token %} {% csrf_token %}
<div x-ref="basketManagementForm"> <div x-ref="basketManagementForm">
{{ form.management_form }} {{ form.management_form }}