templates/interviste/interviste.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block pageTitle %} Biografia {% endblock %}
  5. {% block pageStyle %}    
  6.     {{ parent() }}     
  7. {% endblock %}
  9. {% block pageScriptsHeader %} 
  10.     {{ parent() }} 
  11. {% endblock %}
  13. {% block navigation %} {{ parent() }} {% endblock %}
  15. {% block upperMainContainer %}    
  16. {% endblock %}
  18. {% block mainContainer %}
  19. <section id="biografia">
  20.     <div class="container">
  21.         <figure class="figure-caption">
  22.             <img src="/images/foto-interviste.jpg" alt="" width="276" height="344">
  23.             <figcaption>Foto di Gianni Berengo Gardin &copy; 1972</figcaption>
  24.         </figure>
  26.         <div class="accordion">
  27.             <div class="accordion-item">
  28.                 <h2 class="accordion-header " id="heading6c">
  29.                     <button class="accordion-button{{ accordion == 'interviste' ? '' : ' collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6c" aria-expanded="{{ accordion == 'interviste' ? 'true' : 'false' }}" aria-controls="collapse6c">
  30.                         Interviste
  31.                     </button>
  32.                 </h2>
  33.                 <div id="collapse6c" class="accordion-collapse {{ accordion == 'interviste' ? 'show' : ' collapse' }}" role="region" aria-labelledby="heading6c">
  34.                     <div class="accordion-body">
  35.                         <div class="d-grid interviste">
  36.                             <div class="grid-col">
  37.                                 <h3>Intervista a Giulio Carlo Argan (2,11 min)</h3>
  38.                                 <iframe width="560" height="315" src="https://www.youtube.com/embed/Geue_haE3yQ?si=lH4STJdbJk1jwnmI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  39.                             </div>
  40.                             <div class="grid-col">
  41.                                 <h3>Intervista a Raffaele De Grada (8,11 min)</h3>
  42.                                 <iframe width="560" height="315" src="https://www.youtube.com/embed/CBbBLrmkm-w?si=2JB8fDnxmadqsdBv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  43.                             </div>
  44.                             <div class="grid-col">
  45.                                 <h3>Intervista a Giuseppe Mazzariol (9 min)</h3>
  46.                                 <iframe width="560" height="315" src="https://www.youtube.com/embed/VC8hkqBSZ6w?si=uNjwAt1xH4FB9feH" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  47.                             </div>
  48.                             <div class="grid-col">
  49.                                 <h3>Intervista a Riccardo Muti (2,11 min)</h3>
  50.                                 <iframe width="560" height="315" src="https://www.youtube.com/embed/Qi51sTYNXKo?si=Yv-F8PGOXPZlfyYx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  51.                             </div>
  52.                         </div>
  53.                     </div>
  54.                 </div>
  55.             </div>
  56.             <div class="accordion-item">
  57.                 <h2 class="accordion-header " id="heading7c">
  58.                     <button class="accordion-button{{ accordion == 'interviste' ? '' : ' collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse7c" aria-expanded="{{ accordion == 'interviste' ? 'true' : 'false' }}" aria-controls="collapse7c">
  59.                         Presentazioni
  60.                     </button>
  61.                 </h2>
  62.                 <div id="collapse7c" class="accordion-collapse {{ accordion == 'interviste' ? 'show' : ' collapse' }}" role="region" aria-labelledby="heading7c">
  63.                     <div class="accordion-body">
  64.                         <div class="d-grid interviste">
  65.                             <div class="grid-col">
  66.                                 <h3>Presentazione di Giovanni Bianchi (51,48 min)</h3>
  67.                                 <video src="/uploads/presentazione-giovanni-bianchi.mp4" width="960" height="540" type="video/mp4" controls style="max-width:100%; height:auto; border:1px solid #666;"></video>
  68.                             </div>
  69.                             <div class="grid-col">
  70.                                 
  71.                             </div>
  72.                             
  73.                         </div>
  74.                     </div>
  75.                 </div>
  76.             </div>
  77.         </div>
  78.     </div>
  79. </section>
  81. <script>
  82. $('.handler').click(function() {
  83.     $(this).toggleClass('open');
  84.     let content = $(this).parent('section').find('.content');
  85.     $(content).slideToggle();
  86. });
  88. $('.handler ~ h2').click(function() {
  89.     $(this).siblings('.handler').toggleClass('open');
  90.     let content = $(this).parent('section').find('.content');
  91.     $(content).slideToggle();
  92. });
  94. function toggleHandler(sezione)
  95. {
  96.     $('#biografia-' + sezione).find('.handler').toggleClass('open');
  97.     $('#biografia-' + sezione).find('.content').slideDown();
  98. }
  99. </script>
  101. <style>
  102. section { position:relative; }
  103. section:not(:first-of-type) { border-top:1px solid #444; padding-top:1rem; margin-top:3rem; }
  104. section h2 { margin-bottom:2rem; }
  105. .closed .content { display:none; }
  106. .handler { padding:1rem; background:none; border:1px solid #444; position: absolute; top:1rem; right:1rem; background-image:url('/images/svg/plus.svg'); background-size:auto 90%; 
  107. background-position:center; background-repeat:no-repeat; }
  108. .handler.open { background-image:url('/images/svg/minus.svg'); }
  109. </style>
  111. {% endblock %}