Prevent horizontal scroll in small devices.

Prepare for release 1.2.3
Macros redefined for navigation
2025-07-24 19:08:54 +00:00 · 2023-11-26 11:37:23 +01:00 · 2023-11-26 10:52:26 +01:00 · 2023-11-26 10:51:40 +01:00 · 2023-11-26 10:51:06 +01:00 · 2023-11-26 10:49:42 +01:00
9 changed files with 73 additions and 176 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,12 @@
+# v1.2.3
+## 11/26/2023
+
+1.  [](#improved)
+    * Updated CSS styles
+    * Macros redefined for navigation (now, clickable parent menu items)
+2.  [](#bugfix)
+    * Fixed pimary image definition in base template
+  
 # v1.2.2
 ## 10/28/2023

--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -79,7 +79,7 @@ body {

@media screen and (max-width: 480px) {
  html, body {
-    min-width: 320px;
+    min-width: auto;
  }
 }
 html {
@ -2401,7 +2401,7 @@ ul.posts article header > :last-child {
    border-left: 0;
    border-right: 0;
    left: -3em;
-    width: calc(100% + (3em * 2));
+    width: calc(100% + 3em * 2);
  }
  .post > header {
    -moz-flex-direction: column;
@ -2470,7 +2470,7 @@ ul.posts article header > :last-child {
    padding: 1.5em 1.5em 0.5em 1.5em;
    left: -1.5em;
    margin: 0 0 2em 0;
-    width: calc(100% + (1.5em * 2));
+    width: calc(100% + 1.5em * 2);
  }
  .post > header {
    padding: 3em 1.5em 0.5em 1.5em;
@ -2939,14 +2939,20 @@ ul.menulink > li > ul {
  list-style: none;
  font-family: "Raleway", Helvetica, sans-serif;
  padding: 0.1em 0 0 0;
-  margin: 0em;
+  margin: 0 0 0 1em;
  line-height: 2.3em;
+  -webkit-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+  text-transform: uppercase;
+  font-weight: 600;
 }

 ul.menulink > li a.tags {
  border: dotted 1px rgba(119, 118, 118, 0.65);
  padding: 0.2em;
  font-size: 0.8em;
+  text-transform: uppercase;
+  font-weight: 400;
 }

 ul.menulink > li a:hover.tags {
@ -2954,21 +2960,12 @@ ul.menulink > li a:hover.tags {
  color: #f4f4f4 !important;
 }

-ul.menulink > li > ul,
-ul.menulink > li a span {
+ul.menulink > li > ul > li {
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
+  font-weight: 400;
+  text-transform: uppercase;
  font-size: 0.9em;
-  text-transform: uppercase;
-  font-weight: 400;
-}
-
-ul.menulink > li a span li {
-  -webkit-transition: color 0.2s ease;
-  transition: color 0.2s ease;
-  font-size: 0.8em;
-  font-weight: 400;
-  text-transform: uppercase;
 }

 ul.menulink > li * {
@ -2981,48 +2978,8 @@ ul.menulink > li a:hover span {

 ul.subitem {
  display: block;
-}
-
-ul.subitem > li > ul,
-ul.subitem > li a span {
-  -webkit-transition: color 0.2s ease;
-  transition: color 0.2s ease;
-  font-size: 0.9em;
-  font-weight: 400;
-  text-transform: capitalize;
-  margin-bottom: 0;
-}
-
-ul.subitem > li {
-  list-style-type: none;
-  margin-left: 0.4em;
-}
-
-ul.subitem_hide {
-  display: none;
-}
-
-ul.subitem_hide > li > ul,
-ul.subitem_hide > li a span {
-  -webkit-transition: color 0.2s ease;
-  transition: color 0.2s ease;
-  margin-bottom: 0;
-  font-weight: 400;
-  text-transform: capitalize;
-}
-
-ul.subitem_hide > li {
-  list-style-type: none;
-  margin-left: 0.4em;
-}
-
-.dropdown-btn {
-  cursor: pointer;
-}
-
-.fa-caret-down {
-  float: right;
-  padding-right: 8px;
+  margin: 0 0 0 0.5em;
+  padding-left: 0;
 }

 /* CSS for Headings */
@ -3074,7 +3031,7 @@ ul.subitem_hide > li {
    border-left: 0;
    border-right: 0;
    left: -3em;
-    width: calc(100% + (3em * 2));
+    width: calc(100% + 3em * 2);
  }
  .heading #breadcrumbs {
    margin: 0 0 2em 0;
@ -3093,7 +3050,7 @@ ul.subitem_hide > li {
    padding: 1.5em 1.5em 0.5em 1.5em;
    left: -1.5em;
    margin: 0 0 2em 0;
-    width: calc(100% + (1.5em * 2));
+    width: calc(100% + 1.5em * 2);
  }
  .heading .title h2 {
    font-size: 1.1em;
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
--- a/assets/sass/base/_page.scss
+++ b/assets/sass/base/_page.scss
@ -19,7 +19,7 @@
 	// Ensures page width is always >=320px.
 		@include breakpoint('<=xsmall') {
 			html, body {
-				min-width: 320px;
+				min-width: auto;
 			}
 		}

--- a/assets/sass/components/_sidebarmenu.scss
+++ b/assets/sass/components/_sidebarmenu.scss
@ -20,32 +20,31 @@ ul.menulink > li > ul
    list-style: none;
    font-family: _font(family-heading);
    padding: 0.1em 0 0 0;
-    margin: 0em;
+    margin: 0 0 0 1em;
    line-height: 2.3em;
+    -webkit-transition: color 0.2s ease;
+    transition: color 0.2s ease;
+    text-transform: uppercase;
+    font-weight: _font(weight-medium);
 }
 ul.menulink > li a.tags {
    border: dotted 1px rgba(119, 118, 118, 0.65);
    padding: 0.2em;
    font-size: 0.8em;
+    text-transform: uppercase;
+    font-weight: _font(weight);
 }
 ul.menulink > li a:hover.tags  {
    background-color: _palette(accent);
    color: _palette(bg-alt) !important;
 }
-ul.menulink > li > ul,
-ul.menulink > li a span {
+
+ul.menulink > li > ul > li {
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
+    font-weight: _font(weight);
+    text-transform: uppercase;
    font-size: 0.9em;
-    text-transform: uppercase;
-    font-weight: _font(weight);
-}
-ul.menulink > li a span li {
-    -webkit-transition: color 0.2s ease;
-    transition: color 0.2s ease;
-    font-size: 0.8em;
-    font-weight: _font(weight);
-    text-transform: uppercase;
 }

 ul.menulink > li * {
@ -57,41 +56,6 @@ ul.menulink > li a:hover span {
 }
 ul.subitem {
    display:block;
-}
-ul.subitem > li > ul,
-ul.subitem > li a span {
-    -webkit-transition: color 0.2s ease;
-    transition: color 0.2s ease;
-    font-size: 0.9em;
-    font-weight: _font(weight);
-    text-transform: capitalize;
-    margin-bottom: 0;
-}
-ul.subitem > li {
-    list-style-type: none;
-    margin-left: 0.4em;
-    }
-ul.subitem_hide {
-    display:none;
-}
-ul.subitem_hide > li > ul,
-ul.subitem_hide > li a span
-{
-
-    -webkit-transition: color 0.2s ease;
-    transition: color 0.2s ease;
-    margin-bottom: 0;
-    font-weight: _font(weight);
-    text-transform: capitalize;
-}
-ul.subitem_hide > li {
-    list-style-type: none;
-    margin-left: 0.4em;
-}
-.dropdown-btn {
-    cursor: pointer;
-}
-.fa-caret-down {
-    float: right;
-    padding-right: 8px;
+    margin: 0 0 0 0.5em;
+    padding-left: 0;
 }
--- a/blueprints.yaml
+++ b/blueprints.yaml
@ -1,7 +1,7 @@
 name: Future 2021
 slug: future2021
 type: theme
-version: 1.2.2
+version: 1.2.3
 description: Grav Future Imperfect by HTML5 UP (Version 2021)
 icon:  microchip
 author:
--- a/templates/macros/macros.html.twig
+++ b/templates/macros/macros.html.twig
@ -20,30 +20,21 @@
 {% macro nav_loop(page) %}
  {% import _self as nav_macros %}
  {% for p in page.children.visible %}
-    {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
-    {% if p.children.visible.count > 0 %}
-      <li class="{{ current_page }}">
-        <a>
-          {% if p.header.icon %}
+    {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
+    {% set has_visible_children = p.children.visible.count > 0 %}
+    <li>
+      <a href="{{ p.url }}" class="{{ active_page }}">
+        {% if p.header.icon %}
            <i class="fa fa-{{ p.header.icon }}"></i>
-          {% endif %}
-          {{ p.menu }}
-            {% if p.routable ?? false %}&nbsp;<i class="fa fa-angle-down"></i>
-            {% endif %}
-        </a>
-        <ul>
-          {{ nav_macros.nav_loop(p) }}
-        </ul>
-      </li>
-    {% else %}
-      <li class="{{ current_page }}">
-        <a href="{{ p.url }}">
-          {% if p.header.icon %}
-            <i class="fa fa-{{ p.header.icon }}"></i>
-          {% endif %}
-          <span>{{ p.menu }}</span>
-        </a>
-      </li>
-    {% endif %}
+        {% endif %}
+        {{ p.menu }}
+        {% if has_visible_children %}&nbsp;<i class="fa fa-angle-down"></i>{% endif %}
+      </a>
+      {% if has_visible_children %}
+      <ul>
+        {{ nav_macros.nav_loop(p) }}
+      </ul>
+      {% endif %}
+    </li>
  {% endfor %}
 {% endmacro %}
--- a/templates/partials/base.html.twig
+++ b/templates/partials/base.html.twig
@ -15,7 +15,7 @@

 {# Define if the primary image and the attributes of width and height are shown #}
 {% set show_image = header_var('show_pageimage')|defined(true) %}
-{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v, k) => k != page.header.primaryImage and (v.type == 'image' or v.type == 'vector'))|first %}
+{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v, k) => k != page.header.avatarImage and (v.type == 'image' or v.type == 'vector'))|first %}
 {% set img_width = header_var('image_width')|default(1038) %}
 {% set img_height = header_var('image_height')|default(437) %}

--- a/templates/partials/sidebar_navigation.html.twig
+++ b/templates/partials/sidebar_navigation.html.twig
@ -1,34 +1,22 @@
 {% block menu_navigation %}
-  {% macro loop(page) %}
-    {% for p in page.children.visible %}
-      {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
-      {% if p.children.visible.count > 0 %}
-        <li class="{{ current_page }}">
-          <a class="dropdown-btn">
+{% macro loop(page) %}
+{% for p in page.children.visible %}
+    {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
+    <li class="{{ current_page }}">
+        <a href="{{ p.url }}">
            {% if p.header.icon %}
-              <i class="fa fa-{{ p.header.icon }}"></i>
-            {% endif %}
-            <span>{{ p.menu }}
-              {% if p.routable ?? false %}&nbsp;<i class="fa fa-caret-down"></i>
-              {% endif %}
-            </span>
-          </a>
-          <ul class="subitem_hide">
-            {{ _self.loop(p) }}
-          </ul>
-        </li>
-      {% else %}
-        <li class="{{ current_page }}">
-          <a href="{{ p.url }}">
-            {% if p.header.icon %}
-              <i class="fa fa-{{ p.header.icon }}"></i>
+                <i class="fa fa-{{ p.header.icon }}"></i>
            {% endif %}
            <span>{{ p.menu }}</span>
-          </a>
-        </li>
-      {% endif %}
-    {% endfor %}
-  {% endmacro %}
+        </a>
+        {% if p.children.visible.count > 0 %}
+            <ul class="subitem">
+                {{ _self.loop(p) }}
+            </ul>
+        {% endif %}
+    </li>
+{% endfor %}
+{% endmacro %}
  <ul class="menulink">
    {{ _self.loop(pages) }}
    {% if theme_var('custommenus.enabled') %}
@ -44,16 +32,4 @@
      {% endfor %}
    {% endif %}
  </ul>
-{% endblock %}
-
-{% block javascripts %}
-<script>
-if ((window.innerWidth || document.documentElement.clientWidth) < 980){ 
-  /* Script for dropdown menu in sidebar */
-  $(".subitem_hide").hide(); /* this hides the list initially */
-      $(".dropdown-btn").click(function () {
-      $(this).next(".subitem_hide").slideToggle();
-  });
-  }
-</script>
 {% endblock %}
Author	SHA1	Message	Date
pmoreno.rodriguez	c237ebb276	Prevent horizontal scroll in small devices.	2023-11-26 11:37:23 +01:00
pmoreno.rodriguez	f320e15a08	Prepare for release 1.2.3	2023-11-26 10:52:26 +01:00
pmoreno.rodriguez	5c4324e14c	Macros redefined for navigation	2023-11-26 10:51:40 +01:00
pmoreno.rodriguez	f36b48e4d7	Fixed pimary image definition	2023-11-26 10:51:06 +01:00
pmoreno.rodriguez	c2a6ba72a8	Updated sidebar menu styles	2023-11-26 10:49:42 +01:00