Valider c5303e78 rédigé par tcharlss's avatar tcharlss Validation de marcimat
Parcourir les fichiers

feat: des classes utilitaires pour placer des éléments en sticky dans le privé 

C'est de l'amélioration progressive purement CSS.

Rappel : pour que ça fonctionne, le parent de l'élément doit avoir une taille supérieure à l'élément en sticky.
Il ne doit pas y avoir d'ancêtre avec une règle overflow: hidden|auto

Les classes :

* .sticky, .sticky-top, .sticky-bottom : pour coller verticalement
* .sticky-start, sticky-end : pour coller horizontalement
* .sticky-m-{n}, n étant un nombre de 1 à 3 : classe à combiner avec les précédentes pour ajouter un espacement

Pour les tableaux on peut également mettre des `<th>` en sticky.
Les classes sont à mettre sur des lignes `<tr>`, cela évite d'avoir à les mettre sur chaque cellule.
Les cellules doivent avoir un fond de couleur pour un rendu correct.

* .row-sticky-top : coller verticalement des `<th>` dans le `<thead>` ou le `<tbody>`
* .row-sticky-start : coller horizontalement des `<th>` dans le `<tbody>` uniquement

On peut combiner les 2 dans un même tableau.
parent 0288ab60

prive/themes/spip/ajax.css.html

0 → 100644
+45 −0
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff 
[(#REM)



	Ce squelette définit les styles des boutons de l'espace privé.



	Règles propres aux éléments en ajax.



]#CACHE{3600*100,cache-client}

#HTTP_HEADER{Content-Type: text/css; charset=utf-8}

#HTTP_HEADER{Vary: Accept-Encoding}

[(#REM)<style>]



/**

 * Conteneurs ajax

 * Ils sont ajoutés autour des éléments ajaxés

 */

div.ajaxbloc,

div.ajax,

div.ajax-form-container {

	position: relative;

}



/* Ajustements des conteneurs dans certains contextes pour les rendre plus "transparents" */

#contenu > .ajaxbloc,

#navigation > .ajaxbloc,

#extra > .ajaxbloc {

	height: 100%;

}



/* Picto de chargement */

.image_loading {

	float: inset-inline-end;

}

div.ajaxbloc > .image_loading,

div.ajax > .image_loading,

.formulaire_spip > .image_loading,

div.ajax-form-container > .image_loading {

	position: absolute;

	right: 0;

	float: none;

}



/* Bug IE/Win lol */

.bugajaxie {

	display: none;

}
 
 No newline at end of file

prive/themes/spip/clear.css

+0 −10
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -54,16 +54,6 @@ hr.clear { visibility: hidden; } 
.no-js .visible_au_chargement { visibility: visible; }

.no-js .display_au_chargement { display: block; }



/* ajax */

div.ajaxbloc, div.ajax, div.ajax-form-container {position:relative;}

.image_loading {float:right;}

div.ajaxbloc>.image_loading,

div.ajax>.image_loading,

.formulaire_spip>.image_loading,

div.ajax-form-container>.image_loading {position:absolute;right:0;float:none;}



.bugajaxie { display: none; } /* Bug IE/Win */



/* debug */

.todo { opacity: 0.5; }

.todo:hover { opacity: 1; }

prive/themes/spip/layout.css

+1 −0
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -83,6 +83,7 @@ 
}



#page {

	overflow: initial !important; /* Sinon aucun élément en position sticky ne fonctionne */

	text-align: center;

}

prive/themes/spip/lists.css.html

+17 −7
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -113,8 +113,9 @@ 
	margin: 0;

	text-align: inherit;

	font-weight: normal;

	background-color: transparent;

	background-color: inherit;

}

.liste-objets tr,

.liste-objets tbody tr,

.liste-objets tbody tr.row_odd,

.liste-objets tbody tr.row_even,
@@ -124,7 +125,7 @@ 
.liste-objets tbody tr:nth-child(even):not(:hover) > th,

.liste-objets tbody tr.even:not(:hover) > td,

.liste-objets tbody tr.even:not(:hover) > th {

	background-color: transparent;

	background-color: inherit;

}

.liste-objets tfoot {

	font-style: normal;
@@ -168,6 +169,7 @@ 
	max-width: none;

	margin: 0;

	border-radius: inherit;

	background-color: inherit;

}



/* Caption  */
@@ -217,18 +219,17 @@ 
}

.liste-objets tr th:first-child,

.liste-objets tr td:first-child {

	padding-#LEFT: var(--spip-list-spacing-x);

	padding-inline-start: var(--spip-list-spacing-x);

}

.liste-objets tr th:last-child,

.liste-objets tr td:last-child {

	padding-#RIGHT: var(--spip-list-spacing-x);

	padding-inline-end: var(--spip-list-spacing-x);

}



/* Entête <thead>

   Nb : attention il peut y avoir plusieurs <tr> en cas de double pagination */

   Nb : attention il peut y avoir plusieurs <tr> */

.liste-objets table thead {

	/* background-color: var(--spip-color-gray-lightest); */

	background-color: var(--spip-list-color-lightest)

	background-color: var(--spip-list-color-lightest);

}

.liste-objets thead tr:first-child > * {

	border-top: 0;
@@ -250,6 +251,9 @@ 
}



/* Corps <tbody> */

.liste-objets table tbody {

	background-color: inherit;

}

.liste-objets tbody tr:first-child td,

.liste-objets tbody tr:first-child th {

	border-top: 0;
@@ -263,6 +267,12 @@ 
	background-color: hsl(0, 0%, 98%); /* --spip-color-gray-lightest un poil trop foncé */

}



/* Pied : tfoot */



.liste-objets table tfoot {

	background-color: var(--spip-list-color-lightest);

}



/* Gestion des arrondis selon les cas */

.liste-objets table > *:first-child,

.liste-objets table > *:first-child tr:first-child,

prive/themes/spip/style_prive.css.html

+1 −0
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -39,6 +39,7 @@ Valeurs par defaut : 


[(#REM) Les modules ]

#SET{modules,#LISTE{

	ajax.css,

	typo.css,

	grids.css,

	bando.css,

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