(2 intermediate revisions by the same user not shown)
Line 1: Line 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) {

Latest revision as of 16:51, 4 September 2019

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

}

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

}