fix(ux): ultimes (?) tergiversations sur l'affichage des documents.

Pour les vues en cases et cases mini, on utilise une taille fixe pour les vignettes, avec les images centrées dedans.
Un peu comme les planches contact de darktable et cie : cela fait une grille plus lisible.

Pour la vue mini, on affiche les boutons au survol, ce qui permet de modifier et déplacer les documents dans toutes les vues.

prive/objets/liste/albums.html

@@ -35,7 +35,7 @@
 		- variante_album    : classe unique ajoutée aux albums de façon normée
 		- classe_album      : classes ajoutées aux albums telles quelles
 		- classe_docs       : classe du mode d'affichage par défaut pour les documents si aucun cookie présent
-			                    documents_grand | documents_liste | documents_cases | documents_mini
+			                    documents_grand | documents_liste | documents_cases | documents_cases documents_cases_mini
 		- docs_affichage_id : identifiant pour le cookie des modes d'affichages des documents.
 
 ]

prive/objets/liste/albums_choisir.html

@@ -30,7 +30,7 @@
 		- variante_album    : classe unique ajoutée aux albums de façon normée
 		- classe_album      : classes ajoutées aux albums telles quelles
 		- classe_docs       : classe du mode d'affichage par défaut pour les documents si aucun cookie présent
-			                    documents_grand | documents_liste | documents_cases | documents_mini
+			                    documents_grand | documents_liste | documents_cases | documents_cases documents_cases_mini
 
 ]
 #SET{tri_sens,#ARRAY{

prive/objets/liste/albums_colonne.html

@@ -28,7 +28,7 @@
 	id_album,    1,
 	date,       -1,
 }}
-#SET{classe_docs_defaut,#ENV{classe_docs}|is_null|?{documents_mini,#ENV{classe_docs}}}
+#SET{classe_docs_defaut,#ENV{classe_docs}|is_null|?{documents_cases documents_cases_mini,#ENV{classe_docs}}}
 <B_liste_albums_colonne>
 <div id="documents_joints" class="portfolio liste_items liste_items_albums liste_items_albums_colonne[ liste_items_albums_(#ENV{variante}|attribut_html)][ (#ENV{classe}|attribut_html)] clearfix">
 

prive/objets/liste/albums_lies.html

@@ -34,7 +34,7 @@
 		- variante_album    : classe unique ajoutée aux albums de façon normée
 		- classe_album      : classes ajoutées aux albums telles quelles
 		- classe_docs       : classe du mode d'affichage par défaut pour les documents si aucun cookie présent
-			                    documents_grand | documents_liste | documents_cases | documents_mini
+			                    documents_grand | documents_liste | documents_cases | documents_cases documents_cases_mini
 		- docs_affichage_id : identifiant pour le cookie des modes d'affichages des documents.
 ]
 #SET{tri_sens,#ARRAY{

prive/objets/liste/documents_album.html

@@ -15,11 +15,11 @@
 		- btn_ajouter : pour afficher le bouton d'ajout de doc, défaut = non
 		- nb          : pagination, défaut = 50
 		- classe      : classes ajoutées au conteneur, définit le mode d'affichage par défaut si aucun cookie présent
-		                documents_grands | documents_liste | documents_cases | documents_mini
+		                documents_grands | documents_liste | documents_cases | documents_cases documents_cases_mini
 		                nb : 'documents_grands' est équivalent à pas de classe, obligé car les inclures ne font pas de diff entre valeur vide et null.
 
 ]
-#SET{classe,          #ENV{classe}|=={documents_grands}|?{'',#ENV{classe,documents_mini}}}
+#SET{classe,          #ENV{classe}|=={documents_grands}|?{'',#ENV{classe,documents_cases documents_cases_mini}}}
 #SET{ajoutable,       #ENV{btn_ajouter,non}|!={non}|et{#AUTORISER{ajouterdocument, album, #ID_ALBUM}}}
 #SET{ajouter_encours, #ENV{ajouter}|=={album#ID_ALBUM}}
 

prive/objets/resume/album.html

@@ -13,7 +13,7 @@
 		- variante    : classe unique ajoutée de façon normée
 		- classe      : classes ajoutées telles quelles
 		- classe_docs : classe du mode d'affichage par défaut pour les documents si aucun cookie présent
-		                documents_grand | documents_liste | documents_cases | documents_mini
+		                documents_grand | documents_liste | documents_cases | documents_cases documents_cases_mini
 
 ]
 #SET{variante,#ENV{variante}|?{box_album_#ENV{variante}}}

prive/objets/resume/album_choisir.html

@@ -12,7 +12,7 @@
 		- variante    : classe unique ajoutée de façon normée
 		- classe      : classes ajoutées telles quelles
 		- classe_docs : classes ajoutées sur la liste des documents, définit leur mode d'affichage
-		                documents_grand | documents_liste | documents_cases | documents_mini
+		                documents_grand | documents_liste | documents_cases | documents_cases documents_cases_mini
 
 ]
 #SET{variante,#ENV{variante}|?{box_album_#ENV{variante}}}

prive/squelettes/inclure/affichages_albums.html

@@ -14,12 +14,12 @@
 ]
 #SET{cible,       #ENV{cible,       \[data-documents-album\]}}
 #SET{identifiant, #ENV{identifiant, albums}}
-#SET{classe,      #ENV{classe}|=={documents_grands}|?{'',#ENV{classe,documents_mini}}}
+#SET{classe,      #ENV{classe}|=={documents_grands}|?{'',#ENV{classe,documents_cases documents_cases_mini}}}
 #SET{classes,#ARRAY{
-	'',              #ARRAY{icone,grand, label,#VAL{medias:affichage_documents_en_grand}|_T{}},
-	documents_liste, #ARRAY{icone,liste, label,#VAL{medias:affichage_documents_en_liste}|_T{}},
-	documents_cases, #ARRAY{icone,cases, label,#VAL{medias:affichage_documents_en_cases}|_T{}},
-	documents_mini,  #ARRAY{icone,mini,  label,#VAL{medias:affichage_documents_en_cases}|_T{}},
+	'',                   #ARRAY{icone,grand, label,#VAL{medias:affichage_documents_en_grand}|_T{}},
+	documents_liste,      #ARRAY{icone,liste, label,#VAL{medias:affichage_documents_en_liste}|_T{}},
+	documents_cases,      #ARRAY{icone,cases, label,#VAL{medias:affichage_documents_en_cases}|_T{}},
+	documents_cases documents_cases_mini, #ARRAY{icone,mini,  label,#VAL{medias:affichage_documents_en_cases}|_T{}},
 }}
 
 <div

prive/style_prive_plugin_albums.html

@@ -255,8 +255,7 @@
 .documents_album .btn_ajouter {
 	display: flex;
 	align-self: center;
-	height: 100%;
-	min-width: 8em; /* label sur 2 lignes max */
+	min-width: 8em;
 	margin: var(--spip-box-spacing-y) 0;
 }
 .documents_album .btn_ajouter:not(:hover):not(:focus) {
@@ -267,128 +266,103 @@
 	height: 1.5em;
 	margin-inline-end: 0.25em;
 }
-.documents_album.documents_mini .btn_ajouter,
-.documents_album.documents_cases .btn_ajouter {
-	flex-flow: column;
-	font-size: 0.8em;
-	margin: 0;
-}
-.documents_album.documents_mini .btn_ajouter:before,
-.documents_album.documents_cases .btn_ajouter:before {
-	width: 1.5em;
-	height: 1.5em;
-	margin-bottom: 0.25em;
-}
 
-/* Pagination plus discrète */
+/* Pagination interne plus discrète */
 .documents_album .pagination {
 	padding: 0;
 	background-color: transparent;
 }
 
 /* Documents : cases + mini */
-.documents_mini .sortable,
-.portfolios .documents_album.documents_cases .sortable {
-	display: grid;
-	grid-gap: calc(var(--spip-box-spacing-x) / 2);
-	align-items: end;
+.documents_album.documents_cases {
+	--spip-albums-docs-thumbs-size: 7.4rem; /* 6 par ligne à la louche */
 }
-.documents_mini .item,
-.portfolios .documents_album.documents_cases .item {
-	border-radius: calc(var(--spip-border-radius) / 2);
-	background-color: white;
+.documents_album.documents_cases.documents_cases_mini {
+	--spip-albums-docs-thumbs-size: 5rem;
 }
-.documents_mini .item img,
-.portfolios .documents_album.documents_cases img {
-	margin: 0 !important;
-}
-
-/* Documents : cases */
 .portfolios .documents_album.documents_cases .sortable {
-	grid-template-columns: repeat(auto-fit, 8em);
+	display: grid;
+	grid-template-columns: repeat(auto-fit, var(--spip-albums-docs-thumbs-size));
+	gap: calc(var(--spip-box-spacing-x) / 2);
+	/* align-items: end; */
 }
 .portfolios .documents_album.documents_cases .item {
-	padding: calc(var(--spip-box-spacing-x) / 2);
-	padding-bottom: 0;
-	margin: 0;
 	width: auto;
 	height: auto;
-	border-color: var(--spip-box-sep-color);
-}
-.portfolios .documents_album.documents_cases .item .actions .deplacer-document {
-	flex-shrink: 0;
-	display: flex;
-}
-.portfolios .documents_album.documents_cases .item .actions {
-	padding: 0;
-}
-.portfolios .documents_album.documents_cases .item .actions .editbox {
 	margin: 0;
-}
-
-/* Documents : mini */
-.portfolios .documents_mini .sortable {
-	grid-template-columns: repeat(auto-fit, 6em);
-}
-.portfolios .documents_mini .item {
-	display: flex;
-	flex-flow: column;
 	padding: 0;
-	margin: 0;
-	border: 0;
-	background-color: white;
-}
-.portfolios .documents_mini .item .vignette {
-	width: auto;
-	min-width: auto;
+	background-color: var(--spip-color-white);
+	/* border: 0; */
 }
-.portfolios .documents_mini img {
-	max-width: 100%;
-	height: auto;
+.portfolios .documents_album.documents_cases .item .vignette {
+	width: var(--spip-albums-docs-thumbs-size);
+	height: var(--spip-albums-docs-thumbs-size);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: calc(var(--spip-box-spacing-x) / 2);
 }
-.portfolios .documents_mini .item .presentation {
+.portfolios .documents_album.documents_cases .item .vignette a {
 	display: flex;
-	flex-flow: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
 }
-.portfolios .documents_mini .item .descriptions {
-	display: none;
+.portfolios .documents_album.documents_cases .item .vignette img {
+	max-width: 100%;
+	max-height: 100%;
 	margin: 0;
 	padding: 0;
 }
-.portfolios .documents_mini .actions {
-	margin: auto 0 0;
-	padding: 0.5em 0 0;
-}
-.portfolios .documents_mini .deplacer-modifier {
-	display: flex;
+.documents_album.documents_cases .btn_ajouter {
+	flex-flow: column;
 	font-size: 0.8em;
+	margin: 0;
+	min-width: var(--spip-albums-docs-thumbs-size);
+	min-height: var(--spip-albums-docs-thumbs-size);
+	height: 100%;
 }
-.portfolios .documents_mini .actions > :not(.deplacer-modifier) {
-	display: none;
+.documents_album.documents_cases .btn_ajouter:before {
+	margin-bottom: 0.25em;
+	margin-inline-end: 0;
 }
 
-/* Documents : colonne */
-.documents_album.documents_colonne .item .cadre-icone,
-.documents_album.documents_colonne .item .raccourcis {
-	display: none;
-}
-.documents_album.documents_colonne .item,
-#documents_joints .documents_album.documents_colonne .item {
-	margin-bottom: var(--spip-box-spacing-y);
-	background-color: var(--spip-color-gray-lightest);
-	border-width: 0;
-}
-.documents_album.documents_colonne .item:last-child,
-#documents_joints .documents_album.documents_colonne .item:last-child {
-	margin-bottom: 0;
+/* Documents : mini */
+.portfolios .documents_album.documents_cases.documents_cases_mini .item .vignette {
+	padding: 0;
 }
-.documents_album.documents_colonne .item h3,
-#documents_joints .documents_album.documents_colonne .item h3 {
-	background-color: transparent;
+.portfolios .documents_album.documents_cases.documents_cases_mini .presentation {
+	position: relative;
+	overflow: hidden;
+}
+.portfolios .documents_album.documents_cases.documents_cases_mini .descriptions {
+	flex-grow: 0;
+}
+.portfolios .documents_album.documents_cases.documents_cases_mini .actions {
+	position: absolute;
+	inset-inline-start: 0;
+	inset-inline-end: 0;
+	bottom: 0;
+	opacity: 0;
+	transition: opacity 0.1s, transform 0.1s;
+	background-color: hsla(0, 0%, 100%, 0.9);
+	pointer-events: none;
+	transform: translateY(25%);
+}
+.portfolios .documents_album.documents_cases.documents_cases_mini .item:hover .actions,
+.portfolios .documents_album.documents_cases.documents_cases_mini .item:focus-within .actions {
+	opacity: 1;
+	pointer-events: all;
+	transform: none;
+}
+.portfolios .documents_album.documents_cases.documents_cases_mini .deplacer-modifier .btn.editbox {
+	padding: 0;
+	font-size: 0.8em;
 }
-.documents_album.documents_colonne .item .fichier,
-#documents_joints .documents_album.documents_colonne .item .fichier {
-	color: inherit;
+.documents_album.documents_cases.documents_cases_mini .btn_ajouter:before {
+	width: 1em;
+	height: 1em;
 }