feat: setup base templates (#4)

* feat: implement bootstrap icons * feat: setup homepage skeleton * feat: improved darkmode * feat: setup dataset overview page * feat: setup dataset-detail page * feat: setup apps page * feat: implement primary button styles * feat: improve homepage desktop with design * feat: implement responsive homepage * fix: deployment missing scripts * fix: missing bootstrap-cions * chore: remove bootstrap-icons dependency * chore: update labels * chore: uppercase badges
virtualidentityag · Aug 28, 2024 · dbc1a2a · dbc1a2a
1 parent dfccc34
commit dbc1a2a
Show file tree

Hide file tree

Showing 40 changed files with 1,408 additions and 217 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
@@ -0,0 +1,50 @@
+function updateDarkmodeIcons() {
+  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'
+    const add = isDarkmode ? 'bi-sun-fill' : 'bi-moon-fill'
+
+    icon.classList.remove(remove)
+    icon.classList.add(add)
+  })
+}
+
+function removeDarkmode() {
+  document.documentElement.removeAttribute('data-bs-theme')
+  localStorage.removeItem('theme')
+  updateDarkmodeIcons()
+}
+
+function setDarkmode() {
+  document.documentElement.setAttribute('data-bs-theme', 'dark')
+  localStorage.setItem('theme', 'dark')
+  updateDarkmodeIcons()
+}
+
+function toggleDarkmode() {
+  if (document.documentElement.hasAttribute('data-bs-theme')) {
+    removeDarkmode()
+  } else {
+    setDarkmode()
+  }
+}
+
+function loadTheme() {
+  const theme = localStorage.getItem('theme')
+
+  if (theme) {
+    setDarkmode()
+  } else {
+    removeDarkmode()
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  updateDarkmodeIcons()
+  document.querySelectorAll('[toggle-dark-mode]').forEach((button) => {
+    button.addEventListener('click', toggleDarkmode)
+  })
+})
+
+loadTheme()
diff --git a/src/js/scripts.js b/src/js/scripts.js
@@ -0,0 +1,2 @@
+import 'bootstrap'
+import './darkmode.js'
diff --git a/src/layouts/base.twig b/src/layouts/base.twig
@@ -1,19 +1,30 @@
 <!doctype html>
 <html lang='de'>
   <head>
-    <title>Stadt Koeln - Open Data</title>
+    <meta charset='UTF-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <title>Offene Daten Köln</title>
 
     <link rel='stylesheet' href='/src/styles/styles.scss'>
-    {% set theme = theme is defined ? theme : 'light' %}
+    {#
+      https://github.com/twbs/icons/issues/1381
+      Due to an issue of vite compiler, the bootstrap-icons needs to be directly imported
+      using the cdn url.
+    #}
+    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css'>
+
+    {% set theme = theme is defined ? theme : 'default' %}
     <link rel='stylesheet' href='/src/styles/themes/{{ theme }}.css'>
+
+    <script type='module' src='/src/js/scripts.js' defer></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/apps.twig 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='./'>Startseite</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 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='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/dark.twig b/src/pages/dark.twig