feat: STADTKLN-103 implement publishers page

src/pages/index.twig

@@ -9,7 +9,10 @@
   },
   {
   name: 'Dataset Overview',
-  variants: [{ href: './overview', label: 'Default ❌'}]
+  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',
@@ -27,6 +30,17 @@
   name: 'Apps',
   variants:  [{ href: './apps', label: 'Default ❌'}]
   },
+  {
+  name: 'Publisher Overview',
+  variants:  [{ href: './publisher-overview', label: 'Default ✅', thumbnail: 'publisher-overview.webp', thumbnail_dark: 'publisher-overview-dark.webp'}]
+  },
+  {
+  name: 'Publisher Datasets',
+  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' role='region' aria-live='polite'>Ihre Suche nach "Lorem" ergab 0 Datensätze.</h2>
+
+      {% include 'partials::content-layout/cl_results-empty-state.twig' %}
+    </div>
+  </section>
+{% endblock %}

src/pages/overview.twig

@@ -24,7 +24,7 @@
         <div class='col-12 col-md-7'>
           <form action='./overview' class='d-flex gap-2 align-items-center'>
             <input
-              class='form-control fs-5 mr-sm-2'
+              class='form-control form-control-lg fs-5 mr-sm-2'
               type='search'
               placeholder='Datensätze suchen'
               aria-label='Datensätze suchen'
@@ -40,193 +40,11 @@
 
   <section class='row'>
     <div class='col-12'>
-      <h2 class='h2 m-0 py-3 py-md-4'>Ihre Suche nach "Struktur" ergab 387 Treffer.</h2>
+      <h2 class='h2 m-0 pb-3 pb-md-4' role='region' aria-live='polite'>
+        Ihre Suche nach "Struktur" ergab 387 Treffer.
+      </h2>
 
-      <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,
-            },
-            ]
-            },
-            {
-            title: 'Erstellungsdatum',
-            moreFiltersCount: 10,
-            filters: [
-            {
-            label: '2024',
-            results: 120
-            },
-            {
-            label: '2022',
-            results: 42
-            },
-            {
-            label: '2016',
-            results: 22
-            },
-            {
-            label: '2015',
-            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'>5 Ergebnisse</div>
-          <div class='mt-3'>
-            <div class='pb-3'>
-              {%
-                include 'partials::base/b_card.twig' with {
-                direction: 'horizontal',
-                href: './dataset',
-                title: 'Baumkataster Köln 2020',
-                subtitle: 'Herausgeber: Stadt Köln',
-                description: 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua.',
-                }
-              %}
-            </div>
-            <div class='py-3'>
-              {%
-                include 'partials::base/b_card.twig' with {
-                direction: 'horizontal',
-                href: './dataset',
-                title: 'Baumkataster Köln 2020',
-                subtitle: 'Herausgeber: Stadt Köln',
-                description: 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua.',
-                }
-              %}
-            </div>
-            <div class='py-3'>
-              {%
-                include 'partials::base/b_card.twig' with {
-                direction: 'horizontal',
-                thumbnail: {
-                src: 'https://picsum.photos/540/540',
-                },
-                tag: 'Series',
-                title: 'Baumkataster Köln 2020',
-                subtitle: 'Herausgeber: Stadt Köln',
-                description: 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua.',
-                }
-              %}
-            </div>
-            <div class='py-3'>
-              {%
-                include 'partials::base/b_card.twig' with {
-                direction: 'horizontal',
-                href: './dataset',
-                title: 'Baumkataster Köln 2020',
-                subtitle: 'Herausgeber: Stadt Köln',
-                description: 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua.',
-                }
-              %}
-            </div>
-            <div class='pt-3'>
-              {% include 'partials::base/b_pagination.twig' %}
-            </div>
-          </div>
-        </div>
-      </div>
+      {% include 'partials::content-layout/cl_results.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/pages/publisher-datasets.twig

@@ -0,0 +1,53 @@
+{% 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'
+        >
+        <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 "Struktur" ergab 387 Treffer.</p>
+    </div>
+  </section>
+
+  <section class='row'>
+    <div class='col-12'>
+      {% include 'partials::content-layout/cl_results.twig' %}
+    </div>
+  </section>
+{% endblock %}