premiere partie de la page d'accueil

body.html

@@ -7,9 +7,11 @@
 
 		[(#REM)<INCLURE{fond=inclure/zone_tags,env}>]
 		
+		[(#REM)
 		<div class="breadcrumb inner">
 			<INCLURE{fond=breadcrumb/#ENV{type-page},env,ajax=article} />
 		</div>
+		]
 
 		<div class="content" id="content">
 			<INCLURE{fond=content/#ENV{type-page},env} />

content/sommaire.html

@@ -1,46 +1,60 @@
-<div class="la_une">
+<section id="presentation-accueil">
-	<BOUCLE_presentation(ARTICLES){grigri=presentation}{0,1}{! par date}>
+	<div class="container">
-	<div id="presentation" class="w66">
+		<div class="row">
-		<h3 class="#EDIT{titre}">#TITRE</h3>
+			<BOUCLE_presentation(ARTICLES){grigri=presentation_accueil}{0,1}{! par date}>
-		<div class="#EDIT{texte}">#TEXTE</div>
+				<div id="images-presentation" class="col-md">
+					[(#LOGO_SITE_SPIP|image_reduire{510,0})]
+					<BOUCLE_image_pres(DOCUMENTS){id_article}{0,1}>
+						<div class="image-encadree">
+							[(#FICHIER|image_recadre{380:362,-,focus}|image_reduire{380,362})]
+						</div>					
+					</BOUCLE_image_pres>
+				</div>
+				<div id="texte-presentation" class="col-md #EDIT{texte}">
+					<div class="contenu text-dark">
+						#TEXTE
+					</div>
 				</div>
 			</BOUCLE_presentation>
-	<BOUCLE_actualites(ARTICLES){grigri=actualites}{0,1}{! par date}>
-	<div id="actualites" class="encadre">
-		<h3 class="#EDIT{titre}">#TITRE</h3>
-		<div class="#EDIT{texte}">#TEXTE</div>
 		</div>
-	</BOUCLE_actualites>
+	</div>
-</div>
+</section>
 
-<h3 class="la_une">À la une</h3>
+<section id="mis-en-avant">
-<div class="liste_des_rubriques">
+	<div class="container">
-	<BOUCLE_art(ARTICLES){branche}{id_secteur = #CONFIG{balint/id_bien}}>
+		<div class="row">
-		<INCLURE{fond=inclure/bloc_une, env, id_article,statut=publie}>
+			<div class="col-lg-9">
-	</BOUCLE_art>
+				<INCLURE{fond=inclure/diaporama_accueil}/>
-</div>
+			</div>
+			<div class="col-lg-3">
+				<div id="agenda">
+					<h3>Agenda</h3>
+					<BOUCLE_agenda(ARTICLES){titre_mot=agenda}>
+						<div class="agenda-evenement">
+							<h4>
+								<a href="#URL_ARTICLE">
+									#TITRE
+								</a>
+							</h4>
+							#DATE_AGENDA
+						</div>
+					</BOUCLE_agenda>
+				</div>
+			</div>
 
-<h3 class="la_une">Les rubriques du journal</h3>
+		</div>
-<div class="liste_des_rubriques">
+	</div>
-	<BOUCLE_sect(RUBRIQUES){id_rubrique = #CONFIG{balint/id_bien}}>
+</section>
-		<BOUCLE_rub(RUBRIQUES){id_parent}{par num titre}>
-			<INCLURE{fond=inclure/bloc_rub, env, id_rubrique}>
-		</BOUCLE_rub>
-			#SET{nb_rubs, #TOTAL_BOUCLE}
-		</B_rub>
-	</BOUCLE_sect>
-</div>
 
 
-[(#REM)
+<section id="a-la-une">
-<div class="container_carte">
+	<div class="container">
-<h3>Situation des biens</h3>
+		<div class="row">
-[(#INCLURE{fond=modeles/carte_gis,
+			<BOUCLE_a_la_une(ARTICLES){titre_mot=a_la_une}>
-	autocenterandzoom=oui,
+				<div class="col-md-3">
-	objets=articles,
+					<INCLURE{fond=inclure/bloc_article}/>
-	id_mot=#ENV{id_mot},
+				</div>
-	zoom_wheel=non,
+			</BOUCLE_a_la_une>
-	height=500px,
+		</div>
-})]
+	</div>
-</div>
+</section>
-]

header/dist.html

@@ -3,17 +3,6 @@
 	[(#CHEMIN{img/sprite_symbol_pictos.svg}|afficher_svg)]
 </div>
 
-<header class="flex-container">
+<header >
-	[(#SI_PAGE{sommaire}|non)<a class="lien_accueil" rel="start home" href="#URL_SITE_SPIP/" title="<:accueil_site:>">]
+	<INCLURE{fond=inclure/menu_principal,env}>
-		[(#LOGO_SITE_SPIP|image_reduire{0,100})]
-	[(#SI_PAGE{sommaire}|non)</a>]
-	<div id="header-droite" class="flex-container--column">
-		[(#SI_PAGE{sommaire}|non)<a class="lien_accueil" rel="start home" href="#URL_SITE_SPIP/" title="<:accueil_site:>">]
-			<h1 id="titre_site_spip">#NOM_SITE_SPIP</h1>
-			<h2 class="h3-like #EDIT{meta-slogan_site}" id="sous-titre_site">[(#SLOGAN_SITE_SPIP)]</h2>
-		[(#SI_PAGE{sommaire}|non)</a>]
-	</div>
 </header>
-<nav id="barnav" role="navigation">
-	<INCLURE{fond=inclure/nav_principale,env}>
-</nav>

header/distIMMO.html

@@ -1,15 +0,0 @@
-[(#REM) On charge le sprite svg des pictos]
-<div class="hidden">
-	[(#CHEMIN{img/sprite_symbol_pictos.svg}|afficher_svg)]
-</div>
-
-<div class="flex-container " id="page-top">
-	<header class="accueil">
-		[(#SI_PAGE{sommaire}|non)<a class="lien_accueil" rel="start home" href="#URL_SITE_SPIP/" title="<:accueil_site:>">]
-			[(#LOGO_SITE_SPIP|image_reduire{0,100}) ]<h1 id="logo_site_spip">#NOM_SITE_SPIP</h1>
-		[(#SI_PAGE{sommaire}|non)</a>]
-	</header>
-	<nav id="barnav" role="navigation">
-		<INCLURE{fond=inclure/nav_principale,env}>
-	</nav>
-</div>

inclure/diaporama_accueil.html

@@ -0,0 +1,30 @@
+<div id="diaporama_accueil" class="carousel slide" data-ride="carousel">
+	<ol class="carousel-indicators">
+<BOUCLE_compteur(ARTICLES){titre_mot=diaporama}{tout}>
+		<li data-target="#diaporama_accueil" data-slide-to="[(#COMPTEUR_BOUCLE|moins{1})]" [(#COMPTEUR_BOUCLE|=={1}|oui) class="active"]></li>
+</BOUCLE_compteur>
+	</ol>
+	<div class="carousel-inner">
+<BOUCLE_diapo(ARTICLES){titre_mot=diaporama}{tout}>
+		<div class="carousel-item [(#COMPTEUR_BOUCLE|=={1}|oui) active]">
+			<div class="carousel-caption text-light">
+				<a href="#URL_SITE" class="diapo-texte text-light">
+					<h2>#TITRE</h2>
+					#TEXTE
+				</a>
+				<a href="#URL_SITE" class="diapo-bouton text-light">
+					#NOM_SITE
+				</a>
+			</div>
+		</div>
+</BOUCLE_diapo>
+	</div>
+	<a class="carousel-control-prev" href="#diaporama_accueil" role="button" data-slide="prev">
+		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+		<span class="sr-only">Précédent</span>
+	</a>
+	<a class="carousel-control-next" href="#diaporama_accueil" role="button" data-slide="next">
+		<span class="carousel-control-next-icon" aria-hidden="true"></span>
+		<span class="sr-only">Suivant</span>
+	</a>
+</div>

inclure/menu_principal.html

@@ -0,0 +1,29 @@
+<nav id="menu-principal" class="navbar navbar-expand-lg navbar-dark fixed-top ">
+
+	<a class="navbar-brand" href="[(#URL_PAGE{sommaire})]">[(#LOGO_SITE_SPIP|image_reduire{200,0})]</a>
+	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#liste-deroulante" aria-controls="liste-deroulante" aria-expanded="false" aria-label="Toggle navigation">
+		<i class="fa fa-bars" aria-hidden="true"></i>
+	</button>
+	<div class="collapse navbar-collapse" id="liste-deroulante">
+		<ul class="navbar-nav ml-auto">
+			<li class="nav-item [(#SI_PAGE{sommaire}|oui) active]">
+			  <a class="nav-link" href="[(#URL_PAGE{sommaire})]">Accueil</a>
+			</li>
+			<li class="nav-item [(#SI_PAGE{association}|oui) active]">
+			  <a class="nav-link" href="[(#URL_PAGE{association})]">L'association</a>
+			</li>
+			<li class="nav-item [(#SI_PAGE{methode}|oui) active]">
+				<a class="nav-link" href="[(#URL_PAGE{methode})]">La méthode</a>
+			</li>
+			<li class="nav-item [(#SI_PAGE{groupes}|oui) active]">
+				<a class="nav-link" href="[(#URL_PAGE{groupes})]">Les groupes</a>
+			</li>
+			<li class="nav-item [(#SI_PAGE{mediatheque}|oui) active]">
+				<a class="nav-link" href="[(#URL_PAGE{mediatheque})]">Médiathèque</a>
+			</li>
+			<li class="nav-item [(#SI_PAGE{forum}|oui) active]">
+				<a class="nav-link" href="[(#URL_PAGE{forum})]">Forum</a>
+			</li>
+		</ul>
+	</div>
+</nav>

inclure/nav.html

@@ -1,46 +0,0 @@
-[(#REM) 
-	les 3 blocs deroulants de la barre nav
-]
-<nav class="navbar is-hidden">
-	<div class="pardessus">
-		<BOUCLE_edito(ARTICLES){id_secteur != #CONFIG{balint/id_bien}}{grigri != presentation}>
-		<div id="id_article_#ID_ARTICLE" class="articles">
-			<a href="#URL_ARTICLE" class="nom_groupe" title="[(#TITRE|attribut_html)]">
-				[(#TITRE|couper{45})]
-			</a>
-		</div>
-		</BOUCLE_edito>
-	</div>
-</nav>
-
-<B_tags>
-<nav class="tagbar is-hidden">
-	<div class="pardessus">
-		<BOUCLE_tags(GROUPES_MOTS){grigri = tags}>
-		<div id="id_groupe_#ID_GROUPE" class="groupe_mots">
-			[(#MODELE{nuage_popularite}{id_groupe})]
-		</div>
-		</BOUCLE_tags>
-	</div>
-</nav>
-</B_tags>
-<B_mots_fermes>
-<nav class="mcbar is-hidden">
-	<div class="pardessus">
-		<BOUCLE_mots_fermes(GROUPES_MOTS){grigri != tags}>
-		<div id="id_groupe_#ID_GROUPE" class="groupe_mots">
-			<div class="nom_groupe deplier_groupe_mots" data-id_groupe="#ID_GROUPE">
-					#TITRE <i class="icon-arrow--down"></i>
-			</div>
-			<B_mot>
-			<ul class="id_groupe_#ID_GROUPE js-hidden mots_groupe">
-			<BOUCLE_mot(MOTS){id_groupe}>
-				<li class="btn un_mot" data-id_mot="#ID_MOT" data-mot="#TITRE**">#TITRE</li>
-			</BOUCLE_mot>
-			</ul>
-			</B_mot>
-		</div>
-		</BOUCLE_mots_fermes>
-	</div>
-</nav>
-</B_mots_fermes>

inclure/nav_principale.html

@@ -1,5 +0,0 @@
-<button class="burgermenu nav-button" type="button" role="button" aria-label="open/close navigation">
-	<i></i>
-</button>
-
-[(#INCLURE{fond=inclure/menu, env, identifiant=barrenav})]

modeles/slider_home.html

@@ -0,0 +1,70 @@
+[(#REM)
+	fork du modèle d'owl carousel pour le slider de la home EPISUR
+		dots = true
+		affiche des flêches pour suivant / précédents
+		autoplay = true
+		largeur = 750px
+		caption = oui
+		autoplayHoverPause = true
+		lazyLoad = true
+		id-carousel = slider_home
+
+@param : id_article
+@param : id-carousel : id unique du carousel
+@param : caption : oui : Affiche la description de l'image.
+@param : docs : 1,2,3 : selectionne individuellement les documents
+@param : dots : true par defaut : affiche les points de navigation
+@param : navigation : true par defaut : affiche les boutons précédents suivants
+@param : caption_css : ajouter des css sur la description (par exemple : invisible).
+@param : autoplay : true (false par défaut) : le carousel démarre automatiquement.
+@param : autoplayHoverPause : true (false par défaut) : pause sur le rollHover en mode autoplay
+@param : lazyLoad : true (false par défaut) : ne charge que les images visibles pour optimiser le chargement.
+]
+<div id="slider_home" class="owl-carousel owl-theme">
+	<BOUCLE_listDocs(DOCUMENTS){id_article?}{id_rubrique?}{extension==jpg|png}{tout}{par rang_lien}{largeur >= 800}{hauteur >= 430}>
+	[(#SET{couleur_text,#COULEUR_TEXT|sinon{#ffffff}})]
+	<div class="owl-slide">
+			<div class="caption"[ style="background-color:(#COULEUR_FOND);"]>[
+				[(#URL_TITRE|?{<a href="#URL_TITRE" class="message">,<div class="message" style="color:#GET{couleur_text}!important;">})]
+					(#DESCRIPTIF)
+				[(#URL_TITRE|?{</a>,</div>})]][
+				<div class="credits">[<a href="(#CREDITS*)" title="<:epb:voir_source_credits:>" style=" color:#GET{couleur_text}!important;">](#TITRE)[(#CREDITS|oui)<i class="fa fa-external-link"></i></a>]</div>]
+			</div>
+		[<a href="(#URL_TITRE)" class="" rel="diaporamaslider_home" style="color:#GET{couleur_text}!important;">]
+			<img class="[(#ENV{lazyLoad,true}|=={true}|oui) owl-lazy" data-]src="[(#FICHIER|image_recadre{1700:430,-,focus}|adaptive_images{1200}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
+		[(#URL_TITRE|oui)</a>]
+	</div>
+	</BOUCLE_listDocs>
+</div>
+
+<script type="text/javascript">
+jQuery(function($){
+    $("#slider_home").owlCarousel({
+        loop:true,
+		lazyLoad: true,
+		caption: 'oui',
+		dots: true,
+		nav: true,
+		autoplay: false,
+		autoplayHoverPause: true,
+		largeur: 750,
+        items: 1,
+        autoHeight: true,
+//        URLhashListener: false,
+//        startPosition: 'URLHash',
+        navText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
+//        navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
+      	responsive:{
+      		0:{
+      		 items:1
+      		}
+      	}
+    });
+
+    // Gallerie Colorbox
+    $("a.js-colorbox").colorbox({
+        rel:'diaporamaslider_home',
+    });
+});
+</script>
+</B_listDocs>