templates/bundles/OdiseoSyliusBlogPlugin/Shop/Evenement/index.html.twig line 1

Open in your IDE?
  1. {% import '@SyliusUi/Macro/pagination.html.twig' as pagination %}
  2. {% import '@SyliusUi/Macro/messages.html.twig' as messages %}
  4. {% extends '@SyliusShop/layout.html.twig' %}
  6. {% block content %}
  7.     <div>
  8.         <div class="header-evenement-index">
  9.            <div class="container-h text-evenement-header-index">
  10.                 <span></span>
  11.                <h1>
  12.                    EVENEMENTS
  13.                </h1>
  14.            </div>
  15.         </div>
  16.         <div class="container-h">
  17.             <div class="search-evenement">
  18.                 <form class="form-evenement">
  19.                     <select id="departement">
  20.                         <option value="null">Département</option>
  21.                         <option value="Paris">Paris</option>
  22.                         <option value="Bouches-du-Rhône">Bouches-du-Rhône</option>
  23.                         <option value="Haute-Garonne">Haute-Garonne</option>
  24.                         <option value="Alpes-Maritimes">Alpes-Maritimes</option>
  25.                         <option value="Rhône">Rhône</option>
  26.                         <option value="Gironde">Gironde</option>
  27.                         <option value="Nord">Nord</option>
  28.                         <option value="Hauts-de-Seine">Hauts-de-Seine</option>
  29.                         <option value="Seine-Saint-Denis">Seine-Saint-Denis</option>
  30.                         <option value="Val-de-Marne">Val-de-Marne</option>
  31.                     </select>
  32.                     <div class="input-search-evenement">
  33.                         <input type="text" placeholder="Rechercher un événement">
  34.                     </div>
  35.                     <button type="submit" class="btn-evenement">Rechercher</button>
  36.                 </form>
  37.             </div>
  38.             <div>
  39.                 {% if resources|length > 0 %}
  40.                     <div class="ui three odd doubling cards" id="articleContainer">
  41.                         {% include '@OdiseoSyliusBlogPlugin/Shop/Evenement/listEvenement.twig' %}
  42.                         {% include '@OdiseoSyliusBlogPlugin/Shop/Evenement/pagination.html.twig' %}
  43.                     </div>
  44.                 {% else %}
  45.                     <div class="ui info message">
  46.                         <div class="header">
  47.                             {{ 'sylius.ui.no_results'|trans }}
  48.                         </div>
  49.                     </div>
  50.                 {% endif %}
  51.             </div>
  52.         </div>
  53.     </div>
  55.     <style>
  56.         /*.page-selector-container{*/
  57.         /*    display: flex;*/
  58.         /*    flex-direction: row;*/
  59.         /*    gap: 1rem;*/
  60.         /*    justify-content: center;*/
  61.         /*    align-items: center;*/
  62.         /*    margin-top: 2rem;*/
  63.         /*    width: 100%;*/
  64.         /*}*/
  65.         /*.page-selector-item{*/
  66.         /*    padding: 0.5rem 1rem;*/
  67.         /*    cursor: pointer;*/
  68.         /*    color: black;*/
  69.         /*}*/
  70.         /*.page-selector-item:hover{*/
  71.         /*    color: inherit;*/
  72.         /*}*/
  73.         /*!*.page-selector-item a{*!*/
  74.         /*!*    color: initial;*!*/
  75.         /*!*}*!*/
  76.         /*.page-selector-item.selected{*/
  77.         /*    background-color: #E35E31;*/
  78.         /*    border-radius: 5px;*/
  79.         /*    color: white;*/
  80.         /*}*/
  81.         /*!*.page-selector-item.selected a {*!*/
  82.         /*!*    color: white;*!*/
  83.         /*!*    width: 100%;*!*/
  84.         /*!*    height: 100%;*!*/
  85.         /*!*}*!*/
  86.         /*.text-article{*/
  87.         /*    display: flex;*/
  88.         /*    flex-direction: column;*/
  89.         /*    gap: 1rem;*/
  90.         /*    align-items: flex-start;*/
  91.         /*    padding: 1rem;*/
  92.         /*}*/
  93.         /*.text-article a{*/
  94.         /*    color: black;*/
  95.         /*}*/
  96.         /*.place-times-event{*/
  97.         /*    display: inline-flex;*/
  98.         /*    gap: 1rem;*/
  99.         /*}*/
  100.         /*.header-evenement-index{*/
  101.         /*    width: 100%;*/
  102.         /*    height: 300px;*/
  103.         /*    background-color: black;*/
  105.         /*}*/
  106.         /*.text-evenement-header-index{*/
  107.         /*    color: white;*/
  108.         /*    display: flex;*/
  109.         /*    flex-direction: row;*/
  110.         /*    justify-content: flex-start;*/
  111.         /*    align-items: center;*/
  112.         /*    height: 100%;*/
  113.         /*    gap: 2rem;*/
  114.         /*}*/
  115.         /*.text-evenement-header-index span{*/
  116.         /*    width: 80px;*/
  117.         /*    height: 1px;*/
  118.         /*    background-color: white;*/
  119.         /*}*/
  120.         /*.text-evenement-header-index h1 {*/
  121.         /*    margin: 0 !important;*/
  122.         /*    padding: 0 !important;*/
  123.         /*}*/
  124.         /*.search-evenement{*/
  125.         /*padding: 2rem 0 3rem 0;*/
  126.         /*}*/
  127.         /*.form-evenement{*/
  128.         /*    display: flex;*/
  129.         /*    flex-direction: row;*/
  130.         /*    justify-content: space-between;*/
  131.         /*    align-items: center;*/
  132.         /*    gap: 1rem;*/
  133.         /*    width: 50%;*/
  134.         /*    background-color: #F8F8F8;*/
  135.         /*    margin: 0 auto;*/
  136.         /*}*/
  137.         /*.input-search-evenement{*/
  138.         /*    display: inline-flex;*/
  139.         /*    justify-content: flex-start;*/
  140.         /*    align-items: center;*/
  141.         /*    gap: 1rem;*/
  142.         /*    border-left: 1px solid #ccc;*/
  143.         /*}*/
  144.         /*#departement{*/
  145.         /*    width: 200px;*/
  146.         /*    height: 40px;*/
  147.         /*    border-radius: 5px;*/
  148.         /*    border: none;*/
  149.         /*    padding: 0 1rem;*/
  150.         /*    outline: none;*/
  151.         /*    background-color: transparent;*/
  152.         /*    color: #ccc;*/
  153.         /*}*/
  154.         /*#departement:focus{*/
  155.         /*    color: #000000;*/
  156.         /*}*/
  157.         /*.input-search-evenement {*/
  158.         /*    width: 100%;*/
  159.         /*}*/
  160.         /*.input-search-evenement input{*/
  161.         /*    width: 100%;*/
  162.         /*    height: 40px;*/
  163.         /*    border-radius: 0 5px 5px 0;*/
  164.         /*    border: none;*/
  165.         /*    padding: 0 1rem;*/
  166.         /*    outline: none;*/
  167.         /*    background-color: transparent;*/
  168.         /*}*/
  169.         /*.input-search-evenement input::placeholder{*/
  170.         /*    color: #ccc;*/
  171.         /*}*/
  172.         /*.input-search-evenement input:focus{*/
  173.         /*    border: 0;*/
  174.         /*}*/
  175.         /*.form-evenement .btn-evenement{*/
  176.         /*    width: 200px;*/
  177.         /*    height: 40px;*/
  178.         /*    border-radius: 5px;*/
  179.         /*    border: 1px solid #ccc;*/
  180.         /*    padding: 0 1rem;*/
  181.         /*    outline: none;*/
  182.         /*    background-color: #E35E31;*/
  183.         /*    color: white;*/
  184.         /*    cursor: pointer;*/
  185.         /*}*/
  186.     </style>
  187. {% endblock %}