Skip to content

Commit

Permalink
feat: STADTKLN-103 implement publishers page (#19)
Browse files Browse the repository at this point in the history
* feat: implement publishers page

* feat: adjust overview page

* feat: implement empty state pages

* Update src/partials/content-layout/cl_publisher.twig

* feat: implement missing aria-live

---------

Co-authored-by: Deborah Köpfer <[email protected]>
  • Loading branch information
paulovareiro29 and koepferd authored Sep 20, 2024
1 parent 588bd59 commit 54a5305
Show file tree
Hide file tree
Showing 25 changed files with 677 additions and 194 deletions.
Binary file added public/assets/previews/overview-dark.webp
Binary file not shown.
Binary file added public/assets/previews/overview-empty-dark.webp
Binary file not shown.
Binary file added public/assets/previews/overview-empty.webp
Binary file not shown.
Binary file added public/assets/previews/overview.webp
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file added public/assets/previews/publisher-datasets.webp
Binary file not shown.
Binary file not shown.
Binary file added public/assets/previews/publisher-overview.webp
Binary file not shown.
16 changes: 15 additions & 1 deletion src/pages/index.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -35,6 +38,17 @@
name: 'Blog',
variants: [{ href: './blog', label: 'Default ✅', thumbnail: 'blog.webp', thumbnail_dark: 'blog-dark.webp'}]
},
{
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'}
]
},
]
%}

Expand Down
49 changes: 49 additions & 0 deletions src/pages/overview-empty.twig
Original file line number Diff line number Diff line change
@@ -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 %}
192 changes: 5 additions & 187 deletions src/pages/overview.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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 %}
54 changes: 54 additions & 0 deletions src/pages/publisher-datasets-empty.twig
Original file line number Diff line number Diff line change
@@ -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 %}
53 changes: 53 additions & 0 deletions src/pages/publisher-datasets.twig
Original file line number Diff line number Diff line change
@@ -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 %}
Loading

0 comments on commit 54a5305

Please sign in to comment.