templates/blocks/category_view/index.html.twig line 1

Open in your IDE?
  1. <style>
  3.             
  4.     /* Estilo del texto con límite de 3 líneas */
  5.     .text-container {
  6.     display: -webkit-box;
  7.     -webkit-line-clamp: 3;
  8.     -webkit-box-orient: vertical;
  9.     overflow: hidden;
  10.     transition: max-height 0.5s ease;
  11.     }
  12.     /* Cuando está expandido, se muestra completo */
  13.     .expanded {
  14.     -webkit-line-clamp: unset;
  15.     }
  16.     /* Estilo del botón */
  17.     .toggle-btn {
  18.     cursor: pointer;
  19.     color: #007bff;
  20.     font-weight: bold;
  21.     text-align: center;
  22.     margin-top: 8px;
  23.     user-select: none;
  24.     display: inline-block;
  25.     }
  26.     /* Aumentar el ancho del tooltip */
  27.     .tooltip-inner {
  28.     max-width: 300px !important; /* Puedes cambiar este valor */
  29.     text-align: left;
  30.     white-space: normal;
  31.     }
  32.     .order-container .title-block{
  33.             top: 30px;
  34.             z-index: 1000;
  35.             background: #f8f9fa;
  36.     }
  37.     
  38. </style>
  40. <div class="row">
  41.     <div class="col-12">
  42.         <div class="row align-items-start">
  43.             {% for category in categories %}
  44.                 <div class="col-6 col-xxl-3 col-xl-3 col-lg-4 col-md-6 d-flex align-items-center mb-3 product-row" >
  45.                     <div class="row">
  46.                         <!-- Imagen -->
  47.                         <div class="col-lg-12 col-12">
  48.                             <img src="/uploads/images/categories/{{ category.getImageName }}" alt="{{ category.name }}" class="img-fluid rounded pointer zoom" onclick="window.location.href='/order?category={{category.id}}'">
  49.                         </div>
  50.                         <!-- Información -->
  51.                         <div class="col-lg-12 col-12">
  52.                             <h6 class="section-title mt-1 pointer" onclick="window.location.href='/order?category={{category.id}}'">{{ category.name }}</h5>
  53.                         </div>
  54.                     </div>
  55.                 </div>
  56.             {% endfor %}
  57.         </div>
  58.     </div>
  59. </div>