From 3f1860f671480733bea4eb296bcf613e4f0b0795 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?benjamin=20melan=C3=A7on?= <ben@agaric.coop>
Date: Sun, 23 Feb 2025 23:20:40 -0500
Subject: [PATCH] Conclusion of endless round of changes to make menu sort of
usable
The dropdowns do not drop down on touch devices,
before fixing that need to check in on if the noble
battle to keep the menu visible for as many devices
as possible (and not hide behind the hamburger)
should in fact be given up.
Ref #114
---
.../geofresco/src/global/_components.scss | 41 +++++++++++++++++++
.../custom/geofresco/src/global/_layout.scss | 5 +--
.../block--system-branding-block.html.twig | 14 +++----
.../elements/menu--nav-bulma.html.twig | 2 +-
.../src/templates/layout/page.html.twig | 10 +++--
5 files changed, 56 insertions(+), 16 deletions(-)
diff --git a/web/themes/custom/geofresco/src/global/_components.scss b/web/themes/custom/geofresco/src/global/_components.scss
index 38d75bd..dcc1614 100644
--- a/web/themes/custom/geofresco/src/global/_components.scss
+++ b/web/themes/custom/geofresco/src/global/_components.scss
@@ -18,6 +18,47 @@
}
}
+.geo-logo-name {
+ display: flex !important;
+ overflow: hidden;
+ width: 100%;
+ .logo, .sitename {
+ display: table-cell;
+ }
+ .logo a {
+ display: block;
+ width: 199px;
+ }
+ @include from($tablet) {
+ width: fit-content;
+ }
+ @include until($mini) {
+ justify-content: flex-end;
+ }
+}
+
+@include until($desktop) {
+ .search-bar {
+ display: none !important;
+ }
+}
+
+// Mostly to reduce the impact of the ridiculous (mostly on Chrome) ghost mobile horizontal scroll.
+.search-icon {
+ padding-right: 1rem;
+}
+
+#navbar-menu {
+ display: flex;
+ // More modern Bulma has is-flex-wrap-wrap as a class for this.
+ flex-wrap: wrap;
+ @include until($tablet) {
+ width: 100%;
+ justify-content: space-around;
+ }
+}
+
+
/* Featured images on article pages */
.featured-image figure.image {
width: 100vw;
diff --git a/web/themes/custom/geofresco/src/global/_layout.scss b/web/themes/custom/geofresco/src/global/_layout.scss
index fe740b0..8b91de6 100644
--- a/web/themes/custom/geofresco/src/global/_layout.scss
+++ b/web/themes/custom/geofresco/src/global/_layout.scss
@@ -1,7 +1,6 @@
@charset "UTF-8";
// Extend or override Bulma's layouts ../../node_modules/bulma/sass/layout
-
// Center logo & sitename when they stack on tiny screens.
@include until($mini) {
.sitename.column,
@@ -15,6 +14,7 @@
display: inline-block;
}
+
// Allow the primary page content to be flush with the bottom of the slogan.
.main-section {
padding-top: 0;
@@ -38,9 +38,6 @@
}
// Prevent a slight horizontal scroll.
-.page-title .container {
- overflow-x: hidden;
-}
/* On content listing pages (e.g. card view mode). */
.background-replacement-for-no-image {
diff --git a/web/themes/custom/geofresco/src/templates/block/block--system-branding-block.html.twig b/web/themes/custom/geofresco/src/templates/block/block--system-branding-block.html.twig
index 996b9c2..9b743af 100644
--- a/web/themes/custom/geofresco/src/templates/block/block--system-branding-block.html.twig
+++ b/web/themes/custom/geofresco/src/templates/block/block--system-branding-block.html.twig
@@ -14,18 +14,18 @@
* @ingroup themeable
*/
#}
+<div class="column is-narrow geo-logo-name is-paddingless">
{% if site_logo %}
-<div class="logo column is-narrow is-paddingless has-text-centered">
- <figure class="image no-upscale">
- <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
- <img src="{{ site_logo }}" alt="{{ site_name }} Home" />
- </a>
- </figure>
+<div class="logo">
+ <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
+ <img src="{{ site_logo }}" alt="GEO's logo, a gently winding path through green to a large bright sun on the horizon." />
+ </a>
</div>
{% endif %}
-<div class="sitename column is-narrow is-paddingless has-text-centered">
+<div class="sitename">
<a class="site-title title is-3" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
<span class="green">Grassroots
Economic</span>
<span class="yellow">Organizing</span></a>
</div>
+</div>
diff --git a/web/themes/custom/geofresco/src/templates/elements/menu--nav-bulma.html.twig b/web/themes/custom/geofresco/src/templates/elements/menu--nav-bulma.html.twig
index 5d70476..ffc614c 100644
--- a/web/themes/custom/geofresco/src/templates/elements/menu--nav-bulma.html.twig
+++ b/web/themes/custom/geofresco/src/templates/elements/menu--nav-bulma.html.twig
@@ -58,7 +58,7 @@
%}
{% endif %}
{% if item.url|render == '/search' %}
- {% set item_classes = item_classes|merge(['is-hidden-tablet']) %}
+ {% set item_classes = item_classes|merge(['is-hidden-desktop search-icon']) %}
{% endif %}
{% endif %}
{{ link(
diff --git a/web/themes/custom/geofresco/src/templates/layout/page.html.twig b/web/themes/custom/geofresco/src/templates/layout/page.html.twig
index dc48376..6cfb141 100644
--- a/web/themes/custom/geofresco/src/templates/layout/page.html.twig
+++ b/web/themes/custom/geofresco/src/templates/layout/page.html.twig
@@ -16,17 +16,17 @@
%}
{% endif %}
{% block navbar %}
-{# We put everything in Bulma columns so must do navbar in header block #}
+{# We put everything in Bulma columns so must do navbar in header block, not here #}
{% endblock navbar %}
{% block header %}
-<div class="header columns is-mobile is-multiline is-marginless">
+<div class="header columns is-marginless">
{% block navbar_branding %}
{{ page.navbar_branding }}
{% endblock navbar_branding %}
<nav class="navigation column">
<div class="columns">
{% if page.header_search %}
- <div class="search-bar column has-text-right is-hidden-mobile">
+ <div class="search-bar column has-text-right">
{{ page.header_search }}
</div>
{% endif %}
@@ -39,7 +39,7 @@
{% endblock navbar_social %}
{% block primary_menu %}
{% if page.primary_menu %}
- <div class="column is-narrow">
+ <div class="column">
{{ page.primary_menu }}
</div>
{% endif %}
@@ -47,11 +47,13 @@
</div>
</nav>
</div>
+{% if is_front %}
<div class="columns">
<div class="column has-text-centered">
<p class="slogan"><strong class="title">{{ site_slogan }}</strong></p>
</div>
</div>
+{% endif %}
{{ page.highlighted }}
{{ page.help }}
{% block tabs %}