/* =========================================================================== usecase_mobile.css --------------------------------------------------------------------------- Mise en page des pages de cas d'usage (useCase*.php). Cible par la classe oc-page-usecase posee sur . Appele par css/cssUsecaseMobile.php Mesure a 1200px avant correction : clientWidth 1200, scrollWidth 1450 -> debordement de 250px tous les blocs debordent de 235px a l'identique -> cause unique : le min-width 1450px de #content (default.css) =========================================================================== */ /* --------------------------------------------------------------------------- 1. Texte -- toutes largeurs --------------------------------------------------------------------------- */ body.oc-page-usecase #content p.pb-5 { font-size: 16px !important; line-height: 1.55 !important; text-align: justify !important; -webkit-hyphens: auto; hyphens: auto; } /* --------------------------------------------------------------------------- 2. Liberation de la largeur en dessous de 1450px --------------------------------------------------------------------------- default.css impose min-width:1450px a #content pour eviter la compression des menus au zoom. Entre 992 et 1449px la page deborde donc de la fenetre. On ne touche pas a default.css : la regle est levee ici seulement. --------------------------------------------------------------------------- */ @media (max-width: 1449px) { body.oc-page-usecase #content, body.oc-page-usecase #content > .row, body.oc-page-usecase #content > form, body.oc-page-usecase #content .container, body.oc-page-usecase #content .container-fluid { min-width: 0 !important; max-width: 100% !important; } body.oc-page-usecase { overflow-x: hidden; } } /* --------------------------------------------------------------------------- 3. Tableaux -- en dessous de 1450px --------------------------------------------------------------------------- Les deux blocs n'ont pas la meme structure : tableau 0 .col-12 dans .col-4.offset-1 tableau 1 .tableHandy dans .col-4.offset-0, margin-left:17% en inline Le titre etant dans un .col-6, on aligne les deux conteneurs sur 50%. --------------------------------------------------------------------------- */ @media (max-width: 1449px) { body.oc-page-usecase #content .col-4.offset-0, body.oc-page-usecase #content .col-4.offset-1, body.oc-page-usecase #content .col-4.offset-2 { flex: 0 0 50% !important; max-width: 50% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 15px !important; padding-right: 15px !important; } body.oc-page-usecase #content .col-4 > .col-12 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.oc-page-usecase #content .tableHandy { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } body.oc-page-usecase #content .table-stripedBlue { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.oc-page-usecase #content .table-stripedBlue th, body.oc-page-usecase #content .table-stripedBlue td { white-space: nowrap !important; padding: 6px 8px !important; } } /* --------------------------------------------------------------------------- 4. Schemas -- en dessous de 1000px --------------------------------------------------------------------------- */ @media (max-width: 999px) { body.oc-page-usecase #content .example-image-link { display: block; width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; } body.oc-page-usecase #content .example-image-link img { width: 100% !important; height: auto !important; max-width: 300px; } } /* --------------------------------------------------------------------------- Note de portee --------------------------------------------------------------------------- La page n'est pas prevue en dessous de 768px : aucun repli au-dela. A 768px il reste environ 730px utiles pour 698px de contenu de tableau, le nowrap des cellules tient donc sans compression. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 5. Empilement des blocs en dessous de 900px --------------------------------------------------------------------------- Cote a cote, chaque bloc ne dispose que d'une demi-page. Le tableau des resultats demande 698px de contenu : il ne peut pas y tenir. --------------------------------------------------------------------------- */ @media (max-width: 899px) { body.oc-page-usecase #content .row > .col-6, body.oc-page-usecase #content .col-4.offset-0, body.oc-page-usecase #content .col-4.offset-1, body.oc-page-usecase #content .col-4.offset-2 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 10px !important; padding-right: 10px !important; } body.oc-page-usecase #content .alert.title_backGrBlue { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } body.oc-page-usecase #content .col-4.offset-0, body.oc-page-usecase #content .col-4.offset-1, body.oc-page-usecase #content .col-4.offset-2 { margin-bottom: 30px !important; } body.oc-page-usecase #content .table-stripedBlue { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } } /* --------------------------------------------------------------------------- 7. Centrage de #content sur la page --------------------------------------------------------------------------- Le min-width leve en section 2 laissait #content cale a gauche. Les .row de Bootstrap portent margin:-15px sans conteneur qui compense. --------------------------------------------------------------------------- */ @media (max-width: 1449px) { body.oc-page-usecase #content { margin-left: auto !important; margin-right: auto !important; padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box; } body.oc-page-usecase #content .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } } /* --------------------------------------------------------------------------- 8. Colonne figee de handyBlock.css --------------------------------------------------------------------------- handyBlock.css pose sous 992px un position:sticky avec fond blanc opaque sur la premiere colonne, qui masque l'alternance des lignes. Les tableaux tenant en pleine largeur depuis l'empilement, elle est inutile ici. --------------------------------------------------------------------------- */ @media (max-width: 991px) { body.oc-page-usecase #content .table-stripedBlue th:first-child, body.oc-page-usecase #content .table-stripedBlue td:first-child { position: static !important; left: auto !important; z-index: auto !important; background: transparent !important; } } /* --------------------------------------------------------------------------- 9. Suites du deplacement des bandeaux de titre --------------------------------------------------------------------------- Les titres sont passes du .row margin-top-30 a l'interieur du
, chacun dans la colonne de son tableau. Effets de bord sous 900px : la regle .row > .col-6 atteint le conteneur du bouton "enter". --------------------------------------------------------------------------- */ @media (max-width: 899px) { body.oc-page-usecase #content #boutons_calcul { text-align: center; } body.oc-page-usecase #content .col-6.offset-3 { flex: 0 0 100% !important; max-width: 100% !important; margin-left: 0 !important; text-align: center !important; } body.oc-page-usecase #content .alert.title_backGrBlue { margin-bottom: 12px !important; } } /* --------------------------------------------------------------------------- 10. Tableau des systemes issus des catalogues --------------------------------------------------------------------------- Ce 3e tableau n'apparait qu'apres soumission. Mesure a 1200px : 24 colonnes, largeur reelle 1314px dans un de 1140 -> deborde a 1389, scrollWidth de la page a 1389 titre deja centre (338 de blanc de chaque cote) : ne pas y toucher Il est enfant direct du , qui n'a qu'un seul autre enfant direct (le .col-12 des deux premiers tableaux) : le selecteur "form >" l'atteint lui seul, sans wrapper ajoute dans le PHP. Le defilement est porte par le tableau lui-meme via display:block, ce qui evite d'ajouter un conteneur : un en display:block accepte overflow-x, contrairement au display:table par defaut. --------------------------------------------------------------------------- */ body.oc-page-usecase #content form > table.table-stripedBlue { display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* --------------------------------------------------------------------------- 10. Tableau des systemes issus des catalogues --------------------------------------------------------------------------- Ce 3e tableau n'apparait qu'apres soumission. Mesure a 1200px : 24 colonnes, largeur reelle 1314px dans un de 1140 -> deborde a 1389, scrollWidth de la page a 1389 titre deja centre (338 de blanc de chaque cote) : ne pas y toucher Il est enfant direct du , qui n'a qu'un seul autre enfant direct (le .col-12 des deux premiers tableaux) : le selecteur "form >" l'atteint lui seul, sans wrapper ajoute dans le PHP. Le defilement est porte par le tableau lui-meme via display:block, ce qui evite d'ajouter un conteneur : un
en display:block accepte overflow-x, contrairement au display:table par defaut. --------------------------------------------------------------------------- */ body.oc-page-usecase #content form > table.table-stripedBlue { display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* --------------------------------------------------------------------------- 11. Tableau de la liste des "Handy Calculations" --------------------------------------------------------------------------- 4e tableau, sous le 3e. Mesure a 1200px : 4 colonnes mais 1528px de large dans un .col-12 de 1080 -> deborde a 1603, scrollWidth de la page a 1603 son titre (h3 4) est deja centre a 338->863 : ne pas y toucher Il est seul dans un .collapse, contrairement aux trois premiers : ce selecteur l'isole sans wrapper ajoute dans le PHP. Meme mecanique qu'en section 10 : display:block permet l'overflow-x sur le
, fit-content + margin auto le centrent tant qu'il tient. --------------------------------------------------------------------------- */ body.oc-page-usecase #content .collapse table.table-stripedBlue { display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* --------------------------------------------------------------------------- 12. Boutons de navigation en haut de page --------------------------------------------------------------------------- Quatre boutons (about, caution, parameters, tutorial) dans un