Activiteitenlijst met uitgelicht item

Hiervoor moet een paginapresentatie gemaakt worden met de body class .layout-calendar. Een voorbeeld hiervan is te zien op de demopagina Evenementen kalender

Op deze pagina staan de volgende onderdelen:

Uitgelicht item

De HTML voor het uitgelichte item moet er als volgt uit zien:

    <section class="highlight__wrapper">
      <div class="header-collection">
        <a href="" class="header-collection__content">
          <div class="header-collection__lead">
            <div class="header-collection__header">
              <span class="header-collection__featured">Feature van het uitgelichte item</span>
              <h2 class="header-collection__title">
                Titel van het uitgelichte item
              </h2>
            </div>
            <div class="header-collection__image">
              <img src="../assets/image.jpg" alt="">
            </div>
          </div>
          <div class="header-collection__inner">
            <ul class="meta">
              <li class="meta__item meta__item--date">
                <span class="meta__label">Taallabel start</span> datum
              </li>
              <li class="meta__item meta__item--duration">
                <span class="meta__label">Taallabel duur</span> duur
              </li>
              <li class="meta__item meta__item--location">
                <span class="meta__label">Taallabel lokatie</span> lokatie
              </li>
              <li class="meta__item meta__item--cost">
                <span class="meta__label">Taallabel prijs</span> prijs
              </li>
            </ul>
            <p>
              Beschrijving van het uitgelichte item
            </p>
            <span class="button">Button tekst</span>
          </div>
        </a>
      </div>
      <div class="colored-paragraph colored-paragraph--blue">
        <h2>Titel van het gekleurde blok</h2>
        <p>
          Beschrijving van het gekleurde blok
        </p>
        <a href="">Link van het gekleurde blok</a>
      </div>
    </section>

Filters

De html voor de filters is gelijk aan die van de zoekresultaten, met 2 toevoegingen:

De HTML voor de filters moet er als volgt uit zien:

    <nav class="filters" id="filters">
      <a class="filter__scroll button" href="#results">Taallabel scroll naar resultaten</a>
      <h2>Taallabel filter voor activiteiten</h2>
      <section class="facet">
        <h3>Titel van facet 1</h3>
        <ul>
          <li class="active">
            <a href="#">
              Facet 1 - item 1
              <span class="icon inline"><span>(actief)</span></span>
            </a>
          </li>
          <li>
            <a href="#">
              Facet 1 - item 2
            </a>
          </li>
          <li>
            <a href="#">
              Facet 1 - item 3
            </a>
          </li>
        </ul>
      </section>
      <section class="facet">
        <h3>Titel van facet 2</h3>
        <ul>
          <li class="active">
            <a href="#">
              Facet 2 - item 1
            </a>
          </li>
          <li>
            <a href="#">
              Facet 2 - item 2
              <span class="icon inline"><span>(actief)</span></span>
            </a>
          </li>
          <li>
            <a href="#">
              Facet 2 - item 3
            </a>
          </li>
        </ul>
      </section>
      <div class="colored-paragraph colored-paragraph--blue">
        <h2>Titel van het gekleurde blok</h2>
        <p>
          Beschrijving van het gekleurde blok
        </p>
        <a href="">Link van het gekleurde blok</a>
      </div>
    </nav>

Zoekresultaten

Elk evenement in de zoekresultaten is een list-item met class="result" in de HTML. Een lopend (ongoing) evenement krijgt de extra class "result--ongoing", en bevat een extra span met class="result__ongoing" met daarin een taallabel (zie onderstaand voorbeeld). Default worden lopende evenementen niet getoond. Wanneer een gebruiker de checkbox #toggle aanvinkt, worden dmv js/css de lopende evenementen zichtbaar.

De HTML voor de zoekresultaten moet er als volgt uit zien:

    <section class="list--calendar">
      <div class="list__header">
        <h2>[aantal] taallabel aantal geplande evenemnten</h2>
        <div class="list__sorting">
          <span>Taallabel sorteren op</span>
          <select name="select">
            <option value="" selected="">Taallabel datum</option>
            <option value="">Taallabel alfabetisch</option>
            <option value="">Taallabel prijs hoog-laag</option>
            <option value="">Taallabel prijs laag-hoog</option>
          </select>
        </div>
        <label class="list__toggle-ongoing">
          <input type="checkbox" id="toggle">Taallabel toon lopende evenementen
        </label>
      </div>
      <ul class="result-list">
        <li class="result result--ongoing">
          <a href="#">
            <span class="result__ongoing">taallabel in XC: Course ongoing</span>
            <div class="result__image">
              <img src="/assets/list-with-image.jpg">
            </div>
            <div class="result__content">
              <strong class="result__title">Titel van ongoing course</strong>
              <ul class="meta">
                <li class="meta__item meta__item--date">
                  <span class="meta__label">Taallabel start</span> datum
                </li>
                <li class="meta__item meta__item--duration">
                  <span class="meta__label">Taallabel duur</span> duur
                </li>
                <li class="meta__item meta__item--location">
                  <span class="meta__label">Taallabel lokatie</span> lokatie
                </li>
                <li class="meta__item meta__item--cost">
                  <span class="meta__label">Taallabel prijs</span> prijs
                </li>
              </ul>
              <span class="body">
                Beschrijving van de ongoing course
              </span>
              <span class="button">Lees meer button</span>
            </div>
          </a>
        </li>
        <li class="result">
          <a href="#">
            <div class="result__image">
              <img src="/assets/list-with-image.jpg">
            </div>
            <div class="result__content">
              <strong class="result__title">Titel van course</strong>
              <ul class="meta">
                <li class="meta__item meta__item--date">
                  <span class="meta__label">Taallabel start</span> datum
                </li>
                <li class="meta__item meta__item--duration">
                  <span class="meta__label">Taallabel duur</span> duur
                </li>
                <li class="meta__item meta__item--location">
                  <span class="meta__label">Taallabel lokatie</span> lokatie
                </li>
                <li class="meta__item meta__item--cost">
                  <span class="meta__label">Taallabel prijs</span> prijs
                </li>
              </ul>
              <span class="body">
                Beschrijving van de course
              </span>
              <span class="button">Lees meer button</span>
            </div>
          </a>
        </li>
      </ul>
      <div class="pagination">
        <ul>
          <li class="prev"><a href="" title="Vorige">Vorige</a></li>
          <li><a href="">1</a></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li class="active"><span>4</span></li>
          <li><a href="">5</a></li>
          <li><a href="">6</a></li>
          <li><a href="">7</a></li>
          <li><span>...</span></li>
          <li><a href="">34</a></li>
          <li class="next"><a href="" title="Volgende">Volgende</a></li>
        </ul>
      </div>
    </section>