Ticket #4100 : liste des documents joints. On simplifie légèrement la...

Ticket #4100 : liste des documents joints. On simplifie légèrement la structure interne d'un .item en 2 conteneurs : la vignette à gauche, et tout le reste à droite. Le bloc .actions passe dans le bloc .descriptions avec tout le reste (titre, descriptif et infos). Pour l'affichage en grand, ça rend le bloc plus lisible et plus compact. Ça ne change rien pour les 2 autres modes d'affichage (en case et en liste).

modeles/document_desc.html

@@ -23,7 +23,7 @@ Distribue sous licence GPL
 				<span class="image_loading"></span>
 			</h4>
 
-			<div class="descriptif [(#EDIT{descriptif})]">[(#DESCRIPTIF|couper{100})]</div>
+			[<div class="descriptif [(#EDIT{descriptif})]">(#DESCRIPTIF|couper{100})</div>]
 
 			<div class="infos">
 				<div class="permanentes">
@@ -76,25 +76,25 @@ Distribue sous licence GPL
 					[(#PIPELINE{afficher_metas_document,#ARRAY{args,#ARRAY{'quoi','document_desc','id_document',#ID_DOCUMENT},data,#GET{data}}})]
 				</div>
 			</div>
-		</div>
-	</div>
 
-	<div class="actions">
-		[(#INCLUS|=={image}|et{#CONST{_BOUTON_MODE_IMAGE}}|oui)
-		<div class="mode">
-			[(#MODE|=={image}|oui)[(#BOUTON_ACTION{<:medias:upload_info_mode_document:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-document,#SELF},ajax})]
-			][(#MODE|=={image}|non)[(#BOUTON_ACTION{<:medias:upload_info_mode_image:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-image,#SELF},ajax})]]
-		</div>]
-		<BOUCLE_compte(documents_liens){id_document}{0,2} />
-		[(#TOTAL_BOUCLE|=={1}|et{#AUTORISER{dissocierdocuments,#OBJET,#ID_OBJET}}|et{#VU|=={non}})[(#BOUTON_ACTION{<:medias:bouton_enlever_supprimer_document:>,#URL_ACTION_AUTEUR{dissocier_document,#ID_OBJET-#OBJET-#ID_DOCUMENT-suppr-safe,#SELF},ajax,<:medias:bouton_enlever_supprimer_document_confirmation:>,'',[(function(){jQuery("#doc(#ID_DOCUMENT)").animateRemove();return true;})()]})]]
-		[(#AUTORISER{dissocierdocuments,#OBJET,#ID_OBJET})[(#BOUTON_ACTION{<:medias:bouton_enlever_document:>,#URL_ACTION_AUTEUR{dissocier_document,#ID_OBJET-#OBJET-#ID_DOCUMENT--safe,#SELF},ajax,'','',[(function(){jQuery("#doc(#ID_DOCUMENT)").animateRemove();return true;})()]})]]
-		[(#AUTORISER{modifier,document,#ID_DOCUMENT}|oui)
-			<div class="deplacer-modifier">
-				<span class="deplacer-document" data-rang="#RANG_LIEN"><img src='#CHEMIN_IMAGE{deplacer-16.png}' width='16' height='16' alt='<:medias:ordonner_ce_document|attribut_html:>' title='<:medias:ordonner_ce_document|attribut_html:>' /></span>
-				<a href="#URL_ECRIRE{document_edit,id_document=#ID_DOCUMENT}" target="_blank" class="editbox" tabindex="0" role="button"><:medias:bouton_modifier_document:></a>
+			<div class="actions">
+				[(#INCLUS|=={image}|et{#CONST{_BOUTON_MODE_IMAGE}}|oui)
+				<div class="mode">
+					[(#MODE|=={image}|oui)[(#BOUTON_ACTION{<:medias:upload_info_mode_document:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-document,#SELF},ajax})]
+					][(#MODE|=={image}|non)[(#BOUTON_ACTION{<:medias:upload_info_mode_image:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-image,#SELF},ajax})]]
+				</div>]
+				<BOUCLE_compte(documents_liens){id_document}{0,2} />
+				[(#TOTAL_BOUCLE|=={1}|et{#AUTORISER{dissocierdocuments,#OBJET,#ID_OBJET}}|et{#VU|=={non}})[(#BOUTON_ACTION{<:medias:bouton_enlever_supprimer_document:>,#URL_ACTION_AUTEUR{dissocier_document,#ID_OBJET-#OBJET-#ID_DOCUMENT-suppr-safe,#SELF},ajax,<:medias:bouton_enlever_supprimer_document_confirmation:>,'',[(function(){jQuery("#doc(#ID_DOCUMENT)").animateRemove();return true;})()]})]]
+				[(#AUTORISER{dissocierdocuments,#OBJET,#ID_OBJET})[(#BOUTON_ACTION{<:medias:bouton_enlever_document:>,#URL_ACTION_AUTEUR{dissocier_document,#ID_OBJET-#OBJET-#ID_DOCUMENT--safe,#SELF},ajax,'','',[(function(){jQuery("#doc(#ID_DOCUMENT)").animateRemove();return true;})()]})]]
+				[(#AUTORISER{modifier,document,#ID_DOCUMENT}|oui)
+					<div class="deplacer-modifier">
+						<span class="deplacer-document" data-rang="#RANG_LIEN"><img src='#CHEMIN_IMAGE{deplacer-16.png}' width='16' height='16' alt='<:medias:ordonner_ce_document|attribut_html:>' title='<:medias:ordonner_ce_document|attribut_html:>' /></span>
+						<a href="#URL_ECRIRE{document_edit,id_document=#ID_DOCUMENT}" target="_blank" class="editbox" tabindex="0" role="button"><:medias:bouton_modifier_document:></a>
+					</div>
+				]<//B_compte>
+				[(#PIPELINE{document_desc_actions,#ARRAY{args,#ARRAY{id_document,#ID_DOCUMENT,position,document_desc,objet,#OBJET,id_objet,#ID_OBJET},data,''}})]
 			</div>
-		]<//B_compte>
-		[(#PIPELINE{document_desc_actions,#ARRAY{args,#ARRAY{id_document,#ID_DOCUMENT,position,document_desc,objet,#OBJET,id_objet,#ID_OBJET},data,''}})]
+		</div>
 	</div>
 
 	<div class="nettoyeur"></div>

paquet.xml

 <paquet
 	prefix="medias"
 	categorie="multimedia"
-	version="2.21.10"
+	version="2.21.11"
 	etat="stable"
 	compatibilite="[3.3.0-dev;3.3.*]"
 	logo="prive/themes/spip/images/portfolio-32.png"

prive/style_prive_plugin_medias.html

@@ -156,6 +156,7 @@ p.actions {clear:both;}
 .portfolios .item .titrem .fichier {font-weight:normal;font-size:0.9em; font-style:italic; display:block; }
 .portfolios .item .titrem .titre {display:block;font-size:1.1em;}
 .portfolios .item .descriptif { color:#444; margin-bottom:.6925em; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
+.portfolios .item .infos { margin-top: auto; }
 .portfolios .item .infos .permanentes {
 	display: block;
 	padding:2px 4px; margin-top:.5em; color:rgba(0,0,0,.8);
@@ -263,6 +264,12 @@ h3 .affichages {
 	        flex-grow:1;
 	overflow:hidden;
 }
+.portfolios .documents_liste .item .descriptions {
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: row;
+	        flex-direction: row;
+}
 .portfolios .item .descriptions {  overflow: hidden; }
 .portfolios .documents_liste .item .infos,
 .portfolios .documents_liste .item .descriptif,
@@ -283,6 +290,8 @@ h3 .affichages {
 	text-overflow:ellipsis; /* necessite des overflow:hidden; sur les parents */
 }
 .portfolios .documents_liste .item .actions {
+	margin-#GET{left}: auto;
+	margin-top: 0;
 	align-items:center;
 	text-align:#GET{right};
 	padding-#GET{right}:0;
@@ -322,8 +331,26 @@ h3 .affichages {
 	    -ms-flex-align:center;
 	        align-items:center;
 }
-.portfolios .documents_cases .item .presentation { -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
-.portfolios .documents_cases .item .descriptions,
+.portfolios .documents_cases .item .presentation {
+	-webkit-box-flex:1;
+	-ms-flex-positive:1;
+	flex-grow:1;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: column;
+	        flex-direction: column;
+}
+.portfolios .documents_cases .item .descriptions {
+	margin: 0;
+	padding: 0;
+	-webkit-box-pack: end;
+	    -ms-flex-pack: end;
+	        justify-content: flex-end;
+}
+.portfolios .documents_cases .item .descriptions > *:not(.actions),
 .portfolios .documents_cases .item .mode,
 .portfolios .documents_cases .item .actions > * {
 	display:none;