templates/front/seminaire_nat.html.twig line 1

Open in your IDE?
  1. {% extends 'front.html.twig' %}
  3. {% block title %}Séminaires nationaux | CIMEF-INTERNATIONAL{% endblock %}
  4. {% block styleSheets %}
  5. <style id='wp-emoji-styles-inline-css' type='text/css'>
  6. .search_archive_event{
  7.     border: 1px solid white !important;
  8. }
  9. .form-control{
  10.     width:100%;
  11.     height: auto;
  12.     padding:10px;
  13.     border-radius:1px !important;
  14.     font-family: arial;
  15.     margin: 10px;
  16.     border:1px solid #ccc;
  17. }
  18. .row {
  19.     display: flex;            /* flexbox pour aligner les colonnes */
  20.     flex-wrap: wrap;          /* les colonnes passent à la ligne si nécessaire */
  21.     margin-right: -0.75rem;   /* -gutter/2 */
  22.     margin-left: -0.75rem;    /* -gutter/2 */
  23. }
  24. .events_pagination ul.pagination {
  25.     display: flex;
  26.     flex-wrap: wrap;
  27.     justify-content: center;
  28.     list-style: none;
  29.     margin: 0;
  30.     padding: 0;
  31. }
  32. .page-item.active .page-link {
  33.     background-color: #ff6600;
  34.     color: #fff;
  35. }
  36. .page-link {
  37.     margin: 10px;
  38.     color: #051a53;
  39.     background-color: #ededed;
  40.     border-radius: 5px;
  41.     padding: 10px;
  42.     /* margin: 0 3px; */
  43. }
  45. .text-lien{
  46.    color: #ff6600;
  47.    font-size: 16px;
  48. }
  50. /* Small devices ≥576px */
  51. @media (min-width: 576px) {
  52.   .col-3 { flex: 0 0 100%; max-width: 100%; }
  53.   .col-sm-4 { flex: 0 0 100%; max-width: 100%; }
  54.   .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
  55.   .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  56. }
  58. /* Medium devices ≥768px */
  59. @media (min-width: 768px) {
  60.   .col-md-3 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  61.   .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  62.   .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  63.   .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  64. }
  66. /* Large devices ≥992px */
  67. @media (min-width: 992px) {
  68.   .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  69.   .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  70.   .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  71.   .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  72. }
  74. .type1 .date-event {
  75.     transition: all 0.5s ease;
  76.     position: absolute;
  77.     bottom: 20px;
  78.     left: 30px;
  79.     z-index: 1;
  80.     font-size: 12px;
  81.     color: #fff;
  82.     font-weight: 700;
  83.     text-transform: uppercase;
  84.     text-align: center;
  85.     line-height: 1.3;
  86.     letter-spacing: 1px;
  87.     background-color: #ff6600 !important;
  88.     padding: 12px;
  89. }
  90. .icon_event{
  91.     color: #ff6600 !important;
  92. }
  93. .wrap_header_banner .overlay-slider {
  94.     position: absolute;
  95.     top: 0;
  96.     left: 0;
  97.     padding-top: 30px; 
  98.     width: 100%;
  99.     height: 100%;
  100.     background-color: rgba(0, 0, 0, 0.6392156863);
  101. }
  102. </style>
  103. {% endblock %}
  104. {% block body %}
  105. {% include 'section/navbar.html.twig' %}
  106. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/wp-content/uploads/2023/06/header-banner.jpg')}});">
  107.     <div class="overlay-slider">
  108.         <div class="row_site">
  109.             <div class="container_site">
  110.                 <div class="cover_color"></div>
  111.                 <div class="header_banner_el">
  112.                     <div class="header_breadcrumbs">
  113.                         <div id="breadcrumbs">
  114.                         <ul class="breadcrumb">
  115.                             <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></li>
  116.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  117.                             <li style="color: #fff!important;">Formations</li>
  118.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  119.                             <li style="color: #fff!important;">Séminaires Nationaux</li>
  120.                         </ul>
  121.                         </div>
  122.                     </div>
  123.                     <h1 class="header_title" style="color: #fff!important;">Séminaires Nationaux </h1>
  124.                 </div>
  125.             </div>
  126.         </div>
  127.     </div>
  128. </div>
  132. {% for message in app.flashes('success') %}
  133. <div class="row toast_success" style="top: 100px !important; float: right !important; position: absolute;">
  134.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  135.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  136.     </div>
  137.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  138.         <label style="font-family: arial;">{{ message }}</label>
  139.     </div>
  140. </div>    
  141. {% endfor %}
  142. {% for message in app.flashes('danger') %}
  143. <div class="row toast_danger" style="top: 100px !important; float: right !important; position: absolute;">
  144.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  145.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  146.     </div>
  147.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  148.         <label style="font-family: arial;">{{ message }}</label>
  149.     </div>
  150. </div>   
  151. {% endfor %}
  155. <div class="container-event">
  156.     <div id="main-event" class="content-event">
  157.         <div class="search_archive_event mb-4" style="">
  158.             {{ form_start(recherche) }}
  159.             <div class="row" style="margin-bottom: 20px !impirtant; width: 100%; padding: 10px !important; border: 1px solid #cfcfcf;">
  160.                 <div class="col-md-9 col-sm-12">{{ form_row(recherche.mot) }}</div>
  161.                 <div class="col-md-2 col-sm-12 p-3" style="padding: 10px!important; margin-left: 10px!important; font-family: arial;">{{ form_widget(recherche.submit, {'attr': {'class': 'btn btn-primary btn-large'}}) }}</div>
  162.             </div>
  163.             {{ form_end(recherche) }}
  164.             </div>
  165.         </div>
  166.         
  167.             <div class="row" style="margin-top: -20px;">
  168.             {% if pagination != null %}
  169.                 {% for pag in pagination %}
  170.                 <div class="col-lg-3 col-md-3 col-sm-12" style="padding: 10px;">
  171.                     <div class="type1 mb-2">
  172.                         <div class="desc" style="border-radius: 5px;">
  173.                             <div class="event-thumbnail" style="height: 200px;">
  174.                                <div class="date-event">
  175.                                     <span class="date">{{ annee }}</span>
  176.                                 </div>
  177.                                 {% if pag.image == null or pag.image == 'no-file' %}
  178.                                 <a href="{{ path('front.seminaire.inter.detail',{'slug': pag.slug, 'id': pag.id})}}" aria-label="Event Thumbnail">
  179.                                     <img loading="lazy" width="600" height="400" src="https://demo.ovathemewp.com/gimont/wp-content/uploads/2023/06/event-01-600x400.jpg" 
  180.                                     class="attachment-ovaev_event_thumbnail size-ovaev_event_thumbnail wp-post-image" alt="{{ pag.nom }}" decoding="async" 
  181.                                     srcset="https://demo.ovathemewp.com/gimont/wp-content/uploads/2023/06/event-01-600x400.jpg 600w, https://demo.ovathemewp.com/gimont/wp-content/uploads/2023/06/event-01-450x300.jpg 450w" sizes="(max-width: 600px) 100vw, 600px" />            
  182.                                 </a>
  183.                                 {% else %}
  184.                                     <a href="{{ path('front.seminaire.inter.detail',{'slug': pag.slug, 'id': pag.id})}}" aria-label="Event Thumbnail">
  185.                                         <img loading="lazy" style="height: 300px !important;" src="{{ asset('public/uploads/images/formations/' ~ pag.image) }}" 
  186.                                         class="attachment-ovaev_event_thumbnail size-ovaev_event_thumbnail wp-post-image" alt="{{ pag.nom }}" decoding="async" 
  187.                                         srcset="{{ asset('public/uploads/images/formations/' ~ pag.image) }}" sizes="(max-width: 600px) 100vw, 600px" />            
  188.                                     </a>
  189.                                 {% endif %}
  190.                             </div>
  192.                             <div class="event_post" style="height: 300px;">
  193.                                 <div class="meta-event">
  194.                                     <div class="time equal-date" style="height: 35px;">
  195.                                         <span class="icon-time">
  196.                                             <i class="fas fa-clock icon_event" aria-hidden="true"></i>
  197.                                         </span>
  198.                                         <span class="time-date-child">
  199.                                             <span class="date-child">{{ pag.dates_session}}    {{ annee }}</span>
  200.                                         </span>
  201.                                     </div>
  202.                                     <div class="venue">
  203.                                         <i class="fas fa-map-marker-alt icon_event" aria-hidden="true"></i>
  204.                                         <span class="number">
  205.                                         {{ pag.vilnom }}, {{ pag.pays }}    </span>
  206.                                     </div>
  207.                                 </div>
  208.                                 <div style="height: 150px;">
  209.                                     <label class="second_font event_title" style="font-weight: bold; font-size: 14px !important;">
  210.                                         {% if pag.nom|striptags|length > 120 %}
  211.                                             {{ pag.nom|striptags|slice(0, 120) ~ '...' }}
  212.                                         {% else %}
  213.                                             {{ pag.nom|striptags }}
  214.                                         {% endif %}
  215.                                     </label>
  216.                                 </div>
  217.                                 <div style="text-align: right;">
  218.                                     <a class="text-lien" href="{{ path('front.seminaire.nation.detail',{'slug': pag.slug, 'id': pag.id})}}">En savoir plus</a>
  219.                                 </div>
  220.                             
  221.                             </div>
  222.                         </div>
  223.                     </div>
  224.                 </div>
  225.                 {% endfor %}
  226.             {% endif %}
  227.             </div>
  228.         
  229.         <div class="events_pagination justify-content-center mt-4">
  230.             {{ knp_pagination_render(pagination, '@KnpPaginator/Pagination/bootstrap_v5_pagination.html.twig') }}
  231.         </div>
  233.     </div>
  234. </div>
  237. {% include 'section/footer.html.twig' %}
  239. {% endblock %}