From 2e129a857eb44ee6830dc07d86bea5404672dd1a Mon Sep 17 00:00:00 2001
From: Dominik George <dominik.george@teckids.org>
Date: Mon, 12 Jun 2023 13:21:49 +0200
Subject: [PATCH] Use bulma-mega-menu and place projects in columns
---
sass/_menu.scss | 12 ++++++++++--
sass/_teckids.scss | 1 +
templates/menu.html | 8 ++++----
templates/menu/projects.html | 26 +++++++++++++++-----------
4 files changed, 30 insertions(+), 17 deletions(-)
diff --git a/sass/_menu.scss b/sass/_menu.scss
index 0a433deb..17b9c12d 100644
--- a/sass/_menu.scss
+++ b/sass/_menu.scss
@@ -29,6 +29,14 @@
}
}
-.navbar-dropdown.wide-dropdown {
- width: 100vw;
+.navbar-item.is-mega {
+ position: static;
+
+ .is-mega-menu-title {
+ margin-bottom: 0;
+ padding: .375rem 1rem;
+ }
+ .is-mega-menu-subtitle {
+ padding: .375rem 1rem;
+ }
}
diff --git a/sass/_teckids.scss b/sass/_teckids.scss
index df551f98..ffad834b 100644
--- a/sass/_teckids.scss
+++ b/sass/_teckids.scss
@@ -10,6 +10,7 @@ $project-colors: (
.menu-project-section {
border-left: 0.5em solid;
+ margin-left: 1em;
}
@each $project in $projects {
diff --git a/templates/menu.html b/templates/menu.html
index d9fee475..9e5d7525 100644
--- a/templates/menu.html
+++ b/templates/menu.html
@@ -14,16 +14,16 @@
<div class="navbar-menu" id="main-menu">
<div class="navbar-start">
- <div class="navbar-item has-dropdown is-hoverable">
+ <div class="navbar-item has-dropdown is-hoverable is-mega">
<a href="#" class="navbar-item">Projekte</a>
- <div class="navbar-dropdown wide-dropdown">
+ <div class="navbar-dropdown">
{% include "menu/projects.html" %}
</div>
</div>
- <div class="navbar-item has-dropdown is-hoverable">
+ <div class="navbar-item has-dropdown is-hoverable is-mega">
<a href="#" class="navbar-item">Informationen für…</a>
- <div class="navbar-dropdown wide-dropdown">
+ <div class="navbar-dropdown">
TBA
</div>
</div>
diff --git a/templates/menu/projects.html b/templates/menu/projects.html
index fbdbe394..b4b7f280 100644
--- a/templates/menu/projects.html
+++ b/templates/menu/projects.html
@@ -1,15 +1,19 @@
{% set projects = get_taxonomy(kind = "projekt") %}
-{% for project in projects.items %}
-<section class="section menu-project-section" id="menu-project-section-{{ project.slug }}">
- {% set section = get_section(path = "projekte/" ~ project.slug ~ "/_index.md") %}
- <h1 class="title">{{ section.title }}</h1>
- <h2 class="subtitle">{{ section.description }}</h2>
+<div class="columns">
+ {% for project in projects.items %}
+ <section class="column menu-project-section" id="menu-project-section-{{ project.slug }}">
+ {% set section = get_section(path = "projekte/" ~ project.slug ~ "/_index.md") %}
+ <h1 class="title is-6 is-mega-menu-title">{{ section.title }}</h1>
+ <p class="is-mega-menu-subtitle">{{ section.description }}</p>
- {% for page in project.pages %}
- <ul>
- <li><a href="{{ page.permalink }}">{{ page.title }}</a></li>
- </ul>
+ {% for page in project.pages %}
+ <a class="navbar-item" href="{{ page.permalink }}">
+ <div class="navbar-content">
+ {{ page.title }}
+ </div>
+ </a>
+ {% endfor %}
+ </section>
{% endfor %}
-</section>
-{% endfor %}
\ No newline at end of file
+</div>
\ No newline at end of file
--
GitLab