Différences entre versions de « Listes de prêts et réservation responsive »

De WIKI-BOKEH
Aller à : navigation, rechercher
 
(Une version intermédiaire par le même utilisateur non affichée)
Ligne 6 : Ligne 6 :
 
===Après ajout des ligne CSS===
 
===Après ajout des ligne CSS===
 
[[Fichier:apresgrid.png]]
 
[[Fichier:apresgrid.png]]
 +
 +
 +
===Lignes à recopier dans votre éditeur CSS===
  
 
<pre>@media screen and (max-device-width: 1024px) {
 
<pre>@media screen and (max-device-width: 1024px) {
Ligne 51 : Ligne 54 :
 
</pre>
 
</pre>
  
[[Catégorie:Documentation_utilisateur]]
 
 
[[Catégorie:CSS]]
 
[[Catégorie:CSS]]

Version actuelle datée du 11 mai 2021 à 11:32

Voici le code qui permet de transformer les tableaux de la zone "Mon compte" en liste afin d'avoir un meilleur affichage sur les terminaux mobiles

Avant ajout des lignes CSS[ ]

Avantgrid.png

Après ajout des ligne CSS[ ]

Apresgrid.png


Lignes à recopier dans votre éditeur CSS[ ]

@media screen and (max-device-width: 1024px) {
/*responsive tableaux compte lecteur*/

/*démentellement du tableau et centrage des textes*/
#borrower_loans tbody, table.reservations tbody, .tablesorter-default tbody {
	display: grid;
  text-align:center;
}

/* transformation des colonnes du tableau en lignes*/
#borrower_loans tbody tr, table.reservations tbody tr, .tablesorter-default tbody tr {
	width: auto;
	display: inline-grid;
}

/*centrer le nom de l'auteur dans liste réservation*/
table.reservations td:nth-child(5) {
	text-align: center;
}

/*centrer les images dans les fiches de prêts et réservations*/
#borrower_loans tbody img, table.reservations tbody img, #borrower_loans tbody .nothumbnail_wrapper, table.reservations tbody .nothumbnail_wrapper {
	width: 50% !important;
	margin: 0 auto;
}

/* désactive la règle ci dessus sur l'image de désinscription*/
table.reservations tbody a img {
  width:auto!important;
}

/*masquer les entêtes de tableaux*/
.tablesorter-headerRow {
	display: none;
}

/*centrer nom de l'emprunteur et réservataire*/ 
table.loans td:first-child, table.reservations td:first-child {
	width: auto;
}

}