Skip to content
Extraits de code Groupes Projets
Valider 61ac9aaf rédigé par cerdic's avatar cerdic
Parcourir les fichiers

#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's avatarCerdic <cedric@yterium.com>
Reviewed-on: https://git.spip.net/spip/medias/pulls/16


Co-Authored-By: cerdic's avatarcerdic <cedric@yterium.com>
Co-Committed-By: cerdic's avatarcerdic <cedric@yterium.com>
parent 028fe5a9
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
Affichage de
avec 34 ajouts et 25 suppressions
medias_fonctions.php
+ 3
− 0
Voir le fichier @ 61ac9aaf
...@@ -435,12 +435,15 @@ function filtre_medias_modele_document_standard_classes_dist($Pile, $id_document ...@@ -435,12 +435,15 @@ function filtre_medias_modele_document_standard_classes_dist($Pile, $id_document
$classes = []; $classes = [];
$classes[] = "spip_document_$id_document"; $classes[] = "spip_document_$id_document";
$classes[] = 'spip_document';
$classes[] = 'spip_documents'; $classes[] = 'spip_documents';
$classes[] = "spip_document_$media"; $classes[] = "spip_document_$media";
if (!empty($env['align'])) { if (!empty($env['align'])) {
$classes[] = 'spip_documents_' . $env['align']; $classes[] = 'spip_documents_' . $env['align'];
$classes[] = 'spip_document_' . $env['align'];
} elseif ($media === 'image') { } elseif ($media === 'image') {
$classes[] = 'spip_documents_center'; $classes[] = 'spip_documents_center';
$classes[] = 'spip_document_center';
} }
if (!empty($var['legende'])) { if (!empty($var['legende'])) {
$classes[] = "spip_document_avec_legende"; $classes[] = "spip_document_avec_legende";
......
modeles/audio.html
+ 4
− 3
Voir le fichier @ 61ac9aaf
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})] [(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
#SET{largeur,#ENV{largeur, #LARGEUR|?{#LARGEUR,400}}|max{120}} #SET{largeur,#ENV{largeur, #LARGEUR|?{#LARGEUR,400}}|max{120}}
#SET{duree,#ENV{duree,#DUREE}}[(#SET{duree,[(#GET{duree}|intval|?{[(#GET{duree}|intval)],''})]})] #SET{duree,#ENV{duree,#DUREE}}[(#SET{duree,[(#GET{duree}|intval|?{[(#GET{duree}|intval)],''})]})]
<figure <div
class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{audio})]"[ class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{audio})]"[
style='width:(#GET{largeur})px;'][
(#ID_DOCUMENT|medias_modele_document_standard_attributs{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})] [(#LOGO_DOCUMENT{vignette}|image_reduire{#GET{largeur},0}|vider_attribut{class})]
<div class="audio-wrapper"[ style='width:(#GET{largeur})px;max-width:100%;']> <div class="audio-wrapper"[ style='width:(#GET{largeur})px;max-width:100%;']>
<audio class="mejs mejs-#ID_DOCUMENT [ mejs-(#ENV{skin})]" <audio class="mejs mejs-#ID_DOCUMENT [ mejs-(#ENV{skin})]"
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
(#INCLURE{javascript/mejs-init.min.js})/*\]\]>*/</script>] (#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>]] [(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|sinon{#CHEMIN{lib/mejs/mejs-skins.css}}|url_absolue_css})</style>]]
</figure> </figure>
</div>
</BOUCLE_audio> </BOUCLE_audio>
<INCLURE{fond=modeles/file,env} /> <INCLURE{fond=modeles/file,env} />
<//B_audio> <//B_audio>
modeles/file.html
+ 5
− 4
Voir le fichier @ 61ac9aaf
...@@ -25,15 +25,16 @@ ...@@ -25,15 +25,16 @@
[(#SET{title,[(#TYPE_DOCUMENT) - [(#TAILLE|taille_en_octets)]]})] [(#SET{title,[(#TYPE_DOCUMENT) - [(#TAILLE|taille_en_octets)]]})]
[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})] [(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
[(#MEDIA|=={image}|oui) #SET{title,#TITRE|sinon{#GET{title}}] [(#MEDIA|=={image}|oui) #SET{title,#TITRE|sinon{#GET{title}}]
<figure <div
class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{file}) ]spip_lien_ok"[ class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{file}) ]spip_lien_ok"[
style='width:(#GET{width}|max{120})px;'][
(#ID_DOCUMENT|medias_modele_document_standard_attributs{file}) (#ID_DOCUMENT|medias_modele_document_standard_attributs{file})
]> ]>
<figure class="spip_doc_inner">
[<a href="(#GET{url})"[ [<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>})] (#ENV{lien}|?{'',type="#MIME_TYPE"})]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='' />[(#GET{url}|?{</a>})]
#GET{legende} #GET{legende}
</figure> </figure>
</div>
</BOUCLE_file> </BOUCLE_file>
#FILTRE{trim} #FILTRE{trim}
\ No newline at end of file
modeles/file_emb_application.html
+ 3
− 1
Voir le fichier @ 61ac9aaf
...@@ -12,10 +12,11 @@ ...@@ -12,10 +12,11 @@
(#ENV{controls}=={PositionSlider}|?{#SET{largeur,#GET{largeur}|moins{40}},''}) (#ENV{controls}=={PositionSlider}|?{#SET{largeur,#GET{largeur}|moins{40}},''})
][(#ENV{controls,''}|non) ][(#ENV{controls,''}|non)
[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})] [(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
<figure <div
class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{application})]"[ class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{application})]"[
(#ID_DOCUMENT|medias_modele_document_standard_attributs{application}) (#ID_DOCUMENT|medias_modele_document_standard_attributs{application})
]> ]>
<figure class="spip_doc_inner">
][(#EXTENSION|=={swf}|oui) ][(#EXTENSION|=={swf}|oui)
<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' <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'}' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=#ENV{version,'6,0,0,0'}'
...@@ -41,6 +42,7 @@ ...@@ -41,6 +42,7 @@
][(#ENV{controls,''}|non) ][(#ENV{controls,''}|non)
#GET{legende} #GET{legende}
</figure> </figure>
</div>
] ]
</BOUCLE_application> </BOUCLE_application>
<INCLURE{fond=modeles/file,env} /> <INCLURE{fond=modeles/file,env} />
......
modeles/file_emb_text.html
+ 3
− 3
Voir le fichier @ 61ac9aaf
<BOUCLE_text (DOCUMENTS types_documents) {id_document=#ENV{id,#ENV{id_document}}} {tout} <BOUCLE_text (DOCUMENTS types_documents) {id_document=#ENV{id,#ENV{id_document}}} {tout}
>[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})][(#REM) >[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})][(#REM)
][<figure ][<div
class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{text})]"[ class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{text})]"[
(#ID_DOCUMENT|medias_modele_document_standard_attributs{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}) [(#GET{legende})
]</figure> ]</figure></div>
]</BOUCLE_text> ]</BOUCLE_text>
modeles/file_emb_text_csv.html
+ 3
− 3
Voir le fichier @ 61ac9aaf
<BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout} <BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}
>[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})][(#REM) >[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})][(#REM)
]<figure ]<div
class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{text})]"[ class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{text})]"[
(#ID_DOCUMENT|medias_modele_document_standard_attributs{text}) (#ID_DOCUMENT|medias_modele_document_standard_attributs{text})
]> ]><figure class="spip_doc_inner">
[(#FICHIER|contenu_document{#ENV{charset,auto}}|appliquer_filtre{#MIME_TYPE})] [(#FICHIER|contenu_document{#ENV{charset,auto}}|appliquer_filtre{#MIME_TYPE})]
[(#GET{legende} [(#GET{legende}
]</figure> ]</figure></div>
</BOUCLE_tous> </BOUCLE_tous>
modeles/file_emb_text_html.html
+ 3
− 3
Voir le fichier @ 61ac9aaf
<BOUCLE_texthtml (DOCUMENTS types_documents) {id_document=#ID} {tout} <BOUCLE_texthtml (DOCUMENTS types_documents) {id_document=#ID} {tout}
>[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})][(#REM) >[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})][(#REM)
][<figure ][<div
class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{text_html})]"[ class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{text_html})]"[
(#ID_DOCUMENT|medias_modele_document_standard_attributs{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}) [(#GET{legende})
]</figure> ]</figure></div>
]</BOUCLE_texthtml> ]</BOUCLE_texthtml>
modeles/image.html
+ 6
− 5
Voir le fichier @ 61ac9aaf
...@@ -11,17 +11,18 @@ ...@@ -11,17 +11,18 @@
[(#SET{image,#GET{image}|inserer_attribut{alt,#ENV{alt,#ALT}|sinon{''}}})] [(#SET{image,#GET{image}|inserer_attribut{alt,#ENV{alt,#ALT}|sinon{''}}})]
[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})] [(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
#SET{largeur,#GET{image}|largeur} #SET{largeur,#GET{image}|largeur}
<figure <div
class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{image}) ]spip_lien_ok"[ class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{image}) ]spip_lien_ok"[
style='width:(#GET{largeur})px;'][
(#ID_DOCUMENT|medias_modele_document_standard_attributs{image}) (#ID_DOCUMENT|medias_modele_document_standard_attributs{image})
]> ]>
[<a href="(#ENV{lien})"[ class="(#ENV{lien_class}|concat{#GET{autolien}|?{' mediabox'}})"]>] <figure class="spip_doc_inner">
[(#ENV{lien}|non|et{#GET{autolien}})<a href="#URL_DOCUMENT" class="mediabox" type="#MIME_TYPE">] [<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} #GET{image}
[(#ENV{lien}|ou{#GET{autolien}}|?{</a>})] [(#ENV{lien}|ou{#GET{autolien}}|?{</a>})]
#GET{legende} #GET{legende}
</figure> </figure>
</div>
</BOUCLE_image> </BOUCLE_image>
<INCLURE{fond=modeles/file,env} /> <INCLURE{fond=modeles/file,env} />
<//B_image> <//B_image>
modeles/video.html
+ 4
− 3
Voir le fichier @ 61ac9aaf
...@@ -9,11 +9,11 @@ ...@@ -9,11 +9,11 @@
#SET{largeur,#ENV{largeur, #LARGEUR|?{#LARGEUR,480}}|max{120}} #SET{largeur,#ENV{largeur, #LARGEUR|?{#LARGEUR,480}}|max{120}}
#SET{hauteur,#ENV{hauteur, #HAUTEUR|?{#HAUTEUR,300}}|max{75}} #SET{hauteur,#ENV{hauteur, #HAUTEUR|?{#HAUTEUR,300}}|max{75}}
#SET{duree,#ENV{duree,#DUREE}}[(#SET{duree,[(#GET{duree}|intval|?{[(#GET{duree}|intval)],''})]})] #SET{duree,#ENV{duree,#DUREE}}[(#SET{duree,[(#GET{duree}|intval|?{[(#GET{duree}|intval)],''})]})]
<figure <div
class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{video})]"[ class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{video})]"[
style='width:(#GET{largeur})px;'][
(#ID_DOCUMENT|medias_modele_document_standard_attributs{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-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%;"> <div class="video-wrapper" style="position: absolute;top:0;left:0;width:100%;height:100%;">
<video class="mejs mejs-#ID_DOCUMENT[ mejs-(#ENV{skin})]" <video class="mejs mejs-#ID_DOCUMENT[ mejs-(#ENV{skin})]"
...@@ -48,6 +48,7 @@ ...@@ -48,6 +48,7 @@
(#INCLURE{javascript/mejs-init.min.js})/*\]\]>*/</script>] (#INCLURE{javascript/mejs-init.min.js})/*\]\]>*/</script>]
[(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|url_absolue_css})</style>]] [(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|url_absolue_css})</style>]]
</figure> </figure>
</div>
</BOUCLE_video> </BOUCLE_video>
<INCLURE{fond=modeles/file,env} /> <INCLURE{fond=modeles/file,env} />
<//B_video> <//B_video>
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site