From 1010f5e1fd53c6ac274b7471e4ed6822096cc9bd Mon Sep 17 00:00:00 2001
From: Paulo Vareiro <paulo.vareiro@virtual-identity.com>
Date: Fri, 23 Aug 2024 15:59:51 +0100
Subject: [PATCH] feat: setup apps page

---
 src/pages/apps.twig                        | 158 +++++++++++++++++++++
 src/pages/dataset-detail.twig              |  16 +--
 src/pages/dataset-overview.twig            |  10 +-
 src/pages/index.twig                       |   4 +-
 src/partials/card.twig                     |   4 +-
 src/partials/dataset-overview/filters.twig |   2 +-
 src/partials/footer.twig                   |   4 +-
 src/partials/header.twig                   |   4 +-
 8 files changed, 182 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/apps.twig

diff --git a/src/pages/apps.twig b/src/pages/apps.twig
new file mode 100644
index 0000000..412ecc1
--- /dev/null
+++ b/src/pages/apps.twig
@@ -0,0 +1,158 @@
+{% extends 'layouts::base.twig' %}
+{% set theme = 'default' %}
+
+{% block content %}
+  <nav aria-label='breadcrumb'>
+    <ol class='breadcrumb'>
+      <li class='breadcrumb-item'><a href='./'>Home</a></li>
+      <li class='breadcrumb-item active' aria-current='page'>Apps</li>
+    </ol>
+  </nav>
+
+  <section class='row py-4'>
+    <div class='col-8'>
+      <h1 class='mb-3'>Apps und Anwendungsbeispiele</h1>
+      <p>
+        Lorem ipsum Einleitungstext zum Thema Apps, der kurz beschreibt, wie und warum man offene Daten nutzt und der
+        Öffentlichkeit zum Ausprobieren zur Verfügung stellt.
+      </p>
+    </div>
+  </section>
+
+  <section class='row pb-5'>
+    <article class='col-12 mb-5'>
+      <div class='row'>
+        <div class='col-12 '>
+          <div class='ratio ratio-21x9 mb-3'>
+            <img src='https://picsum.photos/960/540' alt='Virtual Identity AG'>
+          </div>
+        </div>
+        <div class='col-10'>
+          <h2 class='h3'>App name lorem</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus.
+          </p>
+        </div>
+        <div class='col-12 d-flex justify-content-end'>
+          {%
+            include 'partials::icon-link.twig' with {
+            href: '#',
+            text: 'Zur Anwendung',
+            icon: 'chevron-right'
+            }
+          %}
+        </div>
+      </div>
+    </article>
+    <article class='col-6 mb-5'>
+      <div class='row'>
+        <div class='col-12 '>
+          <div class='ratio ratio-21x9 mb-3'>
+            <img src='https://picsum.photos/960/540' alt='Virtual Identity AG'>
+          </div>
+        </div>
+        <div class='col-10'>
+          <div class='d-flex gap-3 align-items-center mb-2'>
+            <h2 class='h3 m-0'>App name lorem</h2>
+            <span class='badge text-bg-danger'>NOT AVAILABLE</span>
+          </div>
+
+          <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus.
+          </p>
+        </div>
+        <div class='col-12 d-flex justify-content-end'>
+          {%
+            include 'partials::icon-link.twig' with {
+            href: '#',
+            text: 'Zur Anwendung',
+            icon: 'chevron-right'
+            }
+          %}
+        </div>
+      </div>
+    </article>
+    <article class='col-6 mb-5'>
+      <div class='row'>
+        <div class='col-12 '>
+          <div class='ratio ratio-21x9 mb-3'>
+            <img src='https://picsum.photos/960/540' alt='Virtual Identity AG'>
+          </div>
+        </div>
+        <div class='col-10'>
+          <h2 class='h3'>App name lorem</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus.
+          </p>
+        </div>
+        <div class='col-12 d-flex justify-content-end'>
+          {%
+            include 'partials::icon-link.twig' with {
+            href: '#',
+            text: 'Zur Anwendung',
+            icon: 'chevron-right'
+            }
+          %}
+        </div>
+      </div>
+    </article>
+    <article class='col-6 mb-5'>
+      <div class='row'>
+        <div class='col-12 '>
+          <div class='ratio ratio-21x9 mb-3'>
+            <img src='https://picsum.photos/960/540' alt='Virtual Identity AG'>
+          </div>
+        </div>
+        <div class='col-10'>
+          <h2 class='h3'>App name lorem</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus.
+          </p>
+        </div>
+        <div class='col-12 d-flex justify-content-end'>
+          {%
+            include 'partials::icon-link.twig' with {
+            href: '#',
+            text: 'Zur Anwendung',
+            icon: 'chevron-right'
+            }
+          %}
+        </div>
+      </div>
+    </article>
+    <article class='col-6 mb-5'>
+      <div class='row'>
+        <div class='col-12 '>
+          <div class='ratio ratio-21x9 mb-3'>
+            <img src='https://picsum.photos/960/540' alt='Virtual Identity AG'>
+          </div>
+        </div>
+        <div class='col-10'>
+          <h2 class='h3'>App name lorem</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus.
+          </p>
+        </div>
+        <div class='col-12 d-flex justify-content-end'>
+          {%
+            include 'partials::icon-link.twig' with {
+            href: '#',
+            text: 'Zur Anwendung',
+            icon: 'chevron-right'
+            }
+          %}
+        </div>
+      </div>
+    </article>
+  </section>
+{% endblock %}
diff --git a/src/pages/dataset-detail.twig b/src/pages/dataset-detail.twig
index 8bccddc..03aa0ae 100644
--- a/src/pages/dataset-detail.twig
+++ b/src/pages/dataset-detail.twig
@@ -52,7 +52,7 @@
 
   <section class='row py-4 border-top'>
     <div class='col-8'>
-      <h5 class='mb-3'>Dateien und Quellen</h5>
+      <h3 class='h5 mb-3'>Dateien und Quellen</h3>
       <div class='py-3'>
         <div class='d-flex gap-3 align-items-center mb-2'>
           <div class='bg-body-secondary px-2'>
@@ -82,7 +82,7 @@
       </div>
     </div>
     <div class='col-2'>
-      <h5>Herausgeber</h5>
+      <h3 class='h5'>Herausgeber</h3>
       <div class='ratio ratio-1x1'>
         <img src='https://picsum.photos/540/540' alt='Virtual Identity AG'>
       </div>
@@ -92,7 +92,7 @@
   <section class='row py-4 border-top'>
     <div class='col-8'>
       <div class='d-flex align-items-center gap-3 mb-3'>
-        <h5 class='m-0'>Weitere Datensätze der Datenserie</h5>
+        <h3 class='h5 m-0'>Weitere Datensätze der Datenserie</h3>
         <span class='badge text-bg-primary'>SERIES</span>
       </div>
 
@@ -126,7 +126,7 @@
 
   <section class='row py-4 border-top'>
     <div class='col-8'>
-      <h5 class='mb-3'>Weitere Formate</h5>
+      <h3 class='h5 mb-3'>Weitere Formate</h3>
 
       <p class='mb-1'>
         <span>Datensatz Inhalt:</span>
@@ -148,7 +148,7 @@
 
   <section class='row py-4 border-top'>
     <div class='col-8'>
-      <h5 class='mb-3'>Kategorien</h5>
+      <h3 class='h5 mb-3'>Kategorien</h3>
 
       <p class='badge text-bg-primary fs-6'>Lorem</p>
       <p class='badge text-bg-primary fs-6'>Lorem</p>
@@ -158,7 +158,7 @@
 
   <section class='row py-4 border-top'>
     <div class='col-8'>
-      <h5 class='mb-3'>Zusätzliche Informationen</h5>
+      <h3 class='h5 mb-3'>Zusätzliche Informationen</h3>
 
       <div>
         <p class='mb-1'><strong>Feldbeschreibung, e.g. "Veröffentlichungsdatum"</strong></p>
@@ -184,7 +184,7 @@
 
   <section class='row py-4 border-top'>
     <div class='col-8'>
-      <h5 class='mb-3'>DCAT-AP.de Datensatzinformation</h5>
+      <h3 class='h5 mb-3'>DCAT-AP.de Datensatzinformation</h3>
 
       <div>
         <p class='mb-1'><strong>Feldbeschreibung, e.g. "Herausgeber"</strong></p>
@@ -195,7 +195,7 @@
 
   <section class='row py-4 border-top'>
     <div class='col-8'>
-      <h5 class='mb-3'>Tags</h5>
+      <h3 class='h5 mb-3'>Tags</h3>
 
       <div>
         <p class='text-muted'>LOREM, LOREM, LOREM</p>
diff --git a/src/pages/dataset-overview.twig b/src/pages/dataset-overview.twig
index 7b38907..193110c 100644
--- a/src/pages/dataset-overview.twig
+++ b/src/pages/dataset-overview.twig
@@ -15,14 +15,16 @@
 
       <div class='row'>
         <div class='col-8'>
-          <form class='form-inline d-flex gap-2 my-4'>
+          <form action='./dataset-overview' class='form-inline d-flex gap-2 my-4'>
             <input
               class='form-control mr-sm-2'
               type='search'
               placeholder='Datensatze suchen'
               aria-label='Datensatze suchen'
             >
-            <button class='btn btn-danger my-2 my-sm-0' type='submit'><i class='bi bi-search'></i></button>
+            <button class='btn btn-primary my-2 my-sm-0' type='submit' aria-label='Search'>
+              <i class='bi bi-search'></i>
+            </button>
           </form>
         </div>
       </div>
@@ -34,7 +36,7 @@
 
     <div class='row mt-4'>
       <aside class='col-3'>
-        <h5 class='mb-3'>Filtern nach</h5>
+        <h3 class='h5 mb-3'>Filtern nach</h3>
 
         {%
           include 'partials::dataset-overview/filters.twig' with {
@@ -132,7 +134,7 @@
         %}
       </aside>
       <div class='col'>
-        <div class='d-flex align-items-center justify-content-end'>
+        <div class='d-flex gap-3 align-items-center justify-content-end'>
           <p class='m-0'>
             <strong>Sortieren nach</strong>
           </p>
diff --git a/src/pages/index.twig b/src/pages/index.twig
index 3f67101..7ef20ec 100644
--- a/src/pages/index.twig
+++ b/src/pages/index.twig
@@ -15,7 +15,9 @@
               placeholder='Datensatze suchen'
               aria-label='Datensatze suchen'
             >
-            <button class='btn btn-danger my-2 my-sm-0' type='submit'><i class='bi bi-search'></i></button>
+            <button class='btn btn-primary my-2 my-sm-0' type='submit' aria-label='Search'>
+              <i class='bi bi-search'></i>
+            </button>
           </form>
         </div>
       </div>
diff --git a/src/partials/card.twig b/src/partials/card.twig
index 09b0dc4..9ecfc79 100644
--- a/src/partials/card.twig
+++ b/src/partials/card.twig
@@ -6,11 +6,11 @@
   {% endif %}
 
   <div class='card-body'>
-    <h5 class='card-title'>
+    <h3 class='h5 card-title'>
       <a href='./dataset-detail' class='text-decoration-none'>
         {{ title }}
       </a>
-    </h5>
+    </h3>
     <p class='card-subtitle text-muted'>{{ subtitle }}</p>
     <p class='card-text'>
       {{ description }}
diff --git a/src/partials/dataset-overview/filters.twig b/src/partials/dataset-overview/filters.twig
index 1d352be..31d549f 100644
--- a/src/partials/dataset-overview/filters.twig
+++ b/src/partials/dataset-overview/filters.twig
@@ -1,7 +1,7 @@
 <div class='d-flex flex-column gap-4'>
   {% for category in data %}
     <div>
-      <h6>{{ category.title }}</h6>
+      <h4 class='h6'>{{ category.title }}</h4>
       <div class='d-flex flex-column gap-2 align-items-start'>
         {% for filter in category.filters %}
           {% set id = 'flexCheckChecked' ~ loop.parent.loop.index ~ loop.index %}
diff --git a/src/partials/footer.twig b/src/partials/footer.twig
index e3bcec9..ba3175b 100644
--- a/src/partials/footer.twig
+++ b/src/partials/footer.twig
@@ -12,7 +12,7 @@
       </div>
 
       <div class='col-4 mb-3'>
-        <h5>Seiten</h5>
+        <p class='h5'>Seiten</p>
         <ul class='nav flex-column'>
           <li class='nav-item mb-2'><a href='#' class='nav-link p-0'>Home</a></li>
           <li class='nav-item mb-2'><a href='#' class='nav-link p-0'>Features</a></li>
@@ -23,7 +23,7 @@
       </div>
 
       <div class='col-4 mb-3'>
-        <h5>Service</h5>
+        <p class='h5'>Service</p>
         <ul class='nav flex-column'>
           <li class='nav-item mb-2'><a href='#' class='nav-link p-0'>Home</a></li>
           <li class='nav-item mb-2'><a href='#' class='nav-link p-0'>Features</a></li>
diff --git a/src/partials/header.twig b/src/partials/header.twig
index 0bc1275..b445a9c 100644
--- a/src/partials/header.twig
+++ b/src/partials/header.twig
@@ -17,10 +17,10 @@
       <li class='nav-item'><a href='./dataset-overview' class='nav-link'>Daten</a></li>
       <li class='nav-item'><a href='#' class='nav-link'>News</a></li>
       <li class='nav-item'><a href='#' class='nav-link'>Herausgeber</a></li>
-      <li class='nav-item'><a href='#' class='nav-link'>Apps</a></li>
+      <li class='nav-item'><a href='./apps' class='nav-link'>Apps</a></li>
       <li class='nav-item'><a href='#' class='nav-link'>Anfragen</a></li>
       <li class='nav-item'>
-        <a href='#' class='nav-link'><i class='bi bi-search'></i></a>
+        <a href='#' class='nav-link' aria-label='search'><i class='bi bi-search'></i></a>
       </li>
     </ul>
   </nav>