templates/default/homepage.html.twig line 1

Open in your IDE?
  1. {% extends 'default/index.html.twig'%}
  2. {% block body %}
  3.     <!-- Navigation -->
  4.     <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
  5.         <div class="container">
  6.             <div class="navbar-header">
  7.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
  8.                     Menu <i class="fa fa-bars"></i>
  9.                 </button>
  10.                 <a class="navbar-brand page-scroll" href="#page-top">
  11.                     <i class="fa fa-play-circle"></i> {{myTitle}}
  12.                 </a>
  13.             </div>
  15.             <!-- Collect the nav links, forms, and other content for toggling -->
  16.             <div class="collapse navbar-collapse navbar-left navbar-main-collapse">
  17.                 <ul class="nav navbar-nav">
  18.                     <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
  19.                     <li class="hidden">
  20.                         <a href="#page-top"></a>
  21.                     </li>
  22.                     <li>
  23.                         <a class="page-scroll" href="#portfolio">Blog</a>
  24.                     </li>
  25.                     <li>
  26.                         <a class="page-scroll" href="#about">À propos</a>
  27.                     </li>
  28.                     <li>
  29.                         <a class="page-scroll hover" href="#contact">Contact</a>
  30.                     </li>
  31.                 </ul>
  32.             </div>
  33.             <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
  34.                 <ul class="nav navbar-nav">
  35.                     <li>
  36.                         <a id='login' class="page-scroll" href="{{asset(baseDir)}}login">Login</a>
  37.                     </li>
  38.                 </ul>
  39.             </div>
  40.             <!-- /.navbar-collapse -->
  41.         </div>
  42.         <!-- /.container -->
  43.     </nav>
  45.     <!--Diaporama section -->
  46.     <section>
  47.         <div id="Carousel" class="carousel slide" >
  48.             <ol class="carousel-indicators">
  49.                 {% for key,diapo in diaporamas %}
  50.                     {% if key == 0 %}
  51.                         <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  52.                     {%else%}
  53.                         <li data-target="#carouselExampleIndicators" data-slide-to="{{key}}"></li>
  54.                     {%endif%}
  55.                 {%endfor%}
  56.             </ol>
  58.             <div class="carousel-inner">
  59.                 {% for key,diapo in diaporamas %}
  60.                     {% if key == 0 %}
  61.                         <div class="item active" id="diaporama-active">
  62.                             <img src="{{asset(baseDir)}}diaporama/{{ diapo.id }}_{{ diapo.diapofilename }}" class="img-responsive">
  63.                             <div class="carousel-caption">
  64.                                 <h1>{{ diapo.diapotitre }}</h1>
  65.                                 <p>{{ diapo.diapodescription }}</p>
  66.                                 <a href="#portfolio" class="btn btn-circle page-scroll">
  67.                                     <i class="fa fa-angle-double-down animated"></i>
  68.                                 </a>
  69.                             </div>
  71.                         </div>
  72.                     {%else%}
  73.                         <div class="item">
  74.                             <img src="{{asset(baseDir)}}diaporama/{{ diapo.id }}_{{ diapo.diapofilename }}" class="img-responsive">
  75.                             <div class="carousel-caption">
  76.                                 <h1>{{ diapo.diapotitre }}</h1>
  77.                                 <p>{{ diapo.diapodescription }}</p>
  78.                                 <a href="#portfolio" class="btn btn-circle page-scroll">
  79.                                     <i class="fa fa-angle-double-down animated"></i>
  80.                                 </a>
  81.                             </div>
  82.                         </div>
  83.                     {%endif%}
  84.                 {%endfor%}
  86.             </div>
  88.             <a class="left carousel-control" href="#Carousel" data-slide="prev">
  89.                 <span class="glyphicon glyphicon-chevron-left"></span>
  90.             </a>
  91.             <a class="right carousel-control" href="#Carousel" data-slide="next">
  92.                 <span class="glyphicon glyphicon-chevron-right"></span>
  93.             </a>
  94.         </div>
  95.     </section>
  97.     <!-- Blog Section -->
  98.     <section id="portfolio" class="text-center" >
  99.         <div class="container content-section">
  100.             <div class="row">
  101.                 <div class="col-lg-12 text-center">
  102.                     <h2 class="section-heading text-uppercase">Dernières Actus</h2>
  103.                     <h3 class="section-subheading text-muted"></h3>
  104.                 </div>
  105.             </div>
  106.             <div class="row">
  107.                 {% set compteur = 0 %}
  108.                 {% for blog in blogs %}
  109.                 <div class="col-md-4 col-sm-6 portfolio-item">
  110.                     <a class="portfolio-link openModal" data-toggle="modal" href="{{asset(baseDir)}}see_blog/{{blog.id}}" target="_blank">
  111.                         <div class="portfolio-hover">
  112.                             <div class="portfolio-hover-content">
  113.                                 <i class="fa fa-plus fa-3x"></i>
  114.                             </div>
  115.                         </div>
  116.                         <div class="portfolio-img" style="height:190px;">
  117.                         {% if blog.blogfilename != "" and blog.blogfilename != "." %}
  118.                             <img class="img-fluid" src="{{asset(baseDir)}}img/{{ blog.id }}_{{ blog.blogfilename }}" alt="" >
  119.                         {%else%}
  120.                             <img class="img-fluid" src="{{asset(baseDir)}}img/blog_defaut.png" alt="">
  121.                         {%endif%}
  122.                         </div>
  123.                     </a>
  124.                     <br/>
  125.                     <div class="portfolio-caption">
  126.                         <h4>{{ blog.blogtitre }}</h4>
  127.                         <p class="text-muted">{{ blog.blogdescription|length > 200 ? blog.blogdescription|slice(0, 200) ~ '...' : blog.blogdescription  }}</p>
  128.                     </div>
  129.                 </div>
  130.                 {% set compteur = compteur+1 %}
  131.                 {% if compteur == 3 %}
  132.             </div>
  133.             <div class="row">
  134.                 {% set compteur = 0 %}
  135.                 {% endif %}
  136.                 {%endfor%}
  137.             </div>
  138.         </div>
  139.     </section>
  142.     <!-- About Section -->
  143.     <section id="about" class="text-center" >
  144.         <div class="row content-section">
  145.             <div class="col-lg-8 col-lg-offset-2">
  146.                 <div id="titleAbout" style="opacity:0;">
  147.                     <h2>{{myTitle}} - Votre base documentaire en ligne </h2>
  148.                 </div>
  149.                 <div id="contentAbout" style="opacity:0;">
  150.                     <p>Stockez, partagez et diffusez vos documents, données, présentation et vidéos sur l’espace documentaire partagé du projet <b>MAKIS</b>. Classez les ressources par thématiques et mots-clé. Un outil simple et puissant de collaboration en ligne</p>
  151.                 </div>
  153.             </div>
  154.         </div>
  155.     </section>
  157.     <!-- Theme JavaScript -->
  158. {% endblock %}
  160. {% block scripts %}
  161.     <script>
  162.         $('.carousel').carousel();
  163.         $(document).ready(function() {
  164.             $("a[data-pretty^='prettyPhoto']").prettyPhoto();
  165.             $.ajax({
  166.                 url: '{{baseDir}}get_graphique/pays',
  167.                 type: 'GET',
  168.                 dataType: 'html',
  169.                 success: function (graphiquePays) {
  170.                     var chart1 = new CanvasJS.Chart("chartContainer", {
  171.                         animationEnabled: true,
  172.                         theme: "light2", // "light1", "light2", "dark1", "dark2"
  173.                         title: {
  174.                             text: "Production par an"
  175.                         },
  176.                         axisY: {
  177.                             title: "Production par an"
  178.                         },
  179.                         data: [{
  180.                             type: "column",
  181.                             legendMarkerColor: "grey",
  182.                             dataPoints: []
  183.                         }]
  184.                     });
  185.                     var dps = JSON.parse(graphiquePays);
  186.                     for (var i in dps) {
  187.                         chart1.options.data[0].dataPoints.push({
  188.                             label: dps[i].do_origine_geo,
  189.                             y: dps[i].total,
  190.                             indexLabel: dps[i].total.toString()
  191.                         });
  192.                     }
  193.                     chart1.render();
  194.                 },
  195.                 error: function (error) {
  196.                     console.log(error);
  197.                 }
  198.             });
  199.         });
  200.     </script>
  201.     <script>
  202.         //Scripts  for the graphs 1 and 2
  203.         $("#graph1").click(function getGraphiquePays() {
  204.             $.ajax({
  205.                 url: '{{baseDir}}get_graphique/pays',
  206.                 type: 'GET',
  207.                 dataType: 'html',
  208.                 success: function(graphiquePays) {
  209.                     var chart1 = new CanvasJS.Chart("chartContainer", {
  210.                         animationEnabled: true,
  211.                         theme: "light2", // "light1", "light2", "dark1", "dark2"
  212.                         title:{
  213.                             text: "Production par an"
  214.                         },
  215.                         axisY: {
  216.                             title: "Production par an"
  217.                         },
  218.                         data: [{
  219.                             type: "column",
  220.                             legendMarkerColor: "grey",
  221.                             dataPoints: []
  222.                         }]
  223.                     });
  224.                     var dps = JSON.parse(graphiquePays);
  225.                     for (var i in dps) {
  226.                         chart1.options.data[0].dataPoints.push({ label: dps[i].do_origine_geo, y : dps[i].total, indexLabel: dps[i].total.toString() });
  227.                     }
  228.                     chart1.render();
  229.                 },
  230.                 error: function(error) {
  231.                     console.log(error);
  232.                 }
  233.             });
  234.         });
  237.         $("#graph2").click(function() {
  238.             $.ajax({
  239.                 url: '{{baseDir}}get_graphique/annee',
  240.                 type: 'GET',
  241.                 dataType: 'html',
  242.                 success: function (graphiqueAnnee) {
  243.                     var chart2 = new CanvasJS.Chart("chartContainer", {
  244.                         animationEnabled: true,
  245.                         theme: "light2", // "light1", "light2", "dark1", "dark2"
  246.                         title: {
  247.                             text: "Production par an"
  248.                         },
  249.                         axisY: {
  250.                             title: "Production par an"
  251.                         },
  252.                         data: [{
  253.                             type: "column",
  254.                             legendMarkerColor: "grey",
  255.                             dataPoints: []
  256.                         }]
  257.                     });
  258.                     var dps = JSON.parse(graphiqueAnnee);
  259.                     for (var i in dps) {
  260.                         chart2.options.data[0].dataPoints.push({
  261.                             label: dps[i].annee,
  262.                             y: dps[i].total,
  263.                             indexLabel: dps[i].total.toString()
  264.                         });
  265.                     }
  266.                     chart2.render();
  267.                 },
  268.                 error: function (error) {
  269.                     console.log(error);
  270.                 }
  271.             });
  272.         });
  274.     </script>
  275. {% endblock %}