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

De WIKI-BOKEH
Aller à : navigation, rechercher
 
(2 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
 
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
 
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
+
 
 +
===Avant ajout des lignes CSS===
 
[[Fichier:avantgrid.png]]  
 
[[Fichier:avantgrid.png]]  
  
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 50 : Ligne 54 :
 
</pre>
 
</pre>
  
[[Catégorie:Documentation_utilisateur]]
 
[[Catégorie:CSS]]
 
 
[[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;
}

}