feat: improve homepage desktop with design

virtualidentityag · Aug 26, 2024 · a79526a · a79526a
1 parent 28440e8
commit a79526a
Show file tree

Hide file tree

Showing 27 changed files with 481 additions and 391 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
++.css
diff --git a/public/assets/odk-logo.svg b/public/assets/odk-logo.svg
diff --git a/src/js/darkmode.js b/src/js/darkmode.js
@@ -1,5 +1,5 @@
 function updateDarkmodeIcons() {
-  const isDarkmode = document.documentElement.hasAttribute('data-theme')
+  const isDarkmode = document.documentElement.hasAttribute('data-bs-theme')
 
   document.querySelectorAll('[toggle-dark-mode] i').forEach((icon) => {
     const remove = isDarkmode ? 'bi-moon-fill' : 'bi-sun-fill'
@@ -11,19 +11,19 @@ function updateDarkmodeIcons() {
 }
 
 function removeDarkmode() {
-  document.documentElement.removeAttribute('data-theme')
+  document.documentElement.removeAttribute('data-bs-theme')
   localStorage.removeItem('theme')
   updateDarkmodeIcons()
 }
 
 function setDarkmode() {
-  document.documentElement.setAttribute('data-theme', 'dark')
+  document.documentElement.setAttribute('data-bs-theme', 'dark')
   localStorage.setItem('theme', 'dark')
   updateDarkmodeIcons()
 }
 
 function toggleDarkmode() {
-  if (document.documentElement.hasAttribute('data-theme')) {
+  if (document.documentElement.hasAttribute('data-bs-theme')) {
     removeDarkmode()
   } else {
     setDarkmode()

diff --git a/src/layouts/base.twig b/src/layouts/base.twig
@@ -13,12 +13,12 @@
     <script src='/src/js/darkmode.js'></script>
   </head>
   <body class='min-vh-100 d-flex flex-column'>
-    {% include 'partials::header.twig' %}
+    {% include 'partials::base/b_header.twig' %}
 
     <main class='container flex-grow-1'>
       {% block content %}{% endblock %}
     </main>
 
-    {% include 'partials::footer.twig' %}
+    {% include 'partials::base/b_footer.twig' %}
   </body>
 </html>
diff --git a/src/pages/index.twig b/src/pages/index.twig
@@ -2,164 +2,93 @@
 {% set theme = 'default' %}
 
 {% block content %}
-  <section class='row py-5'>
-    <div class='col-8'>
-      <h1>Die beste Grundlage fur fundierte Entscheidungen: offene Daten aus Ihrer Region.</h1>
+  <section class='row pb-5'>
+    <div class='col-12'>
+      <h1 class='display-4 display-md-3 mb-4'>
+        Die beste Grundlage fur fundierte Entscheidungen: offene Daten aus Ihrer Region.
+      </h1>
 
-      <div class='row'>
-        <div class='col-8'>
-          <form class='form-inline d-flex gap-2 my-4'>
+      <div class='row mb-5'>
+        <div class='col-12 col-md-7'>
+          <form class='form-inline d-flex gap-2'>
             <input
               class='form-control mr-sm-2'
               type='search'
               placeholder='Datensatze suchen'
               aria-label='Datensatze suchen'
             >
-            <button class='btn btn-primary my-2 my-sm-0' type='submit' aria-label='Search'>
+            <button class='btn btn-primary' type='submit' aria-label='Search'>
               <i class='bi bi-search'></i>
             </button>
           </form>
         </div>
       </div>
 
-      <p>
+      <h2 class='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.
-      </p>
+      </h2>
     </div>
   </section>
 
-  <section class='row py-5'>
-    <div class='col-12 mb-4 d-flex justify-content-between align-items-center'>
-      <h2>Beliebte Datensätze</h2>
-      {%
-        include 'partials::icon-link.twig' with {
-        href: './dataset-overview',
-        text: 'Alle Datensätze',
-        icon: 'arrow-right'
-        }
-      %}
-    </div>
+  <section class='row pt-4 pb-5'>
+    {%
+      include 'partials::content-layout/cl_section-header.twig' with {
+      title: 'Beliebte Datensätze',
+      link: {
+      href: './dataset-overview',
+      text: 'Alle Datensätze',
+      }
+      }
+    %}
 
     <div class='col-12'>
-      <div class='row'>
-        <div class='col-6'>
-          {%
-            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']
-            }
-          %}
-        </div>
-
-        <div class='col-6'>
-          {%
-            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']
-            }
-          %}
-        </div>
-      </div>
+      {% include 'partials::content-layout/cl_card-showcase.twig' %}
     </div>
   </section>
 
   <section class='row py-5 border-top'>
-    <div class='col-12 mb-4 d-flex justify-content-between align-items-center'>
-      <h2>News</h2>
-      {%
-        include 'partials::icon-link.twig' with {
-        href: '#',
-        text: 'Alle News',
-        icon: 'arrow-right'
-        }
-      %}
-    </div>
+    {%
+      include 'partials::content-layout/cl_section-header.twig' with {
+      title: 'News',
+      link: {
+      href: '#',
+      text: 'Alle News',
+      }
+      }
+    %}
 
     <div class='col-12'>
-      <div class='row'>
-        <div class='col-6'>
-          <img class='img-fluid' src='https://picsum.photos/960/540' alt='Virtual Identity AG'>
-        </div>
-        <div class='col-6'>
-          <h3>Titel lorem ipsum</h3>
-          <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...
-          </p>
-          <div class='d-flex justify-content-end'>
-            {%
-              include 'partials::icon-link.twig' with {
-              href: '#',
-              text: 'Weiterlesen',
-              icon: 'arrow-right'
-              }
-            %}
-          </div>
-        </div>
-      </div>
+      {% include 'partials::base/b_highlight-teaser.twig' %}
     </div>
   </section>
 
   <section class='row py-5 border-top'>
-    <div class='col-12 mb-4 d-flex justify-content-between align-items-center'>
-      <h2>Beliebte Kategorien</h2>
-    </div>
+    {%
+      include 'partials::content-layout/cl_section-header.twig' with {
+      title: 'Beliebte Kategorien'
+      }
+    %}
 
     <div class='col-12'>
-      <div class='row'>
-        {% for i in 0..5 %}
-          <div class='col-2'>
-            <a href='#' class='ratio ratio-1x1'>
-              <div class='d-flex flex-column justify-content-center align-items-center bg-body-tertiary'>
-                <i class='bi bi-tag-fill fs-1'></i>
-                <p>Bevölkerung</p>
-              </div>
-            </a>
-          </div>
-        {% endfor %}
-      </div>
-    </div>
-
-    <div class='col-12 mt-4 d-flex justify-content-center'>
-      <button class='btn btn-link nav-link'><i class='bi bi-chevron-down'></i> ALLE ANZEIGEN</button>
+      {% include 'partials::content-layout/cl_tile-showcase.twig' %}
     </div>
   </section>
 
   <section class='row py-5 border-top'>
-    <div class='col-12 mb-4 d-flex justify-content-between align-items-center'>
-      <h2>Daten über Schnittstelle nutzen</h2>
-    </div>
+    {%
+      include 'partials::content-layout/cl_section-header.twig' with {
+      title: 'Daten über Schnittstelle nutzen'
+      }
+    %}
 
-    <p>
+    <p class='h2 mb-5'>
       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>
 
-    <div class='d-flex justify-content-end'>
-      {%
-        include 'partials::icon-link.twig' with {
-        href: '#',
-        text: 'Weiterlesen',
-        icon: 'arrow-right'
-        }
-      %}
+    <div class='col-12 d-flex justify-content-end'>
+      <button class='btn btn-primary'>Alle Anzeigen</button>
     </div>
   </section>
 {% endblock %}
diff --git a/src/partials/base/b_card.twig b/src/partials/base/b_card.twig
@@ -0,0 +1,25 @@
+{% set classes = 'card text-decoration-none h-100 overflow-hidden' %}
+{% set classes = classes ~ (direction == 'horizontal' ? ' d-flex flex-row' : '' ) %}
+
+<a href='{{ href }}' class='{{ classes }}'>
+  {% if thumbnail %}
+    <div class='ratio ratio-16x9'>
+      <img class='' src='{{ thumbnail.src }}' alt='{{ thumbnail.alt }}'>
+    </div>
+  {% endif %}
+
+  <div class='card-body d-flex flex-column gap-2'>
+    <h5 class='card-title mb-0'>
+      {{ title }}
+    </h5>
+    <p class='card-subtitle m0 text-muted'>{{ subtitle }}</p>
+    <p class='card-text m-0'>
+      {{ description }}
+    </p>
+    <div>
+      {% for format in formats %}
+        <span class='badge text-bg-primary rounded-pill'>{{ format | upper }} </span>
+      {% endfor %}
+    </div>
+  </div>
+</a>
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,3 +22,5 @@ dist-ssr @@
     *.njsproj
     *.sln
     *.sw?
+    +.css