feat: STADTKLN-69 implement apps page (#18)

virtualidentityag · Sep 20, 2024 · 588bd59 · 588bd59
1 parent 62e6d87
commit 588bd59
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 153 deletions.
diff --git a/public/assets/previews/apps-dark.webp b/public/assets/previews/apps-dark.webp
diff --git a/public/assets/previews/apps.webp b/public/assets/previews/apps.webp
diff --git a/src/pages/apps.twig b/src/pages/apps.twig
@@ -2,157 +2,75 @@
 {% set theme = 'default' %}
 
 {% block content %}
-  <nav aria-label='breadcrumb'>
-    <ol class='breadcrumb'>
-      <li class='breadcrumb-item'><a href='./'>Startseite</a></li>
-      <li class='breadcrumb-item active' aria-current='page'>Apps</li>
-    </ol>
-  </nav>
+  {%
+    include 'partials::base/b_breadcrumbs.twig' with {
+    links: [
+    {
+    href: './',
+    text: 'Startseite'
+    },
+    {
+    text: 'Apps'
+    }
+    ]
+    }
+  %}
 
-  <section class='row py-4'>
-    <div class='col-8'>
-      <h1 class='mb-3'>Apps und Anwendungsbeispiele</h1>
-      <p>
+  <section class='row pb-5 mb-3'>
+    <div class='col-12'>
+      <h1 class='display-3 mb-4'>Apps und Anwendungsbeispiele</h1>
+      <h2 class='m-0'>
         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>
+      </h2>
     </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>
-          </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>
-          </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 text-uppercase'>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>
-          </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>
-          </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>
-          </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 class='row'>
+    <div class='visually-hidden' role='region' aria-live='polite'>6 Ergebnisse</div>
+    <div class='col-md-6 mb-5 mb-md-0 d-flex flex-column gap-5' role='region' aria-live='polite'>
+      {%
+        include 'partials::content-layout/cl_app.twig' with {
+        href: '#',
+        title: 'Baumkataster Köln 2020',
+        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.'
+        }
+      %}
+      {%
+        include 'partials::content-layout/cl_app.twig' with {
+        title: 'Baumkataster Köln 2020',
+        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.'
+        }
+      %}
+      {%
+        include 'partials::content-layout/cl_app.twig' with {
+        title: 'Baumkataster Köln 2020',
+        description: 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscin '
+        }
+      %}
+    </div>
+    <div class='col-md-6 d-flex flex-column gap-5'>
+      {%
+        include 'partials::content-layout/cl_app.twig' with {
+        title: 'Baumkataster Köln 2020',
+        description: 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et.'
+        }
+      %}
+      {%
+        include 'partials::content-layout/cl_app.twig' with {
+        href: '#',
+        title: 'Baumkataster Köln 2020',
+        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.'
+        }
+      %}
+      {%
+        include 'partials::content-layout/cl_app.twig' with {
+        title: 'Baumkataster Köln 2020'
+        }
+      %}
+    </div>
+    <div class='col-12 pt-5 mt-3'>
+      {% include 'partials::base/b_pagination.twig' %}
+    </div>
   </section>
 {% endblock %}
diff --git a/src/pages/index.twig b/src/pages/index.twig
@@ -25,7 +25,7 @@
   },
   {
   name: 'Apps',
-  variants:  [{ href: './apps', label: 'Default ❌'}]
+  variants:  [{ href: './apps', label: 'Default ✅', thumbnail: 'apps.webp', thumbnail_dark: 'apps-dark.webp'}]
   },
   {
   name: 'Blog Overview',

diff --git a/src/partials/base/b_link.twig b/src/partials/base/b_link.twig
@@ -1,6 +1,15 @@
-<a href='{{ href }}' class='link fs-5'>
-  {% if icon %}
-    <i class='bi bi-{{ icon }} text-primary me-2' aria-hidden='true'></i>
-  {% endif %}
-  {{ text }}
-</a>
+{% if href %}
+  <a href='{{ href }}' class='link fs-5'>
+    {% if icon %}
+      <i class='bi bi-{{ icon }} text-primary me-2' aria-hidden='true'></i>
+    {% endif %}
+    {{ text }}
+  </a>
+{% else %}
+  <button class='btn btn-link fs-5'>
+    {% if icon %}
+      <i class='bi bi-{{ icon }} text-primary me-2' aria-hidden='true'></i>
+    {% endif %}
+    {{ text }}
+  </button>
+{% endif %}
diff --git a/src/partials/content-layout/cl_app.twig b/src/partials/content-layout/cl_app.twig
@@ -0,0 +1,29 @@
+<div class='card px-0 text-decoration-none overflow-hidden'>
+  <div class='ratio ratio-21x9'>
+    <img class='img-fluid' src='https://picsum.photos/960/540' alt>
+  </div>
+
+  <div class='card-body pt-4'>
+    {% if href is not defined %}
+      <span class='badge badge-small border border-2 border-body text-body text-uppercase mb-2'>Nicht Verfügbar</span>
+    {% endif %}
+    <h3 class='h5 fw-semibold'>{{ title }}</h3>
+    {% if description is defined %}
+      <p class='m-0 lh-sm'>
+        {{ description }}
+      </p>
+    {% endif %}
+
+    {% if href is defined %}
+      <div class='d-flex justify-content-end'>
+        {%
+          include 'partials::base/b_link.twig' with {
+          text: 'Zur Anwendung',
+          icon: 'arrow-return-right',
+          href: href
+          }
+        %}
+      </div>
+    {% endif %}
+  </div>
+</div>
diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
@@ -43,3 +43,21 @@
   --btn-disabled-color: var(--color-on-primary);
   --btn-disabled-border-color: var(--primary);
 }
+
+.btn-link {
+  --btn-hover-border-color: rgba(var(--link-hover-color-rgb), 1);
+  --btn-active-border-color: var(--btn-hover-border-color);
+
+  border-radius: 0;
+  border: 0;
+  font-weight: 400;
+  text-decoration: none;
+  padding-bottom: 4px;
+  border-bottom: 2px solid var(--link-color);
+  color: rgba(var(--link-color-rgb), 1);
+
+  &:focus {
+    border-color: rgba(var(--link-hover-color-rgb), 1);
+    color: rgba(var(--link-hover-color-rgb), 1);
+  }
+}