#4506 : on revoit le markup des modeles document pour supprimer le max-width en dur (!16)

#4506 : on revoit le markup des modeles document pour supprimer le `max-width` en dur
- on ajoute un div conteneur qui porte les classes `spip_document*`
- le `<figure>` porte une classe `spip_doc_inner`
- les classes au pluriel `spip_documents_*` sont doublees d'un renommage au singulier `spip_document_*` comme cela a été fait pour `spip_logo`
- on supprime le `max-width` en dur

Avec ça les modèles doc tombent a peu près bien par défaut sur un squelette stylé pour les anciens modèles doc, sauf audio et video dont le player ne se centre pas et quelques petits cas limites

- il suffit d'**ajouter** les règles CSS suivantes pour adapter un squelette aux nouveaux modèles :
```
.spip_document { display: flex; justify-content: center;align-items: center}
.spip_doc_inner{ margin:0 auto;text-align: center;max-width: 100%;}
.spip_doc_inner>* {margin-left: auto;margin-right: auto;}
.spip_document .spip_doc_lien { display: inline-block; }
.spip_doc_legende { display: block; max-width: 25em; }
```

On note que ces règles ne ciblent que des classes présentes sur les nouveaux modèles, et peuvent donc être ajoutées à tout squelette sans casser l'affichage sur les versions précédentes de SPIP, ou avec le plugin de compatibilité qui rétablit les anciens modèles.

Co-authored-by: Cerdic <cedric@yterium.com>
Reviewed-on: https://git.spip.net/spip/medias/pulls/16


Co-Authored-By: cerdic <cedric@yterium.com>
Co-Committed-By: cerdic <cedric@yterium.com>

medias_fonctions.php

@@ -435,12 +435,15 @@ function filtre_medias_modele_document_standard_classes_dist($Pile, $id_document
 
 	$classes = [];
 	$classes[] = "spip_document_$id_document";
+	$classes[] = 'spip_document';
 	$classes[] = 'spip_documents';
 	$classes[] = "spip_document_$media";
 	if (!empty($env['align'])) {
 		$classes[] = 'spip_documents_' . $env['align'];
+		$classes[] = 'spip_document_' . $env['align'];
 	} elseif ($media === 'image') {
 		$classes[] = 'spip_documents_center';
+		$classes[] = 'spip_document_center';
 	}
 	if (!empty($var['legende'])) {
 		$classes[] = "spip_document_avec_legende";

modeles/audio.html

@@ -7,11 +7,11 @@
 [(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
 #SET{largeur,#ENV{largeur, #LARGEUR|?{#LARGEUR,400}}|max{120}}
 #SET{duree,#ENV{duree,#DUREE}}[(#SET{duree,[(#GET{duree}|intval|?{[(#GET{duree}|intval)],''})]})]
-<figure 
-  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{audio})]"[ 
-  style='width:(#GET{largeur})px;'][
+<div
+  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{audio})]"[
   (#ID_DOCUMENT|medias_modele_document_standard_attributs{audio})
 ]>
+<figure class="spip_doc_inner">
 	[(#LOGO_DOCUMENT{vignette}|image_reduire{#GET{largeur},0}|vider_attribut{class})]
   <div class="audio-wrapper"[ style='width:(#GET{largeur})px;max-width:100%;']>
   	<audio class="mejs mejs-#ID_DOCUMENT [ mejs-(#ENV{skin})]"
@@ -28,6 +28,7 @@
 (#INCLURE{javascript/mejs-init.min.js})/*\]\]>*/</script>]
 [(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|sinon{#CHEMIN{lib/mejs/mejs-skins.css}}|url_absolue_css})</style>]]
 </figure>
+</div>
 </BOUCLE_audio>
 <INCLURE{fond=modeles/file,env} />
 <//B_audio>

modeles/file.html

@@ -25,15 +25,16 @@
 [(#SET{title,[(#TYPE_DOCUMENT) - [(#TAILLE|taille_en_octets)]]})]
 [(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
 [(#MEDIA|=={image}|oui) #SET{title,#TITRE|sinon{#GET{title}}]
-<figure 
-  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{file}) ]spip_lien_ok"[ 
-  style='width:(#GET{width}|max{120})px;'][ 
+<div
+  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{file}) ]spip_lien_ok"[
   (#ID_DOCUMENT|medias_modele_document_standard_attributs{file})
 ]>
+<figure class="spip_doc_inner">
 [<a href="(#GET{url})"[
-	class="(#ENV{lien_class})"] title='[(#GET{title}|attribut_html)]'[
+	class="(#ENV{lien_class}|concat{' spip_doc_lien'})"] title='[(#GET{title}|attribut_html)]'[
 	(#ENV{lien}|?{'',type="#MIME_TYPE"})]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='' />[(#GET{url}|?{</a>})]
 #GET{legende}
 </figure>
+</div>
 </BOUCLE_file>
 #FILTRE{trim}
\ No newline at end of file

modeles/file_emb_application.html

@@ -12,10 +12,11 @@
  (#ENV{controls}=={PositionSlider}|?{#SET{largeur,#GET{largeur}|moins{40}},''})
 ][(#ENV{controls,''}|non)
 [(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
-<figure 
+<div
   class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{application})]"[
   (#ID_DOCUMENT|medias_modele_document_standard_attributs{application})
 ]>
+<figure class="spip_doc_inner">
 ][(#EXTENSION|=={swf}|oui)
 <object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' 
  codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=#ENV{version,'6,0,0,0'}' 
@@ -41,6 +42,7 @@
 ][(#ENV{controls,''}|non)
 	#GET{legende}
 </figure>
+</div>
 ]
 </BOUCLE_application>
 <INCLURE{fond=modeles/file,env} />

modeles/file_emb_text.html

 <BOUCLE_text (DOCUMENTS types_documents) {id_document=#ENV{id,#ENV{id_document}}} {tout}
 >[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})][(#REM)
-][<figure 
+][<div
   class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{text})]"[ 
   (#ID_DOCUMENT|medias_modele_document_standard_attributs{text})
-]><pre>(#FICHIER|contenu_document{#ENV{charset,auto}}|echapper_tags)</pre>
+]><figure class="spip_doc_inner"><pre>(#FICHIER|contenu_document{#ENV{charset,auto}}|echapper_tags)</pre>
 [(#GET{legende})
-]</figure>
+]</figure></div>
 ]</BOUCLE_text>

modeles/file_emb_text_csv.html

 <BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}
 >[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})][(#REM)
-]<figure 
+]<div
   class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{text})]"[ 
   (#ID_DOCUMENT|medias_modele_document_standard_attributs{text})
-]>
+]><figure class="spip_doc_inner">
 [(#FICHIER|contenu_document{#ENV{charset,auto}}|appliquer_filtre{#MIME_TYPE})]
 [(#GET{legende}
-]</figure>
+]</figure></div>
 </BOUCLE_tous>

modeles/file_emb_text_html.html

 <BOUCLE_texthtml (DOCUMENTS types_documents) {id_document=#ID} {tout}
 >[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})][(#REM)
-][<figure 
+][<div
   class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{text_html})]"[ 
   (#ID_DOCUMENT|medias_modele_document_standard_attributs{text_html})
-]><object data="(#URL_DOCUMENT)" width="100%" height="400"><a href="#URL_DOCUMENT">#FICHIER</a></object>
+]><figure class="spip_doc_inner"><object data="(#URL_DOCUMENT)" width="100%" height="400"><a href="#URL_DOCUMENT">#FICHIER</a></object>
 [(#GET{legende})
-]</figure>
+]</figure></div>
 ]</BOUCLE_texthtml>

modeles/image.html

@@ -11,17 +11,18 @@
 [(#SET{image,#GET{image}|inserer_attribut{alt,#ENV{alt,#ALT}|sinon{''}}})]
 [(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
 #SET{largeur,#GET{image}|largeur}
-<figure 
-  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{image}) ]spip_lien_ok"[ 
-  style='width:(#GET{largeur})px;'][
+<div
+  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{image}) ]spip_lien_ok"[
   (#ID_DOCUMENT|medias_modele_document_standard_attributs{image})
 ]>
-[<a href="(#ENV{lien})"[ class="(#ENV{lien_class}|concat{#GET{autolien}|?{' mediabox'}})"]>]
-[(#ENV{lien}|non|et{#GET{autolien}})<a href="#URL_DOCUMENT" class="mediabox" type="#MIME_TYPE">]
+<figure class="spip_doc_inner">
+[<a href="(#ENV{lien})"[ class="(#ENV{lien_class}|concat{' spip_doc_lien',#GET{autolien}|?{' mediabox'}})"]>]
+[(#ENV{lien}|non|et{#GET{autolien}})<a href="#URL_DOCUMENT" class="spip_doc_lien mediabox" type="#MIME_TYPE">]
 		#GET{image}
 [(#ENV{lien}|ou{#GET{autolien}}|?{</a>})]
 #GET{legende}
 </figure>
+</div>
 </BOUCLE_image>
 <INCLURE{fond=modeles/file,env} />
 <//B_image>

modeles/video.html

@@ -9,11 +9,11 @@
 #SET{largeur,#ENV{largeur, #LARGEUR|?{#LARGEUR,480}}|max{120}}
 #SET{hauteur,#ENV{hauteur, #HAUTEUR|?{#HAUTEUR,300}}|max{75}}
 #SET{duree,#ENV{duree,#DUREE}}[(#SET{duree,[(#GET{duree}|intval|?{[(#GET{duree}|intval)],''})]})]
-<figure 
-  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{video})]"[ 
-  style='width:(#GET{largeur})px;'][ 
+<div
+  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{video})]"[
   (#ID_DOCUMENT|medias_modele_document_standard_attributs{video})
 ]>
+<figure class="spip_doc_inner">
 <div class="video-intrinsic-wrapper" style='height:0;width:#GET{largeur}px;max-width:100%;padding-bottom:[(#GET{hauteur}|div{#GET{largeur}}|mult{100}|round{2})]%;position:relative;'>
 	<div class="video-wrapper" style="position: absolute;top:0;left:0;width:100%;height:100%;">
 		<video class="mejs mejs-#ID_DOCUMENT[ mejs-(#ENV{skin})]"
@@ -48,6 +48,7 @@
 (#INCLURE{javascript/mejs-init.min.js})/*\]\]>*/</script>]
 [(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|url_absolue_css})</style>]]
 </figure>
+</div>
 </BOUCLE_video>
 <INCLURE{fond=modeles/file,env} />
 <//B_video>