alterar modal dialog para popover em addProduct

gestaoRaul/templates/htmx_components/comandas/htmx_list_products.html

@@ -2,7 +2,7 @@
 
 {% for product in products %}
 
-<article 
+<div 
         onclick="addProductComanda({{product.id}})" 
         class="card-product"
         hx-get="{% url 'addProduct' product.id comanda_id %} " 
@@ -10,7 +10,7 @@
         hx-target="#list-products-comanda">
         {{product.name}} <br>
         R$ {{product.price}}
-</article>
+</div>
 
 {% endfor %}
 

gestaoRaul/templates/htmx_components/comandas/htmx_list_products_in_comanda.html

@@ -42,6 +42,7 @@
   {% endif %}
 </tr>
   {% endfor %}
+  {% if config.taxa %}
   <tr>
     <td>
       Taxa de serviço 10%
@@ -50,6 +51,8 @@
       R$ {{valores.taxa}}
     </td>
   </tr>
+  {% endif %}
+  
   {% if parcials%}
   <td colspan="2" style="text-align: center;"><b>Pagamentos parciais</b></td>
   {% endif %}
@@ -64,8 +67,12 @@
 
 
 <tfoot>
-<tr>
-  <td colspan="2" style="text-align: center;"><b>Total R$ {{valores.totalComTaxa}}</b></td>
-</tr>
+  <tr>
+    {% if config.taxa %}
+    <td colspan="2" style="text-align: center;"><b>Total R$ {{valores.totalComTaxa}}</b></td>
+    {% else %}
+    <td colspan="2" style="text-align: center;"><b>Total R$ {{valores.totalSemTaxa}}</b></td>
+    {% endif %}
+  </tr>
 </tfoot>
 

gestaoRaul/templates/static/comandas/css/comandas.css

@@ -59,3 +59,5 @@ p {
     }
   
 }
+
+

gestaoRaul/templates/static/comandas/css/viewcomanda.css

@@ -15,19 +15,80 @@
     max-width: 800px;
     /* margin: 0 auto;  */
   }
-
+  
   .card-product {
+    height: 180px;
+    width: 200px;
+    padding: 10px;
+    align-items: center;
+    align-content: center;
+    text-align: center;
+    line-height: 1.5;
     background: var(--main-gradient);
     box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
+    border-radius: 5px;
   
     }
   
   .card-product:hover {
-      transform: scale(1.05);
-      box-shadow: 0px 0px 10px rgba(86, 187, 255, 0.815);
-    }
-
+    transform: scale(1.05);
+    transition: transform 0.4s;
+    box-shadow: 0px 0px 10px rgba(86, 187, 255, 0.815);
+  }
+  
   table td th {
     text-align: center;
   }
+  
+  
+  .popover{
+    width: 98%;
+    height: 98%;
+    max-width: 800px;
+    top: 20px;
+    left: 25%;
+    padding: 20px;
+    /* background-color: #f2f2f29d; */
+    border-radius: 15px;
+    border: none;
+    box-shadow: 0px 0px 8px rgba(143, 143, 143, 0.2);
+    text-align: justify;
+    line-height: 50px; 
+    font-size: 18px;
+    font-weight: bold;
+    /* color: #333; */
+    transition: transform 0.2s;
+    animation: jump 0.5s;
+  }
+  
+  .popover::backdrop {
+    background-color: rgba(0, 0, 0, 0.315);
+    backdrop-filter: blur(5px);
+    /* animation: jump 0.2s; */
+  }
 
+
+
+
+  @media screen and (max-width: 730px) {
+
+    .popover{
+      width: 98%;
+      height: 98%;
+      max-width: 800px;
+      top: 20px;
+      left: 10px;
+
+      }
+
+      .card-product {
+        height: 100%;
+        width: 100%;
+        max-width: 100%;
+        text-align: center;
+        background: var(--main-gradient);
+        box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
+        font-size: 14px;
+      
+        }
+    }

gestaoRaul/templates/static/comandas/js/viewcomanda.js

@@ -1,11 +1,18 @@
 
 
 function openModal() {
-    document.getElementById('Modal-add-product').style.display = 'block';
-    textField = document.getElementById('search-product')
-    textField.value = '';
-    textField.focus()
+  textField = document.getElementById('search-product')
+  textField.value = '';
+  textField.focus()
 }
+
+
+function closeModal() {
+   var popover = document.getElementById('addProduct');
+   popover.hidePopover()
+}
+
+
 function openModalAlter() {
     document.getElementById('Modal-alter-comanda').style.display = 'block';
     var name = document.getElementById('name-comanda').innerText.replace('Nome: ','').replace(' | ', '')
@@ -62,9 +69,6 @@ function close_modal_payment_comanda() {
     document.getElementById('payment-comanda').style.display = 'none';
 }
 
-function closeModal() {
-    document.getElementById('Modal-add-product').style.display = 'none';
-}
 function closeModalObs() {
     document.getElementById('modal-obs').style.display = 'none';
 }