Timeline (Chronologie)

Le composant chronologie est une des formes de présentation d’un Article dans une liste. Il est donc un enfant de celui-ci et récupère ses attributs de base. Comme son nom l’indique, il sert à lister des articles dans un ordre chronologique en donnant une représentation visuelle de cette logique. Dans ce contexte, les articles contiennent très peu de composants.

Usage

L’utilisateur peut accéder par le tap ou le clic à la page détail de l’article.
Une cocarde met en avant la source de l’article.

Spécifications

Un article intégré dans une timeline est constitué :

d’une source avec l’affichage d’une cocarde (16x16px),
d’une date,
d’un titre.

Bonnes pratiques

Afficher au minimum 3 articles dans la timeline.

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
composant Article-in-list (article dans une liste),
composant Titles (titres),
composant Date (date),
composant Sources (sources),
… (tous les composants inclus dans un article)

Timeline standard

A la différence des autres listes d’articles, la présentation des articles en mode chronologique est identique pour tous, on ne mixe pas les types d’affichage. Par ailleurs, dans cette présentation il existe plusieurs différences avec les autres articles dans une liste : elle ne comporte pas de photo, elle inverse l’ordre entre le titre et les métadonnées (qui passent devant), la source n’est composée que de la cocarde, et la date ne comporte pas d’icône illustratrice (horloge). Aussi, le DOM des articles sous cette présentation est-il spécifique…

D’une façon générale, la construction d’une telle liste est assez simple :

il faut respecter le DOM attendu : un <article> avec les métadonnés puis le titre, dans une liste (<ul>et <li>),
ajouter les classes standard de ces éléments (su-articles-area, su-metadata…),
et ajouter la classe su-timeline à côté de su-articles-list, sur le <ul>.

Version avec un titre d’article en `<h2>`

<div class="su-row">
    <section class="su-col-md-10 su-articles-area">
        <ul class="su-articles-list su-timeline">
            <li>
                <article class="su-articles-list-item">
                    <div class="su-metadata ">
                        <span class="su-cockade-of" aria-label="Ouest-France "></span>
                        <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
                    </div>
                    <h2 class="su-title">
                        <a href="javascript:;">
                        «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix
                        </a>
                    </h2>
                </article>
            </li>
            <li>
                <article class="su-articles-list-item su-premium">
                    <div class="su-metadata ">
                        <span class="su-cockade-of" aria-label="Presse Océan"></span>
                        <time class="su-date" datetime="2022-09-15T11:36:27+02:00">11h36</time>
                    </div>
                    <h2 class="su-title">
                        <a href="javascript:;">Le Royaume-Uni paralysé à cause des funérailles d’Elizabeth II&nbsp;? Voici ce qui sera fermé lundi</a>
                    </h2>
                </article>
            </li>
            <li>
                <article class="su-articles-list-item">
                    <div class="su-metadata ">
                        <span class="su-cockade-po" aria-label="Ouest-France "></span>
                        <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
                    </div>
                    <h2 class="su-title">
                        <a href="javascript:;">
                        Titre long&nbsp;! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
                        </a>
                    </h2>
                </article>
            </li>
        </ul>
    </section>
</div>

Version avec un titre d’article en `<p>`

<div class="su-row">
    <section class="su-col-md-10 su-articles-area">
        <ul class="su-articles-list su-timeline">
            <li>
                <article class="su-articles-list-item">
                    <div class="su-metadata ">
                        <span class="su-cockade-of" aria-label="Ouest-France "></span>
                        <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
                    </div>
                    <p class="su-title">
                        <a href="javascript:;">
                        «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix
                        </a>
                    </p>
                </article>
            </li>
            <li>
                <article class="su-articles-list-item su-premium">
                    <div class="su-metadata ">
                        <span class="su-cockade-of" aria-label="Presse Océan"></span>
                        <time class="su-date" datetime="2022-09-15T11:36:27+02:00">11h36</time>
                    </div>
                    <p class="su-title">
                        <a href="javascript:;">Le Royaume-Uni paralysé à cause des funérailles d’Elizabeth II&nbsp;? Voici ce qui sera fermé lundi</a>
                    </p>
                </article>
            </li>
            <li>
                <article class="su-articles-list-item">
                    <div class="su-metadata ">
                        <span class="su-cockade-po" aria-label="Ouest-France "></span>
                        <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
                    </div>
                    <p class="su-title">
                        <a href="javascript:;">
                        Titre long&nbsp;! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
                        </a>
                    </p>
                </article>
            </li>
        </ul>
    </section>
</div>

Timeline avec article sans source

Le composant est prévu pour laisser un vide dans le cas où un article remonterait sans source.

<div class="su-row">
    <section class="su-col-md-10 su-articles-area">
        <ul class="su-articles-list su-timeline">
            <li>
                <article class="su-articles-list-item">
                    <div class="su-metadata ">
                        <span class="su-cockade-of" aria-label="Ouest-France "></span>
                        <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
                    </div>
                    <p class="su-title">
                        <a href="javascript:;" class="surcharge-storybook">
                        «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix
                        </a>
                    </p>
                </article>
            </li>
            <li>
                <article class="su-articles-list-item su-premium">
                    <div class="su-metadata ">
                        <time class="su-date" datetime="2022-09-15T11:36:27+02:00">11h36</time>
                    </div>
                    <p class="su-title">
                        <a href="javascript:;" class="surcharge-storybook">Le Royaume-Uni paralysé à cause des funérailles d’Elizabeth II&nbsp;? Voici ce qui sera fermé lundi</a>
                    </p>
                </article>
            </li>
            <li>
                <article class="su-articles-list-item">
                    <div class="su-metadata ">
                        <span class="su-cockade-po" aria-label="Ouest-France "></span>
                        <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
                    </div>
                    <p class="su-title">
                        <a href="javascript:;" class="surcharge-storybook">
                        Titre long&nbsp;! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
                        </a>
                    </p>
                </article>
            </li>
        </ul>
    </section>
</div>

Timeline sur fond sombre

Pour afficher la timeline sur un fond sombre, ajouter la classe su-negative sur un parent ou à côté de su-timeline…

<div class="su-row su-negative" style="background: DimGray; padding: 10px">
    <section class="su-col-md-10 su-articles-area">
        <ul class="su-articles-list su-timeline">
            <li>
                <article class="su-articles-list-item">
                    <div class="su-metadata ">
                        <span class="su-cockade-of" aria-label="Ouest-France "></span>
                        <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
                    </div>
                    <p class="su-title">
                        <a href="javascript:;">
                        «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix
                        </a>
                    </p>
                </article>
            </li>
            <li>
                <article class="su-articles-list-item su-premium">
                    <div class="su-metadata ">
                        <span class="su-cockade-of" aria-label="Presse Océan"></span>
                        <time class="su-date" datetime="2022-09-15T11:36:27+02:00">11h36</time>
                    </div>
                    <p class="su-title">
                        <a href="javascript:;">Le Royaume-Uni paralysé à cause des funérailles d’Elizabeth II&nbsp;? Voici ce qui sera fermé lundi</a>
                    </p>
                </article>
            </li>
            <li>
                <article class="su-articles-list-item">
                    <div class="su-metadata ">
                        <span class="su-cockade-po" aria-label="Ouest-France "></span>
                        <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
                    </div>
                    <p class="su-title">
                        <a href="javascript:;">
                        Titre long&nbsp;! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
                        </a>
                    </p>
                </article>
            </li>
        </ul>
    </section>
</div>

Liste des classes disponibles

su-timeline
su-negative

Classes annexes

su-articles-area (dépendant du composant Article-in-list (article dans une liste))
su-articles-list (dépendant du composant Article-in-list (article dans une liste))
su-articles-list-item (dépendant du composant Article-in-list (article dans une liste))
su-metadata (dépendant du composant Article-in-list (article dans une liste))
su-title (dépendant du composant Titles (titres))
su-premium (dépendant du composant Premium-title (titre premium))
su-date (dépendant du composant Date (date))
su-cockade-… (dépendant du composant Sources (sources))