/* LA FEUILLE SUR PAPIER. Le papier n'a pas de thème : il est blanc, l'encre est noire. C'est le seul fichier de l'application qui écrit une couleur en dur, et c'est voulu. La mise en page copie la feuille actuelle, y compris deux détails qu'on pourrait croire accidentels et qui ne le sont pas : le nom du produit est aligné à DROITE contre le tableau, et les nombres sont alignés à GAUCHE dans leur case. C'est comme ça sur le papier que l'équipe lit tous les matins. CE QUE CE FICHIER NE SAIT PAS FAIRE, ET QU'IL FAUT SAVOIR AVANT DE L'APPRENDRE EN OUVRANT UNE IMPRIMANTE. Le modèle qui détaille chaque marché en colonne donne un tableau de 803 points de large, pour 688 points utiles entre les marges d'une A4 : la feuille déborde et se fait couper à droite. Ce n'est pas un oubli, c'est un choix de découpage : le détail par marché au delà de huit colonnes est rangé hors de la première tranche, avec la mise en page paysage et la réduction d'échelle qu'il demande. Tant que le modèle de production garde ses cinq colonnes, la feuille tient dans la page. */ @media print{ /* LE PAPIER N'A PAS DE THÈME, LE CANVAS DE LA PAGE NON PLUS. Sans ce color-scheme, le navigateur peint TOUTE la page avec le fond sombre de l'interface et la feuille sort avec un cadre noir de quatorze millimètres tout autour, celui des marges. Le fond blanc de html ne suffit pas : il ne couvre que la boîte de html, pas la zone des marges. */ :root{color-scheme:light} @page{margin:14mm} html,body{background:#fff} /* CE QUI NE PART PAS À L'IMPRIMANTE. `.barre` et `.dock` sont DÉLIBÉRÉMENT visées à l'intérieur de `#app` et nulle part ailleurs. Écrites toutes seules, ces deux règles attrapent n'importe quel élément qui porte le même nom, où qu'il soit dans la page : les soixante-treize `` d'un code-barres disparaissaient ainsi du bon de commande, sans que rien ne le montre à l'écran. Le dessin porte maintenant un autre nom, mais la règle reste bornée : le nom suivant qui se ressemblera n'aura pas le même accident. */ #app>.barre,#app .dock,.choix-famille,.voile,.feuille,.sprite{display:none} /* LE BANDEAU DES DONNÉES D'ESSAI NE PART PAS À L'IMPRIMANTE. Il vit dans la coquille, entre la barre et l'écran, donc il échappait à la règle du dessus : mesuré, il sortait en tête de la feuille de production, sur deux cent douze points de haut, avec son bouton. Le fournil aurait reçu une feuille coiffée d'un message parlant de données d'essai, ce qui est la meilleure façon de lui faire douter des chiffres en dessous. */ .graine-perimee{display:none} /* `.pied` est le bloc de boutons sous la feuille de production. Le bon de commande a lui aussi un `.pied`, et lui doit sortir : il porte le total. */ #app .pied{display:none} #app{display:block;min-height:0;background:#fff} .ecran{padding:0;overflow:visible} .feuille-prod{ padding:0;margin:0; color:#000;background:#fff; border-radius:0;box-shadow:none;overflow:visible; font-family:Arial,Helvetica,sans-serif; } .feuille-prod .tete{text-align:center;margin-bottom:9mm} .feuille-prod .quand{font-size:11pt;font-weight:400;color:#000} .feuille-prod .famille{font-size:17pt;font-weight:400;letter-spacing:.05em;color:#000;margin-top:1mm} .feuille-prod table{width:100%;border-collapse:collapse;font-size:10pt} .feuille-prod th,.feuille-prod td{ padding:1.5mm 2.5mm; border:1px dotted #000; color:#000;background:#fff; white-space:nowrap; } .feuille-prod th{font-size:10pt;font-weight:400;letter-spacing:0;text-align:center} .feuille-prod th.produit{border:none} .feuille-prod td.produit{text-align:right;font-weight:400;border-left:none;border-top:none;border-bottom:none} .feuille-prod td.nombre{text-align:left;font-variant-numeric:tabular-nums} .feuille-prod td.total{font-weight:400;color:#000} /* Une ligne ne se coupe jamais en deux pages, et l'en-tête se répète en haut de chaque page : une deuxième page sans en-tête de colonnes est illisible. */ .feuille-prod tr{page-break-inside:avoid} .feuille-prod thead{display:table-header-group} /* D20 : LA MARQUE DE LA COLONNE HORS TOTAL, ET SA NOTE. À l'écran, ces deux-là sont gris pâle, et le gris vient d'un jeton de thème dont la règle est plus forte que celle du papier. Il faut donc les reprendre ici, nommément. Ce sont exactement les deux éléments qui expliquent au boulanger pourquoi l'addition de la ligne ne tombe pas sur le total : les plus pâles de la feuille seraient les plus mal placés. */ .feuille-prod th.hors-total{color:#000} .feuille-prod .note-hors-total{ margin:4mm 0 0; color:#000; font-size:9pt;line-height:1.4;text-align:left; } /* L'AVERTISSEMENT DU FEUILLET SANS FAMILLE. Rose pâle sur blanc, il ne se lit pas : le lavis de fond disparaît à l'impression et il ne reste qu'une encre claire. Un filet noir le tient à part du reste, l'encre redevient noire. */ .feuille-prod .avertissement{ margin:0 0 5mm;padding:2mm 3mm; color:#000;background:#fff; border:1px solid #000;border-radius:0; font-size:10pt;line-height:1.4;text-align:left; } /* CE QUI MANQUE, IMPRIMÉ SOUS LE TABLEAU. C'est ici que cette correction sert vraiment : le fournil lit du papier à quatre heures du matin, pas un écran, et une ligne qui NOMME les marchés qui n'ont pas envoyé est exactement ce dont il a besoin pour décider s'il attend, s'il téléphone, ou s'il lance la fournée. L'ambre pâle de l'écran ne se lit pas sur du papier : l'encre redevient noire, et un filet le tient à part des chiffres pour qu'on ne le confonde pas avec une ligne du tableau. Il ne ferme rien, contrairement au bloc des problèmes : la feuille sort, avec sa réserve écrite dessus. */ .feuille-prod .avertissements{ margin:6mm 0 0;padding:2.5mm 3mm; color:#000;background:#fff; border:1px solid #000;border-radius:0; text-align:left; } .feuille-prod .avertissements .quoi{ font-size:10pt;font-weight:700;color:#000;margin-bottom:2mm; } .feuille-prod .avertissements ul{padding-left:6mm;font-size:10pt;line-height:1.45;color:#000} .feuille-prod .avertissements li{margin-bottom:1.5mm;color:#000} /* D19 : UNE FEUILLE FAUSSE NE S'IMPRIME PAS, ET C'EST LE PAPIER QUI REFUSE. Fermer le bouton ne suffit pas : Ctrl+P, le menu du navigateur et un window.print() venu d'ailleurs passent tous à côté de lui, et le fournil reçoit une feuille dont les totaux sont faux sans que rien ne le dise. Tant qu'il reste un problème, l'écran pose la marque « feuille-refusee » sur son conteneur, le tableau ne sort pas, et il ne reste sur la page que la raison du refus. Une page qui dit non vaut mieux qu'une page fausse. */ .feuille-refusee .feuille-prod{display:none} .problemes{ margin:0;padding:0; color:#000;background:#fff; border-radius:0; font-family:Arial,Helvetica,sans-serif; } .problemes .quoi{font-size:15pt;font-weight:700;color:#000;margin-bottom:5mm} .problemes .ico{width:5mm;height:5mm} .problemes ul{padding-left:6mm;font-size:11pt;line-height:1.5;color:#000} .problemes li{margin-bottom:2mm;color:#000} .problemes .pourquoi{margin:5mm 0 0;font-size:11pt;line-height:1.45;color:#000} /* ================================================================= LE BON DE COMMANDE L'autre papier de la maison. La feuille de production part au fournil, le bon part au comptoir : il est agrafé au sac, la vendeuse le relit au retrait, et elle scanne ses codes à la caisse plutôt que de retaper les produits un par un (c'est la question Q25). Il vit à côté de l'application, pas dedans : bon-de-commande.js le pose sur le corps de la page et marque la racine, et c'est cette marque qui efface l'application le temps d'une impression. Sans ça, imprimer un bon depuis la liste des commandes sortirait la liste. LA QUANTITÉ EST ÉCRITE EN GROS, et ce n'est pas de la décoration : un scan ajoute UN article, donc la vendeuse tape la quantité au clavier de la caisse PUIS scanne le code. C'est ce nombre là qu'elle lit, souvent de travers et à bout de bras. */ :root.impression-bon #app{display:none} :root.impression-bon .bon{display:block} .bon{ display:none; color:#000;background:#fff; font-family:Arial,Helvetica,sans-serif; font-size:11pt;line-height:1.35; } .bon .entete{border-bottom:2px solid #000;padding-bottom:3mm;margin-bottom:4mm} .bon .maison{font-size:13pt;font-weight:700;letter-spacing:.08em} .bon .ou{font-size:11pt;margin-top:1mm} .bon .quand{font-size:15pt;font-weight:700;margin-top:2mm} .bon .client{margin-bottom:2mm} .bon .qui{font-size:17pt;font-weight:700;margin:0 0 1mm} .bon .tel{font-size:12pt;margin:0 0 1mm} /* La note du client, celle qui dit « bien cuit » ou « coupé en tranches ». Encadrée, parce que c'est la seule ligne du bon qu'une vendeuse pressée saute et qui fait repartir un client mécontent. */ .bon .note{font-size:11pt;margin:2mm 0 0;padding:2mm 3mm;border:1px solid #000;color:#000} /* La référence de la commande et son code : le jour où la caisse saura rappeler une commande entière par sa référence, c'est ce seul code qui remplacera tous les autres. En attendant il ne gêne personne. UN CODE-BARRES NE REÇOIT JAMAIS DE FOND NI D'OPACITÉ, et il lui faut du blanc de chaque côté. La zone calme est déjà dans le dessin, dix modules à gauche et à droite : un overflow serré la mangerait et le lecteur refuserait le code sans qu'on comprenne pourquoi. */ .bon .reference{margin:5mm 0 4mm;text-align:center} .bon .ref-texte{font-size:10pt;letter-spacing:.06em;margin-bottom:1mm} /* PLEINE LARGEUR, ET CE N'EST PAS UNE QUESTION D'ALLURE. La référence d'une commande fait une quarantaine de signes, soit 572 barres. Posée sur 14 mm de haut, elle sortait sur 96 mm de large : 0,16 mm par barre, là où la norme du Code 128 en demande 0,25 au minimum. Un lecteur l'aurait refusée, et on aurait cherché le défaut dans le dessin plutôt que dans sa taille. Sur toute la largeur utile de la page, la même référence donne 0,32 mm par barre, avec de la marge. */ .bon .reference svg{display:block;width:100%;height:auto;background:none} /* Le texte lisible EST déjà imprimé au-dessus, en clair et en grand. Celui que le dessin porte sous ses barres se retrouve écrasé à deux points de haut : illisible, et il ne sert qu'à faire douter de l'impression. */ .bon .reference svg .lisible{display:none} .bon table{width:100%;border-collapse:collapse;margin-top:2mm} .bon td{border-bottom:1px solid #000;padding:2.5mm 2mm;vertical-align:middle;color:#000} /* LA QUANTITÉ EST LA LIGNE DE VIE DU BON. Un scan ajoute UN article : la vendeuse tape ce nombre au clavier de la caisse, puis scanne le code. Elle le lit de travers, à bout de bras, avec un sachet dans l'autre main. */ .bon td.q{ width:16mm;text-align:center; font-size:22pt;font-weight:700;line-height:1; } .bon td.nom{font-size:12pt;font-weight:700} .bon td.code{width:54mm;text-align:right} .bon td.code svg{height:11mm;max-width:52mm;background:none} /* Un produit sans code de caisse ne disparaît pas de la ligne : il dit pourquoi il n'a pas de code, et la vendeuse le tape à la main. Discret, parce que le jour où les 1800 produits de la caisse seront importés, beaucoup n'auront pas de code et un bon tout en majuscules serait illisible. Présent quand même, parce qu'une case vide ne dit rien. */ .bon .sans-code{font-size:9pt;letter-spacing:.03em;font-weight:400} .bon td.nom.inconnu{font-size:10pt} .bon .rien{font-size:12pt;margin:4mm 0;color:#000} /* LE PIED DU BON SE RÉAFFICHE. La règle générale de cette feuille cache `.pied`, qui est le bloc de boutons sous la feuille de production et n'a rien à faire sur du papier. Le bon a lui aussi un `.pied`, et lui doit sortir : sans cette ligne, le total et la phrase qui explique le geste disparaissaient du papier, et personne n'aurait su pourquoi. */ .bon .pied{display:block;margin-top:5mm;font-size:9pt;line-height:1.4} .bon .total{font-size:11pt;font-weight:700;color:#000} .bon .mention{margin:1.5mm 0 0;font-size:8.5pt;color:#000} /* Une page par bon. Deux bons collés bout à bout se coupent au milieu d'une ligne, et c'est toujours la ligne du bas qu'on perd. */ .bon+.bon{break-before:page} }