/* ===================================================================== CHANTIER 05 — LA HIÉRARCHIE DE L'ÉCRAN DE CALCUL ===================================================================== Cet écran sert un geste en trois temps : on choisit un profilé (une fois par chantier), on entre des largeurs et des hauteurs (sans arrêt), on demande le plan de coupe (à la fin, et c'est la raison d'être de l'outil). Mesuré avant d'écrire une ligne, l'écran disait autre chose. Sur ordinateur, dans la barre d'actions : « Nouvelle dimension » 736 px de large, 34 826 px² « Plan » 82 px de large, 3 868 px² « Vitrage » 101 px de large, 4 758 px² Le bouton qui produit le livrable était le plus petit des trois, neuf fois plus discret que celui qui ajoute une ligne. Sur téléphone, les deux mêmes boutons perdaient jusqu'à leur nom : un bouton rouge portant des ciseaux, un bouton bleu portant une flèche. Rien d'écrit. Dans le tableau, les quatre colonnes que l'utilisateur tape font 488 px ; les onze que l'outil calcule en font 932. Sur un écran de 375 px, « Référence » et « Quantité » à elles seules en mangeaient 264 — et repoussaient « Hauteur » hors de l'écran. Il fallait faire défiler entre la largeur et la hauteur d'une même baie. Cette feuille ne renomme rien et ne touche à aucun HTML. La retirer rend l'état précédent. ===================================================================== */ /* --------------------------------------------------------------------- 1. LES LIBELLÉS REVIENNENT --------------------------------------------------------------------- Deux feuilles se contredisaient sans le savoir. style.css passe la barre en colonne sous 768 px ; mc-v6.css lui impose nowrap et cache les libellés sous 400 px, « pour ne garder que l'icône » — une règle écrite pour une rangée serrée. La barre n'est pas une rangée : c'est une colonne, et chaque bouton y fait 341 px de large pour une icône de 17. Le nom disparaissait exactement là où la place abondait. --------------------------------------------------------------------- */ @media (max-width: 400px) { .action-bar.mc6-actions .btn-optimize.mc6-compact .mc6-lbl { display: inline; font-size: .9rem; } } /* En colonne, un bouton occupe toute la largeur : autant que son contenu soit centré et lisible plutôt que tassé sur 13 px de marge. */ @media (max-width: 768px) { .action-bar.mc6-actions { flex-direction: column; } .action-bar.mc6-actions .btn-optimize.mc6-compact { width: 100%; justify-content: center; padding: 0 16px; min-height: 48px; font-size: .9rem; } } /* --------------------------------------------------------------------- 2. LE PLAN DE COUPE REPREND SON RANG --------------------------------------------------------------------- On ne change pas l'ordre : ajouter des lignes vient bien avant demander le plan, et déplacer un bouton sous le doigt de quelqu'un qui a pris ses habitudes est une mauvaise manière. On change le poids. « Nouvelle dimension » cesse de s'étirer sur toute la largeur disponible ; « Plan de coupe » cesse d'être compressé à son texte. Les deux se répartissent l'espace au lieu que l'un prenne tout. --------------------------------------------------------------------- */ @media (min-width: 769px) { .action-bar.mc6-actions .btn-add { flex: 1 1 auto; max-width: 44%; } .action-bar.mc6-actions .btn-optimize.mc6-compact { flex: 0 1 auto; min-width: 168px; justify-content: center; padding: 0 22px; } } /* --------------------------------------------------------------------- 3. LE BLEU REJOINT LE VOCABULAIRE --------------------------------------------------------------------- « Vitrage » était écrit en #0EA5E9, la seule couleur froide de toute l'application. Au chantier 03 on a posé qu'une couleur porte un rôle : le rouge coupe, le laiton attend, le vert est acquis. Ce bleu ne disait rien — il criait seulement plus fort que « Plan », qui est pourtant l'action principale. Le calepinage n'est ni un danger ni une attente : c'est un autre outil, atteint depuis celui-ci. Une action secondaire, donc, et habillée comme telle. --------------------------------------------------------------------- */ .mc6-compact.mc6-bleu, .action-bar.mc6-actions .btn-optimize.mc6-compact.mc6-bleu { background: transparent; color: var(--texte-doux); border: 1px solid var(--filet); } .mc6-compact.mc6-bleu:hover, .action-bar.mc6-actions .btn-optimize.mc6-compact.mc6-bleu:hover { background: var(--survol); border-color: var(--texte-doux); color: var(--texte); box-shadow: none; } /* --------------------------------------------------------------------- 4. LARGEUR ET HAUTEUR DANS LE MÊME ÉCRAN --------------------------------------------------------------------- C'est la correction qui change le plus le travail réel. Le tableau fait 1 420 px de large. Sur un téléphone de 375, on en voyait 375 : « Référence », « Quantité », et la moitié de « Largeur ». Pour saisir la hauteur d'une baie il fallait faire défiler, taper, revenir. Deux allers-retours par ligne, sur un chantier, une main sur le téléphone. Or les deux colonnes qui prenaient la place ne portent presque rien : « Baie 1 » et le chiffre 1. Elles gardaient 16 px de marge de chaque côté, comme les colonnes de résultat. Resserrées, le compte tombe à environ 340 px : la largeur et la hauteur tiennent ensemble, et on saisit une baie sans défiler. Les colonnes calculées restent à droite, inchangées, à leur place — on va les lire, on ne les tape pas. --------------------------------------------------------------------- */ @media (max-width: 560px) { .table-responsive th:nth-child(1), .table-responsive td:nth-child(1) { padding-left: 10px; padding-right: 6px; max-width: 88px; } .table-responsive th:nth-child(2), .table-responsive td:nth-child(2) { padding-left: 6px; padding-right: 6px; max-width: 54px; text-align: center; } .table-responsive th.col-larg, .table-responsive td.col-larg, .table-responsive th.col-haut, .table-responsive td.col-haut { padding-left: 7px; padding-right: 7px; } /* Le champ suit la colonne au lieu de la forcer à s'élargir. */ .table-responsive td.col-larg .td-input, .table-responsive td.col-haut .td-input { width: 100%; min-width: 0; } }