templates/Theme/Produit/Service/Service/detailarticlecentral.html.twig line 1

Open in your IDE?
  1. {% extends "Theme/Users/User/layoutoffert.html.twig" %}
  2. {% block meta %}
  3.     {{ parent() }}
  4.     <meta name="keywords" content="{{ site }}, {{ keywords }}"/>
  5.     <meta name="author" content="Noel Kenfack"/>
  6.     <meta name="description" content="{{ site }} - {{ article.nom }}"/>
  7. {% endblock %}
  8. {% block title %}
  9.     {{ parent() }} - {{ article.breve }}
  10. {% endblock %}
  11. {% block stylesheets %}
  12.     {{ parent() }}
  13. {% endblock %}
  14. {% block userblog_body %}
  15. <div style="background: #90acd1;">
  16.     <div class="container" style="overflow: hidden;">
  17.         <div class="row" style="margin: 15px 0px;">
  18.         <div class="col-md-12">
  19.         {% if is_mobile() %}
  20.         <ol class="c-navigation-breadcrumbs__directory">
  21.             <!-- Duplicating the "Home" link in both the global navigation and the breadcrumb trail is not recommended. -->
  22.             <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  23.               <a class="c-navigation-breadcrumbs__link" href="" property="item" typeof="WebPage">
  24.                 <span class="u-visually-hidden" property="name"><span class="fa fa-home"> </span> Accueil</span>
  25.               </a>
  26.               <meta property="position" content="1">
  27.             </li>
  28.     
  29.             <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  30.               <a class="c-navigation-breadcrumbs__link" href="" property="item" typeof="WebPage">
  31.                 <span property="name"> L'entreprise</span>
  32.               </a>
  33.               <meta property="position" content="2">
  34.             </li>
  35.     
  36.             <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  37.               <a class="c-navigation-breadcrumbs__link" href="#!" property="item" aria-current="location">
  38.                 <span property="name">À propos de  nous </span>
  39.               </a>
  40.               <meta property="position" content="3">
  41.             </li>
  42.         </ol>
  43.         {% else %}
  44.         <div style="padding: 20px 0px;">
  45.             <ul class="breadcrumbs">
  46.               <li><a href="{{ path('users_user_acces_plateforme') }}"><span class="fa fa-home"></span> Accueil</a></li>
  47.               <li><a > L'entreprise</a></li>
  48.               <li>À propos de nous</li>
  49.             </ul>
  50.         </div>
  51.         {% endif %}
  52.       </div>
  53.       
  54.       
  55.       </div>
  56.     
  57.       
  58.     </div>
  59.     </div>
  60.     <div style="background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%);">
  61.         <div class="container" style="height: 20px;">
  62.           
  63.         </div>
  64.     </div>
  65. <div class="container" style="min-height: 500px;">
  66.     <div class="row">
  67.         <div class="col-md-12">
  68.             <div class="animecourant-panel" style="display: block;">
  69.                     
  70.             </div>
  71.         </div>
  72.     </div>
  73.     <div class="row" style="margin-top: 7px;">
  74.         <div class="col-md-8">
  75.             <h3 class="breadcrumbs-title" style="margin-bottom: 15px;">
  76.                 <a href="{{ path('produit_service_afh_sps',{'position': 'blogads'}) }}" class="btn btn-default btn-lg border">
  77.                     <span class="bi bi-arrow-left-short"></span> Précédent
  78.                 </a>
  79.                 {{ article.breve }}
  80.             </h3>
  81.         </div>
  82.         <div class="col-md-4">
  83.             <div class="dropdowncarte">
  84.                 <button></button>
  85.                 <div class="options">
  86.                     {% for type in type_blog %}
  87.                     <input id="target_item_{{ type.id }}" type="radio" name="region" value="africa" checked="">
  88.                         <label style="--index: {{ loop.index }}" for="target_item_{{ type.id }}">
  89.                         <span class="fa fa-list-alt"></span>
  90.                         {{ type.nom }}
  91.                     </label>
  92.                     {% endfor %}
  93.                 </div>
  94.                 <svg viewBox="0 0 24 24">
  95.                     <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
  96.                 </svg>
  97.             </div>
  98.         </div>
  99.     </div>
  100.     <div class="row" style="margin-bottom: 15px;">
  101.         <div class="col-md-4">
  102.             <div class="toutleblock">
  103.             <nav class="navigation" id="mainNav" style="margin-top: 0px;">
  104.                 <a class="navigation__link" href="#0">
  105.                     <span class="fa fa-info-circle"></span> À propos
  106.                 </a>
  107.                 {% for partie in article.getPartiearticles %}
  108.                     <a class="navigation__link" href="#{{ partie.id }}">{{ partie.nom }}</a>
  109.                 {% endfor %}
  110.             </nav>
  111.             <div class="shadow2 mt-3" style="padding: 15px; background: #fff;">
  112.                 <h5>Articles de formation récents</h5>
  113.                 {% for course in liste_article %}
  114.                     <div class="mb-3">
  115.                         <a href="{{ path('produit_service_detail_article_central', {'id': course.id }) }}">{{ course.nom }}</a>
  116.                     </div>
  117.                 {% endfor %}
  118.             </div>
  119.             <div class="row">
  120.                 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 stop-courant-panel">
  121.                     
  122.                 </div>
  123.             </div>
  124.             </div>
  125.         </div>
  126.         <div class="col-md-8">
  127.             <div class="page-section2 card mb-3" id="0">
  128.                 <div class="card-header">
  129.                     <h5>{{ article.nom }}</h5>
  130.                 </div>
  131.                 <div class="card-body">
  132.                     <div class="demo-images-annonces">
  133.                     
  134.                         <a href="{% if article.imgservice != null %}{{ asset(article.imgservice.getwebpath) }}{% else %}{{ asset('template/images/boost2.png') }}{% endif %}" title="{{ article.nom }}" class="thumbnail-popup">
  135.                             <img alt="Image {{ article.nom }}" src="{% if article.imgservice != null %}{{ asset(article.imgservice.getwebpath) }}{% else %}{{ asset('template/images/boost2.png') }}{% endif %}" class="img-fluid"/>
  136.                         </a>
  137.                         {% for imgpartie in images_partie %}
  138.                         <a href="{% if imgpartie.imgevenement != null %}{{ asset(imgpartie.imgevenement.getwebpath) }}{% else %}{{ asset('template/images/boost2.png') }}{% endif %}" title="{{ imgpartie.nom }}" class="thumbnail-popup">
  139.                             <img alt="Image {{ imgpartie.nom }}" src="{% if imgpartie.imgevenement != null %}{{ asset(imgpartie.imgevenement.getwebpath) }}{% else %}{{ asset('template/images/boost2.png') }}{% endif %}" class="img-fluid"/>
  140.                         </a>
  141.                         {% endfor %}
  142.                         
  143.                     </div>
  144.                     <div style="font-size: 16px;">
  145.                         {{ article.description|raw }}
  146.                     </div>
  147.                 </div>
  148.                 <div class="card-footer">
  149.                     <a href="#!" style="display: inline-block; margin-right: 20px;">
  150.                         12 <span class="fa fa-circle" style="font-size: 9px;"></span> <span class="bi bi-hand-thumbs-up"></span> J'aime
  151.                     </a>
  152.                     <a href="#!">
  153.                         1 <span class="fa fa-circle" style="font-size: 9px;"></span> <span class="bi bi-hand-thumbs-down"></span> J'aime pas
  154.                     </a>
  155.                 </div>
  156.             </div>
  157.             {% for partie in article.getPartiearticles %}
  158.                 <div class="page-section2 card mb-3" id="{{ partie.id }}">
  159.                     <div class="card-header">
  160.                         <h5>{{ partie.nom }}</h5>
  161.                     </div>
  162.                     <div class="card-body">
  163.                         {% if partie.imgevenement != null %}
  164.                         <div class="demo-images-annonces">
  165.                             <a href="{% if partie.imgevenement != null %}{{ asset(partie.imgevenement.getwebpath) }}{% else %}{{ asset('template/images/boost2.png') }}{% endif %}" title="{{ partie.nom }}" class="thumbnail-popup">
  166.                                 <img alt="Image {{ partie.nom }}" src="{% if partie.imgevenement != null %}{{ asset(partie.imgevenement.getwebpath) }}{% else %}{{ asset('template/images/boost2.png') }}{% endif %}" class="img-fluid"/>
  167.                             </a>
  168.                         </div>
  169.                         {% endif %}
  170.                         {{ partie.description|raw }}
  171.                     </div>
  172.                     <div class="card-footer">
  173.                         <a href="#!" style="display: inline-block; margin-right: 20px;">
  174.                             12 <span class="fa fa-circle" style="font-size: 9px;"></span> <span class="fa fa-thumbs-o-up"></span> J'aime
  175.                         </a>
  176.                         <a href="#!">
  177.                             1 <span class="fa fa-circle" style="font-size: 9px;"></span> <span class="fa fa-thumbs-o-down"></span> J'aime pas
  178.                         </a>
  179.                     </div>
  180.                 </div>
  181.             {% endfor %}
  182.         </div>
  183.     </div>
  184.     
  185. </div>
  186. {% endblock %}
  187. {% block srcjavascripttemplate %}
  188. <script src="{{ asset('template/js/onvisible.js') }}" type="text/javascript"></script>
  189. {% endblock %}
  190. {% block javascripttemplate %}
  191. $(".demo-images-annonces").justifiedGallery({rowHeight: 100});
  192. $('.thumbnail-popup').viewbox();
  193. $(document).ready(function(){
  194.     $('a[href*=#]').bind('click', function(e) {
  195.         e.preventDefault(); // prevent hard jump, the default behavior
  196.         var target = $(this).attr("href"); // Set the target as variable
  197.         // perform animated scrolling by getting top-position of target-element and set it as scroll target
  198.         $('html, body').stop().animate({
  199.                 scrollTop: $(target).offset().top
  200.         }, 600, function() {
  201.                 location.hash = target; //attach the hash (#jumptarget) to the pageurl
  202.         });
  203.         return false;
  204.     });
  205. });
  206. $(window).scroll(function(){
  207.     var scrollDistance = $(window).scrollTop();
  208.     // Show/hide menu on scroll
  209.     //if (scrollDistance >= 850) {
  210.         //    $('nav').fadeIn("fast");
  211.     //} else {
  212.         //    $('nav').fadeOut("fast");
  213.     //}
  214.     // Assign active class to nav links while scolling
  215.     $('.page-section2').each(function(i) {
  216.         if ($(this).position().top <= scrollDistance) {
  217.             $('.navigation a.active').removeClass('active');
  218.             $('.navigation a').eq(i).addClass('active');
  219.         }
  220.     });
  221. }).scroll();
  222. var bouge = 1;
  223. var dimension = 200;
  224. function activateelement()
  225. {
  226. var visibility = visibleElement('.animecourant-panel');
  227. if(visibility && bouge == 0){
  228.     bouge = 1;
  229.     $('.toutleblock').css('position','relative');
  230.     $('.toutleblock').css('bottom','0px');
  231.     $('.toutleblock').css('margin-bottom','200px');
  232. }
  233. }
  234. function stopelement()
  235. {
  236. var visibility = visibleElement('.stop-courant-panel');
  237. if(visibility && bouge == 1){
  238.     if(visibleElement('.animecourant-panel') && visibleElement('.stop-courant-panel'))
  239.     {
  240.     }else{
  241.     bouge = 0;
  242.     $('.toutleblock').css('position','fixed');
  243.     $('.toutleblock').css('width',dimension+'px');
  244.     $('.toutleblock').css('bottom','7px');
  245.     $('.toutleblock').css('margin-bottom','200px');
  246.     }
  247. }
  248. }
  249. function controlScroll()
  250. {
  251.     var largeur = ($(window).width());
  252.     dimension = $('.toutleblock').width();
  253.     if (largeur >= 768)
  254.     {
  255.         if(visibleElement('.animecourant-panel') && visibleElement('.stop-courant-panel'))
  256.         {
  257.         $('.toutleblock').css('position','fixed');
  258.         $('.toutleblock').css('width',dimension+'px');
  259.         }else{
  260.         window.setInterval(function() { stopelement(); }, 100);
  261.         window.setInterval(function() { activateelement(); }, 100);
  262.         }
  263.         
  264.     }
  265. }
  266. controlScroll();
  267. $('#target-menu-blog-{{ article.type.id }}').addClass('position-current-user');
  268. $('a').tooltip();
  269. {% endblock %}