templates/Theme/Produit/Produit/Produit/listeproduituser.html.twig line 270

Open in your IDE?
  1. {% extends "Theme/Users/User/layouthome.html.twig" %}
  2. {% block meta %}
  3.     {{ parent() }}
  4.     <meta name="keywords" content="{{ site }}, Business, Innovation,Administration"/>
  5.     <meta name="author" content="Noel Kenfack"/>
  6.     <meta name="description" content="{{ categorie.nom }} - {{ categorie.description }}"/>
  7. {% endblock %}
  9. {% block title %}
  10.     {{ parent() }} - {{ categorie.nom }}
  11. {% endblock %}
  13. {% block stylesheets %}
  14.     {{ parent() }}
  15. {% endblock %}
  17. {% block userblog_body %}
  19. <link rel="stylesheet" href="{{ asset('template/css/jquery.expandable.css') }}"/>
  20. <script type="text/javascript" src="{{ asset('template/js/jquery.expandable.js') }}"></script>
  22. <div style="background: #f0f0f2;">
  23. <div class="container">
  24. <div class="row">
  26.     {% if is_mobile() %}
  27.     <div class="col-md-12">
  28.         <ol class="c-navigation-breadcrumbs__directory">
  30.         <!-- Duplicating the "Home" link in both the global navigation and the breadcrumb trail is not recommended. -->
  31.         <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  32.           <a class="c-navigation-breadcrumbs__link" href="" property="item" typeof="WebPage">
  33.             <span class="u-visually-hidden" property="name"><span class="fa fa-home"> </span> Accueil</span>
  34.           </a>
  35.           <meta property="position" content="1">
  36.         </li>
  38.         <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  39.           <a class="c-navigation-breadcrumbs__link" href="{{ path('produit_produit_produit_formation_institut', {'id': categorie.id }) }}" property="item" typeof="WebPage">
  40.             <span property="name">{{ categorie.nom }}</span>
  41.           </a>
  42.           <meta property="position" content="2">
  43.         </li>
  45.         <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  46.           <a class="c-navigation-breadcrumbs__link" href="#!" property="item" aria-current="location">
  47.             <span property="name">À propos des {{ categorie.nom }}</span>
  48.           </a>
  49.           <meta property="position" content="3">
  50.         </li>
  52.         </ol>
  53.     </div>
  54.     {% else %}
  55.     <div class="col-md-12">
  56.     <div style="padding: 20px 0px;">
  57.         <div class="btn-group" style="float: right; margin-top: -10px;">
  58.         <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Appliquer un filtre <span class="fa fa-angle-down"></span></button>
  59.         <ul class="dropdown-menu pull-right">
  60.             {% for i in range(0,4) %}
  61.                 <li><a href=""> formation.nom </a></li>
  62.                 <li class="divider"></li>
  63.             {% endfor %}
  64.         </ul>
  65.         </div>
  67.         <ul class="breadcrumbs">
  68.           <li><a href="#"><span class="fa fa-home"></span> Accueil</a></li>
  69.           <li><a href="{{ path('produit_produit_produit_formation_institut', {'id': categorie.id }) }}">{{ categorie.nom }}</a></li>
  70.           <li>À propos des {{ categorie.nom }}</li>
  71.         </ul>
  72.     </div>
  73.     </div>
  74.     {% endif %}
  76. </div>
  77. </div>
  78. </div>
  81. <style>
  82. #timeline {
  83.   list-style: none;
  84.   padding: 0;
  85.   position: relative;
  86.   -moz-box-sizing: border-box;
  87.   -webkit-box-sizing: border-box;
  88.   box-sizing: border-box;
  89. }
  90. #timeline:after {
  91.   border: 4px solid;
  92.   border-radius: 50%;
  93.   border-color: #374A67;
  94.   content: "";
  95.   display: block;
  96.   position: absolute;
  97.   left: 17px;
  98. }
  99. .timeline-item {
  100.   border-left: 2px solid #282F44;
  101.   margin: 0 20px;
  102.   padding: 0px 25px 20px 25px;
  103.   position: relative;
  104.   -moz-box-sizing: border-box;
  105.   -webkit-box-sizing: border-box;
  106.   box-sizing: border-box;
  107. }
  108. .timeline-item:before {
  109.   border: 10px solid #374A67;
  110.   border-radius: 50%;
  111.   content: "";
  112.   display: block;
  113.   position: absolute;
  114.   left: -11px;
  115.   width: 20px;
  116.   height: 20px;
  117.   -moz-box-sizing: border-box;
  118.   -webkit-box-sizing: border-box;
  119.   box-sizing: border-box;
  120. }
  121. .timeline-body {
  122.   background-color: #fbfbfb;
  123.   padding: 10px 20px;
  124.   position: relative;
  125.   top: -20px;
  126. }
  127. .timeline-lead {
  128.   line-height: 2px;
  129.   padding-bottom: 5px;
  130. }
  131. .timeline-date {
  132.   font-size: .7rem;
  133.   color: #757780;
  134.   letter-spacing: 1px;
  135.   font-weight: 600;
  136.   text-transform: uppercase;
  137. }
  138. .timeline-title{
  139.   color: #374A67;
  140.   letter-spacing: 1px;
  141.   font-weight: 700;
  142. }
  143. .timeline-content {
  144.   color: #070707;
  145. }
  149. .card-group {
  150.   position: relative;
  151.   width: 100%;
  152.   background: white;
  153.   box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.05);
  154.   border-radius: 0.4rem;
  155.   overflow: hidden;
  156.   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  157.   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  158. }
  160. .card-group:hover{
  161. box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  162. }
  163. .card-group .card-header {
  164.   display: -webkit-box;
  165.   display: flex;
  166.   -webkit-box-orient: vertical;
  167.   -webkit-box-direction: reverse;
  168.           flex-direction: column-reverse;
  169.   height: 100px;
  170.   background-position: center;
  171.   background-size: cover;
  172.   -webkit-transition: height 0.3s;
  173.   transition: height 0.3s;
  174. }
  175. .card-group .card-header:hover {
  176.   height: 200px;
  177. }
  178. .card-group .card-header:hover + .card-body {
  179.   height: 29px;
  180. }
  181. .card-group .card-header .card-title {
  182.   font-size: 16px;
  183.   color: inherit;
  184.   margin: 0;
  185.   padding: 0.5rem 1rem;
  186.   padding-top: 1.2rem;
  187.   background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, white));
  188.   background: linear-gradient(transparent, white 60%);
  189. }
  190. .card-group .card-body {
  191.   height: 150px;
  192.   overflow: hidden;
  193.   padding: 0 1rem;
  194.   -webkit-transition: 0.3s;
  195.   transition: 0.3s;
  196. }
  197. .card-group .card-body .sub-text {
  198.   font-size: 0.9rem;
  199.   color: #646b75;
  200. }
  201. .card-group .card-link-footer {
  202.   display: block;
  203.   padding: 1rem;
  204.   font-weight: bold;
  205.   color: #d96c0f;
  206.   text-align: center;
  207.   text-decoration: none;
  208.   -webkit-transition: 0.2s;
  209.   transition: 0.2s;
  210. }
  211. .card-group .card-link-footer:hover {
  212.   color: white;
  213.   box-shadow: inset 0 -56px 0 #23445e;
  214.   -webkit-transition: 0.2s;
  215.   transition: 0.2s;
  216. }
  218. .mt-0 {
  219.   margin-top: 0;
  220. }
  222. .mb-1 {
  223.   margin-bottom: 0.4rem;
  224. }
  226. .list-episodes {
  227.   list-style: none;
  228.   padding-left: 0;
  229.   margin: 0 -1rem;
  230.   color: #646b75;
  231. }
  232. .list-episodes li {
  233.   padding-left: 0.6rem;
  234. }
  235. .list-episodes li a {
  236.   display: block;
  237.   text-decoration: none;
  238.   color: inherit;
  239.   padding: 0.4rem 1rem;
  240.   padding-left: 0.4rem;
  241.   -webkit-transition: -webkit-transform 0.1s;
  242.   transition: -webkit-transform 0.1s;
  243.   transition: transform 0.1s;
  244.   transition: transform 0.1s, -webkit-transform 0.1s;
  245. }
  246. .list-episodes li a:hover {
  247.   -webkit-transform: translateX(4px);
  248.           transform: translateX(4px);
  249.   -webkit-transition: -webkit-transform 0.1s;
  250.   transition: -webkit-transform 0.1s;
  251.   transition: transform 0.1s;
  252.   transition: transform 0.1s, -webkit-transform 0.1s;
  253. }
  254. .list-episodes li a b {
  255.   font-size: 0.8rem;
  256.   margin-right: 4px;
  257. }
  258. .list-episodes li:nth-child(even) div {
  259.   border-radius: 4px 0 0 4px;
  260.   background: rgba(239, 241, 245, 0.9);
  261. }
  263. </style>
  266. <div style="background: #f0f0f2; padding-top: 20px;">
  267. <div class="container">
  268. <div class="row">
  269.     <div class="col-md-3">
  270.         {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:menuleft")) }}
  271.     </div>
  272.     
  273.     
  274.     <div class="col-md-9">
  275.         <div class="my-div">
  276.         <section class="testing" style="width: 100%;">
  277.            <div class="description2 to-expand">
  278.                 <h2>{{ souscategorie.nom }} </h2>
  279.                 <p>
  280.                     {{ souscategorie.description|raw }}
  281.                 </p>
  282.            </div>
  283.         </section>
  284.         </div>
  285.         
  286.         <div class="my-div">
  287.         <section class="testing" style="width: 100%;">
  288.         <div class="description2 to-expand">
  289.         <h2 style="margin-bottom: 20px;">Offres de formation</h2>
  290.             {% if categorie.typeservice == 'diplomante' %}
  291.                     <ul id="timeline">
  292.                       {% for prod in liste_produit %}
  293.                       <li class="timeline-item">
  294.                         <div class="timeline-icon"></div>
  295.                         <div class="timeline-body">
  296.                           <div class="timeline-lead">
  297.                             <h3 class="timeline-title"><a href="{{ path('produit_produit_detail_produit_market', {'id': prod.id}) }}">{{ prod.nom }}</a></h3>
  298.                             <span class="timeline-date">${date}</span>
  299.                           </div>
  300.                           <p class="timeline-content">{{ prod.contenu }}</p>
  301.                         </div>
  302.                       </li>
  303.                       {% endfor %}
  304.                     </ul>
  305.             {% else %}
  306.               <div class="cards row">
  307.               {% for prod in liste_produit %}
  308.               <div class="col-md-4">
  309.               
  310.                 <div class="card-group">
  311.                   <div class="card-header" style="background-image: url({% if prod.imgproduit != null %}{{ asset(prod.imgproduit.getwebpath) }}{% else %}{{ asset('template/images/present.png') }}{% endif %});">
  312.                     <h2 class="card-title text-left">
  313.                       <a href="{{ path('produit_produit_detail_produit_market', {'id': prod.id}) }}">{{ prod.nom }}</a>
  314.                     </h2>
  315.                   </div>
  316.                   <div class="card-body text-left">
  317.                     <p class="sub-text">{{ prod.contenu }}</p>
  318.                     <h4 class="mt-0 mb-1">Caractéristiques</h4>
  320.                     <ol class="list-episodes">
  321.                         {% for carprod in prod.caracteristiqueproduits %}
  322.                         <li>
  323.                             <div>
  324.                                 <a href="#!">{{ carprod.valeur }} {{ carprod.caracteristique.nom }}</a>
  325.                             </div>
  326.                         </li>
  327.                         {% endfor %}
  328.                     </ol>
  330.                   </div>
  331.                   <a class="card-link-footer commande-offer-formation" value="{{ prod.id }}" name="fc" href="#!"><span class="fa fa-hand-pointer-o"></span> S'inscrire</a>
  332.                 </div>
  333.               </div>
  334.               {% endfor %}
  336.             </div>
  339.             <script type="text/javascript">
  340.             $(document).ready(function(){
  341.               var zindex = 10;
  342.               
  343.               $("div.card").click(function(e){
  344.                 e.preventDefault();
  346.                 var isShowing = false;
  348.                 if ($(this).hasClass("show")) {
  349.                   isShowing = true
  350.                 }
  352.                 if ($("div.cards").hasClass("showing")) {
  353.                   // a card is already in view
  354.                   $("div.card.show")
  355.                     .removeClass("show");
  357.                   if (isShowing) {
  358.                     // this card was showing - reset the grid
  359.                     $("div.cards")
  360.                       .removeClass("showing");
  361.                   } else {
  362.                     // this card isn't showing - get in with it
  363.                     $(this)
  364.                       .css({zIndex: zindex})
  365.                       .addClass("show");
  367.                   }
  369.                   zindex++;
  371.                 } else {
  372.                   // no cards in view
  373.                   $("div.cards")
  374.                     .addClass("showing");
  375.                   $(this)
  376.                     .css({zIndex:zindex})
  377.                     .addClass("show");
  379.                   zindex++;
  380.                 }
  381.                 
  382.               });
  383.             });
  384.             </script>
  385.           {% endif %}
  386.           </div>
  387.         </section>
  388.         </div> 
  389.     </div>
  390. </div>
  391. </div>
  392. </div>
  395. <div style="background: #fff;">
  396. <div class="container">
  397. <div class="row">
  398.     <div class="col-md-12" style="height: 50px;">
  399.         Avis Utilisateurs
  400.     </div>
  401. </div>
  402. </div>
  403. </div>
  406. {% endblock %}
  408. {% block javascripttemplate %}
  410. $('.description2').expandable({
  411.     height: 600,
  412.     expand_responsive : 960,
  413.     offset: 30
  414. });
  417. $('.accordion-1 > li:eq(0) a').addClass('active').next().slideDown();
  418. $('.accordion-2 > li:eq(0) a').addClass('active').next().slideDown();
  420. $('.accordion a.targetlink').click(function(j) {
  421.     var dropDown = $(this).closest('li').find('p');
  423.     $(this).closest('.accordion').find('p').not(dropDown).slideUp();
  425.     if ($(this).hasClass('active')) {
  426.         $(this).removeClass('active');
  427.     } else {
  428.         $(this).closest('.accordion').find('a.active').removeClass('active');
  429.         $(this).addClass('active');
  430.     }
  432.     dropDown.stop(false, true).slideToggle();
  434.     j.preventDefault();
  435. });
  437. {% endblock %}