templates/campus/detail.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block page_contents %}
  4. <section class="section section-page-title bg-gradient py-xl-5 py-4" data-aos='fade-down'>
  5.   <div class="container">
  6.     <div class="row">
  7.       <div class="col-xl-11 mx-auto text-center text-white d-flex justify-content-center align-items-center flex-md-row flex-column">
  8.         <div class="campus-logo bg-white mr-md-4 mr-0 my-md-0 my-3">
  9.           {% if campus.logo %}
  10.           <img src="{{ (campus.logo ? campus.logo.path : '') | mediaUrl }}" onerror="this.onerror=null;this.src='{{ asset('assets/images/no-img/campus.jpg') }}';" alt="{{ campus.seoH1 }}">
  11.           {% else %}
  12.             <img src="{{ asset('assets/images/campus/logo-estiam.png') }}">
  13.             <div class="text-right"><span class="text-orange font-weight-bold">/</span> <span class="font-weight-bold text-dark-purple text-uppercase">{{ campus.city }}</span></div>
  14.           {% endif %}
  15.         </div>
  16.         <h1 class="page-name font-weight-bold my-2 flex-1 text-md-left">
  17.           {% if campus.seoH1 %}
  18.             {{ campus.seoH1 }}
  19.           {% else %}
  20.             {{ "Venez découvrir le campus ÉSTIAM à" | trans ~ ' ' ~ campus.name ~ ' ' ~"! École d'informatique à" | trans ~ ' ' ~campus.name }}
  21.           {% endif %}
  22.       </div>
  23.     </div>
  24.   </div>
  25. </section>
  27. <section class="section section-campus-content mt-4 mb-5">
  28.   <div class="container">
  29.     <div class="row">
  30.       <div class="col-lg-8 mb-4" data-aos='fade-right'>
  31.         {% for block in campus.presentationBlocks %}
  32.         <div class="block-content keepEditorStyle text-dark-purple text-justify mt-lg-4 pt-2">
  33.           <h2>{{ block.title | raw }}</h2>
  34.           {{ block.description | raw }}
  35.         </div>
  36.         {% endfor %}
  37.       </div>
  38.       <div class="col-lg-4">
  39.         <div class="block-prochain d-flex flex-column h-100 p-3 mb-4" data-aos='fade-left'>
  40.           <div class="section-title mb-4"><span>/</span> Prochains événements</div>
  41.           {% if jpos %}
  42.             {% for jpo in jpos %}
  43.             <div class="p-item d-flex mb-4">
  44.               <div class="p-date d-flex flex-column justify-content-center align-items-center">
  45.                 <div class="font-weight-bold line-1 mb-1">{{ jpo.date|formatDateLocale('d') }}</div>
  46.                 <div class="text-uppercase line-2">{{ jpo.date|formatDateLocale('MMM')[:3] }}</div>
  47.               </div>
  48.               <a class="p-text flex-1 d-flex flex-column justify-content-center py-1" 
  49.               href="{{ path('open_day') }}?scroll=jpo-{{ jpo.id }}">
  50.                 <div class="p-name font-weight-bold text-uppercase mb-2">
  51.                   {{ jpo.name }}
  52.                 </div>
  53.                 <div class="p-link mt-auto">
  54.                   <span>{% trans %}En savoir plus{% endtrans %}<i class="far fa-arrow-right"></i></span>
  55.                 </div>
  56.               </a>
  57.             </div>
  58.             {% endfor %}
  59.           {% else %}
  60.             <div class="text-center">{% trans %}Aucun évènement en cours{% endtrans %}</div>
  61.           {% endif %}
  62.         </div>
  63.       </div>
  64.     </div>
  65.   </div>
  66. </section>
  67. {% if campus.articles | length > 0 %}
  68. <section class="section section-campus-news pt-5">
  69.   <div class="container">
  70.     <div class="row">
  71.       {% for article in campus.articles %}
  72.       <div class="col-lg-6 mb-xl-5 mb-4">
  73.         <div class="n-item d-flex h-100 flex-md-row flex-column" data-aos='fade-up'>
  74.           <div class="n-icon hover-zoom position-relative mx-auto">
  75.             {% if article.image %}
  76.             <img class="w-100" src="{{ article.image.path | mediaUrl }}">
  77.             {% endif %}
  78.           </div>
  79.           <div class="n-content flex-1 d-flex flex-column h-100 font-weight-300 text-justify position-relative keepEditorStyle">
  80.             <div class="text-left font-18 text-purple font-weight-bold mb-2">{{ article.title }}</div>
  81.             {{ article.description | raw }}
  82.           </div>
  83.         </div>
  84.       </div>
  85.       {% endfor %}
  86.     </div>
  87.   </div>
  88. </section>
  89. {% endif %}
  90. {% if campus.images | length > 0 %}
  91. <section class="section section-gallery-carousel section-campus-slider mb-5 mt-4" data-aos='fade-up'>
  92.   <div class="container">
  93.     <div class="row">
  94.       <div class="col-12">
  95.         <div class="slider slider-campus-detail pb-3">
  96.           {% for image in campus.images %}
  97.           <div>
  98.             <img class="w-100" src="{{ image.path | mediaUrl }}">
  99.           </div>
  100.           {% endfor %}
  101.         </div>
  102.       </div>
  103.     </div>
  104.   </div>
  105. </section>
  106. {% endif %}
  107. <section class="section section-gallery-carousel section-campus-parlent py-4" data-aos='fade-up'>
  108.   <div class="container">
  109.     <div class="row">
  110.       <div class="col-12 text-center">
  111.         <div class="section-title mb-4"><span>/</span> Nos étudiants en parlent le mieux !</div>
  112.       </div>
  113.       <div class="col-12">
  114.         <div class="slider slider-campus-parlent">
  115.           {% for student in outStudentArticles %}
  116.             <div>
  117.               <div class="t-box d-flex flex-column h-100 position-relative">
  118.                 <div class="t-img position-absolute t-0">
  119.                   <img src="{{ asset('assets/images/parlent/mask.png') }}" width="148" class="position-relative">
  120.                   <div class="position-absolute w-100 h-100 l-0 t-0 rounded-circle" style="background-image: url({{ student.imageUrl }});"></div>
  121.                 </div>
  122.                 <div class="t-content d-flex flex-column h-100 px-4 pt-md-3 pb-3">
  123.                   <div class="t-icon">
  124.                     <div class="line-1 text-purple text-md-left font-weight-bold flex-1 text-md-left">{{ student.title }}</div>
  125.                   </div>
  126.                   <div class="t-text text-dark-purple text-justify">
  127.                     {{ student.content }}
  128.                   </div>
  129.                 </div>
  130.               </div>
  131.             </div>
  132.           {% endfor %}
  133.         </div>
  134.       </div>
  135.     </div>
  136.   </div>
  137. </section>
  138. {% if campus.keyFigures | length > 0 %}
  139. <section class="section section-campus-chiffres bg-light pt-4">
  140.   <div class="container">
  141.     <div class="row">
  142.       <div class="col-12">
  143.         <div class="section-title mb-4" data-aos='fade-down'><span>/</span> Chiffres clés</div>
  144.       </div>
  145.       <div class="col-xl-9 mx-auto">
  146.         <div class="row justify-content-center">
  147.           {% for keyFigure in campus.keyFigures %}
  148.           <div class="col-lg-3 col-md-4 col-6 mb-xl-5 mb-4" data-aos='zoom-in'>
  149.             <div class="c-circle">
  150.               <div class="circle" data-value="{{ keyFigure.percent / 100 }}"></div>
  151.               <div class="text">{{ keyFigure.percent }}%</div>
  152.             </div>
  153.             <div class="c-text font-weight-300 font-italic text-center mx-xl-2">
  154.               {{ keyFigure.title }}
  155.             </div>
  156.           </div>
  157.           {% endfor %}
  158.         </div>
  159.       </div>
  160.     </div>
  161.   </div>
  162. </section>
  163. {% endif %}
  165. {% if campus.youtubeUrl %}
  166. <section class="section section-gallery-carousel bg-purple pb-4 pt-5" data-aos='fade-up'>
  167.   <div class="container">
  168.     <div class="row">
  169.       <div class="col-xl-7 mx-auto ">
  170.         <div class="section-title text-white mb-4"><span>/</span>  Vidéo sur le campus</div>
  171.         <div class="slider campus-video-slider pb-md-4">
  172.           {% for youtubeUrl in campus.youtubeUrl %}
  173.             <div>
  174.               <div class="embed-responsive embed-responsive-16by9 hvr-glow">
  175.                 <iframe class="embed-responsive-item" src="{{ youtubeUrl | extractYoutubeId }}?rel=0" allowfullscreen></iframe>
  176.               </div>
  177.             </div>
  178.           {% endfor %}
  179.         </div>
  180.       </div>
  181.     </div>
  182.   </div>
  183. </section>
  184. {% endif %}
  186. {% if campus.campusCenters | length > 0 %}
  187. <section class="section section-campus-location" data-aos='fade-up'>
  188.   <div class="container-fluid">
  189.     <div class="row {{ campus.campusCenters | length == 1 ? 'one-location' : 'two-location' }} ">
  190.       {% for center in campus.campusCenters %}
  191.       <div class="{{ campus.campusCenters | length == 1 ? 'col-12' : 'col-lg-6' }} px-0">
  192.         <div class="center-map" id="center-map-{{ center.id }}" style="height: 400px;"></div>
  193.         <div class="px-xl-5 px-md-4 px-3 {{ campus.campusCenters | length == 1 ? 'container' : '' }}">
  194.           <div class="location d-flex align-items-center">
  195.             <div class="l-box px-4 py-4">
  196.               <div class="l-name font-weight-bold text-purple font-25">
  197.                 ÉSTIAM Campus {{ campus.name }} {% if campus.name == 'Paris' %}{{ loop.index == 1 ? '20ème' : '13ème' }}{% endif %}
  198.               </div>
  199.               <div class="l-add d-flex my-3">
  200.                 <div><i class="fa-light fa-location-dot font-12"></i></div>
  201.                 <div class="flex-1 ml-2">
  202.                   <div class="text-dark-purple">
  203.                     {% if center.address %}<div>{{ center.address }}</div>{% endif %}
  204.                     {% if center.address2 %}<div>{{ center.address2 }}</div>{% endif %}
  205.                     {% if center.postalCode or center.city %}<div>{{ center.postalCode }} {{ center.city }}</div>{% endif %}
  206.                     {% if center.country %}<div>{{ center.country }}</div>{% endif %}
  207.                   </div>
  208.                   {% if center.googleMapUrl %}
  209.                     <a href="{{ center.googleMapUrl }}" target="_blank">(carte)</a>
  210.                   {% endif %}
  211.                 </div>
  212.               </div>
  213.               {% if center.transportMethods %}
  214.               <div class="l-detail mb-3 text-dark-purple">
  215.                 <small style="white-space: pre-wrap;">{{ center.transportMethods | raw }}</small>
  216.               </div>
  217.               {% endif %}
  218.               <div class="l-contact">
  219.                 {% if center.contactEmail %}
  220.                 <p class="mb-0"><span class="font-weight-300 font-italic">Contactez-nous :</span> <a class="font-weight-bold" href="mailto:{{ center.contactEmail }}">{{ center.contactEmail }}</a></p>
  221.                 {% endif %}
  222.                 {% if center.disabilityReferentName or center.disabilityReferentEmail %}
  223.                   <p class="mb-0">
  224.                     <span class="font-weight-300 font-italic">Référent handicap :</span>
  225.                     <span class="font-weight-bold text-nowrap d-inline-block">
  226.                       {{ center.disabilityReferentName }}
  227.                     {% if center.disabilityReferentName and center.disabilityReferentEmail  %} - {% endif %}
  228.                     {% if center.disabilityReferentEmail %}
  229.                       <a class="font-weight-bold" href="mailto:{{ center.disabilityReferentEmail }}">
  230.                         {{ center.disabilityReferentEmail }}
  231.                       </a>
  232.                     {% endif %}
  233.                     </span>
  234.                   </p>
  235.                 {% endif %}
  236.               </div>
  237.             </div>
  238.           </div>
  239.         </div>
  240.       </div>
  241.       {% endfor %}
  242.     </div>
  243.   </div>
  244. </section>
  245. {% endif %}
  246. {% endblock %}
  248. {% block custom_javascripts %}
  249. <script src="https://maps.google.com/maps/api/js?&region=France&key=AIzaSyAAq_3rBXv_JZgDNmNZMuIARuTCkkyf1VY" type="text/javascript"></script>
  250. <script type="text/javascript" src="{{ asset('assets/js/jquery.inview.js') }}"></script>
  251. <script type="text/javascript" src="{{ asset('assets/js/jquery-circle-progress.js') }}"></script>
  252. <script type="text/javascript">
  253. $(document).ready(function(){
  254.   $('.campus-video-slider').not(".slick-initialized").slick({
  255.       slidesToShow: 1,
  256.       dots: true,
  257.       infinite: true,
  258.       useTransform: false,
  259.       prevArrow: '<button type="button" class="slick-prev slick-arrow"><i class="fat fa-angle-left"></i></button>',
  260.       nextArrow: '<button type="button" class="slick-next slick-arrow"><i class="fat fa-angle-right"></i></button>',
  261.       responsive: [{
  262.         breakpoint: 600,
  263.         settings: {
  264.           arrows: true,
  265.           centerPadding: "10px",
  266.           slidesToShow: 1
  267.         }
  268.       }]
  269.     })
  271.   $('.section-campus-chiffres').bind('inview', function (event, visible) {
  272.     if (visible == true) {
  273.       $('.circle').circleProgress({
  274.         fill: {color: '#ff0000'},
  275.         startAngle: -Math.PI / 2,
  276.         size: 107
  277.       });
  278.     }
  279.   });
  280.   function map_recenter(map, latlng,offsetx,offsety) {
  281.     var point1 = map.getProjection().fromLatLngToPoint(
  282.         (latlng instanceof google.maps.LatLng) ? latlng : map.getCenter()
  283.     );
  284.     var point2 = new google.maps.Point(
  285.         ( (typeof(offsetx) == 'number' ? offsetx : 0) / Math.pow(2, map.getZoom()) ) || 0,
  286.         ( (typeof(offsety) == 'number' ? offsety : 0) / Math.pow(2, map.getZoom()) ) || 0
  287.     );  
  288.     map.setCenter(map.getProjection().fromPointToLatLng(new google.maps.Point(
  289.         point1.x - point2.x,
  290.         point1.y + point2.y
  291.     )));
  292. }
  293.   async function renderCenterMap(center) {
  294.     console.log(center, 'center')
  295.     const latlng = new google.maps.LatLng(center.latitude, center.longtitude)
  296.     const map = new google.maps.Map(document.getElementById('center-map-' + center.id), {
  297.       zoom: 16,
  298.       center: latlng,
  299.       disableDefaultUI: true,
  300.       mapTypeId: google.maps.MapTypeId.ROADMAP,
  301.       styles: [
  302.         {
  303.           "elementType": "labels",
  304.           "stylers": [
  305.             {
  306.               "visibility": "off"
  307.             }
  308.           ]
  309.         },
  310.         {
  311.           "featureType": "administrative.country",
  312.           "elementType": "labels.text",
  313.           "stylers": [
  314.             {
  315.               "visibility": "on"
  316.             }
  317.           ]
  318.         },
  319.         {
  320.           "featureType": "administrative.land_parcel",
  321.           "stylers": [
  322.             {
  323.               "visibility": "off"
  324.             }
  325.           ]
  326.         },
  327.         {
  328.           "featureType": "administrative.neighborhood",
  329.           "stylers": [
  330.             {
  331.               "visibility": "off"
  332.             }
  333.           ]
  334.         },
  335.         {
  336.           "featureType": "administrative.province",
  337.           "elementType": "labels.text",
  338.           "stylers": [
  339.             {
  340.               "visibility": "on"
  341.             }
  342.           ]
  343.         },
  344.         {
  345.           "featureType": "road",
  346.           "elementType": "labels.text",
  347.           "stylers": [
  348.             {
  349.               "visibility": "on"
  350.             }
  351.           ]
  352.         }
  353.       ]
  354.     });
  355.     google.maps.event.addListenerOnce(map, 'idle', function(){
  356.       map_recenter(map, latlng, 200, 0)
  357.     });
  358.     let centerTimeout = null
  359.     google.maps.event.addListener(map, 'center_changed', function() {
  360.         clearTimeout(centerTimeout)
  361.         centerTimeout = setTimeout(function() {
  362.           map_recenter(map, latlng, 200, 0)
  363.         }, 200)
  364.     })
  365.     const image = {
  366.       url: "{{ asset('assets/images/icons/icon-location-purple.png') }}",
  367.       size: new google.maps.Size(27, 38)
  368.     };
  369.     const marker = new google.maps.Marker({
  370.       position: latlng,
  371.       map: map,
  372.       icon: image
  373.     });
  374.   }
  376.   const centers = {{ centerLocationList | json_encode() | raw }};
  377.   centers.forEach(center => renderCenterMap(center))
  378. })  
  379. </script>
  380. {% endblock %}