merge

web/app/themes/la_mine/dist/assets/images/player.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="player.svg"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 26.458333 26.458333"
+   height="100"
+   width="100">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     inkscape:window-maximized="1"
+     inkscape:window-y="22"
+     inkscape:window-x="0"
+     inkscape:window-height="1029"
+     inkscape:window-width="1920"
+     units="px"
+     showgrid="false"
+     inkscape:document-rotation="0"
+     inkscape:current-layer="layer1"
+     inkscape:document-units="mm"
+     inkscape:cy="406.94022"
+     inkscape:cx="394.29057"
+     inkscape:zoom="0.7"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:groupmode="layer"
+     inkscape:label="Calque 1">
+    <ellipse
+       ry="12.589807"
+       rx="12.589808"
+       cy="13.229163"
+       cx="13.229166"
+       id="circle2060"
+       style="opacity:0.683;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#009ee0;stroke-width:1.27872;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal;enable-background:new" />
+    <path
+       style="fill:none;stroke:#009ee0;stroke-width:1.27872;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
+       d="M 10.141751,7.8181148 18.23811,13.448797 9.9711363,18.653758 Z"
+       id="path2398-2"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

web/app/themes/la_mine/functions.php

@@ -40,7 +40,6 @@
 	}
 	add_action( 'wp_footer', 'rellax' );
 
-
 	function customJs(){
 		wp_enqueue_script( 'script',
 		get_template_directory_uri() . '/src/assets/js/scripts.js', array() );

web/app/themes/la_mine/single.php

@@ -24,11 +24,21 @@ $current_id[] = get_the_ID();
 $args = get_posts(array(
   'post_type' => 'post',
   'post_status' => 'publish',
-  'orderby' => 'date',
-  'order' => 'DESC',
-  'posts_per_page' => -1,
+  'orderby' => 'meta_value',
+  'meta_key' => 'informations_debut_event',
+  'order' => 'ASC',
+  'posts_per_page' => 6,
   'category_name' => $cat,
   'post__not_in' => $current_id,
+  'meta_query' => array(
+    array(
+        'meta_key'     => 'informations_end_event',
+        'value'   => date('Y-m-d H:i:s'),
+        'compare' => '>=',
+        'type'    => 'DATE',
+    ),
+),
+
 ));
 
 $context['other'] = $args;

web/app/themes/la_mine/src/assets/js/scripts.js

@@ -75,7 +75,6 @@ function paralax() {
 }
 
 function isotope() {
-
   var $grid = $('.grid').isotope({
     percentPosition: true,
     itemSelector: '.thumbnails',
@@ -119,9 +118,9 @@ function scrollto(){
   $(window).scroll(function() {
     var scroll = $(window).scrollTop();
     if (scroll >= 100) {
-        $(".logo a").addClass("reduct");
+      $(".logo a").addClass("reduct");
     } else {
-        $(".logo a").removeClass("reduct");
+      $(".logo a").removeClass("reduct");
     }
   });
 }
@@ -131,6 +130,7 @@ $( document ).ready(function() {
   click_nav();
   slides();
   isotope();
+  // custom_player();
   // masonry();
   paralax();
   // drag();

web/app/themes/la_mine/src/assets/js/simplePlayer.js

@@ -0,0 +1,82 @@
+
+var YTdeferred = jQuery.Deferred();
+
+window.onYouTubeIframeAPIReady = function() {
+	YTdeferred.resolve(window.YT);
+};
+
+(function( $ ) {
+
+	$.ajaxSetup({
+		cache: true
+	});
+
+	$.getScript( "https://www.youtube.com/iframe_api")
+		.done(function( script, textStatus ) {
+	});
+
+	$.fn.simplePlayer = function() {
+
+		var	video = $(this);
+
+		var play = $('<div />', { id: 'play' }).hide();
+
+		var defaults = {
+				autoplay: 1,
+				autohide: 1,
+				border: 0,
+				wmode: 'opaque',
+				enablejsapi: 1,
+				modestbranding: 1,
+				version: 3,
+				hl: 'en_US',
+				rel: 0,
+				showinfo: 0,
+				hd: 1,
+				iv_load_policy: 3 // add origin
+			};
+
+		// onYouTubeIframeAPIReady
+
+		YTdeferred.done(function(YT) {
+			play.appendTo( video ).fadeIn('slow');
+		});
+
+		function onPlayerStateChange(event) {
+			if (event.data == YT.PlayerState.ENDED) {
+				play.fadeIn(500);
+			}
+		}
+
+		function onPlayerReady(event) {
+			var replay = document.getElementById('play');
+			replay.addEventListener('click', function() {
+				player.playVideo();
+			});
+		}
+
+		play.bind('click', function () {
+
+			if ( !$('#player' ).length ) {
+
+				$('<iframe />', {
+					id: 'player',
+					src: 'https://www.youtube.com/embed/' + video.data('video') + '?' + $.param(defaults)
+				})
+				.attr({ width: video.width(), height: video.height(), seamless: 'seamless' })
+				.css('border', 'none')
+				.appendTo( video );
+
+				video.children('img').hide();
+
+				$(this).css('background-image', 'url(play-button.png), url(' + video.children().attr('src') + ')').hide();
+	
+				player = new YT.Player('player', {events: {'onStateChange': onPlayerStateChange, 'onReady': onPlayerReady}});
+			}
+
+			$(this).hide();
+		});
+
+		return this;
+	};
+}( jQuery ));

web/app/themes/la_mine/src/assets/scss/components/_footer.scss

@@ -1,4 +1,7 @@
 body{
+  a{
+    color: black;
+  }
     & > footer{
         box-shadow: inset 0px 10px 10px rgba(0, 0, 0, 0.05);
         padding-top: 2rem;

web/app/themes/la_mine/src/assets/scss/components/_thumbnails.scss

@@ -30,10 +30,12 @@
       &.musiques{
         background-image: url("../../assets/images/svg/picto_musique.svg");
       }
-      &.autres{
+      &.transition_urbaine{
+        background-image: url("../../assets/images/svg/picto_transition.svg");
+      }
+      &.transition_urbaine{
         background-image: url("../../assets/images/svg/picto_autres.svg");
       }
-
     }
     a{
         text-decoration: none;

web/app/themes/la_mine/src/assets/scss/pages/_home.scss

@@ -150,6 +150,7 @@
                         border:5px solid $colorRed;
                         padding: 2rem;
                         height: calc(100% - 4rem);
+                        background: white;
                         h4{
                             font-size: 1rem;
                             line-height: 1.2;
@@ -239,8 +240,34 @@
                             width: 100%;
                             height: 100%;
                         }
-                    }
 
+                        .cover{
+                          position: absolute;
+                          top: 0;
+                          left: 0;
+                          z-index: 9999;
+                          width: 100%;
+                          height: 100%;
+                          display: flex;
+                          #thumbnails{
+                            z-index: 0;
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                          }
+                          #player{
+                            z-index: 999;
+                            margin: auto;
+                            cursor: pointer;
+                            &:hover{
+                              opacity: 0.8;
+                            }
+                          }
+                        }
+                    }
                 }
             }
         }

web/app/themes/la_mine/templates/accueil.twig

@@ -42,12 +42,12 @@
 	</div>
 </section>
 
-<section id="section_MineVideo" class="row ">
+<section id="section_MineVideo" class="row">
 	<div class="container-fluid">
-		<h3>La Mine en vidéo</h3>
+		<h3>Transition urbaine</h3>
 		{% if post.video_la_mine  %}
 			<figure class="row mx-0">
-				<iframe width="560" height="315" src="//www.youtube.com/embed/{{ post.video_la_mine }}" frameborder="0" allowfullscreen></iframe>
+				<iframe id="playVideo" src="{{post.video_la_mine}}" frameborder="0" allowfullscreen></iframe>
 			</figure>
 		{% endif %}
 	</div>

web/app/themes/la_mine/templates/components/footer.twig

@@ -5,6 +5,7 @@
     </figure>
 
     <div class="col-12 col-sm-6 col-md">
+      <strong><a href="https://numerique.ressourcerie-la-mine.com/">La Mine Numérique</a></strong>
       {{options.texte_horaire }}
     </div>
 
@@ -36,7 +37,7 @@
   <div class="row">
 
     <div id="mc_embed_signup" class="col-12">
-      <form action="https://kevintessier.us19.list-manage.com/subscribe/post?u=a98b763288f940083bf28857c&amp;id=364a0fe850" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+      <form action="https://ressourcerie-la-mine.us20.list-manage.com/subscribe/post?u=e7a0c89dae3ca6b1d5d904aea&amp;id=1537dadb5d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
         <div class="d-flex" id="mc_embed_signup_scroll">
           <div><p>Recevoir l'actualité de La Mine</p></div>
           <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="E-mail" required>

web/app/themes/la_mine/templates/components/thumbnails/thumbnails.twig

@@ -12,7 +12,11 @@
     <figure>
       <span class="icone_cat {{cat}}"></span>
       <div class="overflow-hidden">
-        <img class="lazyload" src="{{ Image(item.image_event).src|resize(600,500) }}" data-original="{{ Image(item.image_event).src|resize(600,500) }}">
+        {% if item.ajouter_un_media_0_video %}
+          <img class="lazyload" src="{{ item.thumbnail|resize(600,500) }}" data-original="{{ item.thumbnail|resize(600,500) }}">
+          {% else %}
+          <img class="lazyload" src="{{ Image(item.image_event).src|resize(600,500) }}" data-original="{{ Image(item.image_event).src|resize(600,500) }}">
+        {% endif %}
       </div>
 
       <figcaption class="wrap_content">
@@ -30,9 +34,7 @@
               <span class="end">
                 à <time datetime="{{item.informations_fin_event|date("G:i")}}">{{item.informations_fin_event|date("G:i")}}</time>
               </span>
-
             {% else %}
-
               <span class="start">
                 Du <time datetime="{{item.informations_debut_event|date("j F Y") }}">{{item.informations_debut_event|date("j F Y") }}</time>
                 à <time datetime="{{item.informations_debut_event|date("G:i")}}">{{item.informations_debut_event|date("G:i")}}</time>
@@ -41,15 +43,11 @@
                 <br>Au <time datetime="{{item.informations_fin_event|date("j F Y") }}">{{item.informations_fin_event|date("j F Y") }}</time>
                 à <time datetime="{{item.informations_fin_event|date("G:i")}}">{{item.informations_fin_event|date("G:i")}}</time></br>
               </span>
-
             {% endif %}
           </div>
           <div class="places">{{item.informations_lieu}}</div>
         </div>
       </figcaption>
-
-
     </figure>
-
   </a>
 </article>

web/app/themes/la_mine/templates/les_temps_forts.twig

@@ -7,7 +7,7 @@
 	</div>
 
 	{% for item in posts %}
-		<article class="row tpsF">
+		<article id="{{item.slug}}" class="row tpsF">
 			<aside class="sidebar col-md-4">
 				<div class="title">
 					<h3>{{item.title}}</h3>

web/app/themes/la_mine/templates/partial/section_tpsF.twig

@@ -2,6 +2,7 @@
 <div class="row">
 	{% for item in tpsF %}
 		<article class="thumbnails col-12 col-md-6 col-lg {{cat}}">
+		<a rel="noreferrer" href="{{site.url}}/les-temps-forts/#{{item.slug}}">
 			<figure>
 				<div class="overflow-hidden">
 					<img src="{{item.thumbnail.src|resize(500,500) }}" alt="{{item.thumbnail.alt}}" title="{{item.thumbnail.title}}">
@@ -19,6 +20,7 @@
 				</figcaption>
 
 			</figure>
+			</a>
 		</article>
 	{% endfor %}
 </div>

web/app/themes/la_mine/templates/single.twig

@@ -15,7 +15,11 @@
 			</header>
 
 			<figure class="__img_event col-lg-6 col-12">
-				<img src="{{ Image(post.image_event).src }}" />
+				{% if post.ajouter_un_media_0_image_event %}
+				<img src="{{ Image(post.ajouter_un_media_0_image_event).src }}" />
+				{% else %}
+					<iframe width="560" height="315" src="{{post.ajouter_un_media_0_video}}" frameborder="0" allowfullscreen></iframe>
+				{% endif %}
 			</figure>
 
 			<div class="article-content col-lg-6 col-12 my-3 my-lg-0">