feat: implement empty state pages

src/pages/index.twig

@@ -9,7 +9,10 @@
   },
   {
   name: 'Dataset Overview',
-  variants: [{ href: './overview', label: 'Default ✅', thumbnail: 'overview.webp', thumbnail_dark: 'overview-dark.webp'}]
+  variants: [
+  { href: './overview', label: 'Default ✅', thumbnail: 'overview.webp', thumbnail_dark: 'overview-dark.webp'},
+  { href: './overview-empty', label: 'Empty State ✅', thumbnail: 'overview-empty.webp', thumbnail_dark: 'overview-empty-dark.webp'},
+  ]
   },
   {
   name: 'Dataset Detail',
@@ -33,7 +36,10 @@
   },
   {
   name: 'Publisher Datasets',
-  variants:  [{ href: './publisher-datasets', label: 'Default ✅', thumbnail: 'publisher-datasets.webp', thumbnail_dark: 'publisher-datasets-dark.webp'}]
+  variants:  [
+  { href: './publisher-datasets', label: 'Default ✅', thumbnail: 'publisher-datasets.webp', thumbnail_dark: 'publisher-datasets-dark.webp'},
+  { href: './publisher-datasets-empty', label: 'Empty State ✅', thumbnail: 'publisher-datasets-empty.webp', thumbnail_dark: 'publisher-datasets-empty-dark.webp'}
+  ]
   },
   ]
 %}

src/pages/overview-empty.twig

@@ -0,0 +1,49 @@
+{% extends 'layouts::base.twig' %}
+{% set theme = 'default' %}
+
+{% block content %}
+  {%
+    include 'partials::base/b_breadcrumbs.twig' with {
+    links: [
+    {
+    href: './',
+    text: 'Startseite'
+    },
+    {
+    text: 'Daten'
+    }
+    ]
+    }
+  %}
+
+  <section class='row mb-3 mb-md-4'>
+    <div class='col-12'>
+      <h1 class='display-3 mb-4'>Bitte geben Sie einen Suchbegriff ein.</h1>
+
+      <div class='row'>
+        <div class='col-12 col-md-7'>
+          <form action='./overview' class='d-flex gap-2 align-items-center'>
+            <input
+              class='form-control form-control-lg fs-5 mr-sm-2'
+              type='search'
+              placeholder='Datensätze suchen'
+              aria-label='Datensätze suchen'
+              value='Lorem'
+            >
+            <button class='btn btn-primary fs-5 my-2 my-sm-0' type='submit' aria-label='Search'>
+              <i class='bi bi-search'></i>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class='row'>
+    <div class='col-12'>
+      <h2 class='h2 m-0 pb-3 pb-md-4'>Ihre Suche nach "Lorem" ergab 0 Datensätze.</h2>
+
+      {% include 'partials::content-layout/cl_results-empty-state.twig' %}
+    </div>
+  </section>
+{% endblock %}

src/pages/publisher-datasets-empty.twig

@@ -0,0 +1,54 @@
+{% extends 'layouts::base.twig' %}
+{% set theme = 'default' %}
+
+{% block content %}
+  {%
+    include 'partials::base/b_breadcrumbs.twig' with {
+    links: [
+    {
+    href: './',
+    text: 'Startseite'
+    },
+    {
+    text: 'Herausgeber Datan'
+    }
+    ]
+    }
+  %}
+
+  <section class='row pt-3 mb-4'>
+    <div class='col-lg-3 mb-lg-0 mb-4'>
+      <div class='d-none d-lg-block card overflow-hidden'>
+        <img class='w-100' src='https://picsum.photos/600/500' alt>
+      </div>
+      <div class='d-block d-lg-none card overflow-hidden ratio ratio-16x9'>
+        <img class='w-100' src='https://picsum.photos/600/500' alt>
+      </div>
+    </div>
+
+    <div class='col-12 col-lg-9'>
+      <h1 class='display-1 mb-4'>Meinung Für Köln</h1>
+
+      <form action='./publisher' class='d-flex gap-2 align-items-center mb-4'>
+        <input
+          class='form-control form-control-lg fs-5 mr-sm-2'
+          type='search'
+          placeholder='Datensätze suchen'
+          aria-label='Datensätze suchen'
+          value='Lorem'
+        >
+        <button class='btn btn-primary fs-5 my-2 my-sm-0' type='submit' aria-label='Datensätze suchen'>
+          <i class='bi bi-search'></i>
+        </button>
+      </form>
+
+      <p class='h2' role='region' aria-live='polite'>Ihre Suche nach "Lorem" ergab 0 Datensätze.</p>
+    </div>
+  </section>
+
+  <section class='row'>
+    <div class='col-12'>
+      {% include 'partials::content-layout/cl_results-empty-state.twig' %}
+    </div>
+  </section>
+{% endblock %}

src/partials/content-layout/cl_results-empty-state.twig

@@ -0,0 +1,122 @@
+<div class='row pt-3 pt-md-4'>
+  <div class='col-0 col-lg-3'>
+    {%
+      include 'partials::content-layout/cl_filters.twig' with {
+      showDesktop: true,
+      data: [
+      {
+      title: 'Kategorien',
+      moreFiltersCount: 7,
+      filters: [
+      {
+      label: 'Infrastruktur, Bauen & Wohnen',
+      results: 120
+      },
+      {
+      label: 'Bevölkerung',
+      results: 42
+      },
+      {
+      label: 'Geo',
+      results: 22
+      },
+      {
+      label: 'Gesundheit',
+      results: 16,
+      },
+      ]
+      },
+      {
+      title: 'Format',
+      moreFiltersCount: 3,
+      filters: [
+      {
+      label: 'csv',
+      results: 135
+      },
+      {
+      label: 'json',
+      results: 42
+      },
+      {
+      label: 'xml',
+      results: 22
+      },
+      {
+      label: 'xlsx',
+      results: 16,
+      },
+      ]
+      },
+      {
+      title: 'Herausgeber',
+      moreFiltersCount: 0,
+      filters: [
+      {
+      label: 'Stadt Köln',
+      results: 120
+      },
+      {
+      label: 'Landesdatenbank NRW',
+      results: 42
+      },
+      {
+      label: 'Meinung fur Köln',
+      results: 22
+      },
+      {
+      label: 'Polizei Köln',
+      results: 16,
+      },
+      ]
+      }
+      ]
+      }
+    %}
+  </div>
+  <div class='col-12 col-lg-9'>
+    <div class='pb-3 pt-0 pt-md-3 d-flex flex-wrap column-gap-3 align-items-center justify-content-end'>
+      <p class='m-0'><strong>Sortieren nach</strong></p>
+      <div class='dropdown'>
+        <button
+          class='btn btn-light dropdown-toggle shadow-sm'
+          type='button'
+          data-bs-toggle='dropdown'
+          aria-expanded='false'
+        >
+          Erstellungsdatum absteigend
+        </button>
+        <ul class='dropdown-menu'>
+          <li><a class='dropdown-item' href='#'>Action</a></li>
+          <li><a class='dropdown-item' href='#'>Another action</a></li>
+          <li><a class='dropdown-item' href='#'>Something else here</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class='d-flex gap-2 align-items-center justify-content-end d-block d-lg-none'>
+      <p class='h6 m-0 text-end'><strong>Filtern nach</strong></p>
+      <button
+        class='btn btn-dark'
+        type='button'
+        data-bs-toggle='offcanvas'
+        data-bs-target='#offcanvas-filters'
+        aria-controls='offcanvas-filters'
+        aria-label='Filter umschalten'
+      >
+        <i class='bi bi-funnel-fill'></i>
+      </button>
+    </div>
+    <div class='visually-hidden' role='region' aria-live='polite'>0 Ergebnisse</div>
+    <div class='mt-3'>
+      <div class='ratio ratio-21x9 rounded border'>
+        <div class='d-flex flex-column justify-content-center align-items-center p-2'>
+          <i class='bi bi-search display-2 text-gray mb-2'></i>
+          <p class='m-0 text-center'>Beginnen Sie Ihre Suche, indem Sie in das obige Feld tippen.</p>
+          <p class='m-0 text-center'>
+            Noch keine Ergebnisse - durchsuchen Sie die Seite, um zu finden, was Sie suchen.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>