Flexbox c'est cool

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 :

Page d'édition d'un billet avec Dotclear 2.11

Par contre, dès qu’on bascule sur mobile, c’est un peu pas très possible ! Voyez vous-même :

Page d'édition d'un billet avec Dotclear 2.11

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 :

Page d'édition d'un billet avec Dotclear 2.12

Par contre, sur mobile, on est revenu à quelque chose de plus acceptable :

Page d'édition d'un billet avec Dotclear 2.12

Avec le contenu de la colonne de droite renvoyé au dessous :

Page d'édition d'un billet avec Dotclear 2.12

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…

Ajouter un commentaire

Comments can be formatted using the Markdown Extra syntax.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/13169

Haut de page