From 9c01762083a6cd49095567e727b5a0a525e177b5 Mon Sep 17 00:00:00 2001
From: chankalan <chankalan@choc0.net>
Date: Fri, 29 Jan 2021 10:35:42 +0100
Subject: [PATCH] =?UTF-8?q?tri=20p=C3=A9riodique=20des=20actus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 squelettes/inclure/periode-mois.html |  6 +++---
 squelettes/javascript/script.js      | 29 ++++++++++++++--------------
 squelettes/scss/styles/_styles.scss  | 23 ++++++++++++++++++++++
 3 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/squelettes/inclure/periode-mois.html b/squelettes/inclure/periode-mois.html
index f0cde3e..ce5a9b9 100644
--- a/squelettes/inclure/periode-mois.html
+++ b/squelettes/inclure/periode-mois.html
@@ -1,9 +1,9 @@
 <div class="liste periode">
 	<h2 class="h2"><:baz_april:tri_periodique:></h2>
 	<div class="clear">
-	<BOUCLE_hero(ARTICLES){id_rubrique}{fusion YEAR(date)}{fusion MONTH(date)}{!par date}{' | '}>
-		[<span class="annees archive[ ouvert(#DATE|affdate{Y}|=={[(#ENV{date}|affdate{Y})]}|oui)]">(#DATE|affdate{Y}|unique) :</span>]
+	<BOUCLE_hero(ARTICLES){id_rubrique}{fusion YEAR(date)}{fusion MONTH(date)}{!par date}>
+		[<span class="annees archive[ ouvert(#DATE|affdate{Y}|=={[(#ENV{date}|affdate{Y})]}|oui)]">- (#DATE|affdate{Y}|unique) </span>]
 		[<a[ href="(#URL_RUBRIQUE|parametre_url{datetri,#DATE|affdate{Y-m}})"]>(#DATE|affdate{nom_mois})</a>]
 	</BOUCLE_hero>
-	</div>
+	-</div>
 </div>
diff --git a/squelettes/javascript/script.js b/squelettes/javascript/script.js
index f9622ba..a6c0bd5 100644
--- a/squelettes/javascript/script.js
+++ b/squelettes/javascript/script.js
@@ -1,20 +1,21 @@
 $(function() {
 
 	
-	// masquer les mois des annees precedentes, les afficher au clic sur l'annee, cf composition blog
-// 	$.each( ['.annees.archive'], function(i,hi){
-// 		$( ".periode div" ).find(hi).each(function(index) {
-// 			// Creer un div apres et y placer tout ce qui se trouve apres et jusqu'au hi suivant
-// 			$(this).after("<span class=\"mois_archives\"></span>").next().append($(this).next().nextUntil(hi));
-// 			// plier/deplier le contenu
-// // 			$(this).next().hide();
-// 			$(this).click(function(){
-// 				$(this).next().toggleClass('ouvert');
-// 				$(this).toggleClass('ouvert');
-// 				return false;
-// 			});
-// 		});
-// 	});
+	// masquer les mois des annees precedentes, les afficher au clic sur l'annee, cf composition blog et inclure/transcriptions_selectionperiode
+	$.each( ['.annees.archive'], function(i,hi){
+		$( ".periode div" ).find(hi).each(function(index) {
+			// Creer un span apres et y placer tout ce qui se trouve apres et jusqu'au hi suivant
+			$(this).after("<span class=\"mois_archive\"></span>").next().append($(this).next().nextUntil(hi));
+			// plier/deplier le contenu
+// 			$(this).next().hide();
+			$(this).click(function(){
+				$(this).next().toggleClass('ouvert');
+				$(this).toggleClass('ouvert');
+				return false;
+			});
+		});
+	});
+	$('.mois.on').parent('.mois_archive').addClass('ouvert');
 	
 	// afficher/masquer le menu initiatives < medium
 	$('.btn-initiatives').on('click', function(){
diff --git a/squelettes/scss/styles/_styles.scss b/squelettes/scss/styles/_styles.scss
index 522255d..d991387 100644
--- a/squelettes/scss/styles/_styles.scss
+++ b/squelettes/scss/styles/_styles.scss
@@ -113,3 +113,26 @@ a.back-to-top {
         }
     }
 }
+
+
+// tri par periode : blog ou transcriptions
+//
+.periode { width:100%;
+	a, span { display: inline-block; margin-right:0.25em;
+		&:not(.mois_archive):after { font-size:0.7em; margin:0 0 0 5px; color:$grayLight; }
+		&.annees { font-size:0.8em; line-height:1.8; font-style:italic; color:$grayLight; clear:left;
+			&:after {  font-size:0.85em; font-style:normal; }
+		}
+		&.archive { cursor:pointer; color:$grayLight; }
+		&.mois_archive { width:0; overflow:hidden; margin:0; height:0;
+			&.ouvert { width:auto; height:auto; overflow:visible; display:inline; }
+		}
+		&.annees.archive.ouvert { color:$gray; }
+	}
+	span { 
+		&:hover { color:$gray; }
+	}
+	a { padding:0 0.3em; font-weight:700;
+		&:hover:after { color:$white; }
+	}
+}