/* Adaptation des petits ecrans. Pourquoi un fichier a part plutot que dans style/style.css ? Le site choisit sa feuille selon la date : style_anniv.css dans les 30 jours d'un anniversaire, style_noel.css en decembre, style.css sinon. UNE SEULE est chargee a la fois. Une regle ajoutee a une seule ne s'appliquerait donc pas en decembre : c'est pourquoi les styles des icones sont ports par l'element lui-meme, en attribut style, et non par une classe. Ce fichier est charge en plus, toujours, quel que soit le theme. Aucune des trois feuilles du site ne contenait de @media avant ce fichier : le site n'avait jamais ete adapte au telephone. */ /* Tableaux de listes. La table de la liste d'un ami compte dix colonnes, dont quatre reservees aux icones. Sur un telephone de 360 px, on ne peut pas les garder lisibles en les repartissant sur la largeur : le texte devient illisible, et c'est ce qui rendait la page illisible. Plutot que de les aplatir, on retire d'abord les colonnes secondaires, puis on impose au tableau une largeur minimale et on laisse le conteneur Bootstrap defiler horizontalement : - les colonnes gardent leur contenu lisible ; - les icones restent alignees verticalement, ce qui est precisement l'objet du decoupage en colonnes dediees ; - seule la date de mise a jour est retiree, sur petit ecran ; elle reste visible sur grand ecran. Mesures relevees dans un navigateur, sur la structure reelle : ecran 1200 px tableau 1200 px 10 colonnes pas de defilement telephone 414 px tableau 414 px 9 colonnes pas de defilement telephone 375 px tableau 440 px 9 colonnes 25 a 65 px de defilement */ /* Rayage des lignes paires. Le theme ordinaire posait .alternate sur #CCCCFF, un bleu lavande assez soutenu pour attirer l'oeil plus que le contenu lui-meme. Sur une liste de 160 lignes, le rayage devient le premier plan et les cadeaux le second, ce qui est l'inverse du but : le rayage sert a suivre une ligne du regard, pas a attirer l'attention. Il heurtait aussi la palette du site, dont les bandeaux sont en #06c : un bleu plus clair sur un bleu plus fonce ne se lisait pas comme une alternance, mais comme une categorie. On garde une alternance, parce qu'elle aide vraiment a suivre une ligne sur une liste aussi longue, mais on la ramene a une teinte du site : meme famille que les bandeaux, deux fois plus claire. A l'oeil, le texte devient le plus contrasté de la ligne. Mesures de contraste, texte #333 (couleur Bootstrap) sur fond : #CCCCFF 8,2:1 avant #EDF3FA 13,0:1 apres Les deux themes saisonniers n'utilisent pas cette couleur mais ../img/blanc.png, un fond texture qui n'a pas d'equivalent en couleur unie. Cette regle leur donne un rayage sobre, ce qui est coherent avec le leur. */ .alternate { background-color: #edf3fa; } /* Lignes d'information (is_info) : fond vert tres clair. Ce ne sont pas des cadeaux, et elles ne se comportent pas comme eux : pas de cercle de reservation, pas de lien d'annulation, pas d'icone pour ajouter un commentaire cache. Le fond permet de les distinguer sans avoir a le lire. Hors de la media query : la couleur ne depend pas de la taille de l'ecran. Cette regle bat .alternate, qui pose le fond #CCCCFF du rayage, sans avoir besoin de !important : les deux ont la meme specificite (une classe), et ppn.css est charge APRES le theme dans header.php, donc c'est le dernier motif qui l'emporte. Une cellule de ligne d'information porte donc "ppn-info alternate borderbottomcolor", et c'est bien le vert qui s'applique. */ .ppn-info { background-color: #e8f5e9; } /* Objets invisibles. Le theme posait .ppn_invisible sur fond #CCCCCC, texte blanc. Ce couple fait 1,6:1, tres en dessous des 4,5:1 exiges pour du texte : le contenu d'un objet masque etait blanc sur gris clair, donc difficile a lire. Un objet invisible n'est pas desactive, il reste consultable et le membre peut le reafficher : son texte doit donc se lire. On assombrit le fond plutot que d'assombrir le texte : un fond gris soutenu avec du blanc garde le sens de « grise », et la ligne reste distincte des lignes visibles. blanc sur #CCCCCC 1,6:1 avant blanc sur #767676 4,5:1 apres #767676 est le gris de reference de WCAG pour atteindre 4,5:1 sur blanc. */ .ppn_invisible { background-color: #767676; color: #ffffff; } /* Objets mis en valeur. Le theme posait .mis_en_valeur sur « yellow », soit #FFFF00, un jaune pur. Il n'echouait pas au contraste : 11,8:1 avec le texte du site, tres au-dessus du seuil. Le probleme etait la ligne entiere : un aplat de cette intensite sur un site dont les bandeaux sont en #06c ne se lisait pas comme une mise en evidence, mais comme une alerte. On garde le jaune, en version sourde, et on le borde d'un filet a gauche : le repere se place alors au bord du texte, la ou l'on regarde pour trouver l'objet, et non sous les lettres. Un soulignement avait ete essaye d'abord : a cette taille il passe sous la ligne de base et se confond avec le soulignement d'un correcteur orthographique. Le fond reste assez clair pour porter la surbrillance, et reste distinct du rayage (#EDF3FA, bleu) comme des lignes d'information (#E8F5E9, vert) : les trois fonds se differenciaient deja, ils le font autant. La couleur s'adoucit partout, y compris sur l'etiquette « Je coche si c'est un cadeau parmi mes prefères » du formulaire d'ajout, qui portait le meme jaune vif en permanence, que la case soit cochee ou non. Seule la mise en evidence par filet est propre au tableau : dans un formulaire, un trait a gauche d'une etiquette se lirait comme une bordure de champ. texte #333 sur #FFF3CD 12,6:1 */ .mis_en_valeur { background-color: #fff3cd; } .ppn-table .mis_en_valeur { border-left: 3px solid #d9a441; padding-left: 4px; } /* Colonne des bulles « ajouter un commentaire ». Sur une liste longue, chaque ligne porte la meme bulle, dans la meme colonne. Repetee vingt fois de suite a l'identique, elle forme un mur vertical qui pese autant que le contenu lui-meme, alors qu'elle ne porte aucune information propre a la ligne : elle dit seulement « on peut ajouter un commentaire ici ». On l'attenue donc au repos, et on la rend immediate au survol et au focus clavier. L'icone garde sa place dans la colonne, donc l'alignement n'est pas affecte, et elle reste visible pour le tactile : seule sa presence devient discrete au lieu d'etre un trait d'union entre deux lignes. Rien n'est applique aux autres icones : celle de participation, elle, dit quelque chose de different d'une ligne a l'autre (ouverte ou en cours) et doit rester immediate. */ .ppn-table img.icone-commentaire { opacity: 0.55; transition: opacity 0.12s ease-in-out; } .ppn-table img.icone-commentaire:hover, .ppn-table a:hover > img.icone-commentaire, .ppn-table a:focus > img.icone-commentaire { opacity: 1; } @media (prefers-reduced-motion: reduce) { .ppn-table img.icone-commentaire { transition: none; } } /* Formulaire d'ajout : les memes fonds que dans les listes. Deux etiquettes du formulaire « Ajouter un cadeau » reprennent le fond de la categorie qu'elles activent, pour que le formulaire annonce la couleur que l'objet aura ensuite dans la liste : « Garder invisible pour les autres » fond gris, texte blanc — celui de .ppn_invisible dans les tableaux ; « S'il s'agit d'une information » fond vert tres clair — celui de .ppn-info dans les tableaux. Les deux couleurs viennent d'ailleurs du meme travail de contraste : .ppn_invisible est passe de blanc sur gris clair (1,6:1, illisible) a blanc sur gris soutenu (4,5:1). Le texte du formulaire sur le meme fond beneficie du meme traitement. Le selecteur est limite au formulaire d'ajout : .ppn-info et .ppn_invisible servent aussi de fond de cellule dans les tableaux, ou un espacement supplementaire n'a pas lieu d'etre. */ form[name="add"] .ppn-info, form[name="add"] .ppn_invisible { padding: 1px 4px; border-radius: 2px; } .ppn-table { /* Bootstrap donne une marge a .table-responsive : on la retire pour que le tableau occupe toute la largeur disponible. */ margin-left: 0; margin-right: 0; } @media (max-width: 767px) { /* Colonnes secondaires. Cette regle ne depend volontairement PAS du conteneur .ppn-table. La page a deux tableaux : le tableau "Informations", en haut, qui n'est PAS dans un conteneur defilant, et la liste des cadeaux, qui l'est. En ecrivant ".ppn-table th.ppn-secondaire", la colonne date disparaissait de la liste mais restait visible dans le bloc Informations : c'est le premier ecran de la page, donc celui que l'on voit. Masquer une colonne secondaire releve de la colonne elle-meme, pas du conteneur qui la porte. D'ou un selecteur nu. Le tableau Informations garde par ailleurs ses dimensions d'ecran : avec trois colonnes apres masquage, il tient dans la largeur d'un telephone sans avoir besoin du min-width ni du defilement. */ th.ppn-secondaire, td.ppn-secondaire { display: none; } .ppn-table > table { /* Mesures relevees sur la structure reelle, date masquee et icones a 18 px, sur la ligne au texte le plus long : 400 px description 85 px ligne 81 px (texte comprime) 440 px description 125 px ligne 63 px <- retenu 480 px description 165 px ligne 63 px A 400 px, le defilement disparait presque, mais la colonne Description est alors si etroite que le texte se replie sur une ligne de 81 px, plus haute qu'avant l'adaptation. Le defilement reste donc preferable a des lignes deformer. 440 px laisse un petit defilement et des lignes lisibles. Un min-width est un plancher, pas un plafond : si une description est plus longue, le tableau s'elargit quand meme. En revanche il garantit qu'un contenu court ne sera pas comprime au point de devenir illisible. */ min-width: 440px; } .ppn-table th, .ppn-table td { padding: 3px 4px; font-size: 13px; } /* Les icones a 24 px donnaient une hauteur de ligne de 56 px, tiree par l'image et non par le texte. Reduites a 18 px, la hauteur tombe a 38 px : pres d'un tiers de gain, et autant de contenu visible dans la largeur defilante. La largeur du tableau ne change pas, la colonne Description garde donc la meme place. */ .ppn-table img.icone { width: 18px; height: auto; } /* Fleches de defilement, de part et d'autre du tableau. Le degrade et les fleches sont portes par le conteneur parent .ppn-scroll, et non par .table-responsive : un ::after sur l'element qui defile est entrain vers la droite avec le contenu, et l'indiquerait donc au mauvais endroit. Le parent, lui, ne bouge pas. Elles sont au nombre de DEUX, gauche et droite. Une seule a droite signalait le contenu a venir, mais la gauche sert aussi : apres avoir glisse de trois cents pixels sans s'en souvenir, une fleche a gauche dit qu'on peut revenir en arriere. Un degrade de bord, lui, ne le dit pas. Par DEFAUT elles s'affichent, sans JavaScript. C'est volontaire : un script manquant, bloque ou non deploye ne doit pas supprimer le seul signe qui indique qu'il reste des colonnes a voir. Le tableau reste de toute facon defilable : l'indice n'est qu'un complement, jamais une condition d'utilisation. Le script ne sert qu'a CORRIGER. Quand il constate qu'il ne reste rien a droite (le tableau tient dans l'ecran, ou il est deja arrive a l'extremite), il ajoute ppn-defile-rien et les fleches n'apparaissent jamais. pointer-events:none : elles ne doivent surtout pas empecher de glisser le tableau avec le doigt. */ .ppn-scroll { position: relative; } .ppn-scroll::after, .ppn-scroll::before { content: ""; position: absolute; top: 0; bottom: 0; width: 62px; pointer-events: none; opacity: 0; /* Duree 4 s : 0.3 s de retard, 3 s de pleine visibilite, puis fondu. Le retard laisse au script le temps de poser ppn-defile-rien quand le tableau tient : dans ce cas les fleches n'apparaissent jamais, sans avoir clignote avant. */ animation: ppn-indice-defilement 4s 0.3s 1 forwards; } /* Position verticale de la fleche : 26 px du haut, pas la moitie. A la verticale, une fleche placee au milieu d'un bandeau qui suit toute la hauteur du tableau se retrouve hors de l'ecran des que la liste est longue : on la voit uniquement apres avoir fait defiler jusqu'a mi-hauteur, donc trop tard. Pres du bord superieur, elle tombe dans la zone reellement visible au chargement. Le degrade, lui, garde toute la hauteur : c'est lui qui dit "le tableau continue en dessous". C'est le glyphe qu'on remonte. 26 px : assez pour ne pas toucher l'en-tete du tableau (environ 24 px de haut sur petit ecran), assez bas pour etre dans le champ de vision au chargement. */ /* Cote droit : fleche vers la droite, et fond qui s'estompe vers elle. 38 px font 1 cm a 96 pixels par pouce : la taille demandee, assez grande pour se voir sans avoir a chercher. Le fond de 62 px lui laisse de la marge pour que le degrade ne s'arrete pas net. */ .ppn-scroll::after { right: 0; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%234b5563' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'/%3E%3C/svg%3E") no-repeat center 26px / 38px 38px, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8)); } /* Cote gauche : symetrique. Le fond s'estompe vers la gauche. */ .ppn-scroll::before { left: 0; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%234b5563' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'/%3E%3C/svg%3E") no-repeat center 26px / 38px 38px, linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); } @keyframes ppn-indice-defilement { 0% { opacity: 0; } 7.5% { opacity: 1; } 82.5% { opacity: 1; } 100% { opacity: 0; } } /* Le script a etabli qu'il n'y a rien a faire glisser. */ .ppn-scroll.ppn-defile-rien::after, .ppn-scroll.ppn-defile-rien::before { content: none; } /* Preference systeme de moins d'animations : on renonce a l'indice plutot que de le faire apparaitre sans transition. */ @media (prefers-reduced-motion: reduce) { .ppn-scroll::after, .ppn-scroll::before { animation: none; opacity: 0; } } } /* Note : une regle ".ppn-table th:empty { height:1px; padding:0 }" a ete essayee pour replier les en-tetes de colonnes d'icones, qui sont vides. Elle ne produit aucun effet : dans une rangee de tableau, la hauteur est imposee par la cellule la plus haute, donc par les en-tetes titres voisins. Mesure : 41 px avant comme apres. Elle n'est donc pas ici, pour ne pas laisser une regle qui ne fait rien. */ /* Colonnes secondaires, pour d'autres tableaux. Le meme mecanisme peut servir a masquer d'autres colonnes sans consequence sur les colonnes voisines : il suffit d'ajouter la classe ppn-secondaire sur les cellules concernees. C'est ce qui est fait pour la date de mise a jour, dans la regle ci-dessus. */