New Downloads template

CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.3.0
+## 03/04/2024
+
+1.  [](#new)
+    * New Downloads template
+2.  [](#improved)
+    * Updated README
+    * Updated translations
+    * Updated styles
+    * Updated author info in theme blueprints
+    * Removed partial Privacy template for contact form
+    * Updated contact demo page
+  
 # v1.2.5
 ## 01/08/2024
 

README.md

@@ -76,6 +76,7 @@ google_fonts_local:           # Option to load Google Fonts from the theme or fr
 favicon:                      # Choosse your own favicon
 custom_logo:                  # A custom logo rather than the default (see below)  
 custom_logo_mobile:           # A custom logo to use for mobile navigation
+type_logo_header:             # Choose how the logo is displayed in header. Options: Image, Text or Both
 slogan:                       # Custom text for slogan
 menu_langswitcher:            # Enable/Disable langswitcher icon in menu (langswitcher plugin needed)
 menu_search:                  # Enable/Disable search icon in menu (simplesearch plugin needed)

_demo/pages/05.contact/04._contact-us/contact.md

@@ -52,8 +52,10 @@ form:
             rows: 10
         -
             name: privacy
-            type: privacy
+            type: checkbox
-            label: 'Privacy policy'
+            markdown: true
+            label: 'Accept our <a href="privacy">Privacy policy</a>'
+            outerclasses: col-12
             validate:
                 required: true
                 message: 'You must agree to the privacy policy'
@@ -61,7 +63,7 @@ form:
         -
             type: submit
             value: Enviar
-            outerclasses: form-field
+            outerclasses: col-12
             classes: 'button primary'
     process:
         save:

assets/css/main.css

@@ -2046,7 +2046,6 @@ ul.actions.fit.stacked {
     -ms-flex-shrink: 1;
     flex-shrink: 1;
     padding: 1em 0 0 0;
-    text-align: center;
     width: 100%;
   }
   ul.actions:not(.fixed) li > * {
@@ -2553,6 +2552,7 @@ header p {
 table {
   margin: 0 0 2em 0;
   width: 100%;
+  word-break: break-word;
 }
 table tbody tr {
   border: solid 1px rgba(160, 160, 160, 0.3);
@@ -2599,6 +2599,32 @@ table.alt tfoot {
   border-top: 0;
 }
 
+/* Styles for responsive tables */
+@media screen and (max-width: 736px) {
+  .responsive table {
+    width: 100%;
+  }
+  .responsive thead {
+    display: none;
+  }
+  .responsive tr:nth-of-type(2n) {
+    background-color: inherit;
+  }
+  .responsive tr td:first-child {
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .responsive tbody td {
+    display: block;
+    text-align: center;
+  }
+  .responsive tbody td:before {
+    content: attr(data-th);
+    display: block;
+    text-align: center;
+  }
+}
+
 /* Portofolio */
 .portfolio_container {
   padding: 1em 0;
@@ -2955,7 +2981,6 @@ ul.menulink > li > ul {
   list-style: none;
   font-family: "Raleway", Helvetica, sans-serif;
   padding: 0.1em 0 0 0;
-  margin: 0 0 0 1em;
   line-height: 2.3em;
   -webkit-transition: color 0.2s ease;
   transition: color 0.2s ease;
@@ -3563,4 +3588,32 @@ CSS Styles for Page Toc Plugin
   position: -webkit-sticky;
   position: sticky;
   top: 3.5em;
+}
+
+/*
+Future2021
+Grav Theme by Pedro Moreno
+
+CSS Styles for Langswitcher Plugin 
+*/
+#menu li.langswitcher {
+  margin-left: 0em !important;
+}
+
+#header .main ul li.langswitcher {
+  margin-left: 0em !important;
+}
+
+#header .main ul li.langswitcher > a {
+  text-decoration: none;
+  border-bottom: 0;
+  color: #838383;
+  text-indent: 0em;
+  text-align: center;
+}
+
+@media screen and (max-width: 736px) {
+  #header .main ul li.langswitcher {
+    display: none;
+  }
 }

assets/css/misc.css

@@ -37,22 +37,6 @@
     visibility: visible;
   }
 
-/* Styles for Langswitcher plugin */
-
-#header .main ul li.langswitcher {
-  margin-left: 0em !important;
-}
-#header .main ul li.langswitcher > a {
-      text-decoration: none;
-      border-bottom: 0;
-      color: #838383;
-      text-indent: 0em;
-      text-align: center;}
-
-@media screen and (max-width: 736px) {
-    #header .main ul li.langswitcher {
-      display: none; } }
-
 /* Styles to show Font Awesome 5 Free in shortcode core notices */
 
 .sc-notice > div:before {

assets/sass/components/_actions.scss

@@ -85,7 +85,6 @@
 					@include vendor('flex-grow', '1');
 					@include vendor('flex-shrink', '1');
 					padding: (_size(element-margin) * 0.5) 0 0 0;
-					text-align: center;
 					width: 100%;
 
 					> * {

assets/sass/components/_sidebarmenu.scss

@@ -20,7 +20,6 @@ ul.menulink > li > ul
     list-style: none;
     font-family: _font(family-heading);
     padding: 0.1em 0 0 0;
-    margin: 0 0 0 1em;
     line-height: 2.3em;
     -webkit-transition: color 0.2s ease;
     transition: color 0.2s ease;

assets/sass/components/_table.scss

@@ -14,6 +14,7 @@
 	table {
 		margin: 0 0 _size(element-margin) 0;
 		width: 100%;
+		word-break: break-word;
 
 		tbody {
 			tr {
@@ -78,4 +79,34 @@
 				border-top: 0;
 			}
 		}
-	}
+	}
+
+/* Styles for responsive tables */
+	
+.responsive {
+
+	@include breakpoint('<=small') {
+		table {
+			width:100%;
+		}
+		thead {
+			display: none;
+		}
+		tr:nth-of-type(2n) {
+			background-color: inherit;
+		}
+		tr td:first-child {
+			background: _palette(bg-alt);
+			font-weight:_font(weight-bold);
+		}
+		tbody td {
+			display: block;
+			text-align:center;
+		}
+		tbody td:before {
+			content: attr(data-th);
+			display: block;
+			text-align: center;
+		}
+	}
+}

assets/sass/grav-plugins/_langswitcher.scss

@@ -0,0 +1,24 @@
+/*
+Future2021
+Grav Theme by Pedro Moreno
+
+CSS Styles for Langswitcher Plugin 
+*/
+
+#menu  li.langswitcher {
+    margin-left: 0em !important;
+}
+
+#header .main ul li.langswitcher {
+    margin-left: 0em !important;
+  }
+#header .main ul li.langswitcher > a {
+    text-decoration: none;
+    border-bottom: 0;
+    color: #838383;
+    text-indent: 0em;
+    text-align: center;}
+
+@media screen and (max-width: 736px) {
+    #header .main ul li.langswitcher {
+    display: none; } }

assets/sass/main.scss

@@ -67,3 +67,4 @@
 // Grav Plugins.
 	
 	@import 'grav-plugins/page-toc.scss';
+	@import 'grav-plugins/langswitcher';

blueprints.yaml

@@ -1,7 +1,7 @@
 name: Future 2021
 slug: future2021
 type: theme
-version: 1.2.6
+version: 1.3.0
 description: Grav Future Imperfect by HTML5 UP (Version 2021)
 icon:  microchip
 author:

languages.yaml

@@ -246,7 +246,12 @@ en:
       PAGINATION:
         PREVIOUS: Previous
         NEXT: Next
-
+    DOWNLOADS:
+      TH_NAME: Name
+      TH_SIZE: Size
+      TH_MODIFIED: Modified
+      TH_DOWNLOAD: Download
+      TD_BUTTON: Download
     SIDEBAR:
       SIMPLE_SEARCH:
         HEADLINE: Search
@@ -521,7 +526,12 @@ de:
       PAGINATION:
         PREVIOUS: Vorherige
         NEXT: Nächste
-
+    DOWNLOADS:
+       TH_NAME: Name
+       TH_SIZE: Größe
+       TH_MODIFIED: Geändert
+       TH_DOWNLOAD: Herunterladen
+       TD_BUTTON: Herunterladen
     SIDEBAR:
       SIMPLE_SEARCH:
         HEADLINE: Suche
@@ -799,7 +809,12 @@ es:
       PAGINATION:
         PREVIOUS: Anterior
         NEXT: Siguiente
-
+    DOWNLOADS:
+      TH_NAME: Nombre
+      TH_SIZE: Tamaño
+      TH_MODIFIED: Modificado
+      TH_DOWNLOAD: Descarga
+      TD_BUTTON: Descargar
     SIDEBAR:
       SIMPLE_SEARCH:
         HEADLINE: Buscar

templates/downloads.html.twig

@@ -0,0 +1,55 @@
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+  <article class="post">
+    <header>
+      <div class="title">
+        <h1>{{ title }}</h1>
+        {% if subtitle %}
+          <p>{{ subtitle }}</p>
+        {% endif %}
+      </div>
+    </header>
+
+  {% if show_image and image %}
+      <span class="image featured">
+        {{ image.cropZoom(img_width, img_height).loading('lazy').attribute('decoding','async').html(title, title)|raw }}
+      </span>
+  {% endif %}
+
+    {{ page.content|raw }}
+
+    <table class="responsive">
+        <thead>
+            <tr>
+                <th><h3>{{ 'FUTURE.DOWNLOADS.TH_NAME'|t }}</h3></th>
+                <th><h3>{{ 'FUTURE.DOWNLOADS.TH_SIZE'|t }}</h3></th>
+                <th><h3>{{ 'FUTURE.DOWNLOADS.TH_MODIFIED'|t }}</h3></th>
+                <th><h3>{{ 'FUTURE.DOWNLOADS.TH_DOWNLOAD'|t }}</h3></th>
+            </tr>
+        </thead>
+        <tbody>
+        
+        {% for file in page.media.all %}
+            <tr>
+                {% include 'partials/download_item.html.twig' with {file: file} %}
+            </tr>
+        {% endfor %}
+        
+        </tbody>
+        </table>
+
+  </article>
+
+  {% if show_sidebar == false %}
+    <section id="footer" class="align-center">
+      {% include 'partials/sidebar-bits/footer.html.twig' %}
+    </section>
+  {% endif %}
+{% endblock %}
+
+{% block sidebar %}
+{% if show_sidebar == true %}
+  {% include 'partials/sidebar_left.html.twig' %}
+{% endif %}
+{% endblock %}

templates/forms/fields/privacy/privacy.html.twig

@@ -1,38 +0,0 @@
-{% extends "forms/field.html.twig" %}
-
-{% block label %}
-{% endblock %}
-
-{% block input %}
-  {% set id = field.id|default(field.name) ~ '-' ~ key %}
-
-  <div class="{{ form_field_wrapper_classes ?: 'form-input-wrapper' }} {{ field.size }} {{ field.wrapper_classes }}">
-    <input
-      {# required attribute structures #}
-      name="{{ (scope ~ field.name)|fieldName }}"
-      value="{{ field.value ?? '1' }}"
-      type="checkbox"
-      {% if value == field.value ?? '1' %} checked="checked" {% endif %}
-
-      {# input attribute structures #}
-      {% block input_attributes %}
-          id="{{ id|e }}"
-          {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
-          {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
-          {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
-          {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
-          {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
-          {% if required %}required="required"{% endif %}
-          {% if field.tabindex %}tabindex="{{ field.tabindex }}"{% endif %}
-      {% endblock %}
-    />
-    <label style="display:inline;" for="{{ id|e }}">
-      {% if field.markdown %}
-        {{ field.label|t|markdown(false) }}
-      {% else %}
-        {{field.label}}
-      {% endif %}
-      {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
-    </label>
-  </div>
-{% endblock %}

templates/partials/download_item.html.twig

@@ -0,0 +1,19 @@
+{% set datestamp = include('partials/page-bits/date.html.twig') %}
+{% set size = file.size/1024 %}
+{% set unit = "Kb" %}
+{% if size > 1023 %}
+    {% set size = size/1024 %}
+    {% set unit = "Mb" %}
+{% endif %}
+<td>
+    {{ file.filename|regex_replace(['/-/','/_/'], [' ',' ']) }}
+</td>
+<td>
+    {{ size|number_format(2, '.', ',') }}{{ unit }}
+</td>
+<td>
+    {{ datestamp }}
+</td>
+<td>
+    <a href="{{ file.url }}" class="button small" download>{{ 'FUTURE.DOWNLOADS.TD_BUTTON'|t }}</a>
+</td>