nouvelle mise en page de la page groupes (tout ajax) + correction balises sémantiques
This commit is contained in:
parent
dda4b75410
commit
e9116c2ebc
7 changed files with 147 additions and 51 deletions
|
@ -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}>
|
||||
|
|
|
@ -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){
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}
|
||||
|
|
61
inclure/groupe-detail.html
Normal file
61
inclure/groupe-detail.html
Normal 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"> (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>
|
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Add table
Reference in a new issue