From 599839a0f986a8726fb2b18eb5dff3aa74a7a3dc Mon Sep 17 00:00:00 2001
From: chankalan <chankalan@choc0.net>
Date: Thu, 10 Jun 2021 18:05:33 +0200
Subject: [PATCH] on avance sur la page article-emission

---
 paquet.xml                                  |  4 +-
 squelettes/content/article-emission.html    | 60 ++++++++++++---------
 squelettes/javascript/perso.js              | 11 ++++
 squelettes/scss/styles/_perso.scss          | 60 ++++++++++++++++++++-
 squelettes/scss/utils/_variables-perso.scss |  1 +
 5 files changed, 106 insertions(+), 30 deletions(-)
 create mode 100644 squelettes/javascript/perso.js

diff --git a/paquet.xml b/paquet.xml
index 2ebc5f4..363d6d4 100644
--- a/paquet.xml
+++ b/paquet.xml
@@ -1,7 +1,7 @@
 <paquet
 	prefix="libreavous"
 	categorie="squelette"
-	version="0.2.2"
+	version="0.3.0"
 	schema="0.1.1"
 	etat="dev"
 	compatibilite="[3.2.8;4.0.*]"
@@ -14,7 +14,7 @@
 	<necessite nom="baz_april" />
 	
 	<necessite nom="cextras" />
-<!-- 	<necessite nom="sommaire" /> -->
+	<necessite nom="notation" />
 	
 	<chemin path="squelettes" />
 	<chemin path="squelettes/scss" />
diff --git a/squelettes/content/article-emission.html b/squelettes/content/article-emission.html
index cf8ac3a..8c9fbe1 100644
--- a/squelettes/content/article-emission.html
+++ b/squelettes/content/article-emission.html
@@ -14,7 +14,7 @@
 		]</h1>
 		
 		
-		#FORMULAIRE_NOTATION
+		#FORMULAIRE_JAIME_JAIMEPAS
 		
 		
 		<div class="postmeta">
@@ -36,13 +36,7 @@
 	
 		<div class="fb">
 		
-			<!-- Zone Podlove -->
-			[<div id="podlove">
-			</div>
-			<script>
-			podlovePlayer('#podlove', '(#URL_PAGE{podlove_json}|parametre_url{id_article,#ID_ARTICLE,&})');
-			</script>
-			]<!-- / Zone Podlove -->
+			
 			
 			<ul class="telecharger">
 					<li><a href="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/[(#PODCAST_CODE)]/libre-a-vous-[(#PODCAST_CODE)].ogg">libre-a-vous-[(#PODCAST_CODE)].ogg</a> ([(#PODCAST_OGG|taille_en_octets)])</li>
@@ -51,34 +45,49 @@
 			
 			[<div class="emission-Programme #EDIT{chapo}">(#CHAPO)</div>]
 
-			[<h2>Transcription</h2> <p><a href="#PODCAST_TRANSCRIPTION" class="#EDIT{podcast_transcription}">(#PODCAST_TRANSCRIPTION)</a></p>]
-
 		</div>
 
-		[<div class="fl">
+		<div class="fl">
 			<h2 id="galeriephotos">Galerie photos</h2>
-			<div class="#EDIT{podcast_galeriephotos}">(#PODCAST_GALERIEPHOTOS|propre)</div>
-		</div>]
+			[<div class="#EDIT{podcast_galeriephotos}">(#PODCAST_GALERIEPHOTOS|propre)</div>]
+			#SET{thumbs,'data-original-title'}
+			<div class="flex flex3">
+			<BOUCLE_photos(DATA){source file, https://photos.april.org/index.php?/category/369}{valeur == #GET{thumbs}}{0,3}>
+				<figure class="photoapril">#VALEUR</figure>
+			</BOUCLE_photos>
+			</div>
+		</div>
 		
-		<div class="fb">
+		<div class="fb detail_emission">
+			[(#PODCAST_PERSONNES|oui)<a href="#personnesparticipantes" class="btn taille70 blanc">Personnes participantes</a>]
+			<a href="#references" class="btn taille70 blanc">Références</a>
+			[(#PODCAST_TRANSCRIPTION|oui)<a href="#transcription" class="btn taille70 blanc">Transciption</a>]
+			[(#PODCAST_MUSIQUE|oui)<a href="#pausesmusicales" class="btn taille70 blanc">Pauses musicales</a>]
+			[(#CONFIG{libreavous/licence}|oui)<a href="#licence" class="btn taille70 blanc">Licence</a>]
+			
 		
 			[<h2 id="personnesparticipantes">Personnes participantes</h2>
 			<div class="#EDIT{podcast_personnes}">(#PODCAST_PERSONNES|propre)</div>]
 			
+			[<h2 id="references">Références</h2>
+			<div class="emission-references texte #EDIT{texte}">(#TEXTE)</div>]
+			<B_chapitres_references_chroniques>
+				<h3 class="spip">Références des chroniques</h3>
+				<BOUCLE_chapitres_references_chroniques(CHAPITRES){id_article}{type_sujet=CH}>
+					[<h4>#TITRE</h4>
+					(#REFERENCES_SUJET|propre)]
+				</BOUCLE_chapitres_references_chroniques>
+				
+			
+			[<h2 id="transcription">Transcription</h2> <p><a href="#PODCAST_TRANSCRIPTION" class="#EDIT{podcast_transcription}">(#PODCAST_TRANSCRIPTION)</a></p>]
+			
 			[<h2 id="pausesmusicales">Pauses musicales</h2>
 			<div class="#EDIT{podcast_musique}">(#PODCAST_MUSIQUE|propre)</div>]
 			
-			[<h2 id="references">Références</h2>
-			<div class="emission-references texte #EDIT{texte}">(#TEXTE)</div>]
-			
-			<B_chapitres_references_chroniques>
-			<h3 class="spip">Références des chroniques</h3>
-			<BOUCLE_chapitres_references_chroniques(CHAPITRES){id_article}{type_sujet=CH}>
-					[<h4>#TITRE</h4>
-					(#REFERENCES_SUJET|propre)]
-			</BOUCLE_chapitres_references_chroniques>
-																	
-
+			[<div class="licence" id="licence">(#CONFIG{libreavous/licence}|propre)</div>]
+		
+		
+		
 			<B_chapitres>
 			<h2>Chapitres</h2>
 			<ul>
@@ -105,7 +114,6 @@
 	
 		[<p class="#EDIT{hyperlien} article__hyperlien"><:voir_en_ligne:/> : <a href="(#URL_SITE)" class="spip_out">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
 
-		[<div class="licence">(#CONFIG{libreavous/licence}|propre)</div>]
 		
 		[<div class="article__notes">(#NOTES)</div>]
 		
diff --git a/squelettes/javascript/perso.js b/squelettes/javascript/perso.js
new file mode 100644
index 0000000..d2b7725
--- /dev/null
+++ b/squelettes/javascript/perso.js
@@ -0,0 +1,11 @@
+$(function() {
+
+    // remettre l'origine des photos en galerie
+    $('.photoapril img').each(function() {
+		$(this).attr('src', 'https://photos.april.org/' + $(this).attr('src') );
+    });
+
+	
+	
+
+});
diff --git a/squelettes/scss/styles/_perso.scss b/squelettes/scss/styles/_perso.scss
index 0d9f9db..10b3075 100644
--- a/squelettes/scss/styles/_perso.scss
+++ b/squelettes/scss/styles/_perso.scss
@@ -2,7 +2,7 @@
 // les différences
 .page_wrapper {
 	background:$couleurPrincipale url('../images/egalizer.png') repeat-x center -150px;
-	background-attachment:fixed;
+/* 	background-attachment:fixed; */
 	@media ($bp-small) {
 		background:$couleurPrincipale url('../images/egalizer-480.png') repeat-x center -150px;
 	}
@@ -110,7 +110,9 @@
 	padding:$spacer;
 }
 
-
+.page_main {
+	overflow:hidden;
+}
 .page_main_content {
 	flex-direction: column;
 }
@@ -123,6 +125,60 @@
 	background-color:white;
 }
 
+h2 {
+	font-weight:900;
+}
+
+.fl {
+	border-top:2em solid $couleurPrincipale;
+	border-bottom:2em solid $couleurPrincipale;
+	margin:0 -1000px;
+	padding:2em 1000px;
+	background:white;
+}
+.fb {
+	padding:2em 0;
+	> h2 {
+		margin-top:2em;
+	}
+}
+
+.photoapril {
+	margin-bottom:1em;
+}
+.licence {
+	padding:1em;
+	line-height:1.2;
+	margin-top:2em;
+	background:$couleurBackgroundTexteBleu;
+}
+
+.detail_emission {
+	ul { list-style:none;
+		> li {
+			padding-left:1em;
+			position:relative;
+			&:before {
+				position:absolute;
+				left:0;
+				top:0.6em;
+				@include triangle(right,$couleurSecondaire,0.35em,1.8);
+			}
+		}
+	}
+}
+
+.btn.blanc {
+	color:$couleurPrincipale !important;
+	background:white;
+	border:1px solid rgba($couleurPrincipale,0.2);
+	border-radius:1em;
+	&:hover {
+		background:$couleurPrincipaleOn;
+	}
+}
+
+
 .article__infos {
 	position:relative;
 	height:auto;
diff --git a/squelettes/scss/utils/_variables-perso.scss b/squelettes/scss/utils/_variables-perso.scss
index b8c41c1..c47cc17 100644
--- a/squelettes/scss/utils/_variables-perso.scss
+++ b/squelettes/scss/utils/_variables-perso.scss
@@ -8,6 +8,7 @@ $couleurSecondaire:			#f7651a;
 /* $blancTransparent:			rgba(white,0.7); */
 
 $couleurBackgroundTexte:	#ffe9e0;
+$couleurBackgroundTexteBleu:#f5faff;
 $couleurTertiaire:			#00c4f5;
 
 $couleur-lien-hover:        $couleurTertiaire;