nouvelle mise en page de la page groupes (tout ajax) + correction balises sémantiques

This commit is contained in:
Pierre 2020-02-09 15:14:17 +01:00
parent dda4b75410
commit e9116c2ebc
7 changed files with 147 additions and 51 deletions

View file

@ -3,20 +3,20 @@
<div class="row">
<BOUCLE_presentation(ARTICLES){grigri=presentation_accueil}{0,1}{! par date}>
<div id="images-presentation" class="col-lg">
[(#LOGO_SITE_SPIP|image_reduire{510,0})]
<h1>[(#LOGO_SITE_SPIP|inserer_attribut{alt,#NOM_SITE_SPIP}|image_reduire{510,0})]</h1>
<BOUCLE_image_pres(DOCUMENTS){id_article}{0,1}>
<div class="image-encadree text-light">
[(#FICHIER|image_recadre{380:362,-,focus}|image_reduire{380,362})]
[(#FICHIER|balise_img{#TITRE}|image_recadre{380:362,-,focus}|image_reduire{380,362})]
#DESCRIPTIF
</div>
</BOUCLE_image_pres>
</div>
<div id="texte-presentation" class="col-lg">
<article id="texte-presentation" class="col-lg">
<div class="contenu text-dark #EDIT{texte}">
#TEXTE
</div>
</div>
</article>
</BOUCLE_presentation>
</div>
</div>
@ -28,19 +28,19 @@
<div class="col-lg-9">
<INCLURE{fond=inclure/diaporama_accueil}/>
</div>
<div class="col-lg-3">
<aside class="col-lg-3">
<div id="agenda" class="mt-4 mt-lg-0">
<h3>Agenda</h3>
<h2 class="h3">Agenda</h2>
<BOUCLE_agenda(ARTICLES){titre_mot=agenda}>
<div class="agenda-evenement">
<a href="#URL_ARTICLE">
<h4>#TITRE</h4>
<h3 class="h5">#TITRE</h3>
</a>
#DATE_AGENDA
</div>
</BOUCLE_agenda>
</div>
</div>
</aside>
</div>
</div>
@ -49,7 +49,7 @@
<section id="a-la-une">
<div class="container">
<h3>À la une</h3>
<h2 class="h3">À la une</h2>
<div class="row liste-articles">
<BOUCLE_a_la_une(ARTICLES){titre_mot=a_la_une}>
<div class="col-lg-4 mt-4 mt-lg-0">
@ -62,7 +62,7 @@
<section id="nous-contacter">
<div class="container">
<h3>Nous contacter</h3>
<h2 class="h3">Nous contacter</h2>
<div class="row">
<div class="col-lg-6">
<BOUCLE_webmaster(AUTEURS){id_auteur=#CONFIG{balint/id_contact}}{tout}>

View file

@ -15,7 +15,7 @@
}
/* polices */
* { font-family: 'Cabin', sans-serif; font-size: 1.1rem}
* { font-family: 'Cabin', sans-serif; font-size: 1.05rem}
i.fas { font-family: fontawesome; font-style: normal; font-weight: 400; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, legend,
.h1-like, .h2-like, .h3-like, .h4-like { font-family: 'Cabin', sans-serif; }
@ -197,22 +197,27 @@ body{
}
}
#agenda{
#agenda, .dernieres-nouvelles{
background: $fond-transparent;
border-radius: 0.2rem;
display: flex;
flex-direction: column;
text-align: center;
h3{
.h3{
font-weight: 700;
margin: 1.5rem;
color: $bg-diapo-texte;
}
h4{
font-weight:500;
.h5{
font-weight:600;
}
}
.dernieres-nouvelles{
text-align: left;
padding: 0 1.2rem;
}
.agenda-evenement{
margin: 0 1.5rem 1.5rem 1.5rem;
}
@ -273,7 +278,7 @@ body{
#nous-contacter{
background: $bg-nous-contacter;
padding: 4rem 0 3rem 0;
h3{
.h3{
color: $light;
font-weight: 700;
padding: 1rem;
@ -473,6 +478,9 @@ body{
color: $dark;
padding: 0.5rem 1rem;
}*/
#menu-groupes{
margin-top: 0;
}
@include media-breakpoint-up(lg) {
#menu-groupes li:not(:last-of-type){

View file

@ -11880,7 +11880,7 @@ fieldset.reponse_formulaire {
/* polices */
* {
font-family: 'Cabin', sans-serif;
font-size: 1.1rem;
font-size: 1.05rem;
}
i.fas {
@ -12086,7 +12086,7 @@ body {
margin: 2px 0;
}
#agenda {
#agenda, .dernieres-nouvelles {
background: rgba(255, 255, 255, 0.92);
border-radius: 0.2rem;
display: -webkit-box;
@ -12097,14 +12097,19 @@ body {
text-align: center;
}
#agenda h3 {
#agenda .h3, .dernieres-nouvelles .h3 {
font-weight: 700;
margin: 1.5rem;
color: rgba(0, 13, 158, 0.65);
}
#agenda h4 {
font-weight: 500;
#agenda .h5, .dernieres-nouvelles .h5 {
font-weight: 600;
}
.dernieres-nouvelles {
text-align: left;
padding: 0 1.2rem;
}
.agenda-evenement {
@ -12176,7 +12181,7 @@ body {
padding: 4rem 0 3rem 0;
}
#nous-contacter h3 {
#nous-contacter .h3 {
color: #f8f9fa;
font-weight: 700;
padding: 1rem;
@ -12417,6 +12422,10 @@ body {
color: $dark;
padding: 0.5rem 1rem;
}*/
#menu-groupes {
margin-top: 0;
}
@media (min-width: 992px) {
#menu-groupes li:not(:last-of-type) {
border: none;

View file

@ -2,11 +2,11 @@
<BOUCLE_art(ARTICLES){id_article = #ENV{id_article}}>
<div class="bloc-article bloc-ville">
<div class="bloc-contenu">
<a href="[(#URL_PAGE{groupe}|parametre_url{id_article,#ID_ARTICLE})]">
<a href="[(#URL_PAGE{groupe}|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_rubrique,#ENV{id_rubrique}})]" class="ajax nocache nohistory">
<INCLURE{fond=inclure/photo_article,env,id_article=#ENV{id_article},ajax=recharger_photo,groupe=oui}>
</a>
<div class="bloc-textes">
<a href="[(#URL_PAGE{groupe}|parametre_url{id_article,#ID_ARTICLE})]">
<a href="[(#URL_PAGE{groupe}|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_rubrique,#ENV{id_rubrique}})]" class="ajax nocache nohistory">
<h4>#SURTITRE <i class="fas fa-globe"></i></h4>
#SET{nb_articles,0}

View file

@ -0,0 +1,61 @@
[(#REM) On affiche tous les groupes appartenant à la même Ville]
#SET{ville,#INFO_SURTITRE{article,#ENV{id_article}}}
[(#REM) On récupère les id de tous les groupes de la ville pour les actualités]
[(#SET{groupes,#ARRAY})]
[<h2 class="#EDIT{titre} mt-4 mb-4">Groupes de (#GET{ville})</h2>]
<BOUCLE_groupe(ARTICLES){surtitre = #GET{ville}}{id_secteur=#CONFIG{balint/id_rub_groupes}}>
[(#SET{groupes,#GET{groupes}|push{#ID_ARTICLE}})]
<div class="bloc-groupe mt-4 mt-lg-0">
[<h3 class="#EDIT{titre}">(#TITRE)</h3>]
[(#AUTORISER{modifier, article, #ID_ARTICLE})
<a class="btn" href="#URL_PAGE{editer_groupe,id_article=#ID_ARTICLE }"><i class="fas fa-edit"></i> Mettre à jour le groupe</a>
]
<div class="row">
<div class="col-md-8">
<div class="texte #EDIT{soustitre}"><strong>Adresse :</strong> #SOUSTITRE</div>
<div class="texte #EDIT{descriptif}"><strong>Fréquence :</strong> [(#DESCRIPTIF|textebrut)]</div>
<div class="texte #EDIT{texte}">#TEXTE</div>
</div>
<div class="col-md-4">
<strong>Responsables</strong>
<BOUCLE_auteurs(AUTEURS){id_article=#ID_ARTICLE}>
<div class="row">
<div>#NOM</div>
[(#EMAIL|ou{#TELEPHONE}|oui)
<div>
<a href="[(#URL_PAGE{contacter_auteur}|parametre_url{id_auteur,#ID_AUTEUR})]" class="mediabox">&nbsp; (contact)</a>
</div>]
</div>
</BOUCLE_auteurs>
</div>
<BOUCLE_images(DOCUMENTS){id_article=#ID_ARTICLE}{extension==jpg|png|gif}{!par credits}{1,n}>
<a href="#FICHIER" class='mediabox' rel='galerie_#ID_ARTICLE'>
[(#FICHIER|image_recadre{350:200,-,focus}|image_reduire{350, 200})]
</a>
</BOUCLE_images>
</div>
</div>
</BOUCLE_groupe>
<B_articles>
<h2 class="mb-lg-3 mt-4">Articles de #GET{ville}</h2>
#ANCRE_PAGINATION
[<div class="pagination pagination_top">(#PAGINATION{page_precedent_suivant})</div>]
<div class="row liste-articles">
<BOUCLE_articles(ARTICLES){id_rubrique=#CONFIG{balint/id_rub_articles}}{id_groupe IN #GET{groupes}}{! par date}{pagination 6}>
<div class="col-md-6 col-lg-4 mt-4 mt-lg-0">
<INCLURE{fond=inclure/bloc_article, env, id_article}/>
</div>
</BOUCLE_articles>
</div>
[<div class="pagination">(#PAGINATION{page_precedent_suivant})</div>]
</B_articles>

View file

@ -1,10 +1,11 @@
<INCLURE{fond=inclure/menu-groupes,env}>
<div class="row">
<div class="col-100 col-lg-9">
<h2 class="mb-4 mt-4 groupes-intertitre">#INFO_TITRE{rubrique,#ENV{id_rubrique}}</h2>
<INCLURE{fond=inclure/menu-groupes,env}>
<div class="row liste-articles">
<BOUCLE_villes(ARTICLES){id_rubrique=#ENV{id_rubrique}}{fusion surtitre}>
<div class="col-md-6 col-lg-4 mt-4 mt-lg-0">
<div class="col col-md-6 col-lg-4 mt-4 mt-lg-0">
<INCLURE{fond=inclure/bloc_groupe,env,id_article=#ID_ARTICLE}>
@ -13,8 +14,12 @@
<div class="col">Il n'y a pas encore de groupe dans ce pays.</div>
<//B_villes>
</div>
<INCLURE{fond=inclure/groupe-detail,env} />
</div>
<h3 class="mt-4 mb-3">Dernières nouvelles</h3>
<aside class="col col-lg-3 d-none d-lg-block dernieres-nouvelles">
<h3 class="h4 mt-4 mb-3">Derniers articles</br>[en (#INFO_TITRE{rubrique,#ENV{id_rubrique}})]</h3>
[(#REM) On récupère les id de tous les groupes du pays]
@ -23,12 +28,25 @@
[(#SET{groupes,#GET{groupes}|push{#ID_ARTICLE}})]
</BOUCLE_villes2>
<div class="row liste-articles">
<div class="liste-articles">
<BOUCLE_a_la_une(ARTICLES){id_rubrique=#CONFIG{balint/id_rub_articles}}{id_groupe IN #GET{groupes}}{0,6}{! par date}>
<div class="col-md-6 col-lg-4 mt-4 mt-lg-0">
<INCLURE{fond=inclure/bloc_article, env, id_article}/>
<div class="mt-4 mt-lg-0 mb-3">
<div class="infos-article">
[(#DATE|affdate) :]
</div>
<a href="#URL_ARTICLE" title="Lire l'article">
<h4 class='h5 mb-0'>#TITRE</h4>
</a>
[<div class="resume-article">(#DESCRIPTIF)</div>]
</div>
</BOUCLE_a_la_une>
<div class="col">Il n'y a pas encore d'article dans ce pays.</div>
<//B_a_la_une>
</div>
</aside>
</div>

View file

@ -1,7 +1,7 @@
<nav id="menu-groupes" class="navbar navbar-expand-lg navbar-dark">
<button class="navbar-toggler d-flex d-lg-none collapsed" type="button" data-toggle="collapse" data-target="#liste-groupes" aria-controls="liste-deroulante-association" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-angle-down" aria-hidden="true"></i>
<span class="navbar-brand d-lg-none">Pays</span>
[<span class="navbar-brand d-lg-none">(#INFO_TITRE{rubrique,#ENV{id_rubrique}})</span>]
</button>
<div class="collapse navbar-collapse" id="liste-groupes">
<ul class="navbar-nav">