Documentation

Les header sont composés de plusieurs éléments, exposés ci dessous.

Pour la nouvelle navigtion, il faudra ajouter la class active à l'élément o-nav--flex-item

.js requis :

Ne pas copier les styles qui sont rensignés dans le composant, ceux-ci sont uniquement présent pour afficher correctement les éléments dans le guide de style

Gestion du compte

Preview

Balisage


                
                    <div class="c-header__options">
                        <div class="c-account-management u-white-text"><i class="c-fonticon__icon-user"></i><span>Mon compte</span><i class="c-fonticon__icon-chevron"></i></div>
                    </div>

Logo centré

Preview

Balisage


                
                    <div class="c-header-logo-center"><img src="assets/images/logo-websprint.png"/></div>

Navigation entre univers

Preview

Balisage


                
                    <nav class="o-nav--flex o-nav--flex-menu"><a class="o-nav--flex-item o-nav--flex-item-datasprint" href="datasprint/"><i class="c-fonticon__logo-datasprint"></i>
                            <div class="o-nav--flex-title">DataSprint</div></a><a class="o-nav--flex-item o-nav--flex-item-minesprint active" href="minesprint/"><i class="c-fonticon__logo-minesprint"></i>
                            <div class="o-nav--flex-title"> MineSprint</div></a></nav>

Changement de langue

Preview

Fr

Balisage


                
                    <div class="o-languageSwitcher">
                        <div class="c-current"><span class="c-lang">Fr</span><i class="c-fonticon__icon-chevron"></i></div>
                        <ul class="c-language__list language-switcher-locale-url">
                            <li data-lang="FR"><a href="">FR</a></li>
                            <li data-lang="EN"><a href="">EN</a></li>
                        </ul>
                    </div>

Entête complet

Preview

Fr

Balisage


                
                    <header class="o-header" style="position:static">
                        <nav class="o-nav--flex o-nav--flex-menu"><a class="o-nav--flex-item o-nav--flex-item-datasprint" href="datasprint/"><i class="c-fonticon__logo-datasprint"></i>
                                <div class="o-nav--flex-title">DataSprint</div></a><a class="o-nav--flex-item o-nav--flex-item-minesprint active" href="minesprint/"><i class="c-fonticon__logo-minesprint"></i>
                                <div class="o-nav--flex-title"> MineSprint</div></a></nav>
                        <div class="c-header-logo-center"><img src="assets/images/logo-websprint.png"/></div>
                        <div class="c-header__options">
                            <div class="c-notificationsCenter"><i class="c-fonticon__icon-help-plein u-white-text"></i></div>
                            <div class="c-notificationsCenter">
                                <div class="c-notificationsCenter__icon"><span class="js-notificationToggle">
                                        <div class="c-fonticon__icon-bell u-white-text"></div></span></div>
                            </div>
                            <div class="c-account-management u-white-text"><i class="c-fonticon__icon-user"></i><span>Mon compte</span><i class="c-fonticon__icon-chevron"></i>
                                <ul class="c-account-management__menu">
                                    <li><a href=""><i class="c-fonticon__icon-user"></i><span>Accueil</span></a></li>
                                    <li><a href=""><i class="c-fonticon__icon-calendar"></i><span>Site GeoSprint</span></a></li>
                                    <li><a href=""><i class="c-fonticon__icon-datatype"></i><span>Site Sol-solution</span></a></li>
                                </ul>
                            </div>
                            <div class="o-languageSwitcher">
                                <div class="c-current"><span class="c-lang">Fr</span><i class="c-fonticon__icon-chevron"></i></div>
                                <ul class="c-language__list language-switcher-locale-url">
                                    <li data-lang="FR"><a href="">FR</a></li>
                                    <li data-lang="EN"><a href="">EN</a></li>
                                </ul>
                            </div>
                        </div>
                    </header>

Exemple Entête accueil

Preview

Bienvenue Lorem Ipsum
Fr

Balisage


                
                    <header class="o-header" style="position:static">
                        <div class="u-flex">
                            <div class="u-title--header--small u-hBubble">Bienvenue Lorem Ipsum</div>
                        </div>
                        <div class="c-header__options">
                            <div class="c-account-management u-white-text"><i class="c-fonticon__icon-user"></i><span>Mon compte</span><i class="c-fonticon__icon-chevron"></i>
                                <ul class="c-account-management__menu">
                                    <li><a href=""><i class="c-fonticon__icon-user"></i><span>Accueil</span></a></li>
                                    <li><a href=""><i class="c-fonticon__icon-calendar"></i><span>Site GeoSprint</span></a></li>
                                    <li><a href=""><i class="c-fonticon__icon-datatype"></i><span>Site Sol-solution</span></a></li>
                                </ul>
                            </div>
                            <div class="o-languageSwitcher">
                                <div class="c-current"><span class="c-lang">Fr</span><i class="c-fonticon__icon-chevron"></i></div>
                                <ul class="c-language__list language-switcher-locale-url">
                                    <li data-lang="FR"><a href="">FR</a></li>
                                    <li data-lang="EN"><a href="">EN</a></li>
                                </ul>
                            </div>
                        </div>
                    </header>

1. Exemple Bandeau Header

Preview

Description :

Ut risus elit, maximus a turpis sed, ultrices molestie urna. Quisque pellentesque vitae turpis vitae auctor. Ut interdum vitae erat et congue. Ut sapien magna, fringilla at libero ac, volutpat faucibus nunc. Donec purus tortor, blandit quis venenatis quis, consequat ut quam. Etiam dignissim efficitur arcu, vel aliquam massa rhoncus vel. Nulla auctor ullamcorper malesuada. Mauris facilisis, odio eget venenatis imperdiet, turpis sapien accumsan turpis, non iaculis nisi mi pulvinar turpis. Donec bibendum congue fermentum. Vivamus eget metus at justo pulvinar facilisis. Ut a quam eu justo efficitur mollis. Proin in arcu at velit efficitur gravida. Praesent quis sem elit. Vestibulum iaculis eget augue sit amet feugiat. Etiam congue, quam eget viverra cursus, mi lacus eleifend lorem, a malesuada libero arcu vel mauris.

Sondages
Remblais
Anomalies
Rapports

Balisage


                
                    <header class="o-header__bandeau">
                        <div class="u-flex"><img src="https://via.placeholder.com/200" alt=""/>
                            <div class="content">
                                <div class="content__text"><strong>Description :</strong>
                                    <div class="content__text__paragraph">
                                        <p class="u-text">Ut risus elit, maximus a turpis sed, ultrices molestie urna. Quisque pellentesque vitae turpis vitae auctor. Ut interdum vitae erat et congue. Ut sapien magna, fringilla at libero ac, volutpat faucibus nunc. Donec purus tortor, blandit quis venenatis quis, consequat ut quam. Etiam dignissim efficitur arcu, vel aliquam massa rhoncus vel. Nulla auctor ullamcorper malesuada. Mauris facilisis, odio eget venenatis imperdiet, turpis sapien accumsan turpis, non iaculis nisi mi pulvinar turpis. Donec bibendum congue fermentum. Vivamus eget metus at justo pulvinar facilisis. Ut a quam eu justo efficitur mollis. Proin in arcu at velit efficitur gravida. Praesent quis sem elit. Vestibulum iaculis eget augue sit amet feugiat. Etiam congue, quam eget viverra cursus, mi lacus eleifend lorem, a malesuada libero arcu vel mauris.</p>
                                    </div>
                                </div>
                                <div class="o-steps">
                                    <div class="c-step__item">Sondages</div>
                                    <div class="c-step__item active">Remblais</div>
                                    <div class="c-step__item">Anomalies</div>
                                    <div class="c-step__item">Rapports</div>
                                </div>
                            </div>
                        </div>
                    </header>

2. Exemple Bandeau Header (long texte)

Preview

Description :

Ut risus elit, maximus a turpis sed, ultrices molestie urna. Quisque pellentesque vitae turpis vitae auctor. Ut interdum vitae erat et congue. Ut sapien magna, fringilla at libero ac, volutpat faucibus nunc. Donec purus tortor, blandit quis venenatis quis, consequat ut quam. Etiam dignissim efficitur arcu, vel aliquam massa rhoncus vel. Nulla auctor ullamcorper malesuada. Mauris facilisis, odio eget venenatis imperdiet, turpis sapien accumsan turpis, non iaculis nisi mi pulvinar turpis. Donec bibendum congue fermentum. Vivamus eget metus at justo pulvinar facilisis. Ut a quam eu justo efficitur mollis. Proin in arcu at velit efficitur gravida. Praesent quis sem elit. Vestibulum iaculis eget augue sit amet feugiat. Etiam congue, quam eget viverra cursus, mi lacus eleifend lorem, a malesuada libero arcu vel mauris.

Quisque feugiat massa id ultrices convallis. Curabitur eget interdum risus, ut laoreet massa. Morbi laoreet, leo eget facilisis luctus, arcu est congue purus, a euismod sapien ante vitae neque. Morbi nec arcu magna. In a lobortis tortor. Mauris facilisis diam ac orci porttitor, vitae molestie nisi imperdiet. Sed euismod elementum ligula a scelerisque. Curabitur nunc dui, sodales a pellentesque nec, tincidunt eu nunc. In eu lectus volutpat, pulvinar elit quis, maximus nunc. Donec non mauris volutpat, consequat felis ut, congue augue. Suspendisse potenti. Nulla pretium, justo interdum cursus ultricies, tortor tortor finibus felis, vitae imperdiet sem dolor id nunc. Sed ipsum quam, placerat quis ipsum eget, commodo iaculis ligula. Nam hendrerit, diam vitae fermentum aliquet, est ligula iaculis enim, eu facilisis arcu libero vitae nulla. Phasellus id odio sem. Vivamus at arcu pretium felis auctor congue et eget nunc.

Sondages
Remblais
Anomalies
Rapports

Balisage


                
                    <header class="o-header__bandeau">
                        <div class="u-flex"><img src="https://via.placeholder.com/200" alt=""/>
                            <div class="content">
                                <div class="content__text"><strong>Description :</strong>
                                    <div class="content__text__paragraph">
                                        <p class="u-text">Ut risus elit, maximus a turpis sed, ultrices molestie urna. Quisque pellentesque vitae turpis vitae auctor. Ut interdum vitae erat et congue. Ut sapien magna, fringilla at libero ac, volutpat faucibus nunc. Donec purus tortor, blandit quis venenatis quis, consequat ut quam. Etiam dignissim efficitur arcu, vel aliquam massa rhoncus vel. Nulla auctor ullamcorper malesuada. Mauris facilisis, odio eget venenatis imperdiet, turpis sapien accumsan turpis, non iaculis nisi mi pulvinar turpis. Donec bibendum congue fermentum. Vivamus eget metus at justo pulvinar facilisis. Ut a quam eu justo efficitur mollis. Proin in arcu at velit efficitur gravida. Praesent quis sem elit. Vestibulum iaculis eget augue sit amet feugiat. Etiam congue, quam eget viverra cursus, mi lacus eleifend lorem, a malesuada libero arcu vel mauris.</p>
                                        <p class="u-text">Quisque feugiat massa id ultrices convallis. Curabitur eget interdum risus, ut laoreet massa. Morbi laoreet, leo eget facilisis luctus, arcu est congue purus, a euismod sapien ante vitae neque. Morbi nec arcu magna. In a lobortis tortor. Mauris facilisis diam ac orci porttitor, vitae molestie nisi imperdiet. Sed euismod elementum ligula a scelerisque. Curabitur nunc dui, sodales a pellentesque nec, tincidunt eu nunc. In eu lectus volutpat, pulvinar elit quis, maximus nunc. Donec non mauris volutpat, consequat felis ut, congue augue. Suspendisse potenti. Nulla pretium, justo interdum cursus ultricies, tortor tortor finibus felis, vitae imperdiet sem dolor id nunc. Sed ipsum quam, placerat quis ipsum eget, commodo iaculis ligula. Nam hendrerit, diam vitae fermentum aliquet, est ligula iaculis enim, eu facilisis arcu libero vitae nulla. Phasellus id odio sem. Vivamus at arcu pretium felis auctor congue et eget nunc.</p>
                                    </div>
                                </div>
                                <div class="o-steps">
                                    <div class="c-step__item">Sondages</div>
                                    <div class="c-step__item active">Remblais</div>
                                    <div class="c-step__item">Anomalies</div>
                                    <div class="c-step__item">Rapports</div>
                                </div>
                            </div>
                        </div>
                    </header>

3. Exemple Bandeau Header (taille image mise en inline)

Preview

Description :

Ut risus elit, maximus a turpis sed, ultrices molestie urna. Quisque pellentesque vitae turpis vitae auctor. Ut interdum vitae erat et congue. Ut sapien magna, fringilla at libero ac, volutpat faucibus nunc. Donec purus tortor, blandit quis venenatis quis, consequat ut quam. Etiam dignissim efficitur arcu, vel aliquam massa rhoncus vel. Nulla auctor ullamcorper malesuada. Mauris facilisis, odio eget venenatis imperdiet, turpis sapien accumsan turpis, non iaculis nisi mi pulvinar turpis. Donec bibendum congue fermentum. Vivamus eget metus at justo pulvinar facilisis. Ut a quam eu justo efficitur mollis. Proin in arcu at velit efficitur gravida. Praesent quis sem elit. Vestibulum iaculis eget augue sit amet feugiat. Etiam congue, quam eget viverra cursus, mi lacus eleifend lorem, a malesuada libero arcu vel mauris.

Sondages
Remblais
Anomalies
Rapports

Balisage


                
                    <header class="o-header__bandeau">
                        <div class="u-flex"><img src="https://via.placeholder.com/200" alt="" style=" width:400px; height:200px; "/>
                            <div class="content">
                                <div class="content__text"><strong>Description :</strong>
                                    <div class="content__text__paragraph">
                                        <p class="u-text">Ut risus elit, maximus a turpis sed, ultrices molestie urna. Quisque pellentesque vitae turpis vitae auctor. Ut interdum vitae erat et congue. Ut sapien magna, fringilla at libero ac, volutpat faucibus nunc. Donec purus tortor, blandit quis venenatis quis, consequat ut quam. Etiam dignissim efficitur arcu, vel aliquam massa rhoncus vel. Nulla auctor ullamcorper malesuada. Mauris facilisis, odio eget venenatis imperdiet, turpis sapien accumsan turpis, non iaculis nisi mi pulvinar turpis. Donec bibendum congue fermentum. Vivamus eget metus at justo pulvinar facilisis. Ut a quam eu justo efficitur mollis. Proin in arcu at velit efficitur gravida. Praesent quis sem elit. Vestibulum iaculis eget augue sit amet feugiat. Etiam congue, quam eget viverra cursus, mi lacus eleifend lorem, a malesuada libero arcu vel mauris.</p>
                                    </div>
                                </div>
                                <div class="o-steps">
                                    <div class="c-step__item">Sondages</div>
                                    <div class="c-step__item active">Remblais</div>
                                    <div class="c-step__item">Anomalies</div>
                                    <div class="c-step__item">Rapports</div>
                                </div>
                            </div>
                        </div>
                    </header>

Documentation

Dépendance Javacript :

src/app/assets/scripts/local/NotificationsCenter.js

Init

La liste de notification a besoin du script suivant pour fonctionner :

    const notification = new NotificationsCenter('.js-notification');
    notification.init();

Il faut donc que ce dernier soit ajouté en global dans l'application.

Il fonctionne de paire avec la snackbar il suffit d'avoir une instance de Class pour les deux

Utilisation

Tout le html doit être ajouter dans le header au debut de la balise ayant pour classe c-header__options.

Concernant le compteur de nofications cela passe par l'attribut data-count présent sur l'élément js-notificationToggle.

À noter si on ne veut pas que la pastille s'affiche il ne faut pas renseigner de valeur à ce dernier. Donc avoir data-count="" et non data-count="0".

Preview : avec compteur

Preview : sans compteur

Preview

Mes notificationsTout effacer
Aujourd'hui à 00h00
Génération du rapport "Mon rapport de compactage" terminé
Aujourd'hui à 01h00
Génération du rapport "Mon rapport de compactage" terminé
Aujourd'hui à 02h00
Génération du rapport "Mon rapport de compactage" terminé
Aujourd'hui à 03h00
Génération du rapport "Mon rapport de compactage" terminé
Aujourd'hui à 04h00
Génération du rapport "Mon rapport de compactage" terminé
Aujourd'hui à 05h00
Génération du rapport "Mon rapport de compactage" terminé
Aujourd'hui à 06h00
Génération du rapport "Mon rapport de compactage" terminé
Aujourd'hui à 07h00
Génération du rapport "Mon rapport de compactage" terminé
Aujourd'hui à 08h00
Génération du rapport "Mon rapport de compactage" terminé

Balisage


                
                    <div class="c-notificationsCenter js-notification">
                        <div class="c-notificationsCenter__icon"><span class="js-notificationToggle" data-count="9">
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
                                    <path fill="#ffffff" d="M541.4,88.9c0-14.4,0.6-28.6-0.1-42.7C540.1,22.6,523,5.6,501,5c-22.6-0.6-39.8,15-42.1,39c-0.9,9.6-1.3,19.4-0.3,28.9c1.5,13.9-4.5,18.3-17.6,21.3c-103,23.6-173.8,85.1-212.5,183.4c-18.1,46-17.6,94.3-17.8,142.7c-0.1,38,1.4,76.3-3.6,113.7c-8.8,66.1-40.8,121.3-91.1,165.3c-19,16.8-29.8,37-28.1,62.7c2.6,40.9,33.2,67.3,78.8,67.4c206.1,0.2,412.2,0.1,618.2,0.1c20,0,40,0.4,59.9-0.5c31.3-1.4,55.9-21.8,64.5-51.9c8.9-31.7-2.5-56.4-25.8-77.5c-63.7-57.6-95.6-129.3-94.6-215.4c0.4-36.7,0.4-73.4,0-110.1c-1.2-121.4-78.2-229-193-269.4C578.4,98.4,560.3,94.3,541.4,88.9z M648.8,872.6c-99.8,0-199.5,0-299.7,0c19.8,79.2,89.3,129.4,166.4,121.6C581.9,987.5,645.7,929.1,648.8,872.6z"></path>
                                    <path fill="#ffffff" d="M541.4,88.9c18.9,5.4,37,9.5,54.4,15.6c114.8,40.4,191.8,148,193,269.4c0.4,36.7,0.4,73.4,0,110.1c-1,86.2,30.9,157.8,94.6,215.4c23.4,21.1,34.8,45.8,25.8,77.5c-8.5,30.2-33.2,50.5-64.5,51.9c-19.9,0.9-39.9,0.5-59.9,0.5c-206.1,0-412.2,0.1-618.2-0.1c-45.5,0-76.2-26.5-78.8-67.4c-1.6-25.7,9.1-45.9,28.2-62.6c50.3-44.1,82.2-99.2,91.1-165.3c5-37.4,3.5-75.8,3.6-113.7c0.2-48.3-0.3-96.6,17.8-142.7C267.2,179.3,338,117.8,440.9,94.2c13.2-3,19.1-7.4,17.6-21.3c-1-9.5-0.6-19.4,0.3-28.9c2.4-24,19.6-39.6,42.1-39c22,0.6,39.1,17.6,40.3,41.2C542,60.3,541.4,74.5,541.4,88.9z"></path>
                                    <path fill="#ffffff" d="M648.8,872.6c-3.1,56.5-66.9,114.9-133.4,121.6c-77.1,7.8-146.6-42.4-166.4-121.6C449.2,872.6,549,872.6,648.8,872.6z"></path>
                                </svg></span></div>
                        <div class="c-notificationsList__list js-notificationContent">
                            <div class="c-notificationsList__header"><span>Mes notifications</span><a class="js-notificationClear" href="#" title="Tout effacer">Tout effacer</a></div>
                            <div class="c-notificationsList__item js-notificationItem">
                                <div class="c-notifications__prepend">Aujourd'hui à 0h00</div>
                                <div class="c-notifications__content">
                                    <div class="c-notifications__content__body u-text">Génération du rapport "<a href="#">Mon rapport de compactage</a>" terminé</div>
                                    <button class="o-btn c-notifications__content__action"><span class="c-fonticon__icon-close"></span></button>
                                </div>
                            </div>
                        </div>
                    </div>