Browse Source

fix: ajustement des dispositions list et browse

pull/21/head
tcharlss 1 week ago
parent
commit
5154849207
  1. 8
      albums_fonctions.php
  2. 60
      css/albums.css
  3. 2
      modeles/file_album.html

8
albums_fonctions.php

@ -99,13 +99,13 @@ function albums_decrire_dispositions(): array {
],
'list' => [
'modele_doc' => 'file_album',
'largeur' => 64,
'hauteur' => 64,
'largeur' => 50,
'hauteur' => 50,
],
'browse' => [
'modele_doc' => 'file_album',
'largeur' => 64,
'hauteur' => 64,
'largeur' => 100,
'hauteur' => 100,
],
'simple' => [
'largeur' => 0,

60
css/albums.css

@ -68,6 +68,9 @@ li.album__item {
.album_model .spip_doc_legende {
word-break: break-word;
}
.album_model:not(.album_simple) .spip_doc_legende > * {
min-width: initial;
}
/* Légende <figcaption>
optionnellement en haut, par défaut pour la disposition simple */
@ -314,19 +317,37 @@ li.album__item {
color: inherit;
text-decoration: none;
}
/* Layout image / légende */
.album_list .spip_doc_inner,
.album_browse .spip_doc_inner {
display: grid;
align-items: center;
}
/* Images centrées */
.album_list .spip_doc_img,
.album_browse .spip_doc_img {
display: inline-flex;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
/* dimension min pour aligner, en dur, pas gégé. Taille définie dans albums_decrire_dispositions() */
min-width: 64px;
min-height: 64px;
}
/* icônes svg */
.album_list .spip_document_icone,
.album_browse .spip_document_icone {
width: auto;
height: 100%;
}
/* arrondis */
.album_list .album__item_image img,
.album_browse .album__item_image img {
border-radius: var(--spip-albums-border-radius);
}
/* typo légende */
/* .album_list .album__doc .spip_doc_legende,
.album_browse .album__doc .spip_doc_legende {
font-size: 0.9em;
} */
.album_list .album__item .spip_doc_titre,
.album_list .album__item .spip_doc_titre strong,
.album_browse .album__item .spip_doc_titre,
@ -338,12 +359,12 @@ li.album__item {
=================
Disposition Liste
=================
Simple liste de documents en plusieurs colonnes
Idem explorateur de fichiers en mode liste, 2 colonnes sur conteneurs larges
*/
.album_list .album__items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
column-gap: calc(var(--spip-albums-gutter) * 2);
grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
column-gap: calc(var(--spip-albums-gutter) * 4);
row-gap: var(--spip-albums-gutter);
}
.album_list .album__doc {
@ -351,33 +372,40 @@ li.album__item {
text-align: start;
}
.album_list .spip_doc_inner {
display: flex;
align-items: center;
grid-template-columns: 50px 1fr;
grid-template-rows: minmax(50px, 1fr);
column-gap: var(--spip-albums-gutter);
text-align: inherit;
}
.album_list .album__doc .spip_doc_legende {
margin-inline-start: calc(var(--spip-albums-gutter) * 2);
margin-inline-end: 0;
}
.album_list .album__doc .spip_doc_legende * {
text-align: inherit;
}
.album_list .album__doc img,
.album_list .album__doc svg {
max-height: 50px;
width: auto;
}
/*
==================
Disposition Browse
==================
Affichage un peu comme dans un navigateur de fichiers
Idem explorateur de fichiers en mode vignettes
*/
.album_browse .album__items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
/* column-gap: calc(var(--spip-albums-gutter) * 2); */
grid-template-columns: repeat(auto-fit, minmax(0, min-content));
column-gap: calc(var(--spip-albums-gutter) * 4);
row-gap: calc(var(--spip-albums-gutter) * 2);
}
.album_browse .album__doc .spip_doc_legende {
margin-top: calc(var(--spip-albums-gutter) / 2);
.album_browse .spip_doc_inner {
grid-template-columns: 100px;
grid-template-rows: 100px 1fr;
row-gap: calc(var(--spip-albums-gutter) / 2);
}
.album_browse .spip_doc_img {
align-items: end;
align-items: center;
}

2
modeles/file_album.html

@ -3,7 +3,7 @@
Variante du modèle file pour les albums.
- logo document dans tous les cas
- pas de mediabox sur le lien
- pas de mediabox sur les liens : c'est un modèle pour le téléchargement
- lien englobant tout
- uniquement le titre en légende

Loading…
Cancel
Save