Bac à sable - Mise en page

Grille d'affichage

Il y a 3 types d'affichage "en cellule" dans PHPBoost: libre, en mosaïc et en liste.

Cellules libres

Chaque cellule est tributaire de ses propres dimensions. Les cellules s'alignent au maximum de la largeur du conteneur, puis passent à la ligne automatiquement.

140px
240px
340px
440px

On peut forcer la largeur des cellules qui n'ont pas de dimension définie. Pour les écrans > 1024px

100%
1/4
1/3
1/2
2/3
3/4
Cellules en mosaïc

Les cellules sans dimension ont leur largeur définie par la classe du parent.

.cell-columns-4

.cell-columns-3

.cell-columns-2

On peut aussi forcer la largeur des cellules malgré la mise en page définie par le parent. Pour les écrans > 1024px

.cell-columns-3

2/3
1/3
1/4
3/4
1/2
1/2
Cellules en liste

Quelques soient leurs dimensions, les cellules sont affichées les unes en dessous des autres.

.cell-row

1/3
1/4
Voir le code source :
// Cellules libres
<div class="cell-flex">
    <article class="cell">... </article>
    <article class="cell">... </article>
    <article class="cell">... </article>
</div>
// Cellules en mosaïc
<div class="cell-flex cell-columns-[NUMBER]"> // 1 to 4
    <article class="cell">... </article>
    <article class="cell">... </article>
    <article class="cell">... </article>
</div>
// Cellules en liste
<div class="cell-flex cell-row">
    <article class="cell">... </article>
    <article class="cell">... </article>
    <article class="cell">... </article>
</div>
// Cellules forcées
<div class="cell-flex ...">
    <article class="cell cell-[RATIO]">... </article>
    // [RATIO] = 1-4 / 1-3 / 1-2 / 2-3 / 3-4
</div>
Cellules
Liste d'éléments en mosaïque (défaut)

Titre

Élément Élément
Titre
Etiam hendrerit, tortor et faucibus dapibus, eros orci porta eros, in facilisis ipsum ipsum at nisl
Liste d'éléments en liste

Titre

Élément Élément
Titre
Etiam hendrerit, tortor et faucibus dapibus, eros orci porta eros, in facilisis ipsum ipsum at nisl
Eléments de cellule
Informations du contenu
Élément Élément
Message d'alerte
Etiam hendrerit, tortor et faucibus dapibus, eros orci porta eros, in facilisis ipsum ipsum at nisl
Formulaire
Contenu
Titre
Fusce vitae consequat nisl. Fusce vestibulum porta ipsum ac consectetur. Duis finibus mauris eu feugiat congue. Aenean aliquam accumsan ipsum, ac dapibus dui ultricies non. In hac habitasse platea dictumst. Aenean mi nibh, varius vel lacus at, tincidunt luctus eros. In hac habitasse platea dictumst. Vestibulum luctus lorem nisl, et hendrerit lectus dapibus ut. Phasellus sit amet nisl tortor. Aenean pulvinar tellus nulla, sit amet mattis nisl semper eu. Phasellus efficitur nisi a laoreet dignissim. Aliquam erat volutpat.
Liste
  • Sous titre Élément
  • Sous titre Élément
  • Élément
  • Élément
Tableau
Sous titre Sous titre Sous titre Sous titre
Élément Élément Élément Élément
Pied de cellule
Voir le code source :
// header
<div class="cell-header">
    <h1 class="cell-name">...</h1>
    <span>...</span>
</div>
// infos
<div class="cell-infos">
    <div>...</div>
    <div>...</div>
</div>
// alert
<div class="cell-alert">
    <div class="message-helper bgc warning">...</div>
</div>
// form
<div class="cell-form">
    <div class="cell-input"><input type="text" value="..."></div>
</div>
<div class="cell-form">
    <div class="cell-label">
        ...
        <span class="field-description">...</span>
    </div>
    <div class="cell-input"><input type="text" value="..." /></div>
</div>
<div class="cell-form">
    <div class="cell-input">
        <select name="">...</select>
    </div>
</div>
<div class="cell-form">
    <div class="grouped-inputs">
        <label for="input-id" class="grouped-element">
            <span class="grouped-element">...</span>
            <input id="input-id" type="text" class="grouped-element" value="...">
        </label>
        <select name="" class="grouped-element">...</select>
        <a href="" class="grouped-element">...</a>
    </div>
</div>
<div class="cell-textarea">
    <form action="" method="">
        <textarea name="textarea"></textarea>
        <fieldset class="fieldset-submit">
            <button type="submit" class="button submit" name="submit" value="true">Élément</button>
            <button type="reset" class="button reset-button" value="true">Élément</button>
        </fieldset>
    </form>
</div>
// content
<div class="cell-body">
    <div class="cell-thumbnail">
        <img src="path-to-picture" alt="text">
        <a href="" class="cell-thumbnail-caption"><i class="fa fa-eye"></i></a>
    </div>
    <div class="cell-content">...</div>
</div>
// list
<div class="cell-list">
    <ul>
        <li class="li-stretch">
            <span>...</span>
            <span>...</span>
        </li>
        <li>...</li>
    </ul>
</div>
// table
<div class="cell-table">
    <table class="table">...</table>
</div>
// footer
<div class="cell-footer">...</div>
Messages et commentaires
Voir le code source :
<article id="Id" class="message-container (message-small/message-offset) cell-tile cell-modal modal-container" itemscope="itemscope" itemtype="https://schema.org/Comment">
    <header class="message-header-container">
        <img class="message-user-avatar" src="/image/avatar/link" alt="Avatar">
        <div class="message-header-infos">
            <div class="message-user-container">
                <h3 class="message-user-name">
                    <span class="smaller" aria-label="En ligne/Hors connexion">
                        <i class="fa fa-user" aria-hidden="true"></i>
                    </span>
                    <span class="administrator" itemprop="author">admin</span>
                    <span class="smaller" aria-label="Voir les infos du membre" data-modal data-target="message-user-datas-ID">
                        <i class="far fa-eye" aria-hidden="true"></i>
                    </span>
                </h3>
                <div class="controls message-user-infos-preview">
                    <a href="#" class="user-group small group-ID offload"></a>
                    <span class="pinned administrator small">Administrateur</span>
                </div>
            </div>
            <div class="message-infos">
                <time datetime="05/12/2021 à 17h37" itemprop="datePublished">05/12/2021 à 17h37</time>
                <a href="#ID" class="copy-link-to-clipboard" aria-label="Copier le lien dans le presse-papier">#ID</a>
            </div>
        </div>
    </header>
    <div id="message-user-datas-ID" class="modal modal-animation">
        <div class="close-modal" aria-label="Fermer"></div>
        <div class="content-panel cell">
            <div class="cell-list">
                <ul>
                    <li class="li-stretch">
                        <span>Administrateur</span>
                        <img src="/images/group/link" alt="alt name" />
                    </li>
                    <li class="li-stretch">
                        <span>Voir le profil du membre</span>
                        <a href="#" class="msg-link-pseudo administrator offload">admin</a>
                    </li>
                    <li class="li-stretch">
                        <span>MP</span>
                        <a href="#" class="button submit smaller offload"><i class="fa fa-people-arrows" aria-hidden="true"></i></a>
                    </li>
                    <li class="li-stretch">
                        <span>Email</span>
                        <a href="#" class="button submit smaller offload"><i class="fa iboost fa-iboost-email" aria-hidden="true"></i></a>
                    </li>
                    <li>Groupes :</li>
                    <li class="li-stretch">
                        <a href="#">Com</a>
                        <img src="http://data.babsoweb.com/babsodata/phpboost/graph/group-icon/com.png" alt="group picture" />
                    </li>
                    <li>
                        <span>Signature du membre</span>
                    </li>
                    <li>
                        <img src="/image/link" alt="alt name" />
                    </li>
                    <li class="li-stretch">
                        <span>Sanctions : 0% </span>
                        <span>
                            <a href="#"><i class="fa fa-exclamation-trianglewarning"></i></a>
                            <a href="#"><i class="fa fa-user-lock link-color"></i></a>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="message-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi autem sequi quam ab amet culpa nobis vitae rerum laborum nulla!</p>
    </div>
</article>
Voir le code source :
<ul id="[ID]" class="sortable-block">
    <li id="cat-1" class="sortable-element" data-id="1">
        <div class="sortable-selector" aria-label="Déplacer"></div>
        <div class="sortable-title">
            <a href="/workspace/phpboost/pbt-53/trunk/news/1-test/">Titre 1</a>
            <em class="h-padding small">Sous titre</em>
        </div>
        <div class="sortable-actions">
            <a href="#" aria-label="Monter" id="move-up-1" onclick="return false;" style="display: none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
            <a href="#" aria-label="Descendre" id="move-down-1" onclick="return false;"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
            <a href="/workspace/phpboost/pbt-53/trunk/news/categories/1/edit/#AbstractCategoriesFormController_special_authorizations_field" aria-label="Autorisations par défaut">
                <i class="fa fa-fw fa-user-shield" aria-hidden="true"></i>
            </a>
            <a href="/workspace/phpboost/pbt-53/trunk/news/categories/1/edit/" aria-label="Éditer"><i class="far fa-edit" aria-hidden="true"></i></a>
            <a href="/workspace/phpboost/pbt-53/trunk/news/categories/1/delete/" aria-label="Supprimer" data-confirmation="{@delete-element}"><i class="far fa-trash-alt" aria-hidden="true"></i></a>
        </div>
        <ul id="subcat-1" class="sortable-block">
            <li id="cat-2" class="sortable-element" data-id="2">
                <div class="sortable-selector" aria-label="Déplacer"></div>
                <div class="sortable-title">
                    <a href="/workspace/phpboost/pbt-53/trunk/news/2-categorie-de-test-1-1/">Titre 1.1 </a>
                </div>
                <div class="sortable-actions">
                    <a href="#" aria-label="Monter" id="move-up-2" onclick="return false;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
                    <a href="#" aria-label="Descendre" id="move-down-2" onclick="return false;"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
                    <a href="/workspace/phpboost/pbt-53/trunk/news/categories/2/edit/#AbstractCategoriesFormController_special_authorizations_field" aria-label="Autorisations par défaut">
                        <i class="fa fa-fw fa-user-shield" aria-hidden="true"></i>
                    </a>
                    <a href="/workspace/phpboost/pbt-53/trunk/news/categories/2/edit/" aria-label="Éditer"><i class="far fa-edit" aria-hidden="true"></i></a>
                    <a href="/workspace/phpboost/pbt-53/trunk/news/categories/2/delete/" aria-label="Supprimer" data-confirmation="{@delete-element}"><i class="far fa-trash-alt" aria-hidden="true"></i></a>
                </div>
                <ul id="subcat-2" class="sortable-block"></ul>
            </li>
        </ul>
    </li>
    <li id="cat-3" class="sortable-element" data-id="3">
        <div class="sortable-selector" aria-label="Déplacer"></div>
        <div class="sortable-title">
            <a href="/workspace/phpboost/pbt-53/trunk/news/3-categorie-de-test-3/">Titre 2 </a>
        </div>
        <div class="sortable-actions">
            <a href="#" aria-label="Monter" id="move-up-3" onclick="return false;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
            <a href="#" aria-label="Descendre" id="move-down-3" onclick="return false;" style="display: none;"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
            <a href="/workspace/phpboost/pbt-53/trunk/news/categories/3/edit/#AbstractCategoriesFormController_special_authorizations_field" aria-label="Autorisations spéciales">
                <i class="fa fa-fw fa-user-shield warning" aria-hidden="true"></i>
            </a>
            <a href="/workspace/phpboost/pbt-53/trunk/news/categories/3/edit/" aria-label="Éditer"><i class="far fa-edit" aria-hidden="true"></i></a>
            <a href="/workspace/phpboost/pbt-53/trunk/news/categories/3/delete/" aria-label="Supprimer" data-confirmation="{@delete-element}"><i class="far fa-trash-alt" aria-hidden="true"></i></a>
        </div>
        <ul id="subcat-3" class="sortable-block"></ul>
    </li>
</ul>