Dotclear 2.11, et ses polices adaptatives (responsives), pose quelques soucis sur petits écrans (smartphones, …), entre autres sur la page d’édition des billets et des pages. Sur ordi, pas de souci, comme vous pouvez le constater ci-dessous :
Par contre, dès qu’on bascule sur mobile, c’est un peu pas très possible ! Voyez vous-même :
J’ai, en gros et en basculant les sources CSS sous Sass/Compass un peu cassé cette page avec la 2.11. Alors j’ai repris ça hier et au lieu d’essayer de réparer, j’ai préféré utiliser le système Flexbox de CSS3, plutôt bien fichu dès qu’il s’agit d’organiser des blocs en fonction de l’espace disponible. Une sorte de responsive sans les mediaqueries.
Du coup, la page d’édition d’un billet reste à peu près semblable avec la nouvelle version :
Par contre, sur mobile, on est revenu à quelque chose de plus acceptable :
Avec le contenu de la colonne de droite renvoyé au dessous :
Tout ça avec quelques lignes de CSS :
#entry-form {
display: flex;
flex-wrap: wrap; }
#entry-wrapper {
flex-grow: 1;
width: calc(100% - 19em); }
@media screen and (max-width: 80em) {
#entry-wrapper {
width: 100%; } }
#entry-content {
margin-left: 0;
padding-right: 3em; }
@media screen and (max-width: 38em) {
#entry-content {
padding-right: 1em; } }
#entry-sidebar {
display: flex;
flex-wrap: wrap;
flex-direction: column; }
@media screen and (max-width: 80em) {
#entry-sidebar {
flex-direction: row; } }
@media screen and (max-width: 38em) {
#entry-sidebar {
padding-right: 1em; } }
#entry-sidebar h4 {
font-size: 1.08em;
margin-top: .3em;
border-bottom: 1px solid #676e78; }
#entry-sidebar select {
width: 100%; }
#entry-sidebar input#post_position {
width: 4em; }
.sb-box {
width: 18em;
margin-bottom: 1em;
margin-right: 1em;
padding: .5em 1em;
background-color: #f3f3f3; }
Où on utilise un display: flex pour organiser le contenu du formulaire (partie d’édition et colonne de droite), un un autre à l’intérieur de la colonne de droite pour organiser les 3 boîtes qui la compose.
Il reste probablement quelques effets de bord à gérer, mais dans l’ensemble ça tourne plutôt pas mal si j’en crois les premiers retours…
1 De Pep -
Tiens ? Je note que monsieur teste actuellement Neon… ;-)
2 De Franck -
Yep :-)
Je teste aussi Servo, quand j’arrive à télécharger la nightly build depuis lui-même, mais ça foire dans les grandes largeurs en ce moment :-)
Et puis Brave, Vivaldi, …
3 De Pep -
Servo, je l’ai laissé dans son coin depuis un petit moment. Brave a rejoint Firefox et Opera en guise de navigateurs au quotidien et Vivaldi a droit à des séances régulières.
Certaines vieilles habitudes sont tenaces, même une fois que le dev Web ne fait plus partie du boulot officiel… ;-)
4 De Cunégonde -
Me tarde de l’essayer.
5 De Franck -
Cunégonde je me doute bien :-)
6 De Tomek -
C’est cool flexbox une fois qu’on l’a essayé !
Bon sinon, je connaissais pas Neon, je vais tester, au côté de Vivaldi que j’aime bien.
7 De mirovinben -
Je vais regarder pour utiliser display: flex; à la place de mes bidouilles pour la sidebar de mon blog… et pour les pavés qui la garnissent avec l’aide de des widgets de l’extension mrvbSidebar qui se charge de les créer…
8 De Franck -
mirovinben une référence très bien faite (avec des schémas) sur les différentes propriétés : « A Complete Guide to Flexbox » de Chris Coyier (qui est une référence question CSS). C’est en anglais mais parfaitement compréhensible.
9 De mirovinben -
Je vais regarder ça, merci Franck.
J’avais mis en signet deux liens chez alsacreations qui n’attendaient qu’une envie de mise en pratique : ici et là.
10 De Franck -
Ah oui, Raphaël , une référence côté CSS :-)
11 De Tomek -
Et d’ailleurs sa grillade est une merveille !