Layout

Feuille emblématique de Dotclear, oct. 2022 — Feuille emblématique de Dotclear

Avec une structure de page légèrement modifiée comme suit :

Code HTML

<html>

<body>
  <nav id="prelude">
    <ul>
      <li><a href="#" class="hidden">Go to content</a></li>
      <li><a href="#" class="hidden">Go to menu</a></li>
      <li><a href="#" class="hidden">Go to help</a></li>
    </ul>
  </nav>
  <section id="header">
    <div id="logo"><a href="#">NICE LOGO</a></div>
    <div id="tools">
      <ul>
        <li><a href="#">dashboard</a></li>
        <li>
          <form><label>blogs: <select>
                <option>My default blog</option>
                <option>The other blog</option>
              </select></label></form>
        </li>
        <li><a href="#">view blog</a></li>
        <li>
          <form><label>search: <input type="text" /></label></form>
        </li>
        <li><a href="#">preferences</a></li>
      </ul>
    </div>
    <div id="logout">
      <a href="#">logout</a>
    </div>
  </section>
  <section id="wrapper">
    <main id="main">
      <nav id="breadcrumb">
        <ul>
          <li><a href="#">dashboard</a></li>
          <li>current page</li>
        </ul>
      </nav>
      <section id="notice">
        <p>2023/05/13 02:15PM: Warning message and I don't know why it is not wrapped!</p>
      </section>
      <section id="content">
        <div id="tabs" class="tabs">
          <nav>
            <a href="#">tab 1</a>
            <a href="#">tab 2</a>
            <a href="#">tab 3</a>
          </nav>
        </div>
        <div id="tab1" class="tab inactive">
          <form>
            <div id="data1" class="data">
              <fieldset>
                <legend>Main form (first tab)</legend>
                <textarea row="25" cols="40"></textarea>
              </fieldset>
            </div>
            <aside id="attrs1" class="attrs">
              <fieldset id="dt1">
                <label>date: <input type="datetime" /></label>
              </fieldset>
            </aside>
            <div class="controls">
            <input type="submit" value="save" />
            </div>
          </form>
        </div>
        <div id="tab2" class="tab active">
          <form>
            <div id="data2" class="data">
              <fieldset>
                <legend>Main form (second tab)</legend>
                <textarea row="25" cols="40"></textarea>
              </fieldset>
            </div>
            <aside id="attrs2" class="attrs">
              <fieldset id="dt2">
                <label>date: <input type="datetime" /></label>
              </fieldset>
            </aside>
            <div class="controls">
            <input type="submit" value="save" />
            </div>
          </form>
        </div>
        <!-- Form outside tabs -->
        <form>
          <div id="data2" class="data">
            <fieldset>
              <legend>Main form (outside tabs)</legend>
              <textarea row="25" cols="40"></textarea>
            </fieldset>
          </div>
          <aside id="attrs2" class="attrs">
            <fieldset id="dt2">
              <label>date: <input type="datetime" /></label>
            </fieldset>
          </aside>
          <div class="controls">
            <input type="submit" value="save" />
          </div>
        </form>
      </section>
    </main>
    <nav id="menu">
      <details open>
        <summary>Favorites</summary>
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 8</a></li>
          <li><a href="#">Item 11</a></li>
          <li><a href="#">Item 4</a></li>
        </ul>
      </details>
      <details>
        <summary>Blog</summary>
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
        </ul>
      </details>
      <details>
        <summary>System settings</summary>
        <ul>
          <li><a href="#">Item 5</a></li>
          <li><a href="#">Item 6</a></li>
          <li><a href="#">Item 7</a></li>
          <li><a href="#">Item 8</a></li>
        </ul>
      </details>
      <details>
        <summary>Plugins</summary>
        <ul>
          <li><a href="#">Item 9</a></li>
          <li><a href="#">Item 10</a></li>
          <li><a href="#">Item 11</a></li>
          <li><a href="#">Item 12</a></li>
        </ul>
      </details>
    </nav>
  </section>
  <nav id="up"><a href="#">Go to top</a></nav>
  <section id="footer">
    <div id="brand">
      <a href="#">Dotclear</a>
    </div>
  </section>
</body>

</html>

Et une feuille de style comme celle-ci :

Code CSS

body {
  display: flex;
  height: 100vh;
  flex-direction: column;
}
#prelude {
  overflow: hidden;
  li {
    list-style-type: none;
    display: inline;
  }
}
#header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1em;
}
#tools {
  display: flex;
  justify-content: space-around;
  flex: 1;
  ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1em;
    margin: 0;
    padding: 0;
    li {
      list-style-type: none;
    }
  }
}
#wrapper {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1em;
}
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: min(90%, 20em);
}
#breadcrumb {
  ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1em;
    margin: 0;
    padding: 0;
    li {
      list-style-type: none;
    }
  }
}
#notice {
  display: flex;
  flex-wrap: wrap;
}
#content {
  display: flex;
  flex-direction: column;
  flex: 1;

  .tab {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
  }
  form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex: 1;
    gap: 1em;
  }
  .data {
    flex: 1;
  }
  .attrs {
    flex: 0 1;
  }
  .controls {
    width: 100%;
  }
}
#menu {
  min-width: 10em;
}
#up {
  position: fixed;
  bottom: 0;
  right: 0;
}

J’ai quelque chose qui tient la route quel que soit la dimension de l’écran utilisé (dès qu’il fait plus de 320 pixels en largeur) et sans utiliser la moindre requête média (media query), et pour moins de 100 lignes de CSS !

Un bon point de départ pour revoir la structure des pages de l’administration de Dotclear.

Ça va un peu casser des trucs — donc ça sera pas pour tout de suite — mais on aura quelque chose de plus logique et robuste.

Question structure :

Dans l’entête, à gauche le logo (ça ne change pas), à droite la déconnexion, et au centre les outils (tableau de bord, choix du blog, préférences utilisateur, …)
Dans le corps :
1. Le menu à gauche,
2. le contenu à droite et dans celui-ci je prévois :
  1. Le fil d’Ariane (breadcrumb),
  2. les messages si besoin,
  3. la zone principale qui peut contenir des onglets (ou pas) et un ou des formulaires composés généralement :
    1. D’une partie principale (données),
    2. d’une partie annexe (attributs/métadonnées),
    3. d’une partie contrôle (les boutons).
Un pied de page comme habituellement.

Ça peut encore évoluer mais ça donne une idée de la direction suivie. Par ailleurs ça va grandement simplifier la mise en place d’une vraie prise en compte des sens d’écriture (LTR, RTL, …).

D’ailleurs si vous voulez jouer avec, j’ai repris les codes ci-dessus ici.

Je reviendrai ensuite détail par détail, en particulier pour la gestion des listes/tables, pour certaines pages particulières.

Je m’aperçois que je n’ai pas intégré le bouton d’aide qui pourrait avoir sa place dans le menu outils de l’entête. Par contre ce menu commence à être bien copieux, il faudra probablement le retravailler ; on peut aussi se poser la question de la présence de l’accès au tableau de bord en premier item de cette barre d’outils alors que le logo (et le premier item du fil d’Ariane) pointe aussi sur ce même lien.

5 réactions

Fil des commentaires de ce billet

1 De Philippe - 15/05/2023, 07:59

Tout à fait d’accord pour supprimer le lien Tableau de bord dans l’en-tête. Pour moi il a toujours prêté à confusion avec l’onglet Tableau de bord dans Mes préférences ^^
2 De Franck - 15/05/2023, 08:48

Il y a eu d’autres choix effectués lors de l’étude d’il y a longtemps sur la refonte de l’admin, choix pour lesquels j’avais quelques réticences.

Il va falloir que je me replonge dans l’analyse faite à l’époque pour me rafraîchir la mémoire…

Et effectivement, avoir trois fois le lien vers le tableau de bord sur la page me paraît excessif. Deux suffiraient, le logo en haut à gauche et le fil d’Ariane.
3 De Franck - 15/05/2023, 12:24

D’ailleurs il va disparaître ce lien de la prochaine 2.27 :-)
4 De Cunégonde - 16/05/2023, 07:18

Je savais pas que le logo menait au tableau de bord.
5 De Franck - 16/05/2023, 07:57

Oh c’est étonnant Cunégonde, je pensais que tout le monde le savait, comme quoi !

Open Time

Layout

5 réactions

Ajouter un commentaire

Ajouter un rétrolien