Skip to content

Commit

Permalink
feat: minor improvements (#22)
Browse files Browse the repository at this point in the history 
* feat: minor improvements

* feat: implement stadt koeln logo on footer

* feat: improve tile showcase extended component
  • Loading branch information
@paulovareiro29
paulovareiro29 authored Oct 2, 2024
1 parent 946bf10 commit 43e5018
Show file tree
Hide file tree
Showing 8 changed files with 365 additions and 8 deletions.
1 change: 1 addition & 0 deletions public/assets/stadt-koeln-logo-dark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
207 changes: 207 additions & 0 deletions src/pages/homepage-extended-categories.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
{% extends 'layouts::base.twig' %}
{% set theme = 'default' %}
{%
set skip_links = [
{ href: '#content', text: 'Zum Inhalt' },
]
%}

{% block content %}
<section id='homepage-search' class='row pb-3 pb-lg-5'>
<div class='col-12'>
{%
include 'partials::base/b_hero.twig' with {
src: 'https://picsum.photos/960/540',
type: 'background'
}
%}

<div class='row'>
<div class='col-12 col-lg-9 mb-4 mb-xl-5'>
<div class='text-bg-primary p-3 pb-5'>
<div class='p-3'>
<h1 class='display-5 mb-4'>
Die beste Grundlage für fundierte Entscheidungen: offene Daten aus Ihrer Region.
</h1>
<form class='form-inline d-flex gap-2' action='overview'>
<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-outline-primary fs-5' type='submit' aria-label='Suchen'>
<i class='bi bi-search'></i>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>

<section id='content' class='row pb-5'>
<div class='col-12'>
<div class='p-3 bg-body'>
<h2 class='p-3 m-0'>
Hier finden alle Kölner – ob Bürger, Verwaltung, Unternehmen oder Wissenschaft – offene Datensätze, um
gemeinsam einen Mehrwert für alle zu schaffen.
</h2>
</div>
</div>
</section>

<section class='row pb-5 mb-3'>
{%
include 'partials::content-layout/cl_section-header.twig' with {
title: 'Beliebte Datensätze',
link: {
href: './overview',
text: 'Alle Datensätze',
}
}
%}

<div class='col-lg-6 mb-3'>
{%
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...',
}
%}
</div>
<div class='col-lg-6 mb-3'>
{%
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...',
}
%}
</div>
<div class='col-lg-6 my-3'>
{%
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...',
}
%}
</div>
<div class='col-lg-6 my-3'>
{%
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...',
}
%}
</div>
<div class='col-lg-6 mt-3'>
{%
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...',
}
%}
</div>
<div class='col-lg-6 mt-3'>
{%
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...',
}
%}
</div>
</section>

<section class='row py-5 mb-3 border-gray border-top border-opacity-25'>
{%
include 'partials::content-layout/cl_section-header.twig' with {
title: 'News',
link: {
href: '#',
text: 'Alle News anzeigen',
}
}
%}

<div class='col-12'>
{%
include 'partials::base/b_highlight-teaser.twig' with {
content: "
<h3 class='mb-3'>Title lorem ipsum</h3>
<p class='fs-5 text-lg mb-3'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua...
</p>
<a class='btn btn-primary align-self-center align-self-lg-start' href='#'>Weiterlesen</a>
"
}
%}
</div>
</section>

<section class='row py-5 mb-3 border-gray border-top border-opacity-25'>
{%
include 'partials::content-layout/cl_section-header.twig' with {
title: 'Beliebte Kategorien'
}
%}

<div class='col-12'>
{% include 'partials::content-layout/cl_tile-showcase-extended.twig' %}
</div>
</section>

<section class='row py-5 mb-3 border-gray border-top border-bottom border-opacity-25'>
{%
include 'partials::content-layout/cl_section-header.twig' with {
title: 'Daten über Schnittstelle nutzen',
link: {
href: '#',
text: 'Artikel anzeigen',
}
}
%}

<p class='h2'>
Erfahren Sie hier wie Sie mit der DKAN API unsere offenen Datensätze für Ihre eigenen Projekte anschauen,
herunterladen und programmsteuern können.
</p>
</section>
{% endblock %}
5 changes: 4 additions & 1 deletion src/pages/index.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
14 changes: 9 additions & 5 deletions src/partials/base/b_footer.twig
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<footer class='footer border-top mt-5'>
<div class='container pt-5 pb-4'>
<div class='row gap-5 gap-md-0'>
<div class='col-12 col-md-4'>
<div class='col-12 col-md-4 d-flex flex-column gap-4'>
<a
href='./'
aria-current='page'
Expand All @@ -10,6 +10,13 @@
>
<img class='logo' src='./assets/odk-logo-dark.svg' alt='Offene Daten Köln'>
</a>
<a
href='https://www.stadt-koeln.de/'
class='nav-link d-flex align-items-center text-dark text-decoration-none'
title='Startseite Stadt Köln'
>
<img class='logo' src='./assets/stadt-koeln-logo-dark.svg' alt='Stadt Köln'>
</a>
</div>

<div class='col-12 col-md-4'>
Expand Down Expand Up @@ -37,10 +44,7 @@
</div>
<div class='row mt-5'>
<div class='col-12'>
<p class='m-0'>
Powered by Stadt Köln and <a href='#' class='d-inline fw-bold'>DKAN</a>, a project of
<a href='#' class='d-inline fw-bold'>NuCivic</a>
</p>
<p class='m-0'>Powered by Stadt Köln and <a href='https://getdkan.org/' class='d-inline fw-bold'>DKAN</a>.</p>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/partials/base/b_tile.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
<div class='tile-ratio'></div>
<div class='d-flex flex-column justify-content-center align-items-center'>
<i class='bi bi-{{ icon }} fs-1'></i>
<p>{{ name }}</p>
<p class='text-center'>{{ name }}</p>
</div>
</a>
2 changes: 1 addition & 1 deletion src/partials/content-layout/cl_app.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<div class='card-body pt-4'>
{% if href is not defined %}
<span class='badge badge-small border border-2 border-body text-body mb-2'>Nicht Verfügbar</span>
<span class='badge badge-small border border-2 border-body text-body mb-2'>Betrieb eingestellt</span>
{% endif %}
<h3 class='h5 fw-semibold'>{{ title }}</h3>
{% if description is defined %}
Expand Down
Loading

0 comments on commit 43e5018

Please sign in to comment.