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

De WIKI-BOKEH
Aller à : navigation, rechercher
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]]  

Version du 4 septembre 2019 à 15:48

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

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

}