Browse Source

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.
master
tcharlss 4 months ago
parent
commit
fb1db588fc
  1. 2
      prive/objets/liste/albums.html
  2. 2
      prive/objets/liste/albums_choisir.html
  3. 2
      prive/objets/liste/albums_colonne.html
  4. 2
      prive/objets/liste/albums_lies.html
  5. 4
      prive/objets/liste/documents_album.html
  6. 2
      prive/objets/resume/album.html
  7. 2
      prive/objets/resume/album_choisir.html
  8. 10
      prive/squelettes/inclure/affichages_albums.html
  9. 164
      prive/style_prive_plugin_albums.html

2
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.
]

2
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{

2
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">

2
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{

4
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}}

2
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}}}

2
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}}}

10
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

164
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;
}

Loading…
Cancel
Save