From ec1a95ab8c69aa8256ce54c7a2c1610d71ab5ae8 Mon Sep 17 00:00:00 2001 From: Paulo Vareiro Date: Thu, 22 Aug 2024 14:49:40 +0100 Subject: [PATCH 01/14] feat: implement bootstrap icons --- package.json | 3 ++- pnpm-lock.yaml | 7 +++++++ src/styles/_icons.scss | 1 + src/styles/styles.scss | 1 + 4 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 src/styles/_icons.scss diff --git a/package.json b/package.json index 722fff6..c099cf6 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ }, "dependencies": { "@popperjs/core": "^2.11.8", - "bootstrap": "^5.3.3" + "bootstrap": "^5.3.3", + "bootstrap-icons": "^1.11.3" }, "devDependencies": { "@destination/prettier-plugin-twig": "^1.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 106088f..2b08f44 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: bootstrap: specifier: ^5.3.3 version: 5.3.3(@popperjs/core@2.11.8) + bootstrap-icons: + specifier: ^1.11.3 + version: 1.11.3 devDependencies: '@destination/prettier-plugin-twig': @@ -581,6 +584,10 @@ packages: engines: {node: '>=8'} dev: true + /bootstrap-icons@1.11.3: + resolution: {integrity: sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==} + dev: false + /bootstrap@5.3.3(@popperjs/core@2.11.8): resolution: {integrity: sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==} peerDependencies: diff --git a/src/styles/_icons.scss b/src/styles/_icons.scss new file mode 100644 index 0000000..a775ee2 --- /dev/null +++ b/src/styles/_icons.scss @@ -0,0 +1 @@ +@use '/node_modules/bootstrap-icons/font/bootstrap-icons.css'; diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 79e4994..165686f 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -46,6 +46,7 @@ $prefix: ''; @import 'bootstrap/scss/utilities/api'; +@import 'icons'; @import 'theme'; body { From 7b303b661784d28d5d7bfcb23a2ee6323b61b937 Mon Sep 17 00:00:00 2001 From: Paulo Vareiro Date: Thu, 22 Aug 2024 17:11:17 +0100 Subject: [PATCH 02/14] feat: setup homepage skeleton --- src/layouts/base.twig | 1 + src/pages/index.twig | 132 ++++++++++++++++++++++++++++++++++++++- src/partials/card.twig | 21 +++++++ src/partials/footer.twig | 51 +++++++++++---- src/partials/header.twig | 38 ++++++++--- src/styles/styles.scss | 14 ++--- 6 files changed, 224 insertions(+), 33 deletions(-) create mode 100644 src/partials/card.twig diff --git a/src/layouts/base.twig b/src/layouts/base.twig index 1651637..4706a7f 100644 --- a/src/layouts/base.twig +++ b/src/layouts/base.twig @@ -1,6 +1,7 @@ + Stadt Koeln - Open Data diff --git a/src/pages/index.twig b/src/pages/index.twig index 916c101..96ac9a5 100644 --- a/src/pages/index.twig +++ b/src/pages/index.twig @@ -1,6 +1,134 @@ {% extends 'layouts::base.twig' %} {% block content %} -

Startseite

- Dark Mode +
+
+

Die beste Grundlage fur fundierte Entscheidungen: offene Daten aus Ihrer Region.

+ +
+ + +
+ +

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

+
+
+ +
+
+

Beliebte Datensätze

+ > alle Datensätze +
+ +
+
+
+ {% + include 'partials::card.twig' with { + 'thumbnail': { + src: 'https://picsum.photos/960/540', + alt: 'Virtual Identity AG' + }, + '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...', + 'formats': ['json', 'pdf'] + } + %} +
+ +
+ {% + include 'partials::card.twig' with { + '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...', + 'formats': ['json', 'pdf'] + } + %} + {% + include 'partials::card.twig' with { + '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...', + 'formats': ['json', 'pdf'] + } + %} +
+
+
+
+ +
+
+

News

+ > alle News +
+ +
+
+
+ Virtual Identity AG +
+
+

Titel 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 +
+
+
+
+
+ +
+
+

Beliebte Kategorien

+
+ +
+
+ {% for i in 0..5 %} +
+ +
+ +

Bevölkerung

+
+ +
+ {% endfor %} +
+
+ +
+ +
+
+ +
+
+

Daten über Schnittstelle nutzen

+
+ +

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

+ +
+ > weiterlesen +
+
{% endblock %} diff --git a/src/partials/card.twig b/src/partials/card.twig new file mode 100644 index 0000000..d0b952c --- /dev/null +++ b/src/partials/card.twig @@ -0,0 +1,21 @@ +
+ {% if thumbnail %} + {{ thumbnail.alt }} + {% endif %} + +
+
{{ title }}
+

{{ subtitle }}

+

+ {{ description }} +

+

+ Formate: + + {% for format in formats %} + {{ format | upper }} + {% endfor %} + +

+
+
diff --git a/src/partials/footer.twig b/src/partials/footer.twig index d480df4..79f59b9 100644 --- a/src/partials/footer.twig +++ b/src/partials/footer.twig @@ -1,15 +1,42 @@ -