Improved styles for relatedpages section

pmoreno-rodriguez · Nov 6, 2024 · 4a4fcd8 · 4a4fcd8
1 parent 86a71d9
commit 4a4fcd8
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 32 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -3646,4 +3646,8 @@ ul.blog-items p.blog-datestamp {
 /* Notices */
 .notices p {
   margin: 1rem 0;
+}
+
+#relatedpages .row > .col-8 {
+  padding-left: 0.2em;
 }
diff --git a/assets/css/main.min.css b/assets/css/main.min.css
diff --git a/assets/sass/gravcms/_relatedpages.scss b/assets/sass/gravcms/_relatedpages.scss
@@ -0,0 +1,3 @@
+#relatedpages .row>.col-8 {
+    padding-left: 0.2em;
+}
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -63,3 +63,4 @@
 	@import 'gravcms/blog-items';
 	@import 'gravcms/simplesearch';
 	@import 'gravcms/notices';
+	@import 'gravcms/relatedpages';
diff --git a/templates/partials/relatedpages.html.twig b/templates/partials/relatedpages.html.twig
@@ -22,35 +22,33 @@
     <header class="major">
         <h2>{{ 'EDITORIAL.SIDEBAR.RELATEDPAGES_SECTION'|t }}</h2>
     </header>
-<ul class="actions aln-left">
-    {% for related_path, score in related_pages %}
-        {% set related = grav['pages'].get(related_path) %}
-        {% if related %}
-        {% set related_image = related.media.images[related.header.featured_image] ?: related.media.images|first %}
-            <li>
-                <div class="row aln-between">
-                    {% if related.taxonomy.category is not null %}
-                        {% if related_image is not empty %}
-                            <div class="col-4">
-                                <a class="image" aria-label="{{ related.title }}" href="{{ related.url }}">
-                                    {{ related_image.cropResize(64,64).loading('lazy').attribute('decoding','async').html|raw }}
-                                </a>
-                            </div>
+    <div>
+        {% for related_path, score in related_pages %}
+            {% set related = grav['pages'].get(related_path) %}
+            {% if related %}
+            {% set related_image = related.media.images[related.header.featured_image] ?: related.media.images|first %}
+                    <div class="row aln-left">
+                        {% if related.taxonomy.category is not null %}
+                            {% if related_image is not empty %}
+                                <div class="col-4">
+                                    <a class="image" aria-label="{{ related.title }}" href="{{ related.url }}">
+                                        {{ related_image.cropZoom(64,48).loading('lazy').decoding('async').html|raw }}
+                                    </a>
+                                </div>
+                            {% endif %}
+                                <div class="{% if related_image is not empty %}col-8 {% else %} col-12 {% endif %}">
+                                    <a class="align-left" href="{{ related.url }}" title="{{ related.title }}" rel="nofollow">{{ related.title }}</a>
+                                    <small class="published">
+                                        {{ 'EDITORIAL.MISC.IN'|t }} <span class="catlist">
+                                        {% for category in related.taxonomy.category %}
+                                            <a class="" href="{{ new_base_url }}/category{{ config.system.param_sep }}{{ category }}">{{ category|raw }}</a>{% if not loop.last %}<span class="sep">, </span>{% endif %}
+                                        {% endfor %}
+                                        </span>
+                                    </small>
+                                </div>
                         {% endif %}
-                            <div class="{% if related_image is not empty %}col-8 {% else %} col-12 {% endif %}">
-                                <a class="" href="{{ related.url }}" title="{{ related.title }}" rel="nofollow">{{ related.title }}</a>
-                                <small class="published">
-                                    {{ 'EDITORIAL.MISC.IN'|t }} <span class="catlist">
-                                    {% for category in related.taxonomy.category %}
-                                        <a class="" href="{{ new_base_url }}/category{{ config.system.param_sep }}{{ category }}">{{ category|raw }}</a>{% if not loop.last %}<span class="sep">, </span>{% endif %}
-                                    {% endfor %}
-                                    </span>
-                                </small>
-                            </div>
-                    {% endif %}
-                </div>
-            </li>
-        {% endif %}
-    {% endfor %}
-</ul>
+                    </div>
+            {% endif %}
+        {% endfor %}
+    </div>
 </section>
diff --git a/templates/partials/sidebar.html.twig b/templates/partials/sidebar.html.twig
@@ -83,7 +83,7 @@
         {% endif %}
 
         {# Show Related Pages if plugin is enabled #}
-        {% if showRelatedPages and page.template == 'blog' %}
+        {% if showRelatedPages %}
             {% include 'partials/relatedpages.html.twig' %}
         {% endif %}