Foehn Design System

Historique 

<header class="header" role="banner">
    <nav class="container fixed-top access-nav d-print-none" aria-label="menu accessibilité">
        <ul class="list-unstyled mt-3">
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="0" href="#" title="[Alt+0] Page d'accueil du site">Accueil</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="1" href="#nav-primary" title="[Alt+1] Menu de navigation de la page">Menu de navigation de la page</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="2" href="#main" title="[Alt+2] Debut du contenu de la page">Début du contenu de la page</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="3" href="#" title="[Alt+3] Page de contact">Page de contact</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="4" href="#" title="[Alt+4] Plan du site du Canton de Vaud">Plan du site</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="5" href="#search-form" title="[Alt+5] Accès au champ de recherche">Accès au champ de recherche</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="6" href="#" title="[Alt+6] Accès à l'index thématique">Thèmes</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="7" href="#" title="[Alt+7] Accès à la navigation par autorités">Autorités</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="8" href="#" title="[Alt+8] Page d'aide pour les personnes en situation de handicap">Page d'aide pour les personnes en situation de handicap</a>
            </li>
        </ul>
    </nav>

    <div class="vd-header-application container">
        <a href="../accueil" class="vd-logo" title="Aller à la page d'accueil du Site du Canton de Vaud">
            <img src="../../foehn/svg/ETATVAUD-alt.svg" class="vd-logo__image" alt="État de Vaud" aria-hidden="true" />
        </a>

    </div>
</header>

<section class="small container text-end mb-3">
    <h2 class="sr-only">Votre identité</h2>
    <p class="mb-0">
        <span class="fas fa-lock" aria-hidden="true"></span>

        <a href="#">Jean Villard Gilles</a>

    </p>

    <p class="mb-0">
        <a href="#">Se déconnecter</a>
    </p>

</section>

<main id="main">
    <div class="vd-bg-pattern-gray">
        <div class="container">
            <nav aria-label="Fil d'Ariane">
                <h2 class="sr-only">File d'Ariane</h2>
                <ol class="breadcrumb">

                    <li class="breadcrumb-item"><a href="#">level 1</a></li>

                    <li class="breadcrumb-item"><a href="#">level 2</a></li>

                    <li class="breadcrumb-item"><a href="#">level 3</a></li>

                    <li class="sr-only" aria-current="page">level 4</li>

                </ol>
            </nav>

            <h1 class="mt-0">Page title</h1>
        </div>
    </div>

    <div class="container mb-4">
        <nav class="navbar navbar-expand-md navbar-light bg-light">
            <span class="navbar-brand d-md-none">Menu</span>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <li class="nav-item mb-lg-0 ">
                        <a class="nav-link" href="tableau-de-bord">Tableau de bord</a>
                    </li>
                    <li class="nav-item mb-lg-0  active">
                        <a class="nav-link" href="historique"><span class="sr-only">(current)</span> Historique</a>
                    </li>
                    <li class="nav-item mb-lg-0 ">
                        <a class="nav-link" href="prestations">Prestations</a>
                    </li>
                    <li class="nav-item mb-lg-0 ">
                        <a class="nav-link" href="documents">Documents</a>
                    </li>
                    <li class="nav-item mb-lg-0 ">
                        <a class="nav-link" href="parametres">Paramètres</a>
                    </li>
                </ul>
            </div>
        </nav>

    </div>

    <div class="container">

        <h4 class="sr-only">Rechercher dans l&quot;historique</h4>

        <form action="#" role="search">
            <div class="input-group vd-search-form-regular mb-3">
                <label class="sr-only" for="search-form" id="search-form-label"></label>
                <input id="search-form" type="text" class="form-control" aria-describedby="search-form-label">
                <span class="input-group-btn">
                    <button class="btn btn-dark" type="submit" aria-label="Rechercher"><i class="fas fa-search" aria-hidden="true"></i></button>
                </span>
            </div>

            <fieldset class="form-group">
                <legend class="sr-only">Rechercher les</legend>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="filterSearch">
                    <label class="form-check-label" for="">
                        Demandes
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="filterSearch">
                    <label class="form-check-label" for="">
                        Tâches
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="filterSearch">
                    <label class="form-check-label" for="">
                        Messages
                    </label>
                </div>

            </fieldset>

        </form>

        <h2 class="mb-3">Resultats</h2>
        <article class="mb-3 p-1 bg-light">
            <div class="row">
                <div class="col-md-12">
                    <header>
                        <h3 class="mb-3">
                            <a href="message-detail">Message important !</a>
                        </h3>
                        <dl class="small row">
                            <dt class="col-4">Type</dt>
                            <dd class="col-8">Communication</dd>
                            <dt class="col-4">Reçu le</dt>
                            <dd class="col-8">17.02.2017</dd>
                            <dt class="col-4">Lu le</dt>
                            <dd class="col-8">18.01.2017</dd>

                        </dl>
                    </header>

                    <p>En date du 01.01.2017, une nouvelle charte graphique a été dévelopée dans le but de satisfaire le plus grand nombre de personne et de faciliter l&#39;utilisation de l&#39;espace sécurisé. Merci de votre compréhension.</p>

                    <footer>
                        <h4 class="sr-only">Actions sur le message</h4>
                        <ul class="list-inline">
                            <li><a href="#">Télécharger</a></li>
                            <li><a href="#">Supprimer</a></li>
                        </ul>
                    </footer>
                </div>

            </div>
        </article>
        <article class="mb-3 p-1 bg-light">
            <div class="row">
                <div class="col-md-12">
                    <header>
                        <h3 class="mb-3">
                            <a href="">Demande de permis de construire</a>
                        </h3>
                        <dl class="small row">
                            <dt class="col-4">Type</dt>
                            <dd class="col-8">Demande</dd>
                            <dt class="col-4">Référence</dt>
                            <dd class="col-8"><samp>HOX0AI-AJQ7K1</samp></dd>
                            <dt class="col-4">Date</dt>
                            <dd class="col-8">17.02.2017</dd>
                            <dt class="col-4">Clôturé le</dt>
                            <dd class="col-8">20.02.2017</dd>
                            <dt class="col-4">Statut</dt>
                            <dd class="col-8">Clôturé</dd>
                            <dt class="col-4">Bénéficiaire</dt>
                            <dd class="col-8">Jean Villars Gilles</dd>
                        </dl>
                    </header>

                    <footer>
                        <h4 class="sr-only">Actions sur la demande</h4>
                        <ul class="list-inline">
                            <li><a href="#">Démarrer une prestation sur ce modèle</a></li>
                            <li><a href="#">Conserver</a></li>
                            <li><a href="#">Supprimer</a></li>
                        </ul>
                    </footer>
                </div>

            </div>
        </article>
        <article class="mb-3 p-1 bg-light">
            <div class="row">
                <div class="col-md-12">
                    <header>
                        <h3 class="mb-3">
                            <a href="">Demande de permis de construire</a>
                        </h3>
                        <dl class="small row">
                            <dt class="col-4">Type</dt>
                            <dd class="col-8">Demande</dd>
                            <dt class="col-4">Référence</dt>
                            <dd class="col-8"><samp>HOX0AI-AJQ7K1</samp></dd>
                            <dt class="col-4">Date</dt>
                            <dd class="col-8">17.02.2017</dd>
                            <dt class="col-4">Clôturé le</dt>
                            <dd class="col-8">28.02.2017</dd>
                            <dt class="col-4">Statut</dt>
                            <dd class="col-8">Clôturé</dd>
                            <dt class="col-4">Bénéficiaire</dt>
                            <dd class="col-8">Jean Villars Gilles</dd>
                        </dl>
                    </header>

                    <footer>
                        <h4 class="sr-only">Actions sur la demande</h4>
                        <ul class="list-inline">
                            <li><a href="#">Démarrer une prestation sur ce modèle</a></li>
                            <li><a href="#">Conserver</a></li>
                            <li><a href="#">Supprimer</a></li>
                        </ul>
                    </footer>
                </div>

            </div>
        </article>

        <nav class="vd-pagination" aria-label="Pagination">
            <ul class="vd-pagination__list">
                <li class="vd-pagination__item vd-pagination__item--previous">
                    <a href="#" class="vd-pagination__link">
                        <span class="vd-pagination__title">
                            <span class="fas fa-chevron-left" aria-hidden="true"></span>
                            Page précédente
                        </span><span class="sr-only">:</span>
                        <span class="vd-pagination__label">11 sur 244</span></a>
                </li>
                <li class="vd-pagination__item vd-pagination__item--next">
                    <a href="#" class="vd-pagination__link">
                        <span class="vd-pagination__title">
                            Page suivante
                            <span class="fas fa-chevron-right" aria-hidden="true"></span>
                        </span><span class="sr-only">:</span>
                        <span class="vd-pagination__label">13 sur 244</span></a>
                </li>
            </ul>
        </nav>

    </div>
</main>

<footer class="mt-5">

    <div class="container">
        <div class="text-end">
            <a href="#" class="btn btn-sm btn-dark" title="Retour vers le haut de la page">Haut <span class="fas fa-chevron-up"></span></a>
        </div>
    </div>

    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-10">
                    <nav class="row" aria-label="pied de page">

                        <div class="col-sm">

                            <ul class="list-unstyled ">
                                <li><a href="">Contact</a></li>
                                <li><a href="">Pourquoi créer un compte</a></li>
                                <li><a href="">Mentions légales</a></li>
                            </ul>
                        </div>

                    </nav>
                </div>
                <div class="col-xs-2">
                    <div class="d-flex align-items-end flex-column h-100">
                        <div class="mt-auto w-100 end">
                            <a href="#" class="d-inline-block">
                                <span class="sr-only">Retour à la page d'accueil</span>
                                <img aria-hidden="true" class="img-fluid footer-logo" src="../../foehn/svg/logo/logo--white.svg" alt="Canton de Vaud">

                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</footer>
 
{% extends '@espace-securise' %}
{% block main %}

{% render '@search-form--regular-options', search %}

<h2 class="mb-3">Resultats</h2>
{% for item in historique -%}
{% render '@notification', item %}
{%- endfor %}

{% render '@pagination' %}

{% endblock %}
 
{
  "pageTitle": {
    "text": "Historique"
  },
  "navigation": {
    "title": "Menu",
    "items": [
      {
        "text": "Tableau de bord",
        "title": null,
        "url": "tableau-de-bord",
        "active": null
      },
      {
        "text": "Historique",
        "title": null,
        "url": "historique",
        "active": true
      },
      {
        "text": "Prestations",
        "title": null,
        "url": "prestations",
        "active": null
      },
      {
        "text": "Documents",
        "title": null,
        "url": "documents",
        "active": null
      },
      {
        "text": "Paramètres",
        "title": null,
        "url": "parametres",
        "active": null
      }
    ]
  },
  "search": {
    "title": "Rechercher dans l\"historique",
    "titleModifier": "sr-only",
    "options": {
      "legend": "Rechercher les",
      "legendModifier": "sr-only",
      "items": [
        {
          "label": "Demandes",
          "name": "filterSearch",
          "checked": false
        },
        {
          "label": "Tâches",
          "name": "filterSearch",
          "checked": false
        },
        {
          "label": "Messages",
          "name": "filterSearch",
          "checked": false
        }
      ]
    }
  },
  "historique": [
    {
      "title": "Message important !",
      "url": "message-detail",
      "href": "#",
      "meta": {
        "type": "Communication",
        "receiveDate": "17.02.2017",
        "readDate": "18.01.2017"
      },
      "actions": {
        "title": "Actions sur le message",
        "actions": [
          {
            "title": "Télécharger",
            "url": "#"
          },
          {
            "title": "Supprimer",
            "url": "#"
          }
        ]
      },
      "text": "En date du 01.01.2017, une nouvelle charte graphique a été dévelopée dans le but de satisfaire le plus grand nombre de personne et de faciliter l'utilisation de l'espace sécurisé. Merci de votre compréhension."
    },
    {
      "title": "Demande de permis de construire",
      "href": "#",
      "meta": {
        "type": "Demande",
        "reference": "HOX0AI-AJQ7K1",
        "date": "17.02.2017",
        "closeDate": "20.02.2017",
        "status": "Clôturé",
        "recipient": "Jean Villars Gilles"
      },
      "actions": {
        "title": "Actions sur la demande",
        "actions": [
          {
            "title": "Démarrer une prestation sur ce modèle",
            "url": "#"
          },
          {
            "title": "Conserver",
            "url": "#"
          },
          {
            "title": "Supprimer",
            "url": "#"
          }
        ]
      }
    },
    {
      "title": "Demande de permis de construire",
      "href": "#",
      "meta": {
        "type": "Demande",
        "reference": "HOX0AI-AJQ7K1",
        "date": "17.02.2017",
        "closeDate": "28.02.2017",
        "status": "Clôturé",
        "recipient": "Jean Villars Gilles"
      },
      "actions": {
        "title": "Actions sur la demande",
        "actions": [
          {
            "title": "Démarrer une prestation sur ce modèle",
            "url": "#"
          },
          {
            "title": "Conserver",
            "url": "#"
          },
          {
            "title": "Supprimer",
            "url": "#"
          }
        ]
      }
    }
  ]
}

No notes defined.