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

De WIKI-BOKEH
Aller à : navigation, rechercher
(Page créée avec « 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 @media screen and (ma... »)
 
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
  
@media screen and (max-device-width: 1024px) {
+
<pre>@media screen and (max-device-width: 1024px) {
 
/*responsive tableaux compte lecteur*/
 
/*responsive tableaux compte lecteur*/
  
Ligne 45 : Ligne 43 :
  
 
}
 
}
 +
</pre>
  
 
[[Catégorie:Documentation_utilisateur]]
 
[[Catégorie:Documentation_utilisateur]]

Version du 4 septembre 2019 à 15:42

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

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

}