From 43e50182c1f39d2b79b3e338e5a7cd4ee975deeb Mon Sep 17 00:00:00 2001 From: Paulo Vareiro <58229468+paulovareiro29@users.noreply.github.com> Date: Wed, 2 Oct 2024 17:26:18 +0100 Subject: [PATCH] feat: minor improvements (#22) * feat: minor improvements * feat: implement stadt koeln logo on footer * feat: improve tile showcase extended component --- public/assets/stadt-koeln-logo-dark.svg | 1 + src/pages/homepage-extended-categories.twig | 207 ++++++++++++++++++ src/pages/index.twig | 5 +- src/partials/base/b_footer.twig | 14 +- src/partials/base/b_tile.twig | 2 +- src/partials/content-layout/cl_app.twig | 2 +- .../cl_tile-showcase-extended.twig | 138 ++++++++++++ src/styles/base/_theme.scss | 4 + 8 files changed, 365 insertions(+), 8 deletions(-) create mode 100644 public/assets/stadt-koeln-logo-dark.svg create mode 100644 src/pages/homepage-extended-categories.twig create mode 100644 src/partials/content-layout/cl_tile-showcase-extended.twig diff --git a/public/assets/stadt-koeln-logo-dark.svg b/public/assets/stadt-koeln-logo-dark.svg new file mode 100644 index 0000000..f329de0 --- /dev/null +++ b/public/assets/stadt-koeln-logo-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/homepage-extended-categories.twig b/src/pages/homepage-extended-categories.twig new file mode 100644 index 0000000..d64d08e --- /dev/null +++ b/src/pages/homepage-extended-categories.twig @@ -0,0 +1,207 @@ +{% extends 'layouts::base.twig' %} +{% set theme = 'default' %} +{% + set skip_links = [ + { href: '#content', text: 'Zum Inhalt' }, + ] +%} + +{% block content %} + + +
+
+
+

+ Hier finden alle Kölner – ob Bürger, Verwaltung, Unternehmen oder Wissenschaft – offene Datensätze, um + gemeinsam einen Mehrwert für alle zu schaffen. +

+
+
+
+ +
+ {% + include 'partials::content-layout/cl_section-header.twig' with { + title: 'Beliebte Datensätze', + link: { + href: './overview', + text: 'Alle Datensätze', + } + } + %} + +
+ {% + include 'partials::base/b_card.twig' with { + 'thumbnail': { + src: 'https://picsum.photos/960/540', + }, + '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...', + } + %} +
+
+ {% + include 'partials::base/b_card.twig' with { + 'thumbnail': { + src: 'https://picsum.photos/960/540', + }, + '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...', + } + %} +
+
+ {% + include 'partials::base/b_card.twig' with { + 'thumbnail': { + src: 'https://picsum.photos/960/540', + }, + '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...', + } + %} +
+
+ {% + include 'partials::base/b_card.twig' with { + 'thumbnail': { + src: 'https://picsum.photos/960/540', + }, + '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...', + } + %} +
+
+ {% + include 'partials::base/b_card.twig' with { + 'thumbnail': { + src: 'https://picsum.photos/960/540', + }, + '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...', + } + %} +
+
+ {% + include 'partials::base/b_card.twig' with { + 'thumbnail': { + src: 'https://picsum.photos/960/540', + }, + '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...', + } + %} +
+
+ +
+ {% + include 'partials::content-layout/cl_section-header.twig' with { + title: 'News', + link: { + href: '#', + text: 'Alle News anzeigen', + } + } + %} + +
+ {% + include 'partials::base/b_highlight-teaser.twig' with { + content: " +

Title lorem ipsum

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua... +

+ Weiterlesen + " + } + %} +
+
+ +
+ {% + include 'partials::content-layout/cl_section-header.twig' with { + title: 'Beliebte Kategorien' + } + %} + +
+ {% include 'partials::content-layout/cl_tile-showcase-extended.twig' %} +
+
+ +
+ {% + include 'partials::content-layout/cl_section-header.twig' with { + title: 'Daten über Schnittstelle nutzen', + link: { + href: '#', + text: 'Artikel anzeigen', + } + } + %} + +

+ Erfahren Sie hier wie Sie mit der DKAN API unsere offenen Datensätze für Ihre eigenen Projekte anschauen, + herunterladen und programmsteuern können. +

+
+{% endblock %} diff --git a/src/pages/index.twig b/src/pages/index.twig index e010689..c131e27 100644 --- a/src/pages/index.twig +++ b/src/pages/index.twig @@ -5,7 +5,10 @@ set templates = [ { name: 'Home', - variants: [{ href: './homepage', label: 'Default ✅', thumbnail: 'homepage.webp', thumbnail_dark: 'homepage-dark.webp'}] + variants: [ + { href: './homepage', label: 'Default ✅', thumbnail: 'homepage.webp', thumbnail_dark: 'homepage-dark.webp'}, + { href: './homepage-extended-categories', label: 'With extended categories ✅', thumbnail: 'homepage.webp', thumbnail_dark: 'homepage-dark.webp'} + ] }, { name: 'Dataset Overview', diff --git a/src/partials/base/b_footer.twig b/src/partials/base/b_footer.twig index fbc81c2..01f73c6 100644 --- a/src/partials/base/b_footer.twig +++ b/src/partials/base/b_footer.twig @@ -1,7 +1,7 @@