Improve and relocate back button

ktt-ol · Aug 20, 2024 · a6697dc · a6697dc
1 parent 53e002a
commit a6697dc
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 21 deletions.
diff --git a/sass/css/site.scss b/sass/css/site.scss
@@ -13,6 +13,9 @@ body {
     color: var(--bs-primary);
     padding: 0 0 0 1px;
     margin: 0.5em 0 0.5em 0;
+    height: 2.5rem - (0.167rem * $i);
+    max-height: 2rem;
+    min-height: 2rem;
     display: flex;
     justify-content: space-between;
     align-items: end;

diff --git a/templates/album/album-list.html b/templates/album/album-list.html
@@ -2,8 +2,31 @@
 {% import "macros.html" as macros %}
 
 {% block main %}
-    <h3>
+    <h3 class="d-flex justify-content-between">
         {{ section.title }}
+
+        {% if section.ancestors | length > 2 %}
+            {% set ancestor = get_section(path=section.ancestors | last) %}
+            <a class="btn btn-outline-primary btn-sm mb-1 d-flex" href="{{ ancestor.path }}">
+                <!-- Credit: https://icons.getbootstrap.com/icons/chevron-double-left/ -->
+                <svg class="align-self-center" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                     fill="currentColor" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd"
+                          d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"></path>
+                    <path fill-rule="evenodd"
+                          d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"></path>
+                </svg>
+
+                <!-- Credit: https://icons.getbootstrap.com/icons/images/ -->
+                <svg class="align-self-center" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                     viewBox="0 0 16 16">
+                    <path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"></path>
+                    <path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-1.998 2M14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 11V3a1 1 0 0 0-1-1M2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1z"></path>
+                </svg>
+
+                <span class="ms-1 align-self-center">{{ ancestor.title }}</span>
+            </a>
+        {% endif %}
     </h3>
 
     <div class="image-gallery">
@@ -88,28 +111,29 @@ <h3 class="p-0 m-0 text-white border-0"><span
                 {% set image_uri = page.extra.file_uri_300 %}
             {% endif %}
 
-            <a class="text-decoration-none" href="{{ page.path }}" style="height: {{ height }}px; width: {{ width }}px;">
+            <a class="text-decoration-none" href="{{ page.path }}"
+               style="height: {{ height }}px; width: {{ width }}px;">
                 <img alt=""
                      loading="lazy"
                      class="p-0"
                      decoding="async"
                      src="{{ image_uri }}"/>
                 {% set font_size = 12 %}
                 <div class="font-monospace position-absolute w-100 px-1 text-light justify-content-between text-truncate album-hover-info"
-                     style="background-color: rgba(var(--bs-primary-rgb), 30%); transform: translateY(-100%); font-size: {{font_size}}px; min-height: 3em">
-                    
+                     style="background-color: rgba(var(--bs-primary-rgb), 30%); transform: translateY(-100%); font-size: {{ font_size }}px; min-height: 3em">
+
                     <span class="text-start my-auto">{{ page.extra.filename }}</span>
-                    
+
                     {% if page.date | date(format="%Y") | int > 2000 %}
-                    {% set date_str = page.date | date(format="%d.%m.%Y") %}
-                    {% set date_size = date_str | length * (font_size * 0.6) %}
-                    {% set title_size = page.extra.filename | length * (font_size * 0.6) %}
-                    <pre class="d-none">{{date_str}}-{{date_size}}</pre>
-                    <pre class="d-none">{{title_size}}</pre>
-                    
-                    {% if date_size + title_size + font_size < width %}
-                    <span class="text-end my-auto">{{ page.date | date(format="%d.%m.%Y") }}<br>{{ page.date | date(format="%H:%M") }}</span>
-                    {% endif %}
+                        {% set date_str = page.date | date(format="%d.%m.%Y") %}
+                        {% set date_size = date_str | length * (font_size * 0.6) %}
+                        {% set title_size = page.extra.filename | length * (font_size * 0.6) %}
+                        <pre class="d-none">{{ date_str }}-{{ date_size }}</pre>
+                        <pre class="d-none">{{ title_size }}</pre>
+
+                        {% if date_size + title_size + font_size < width %}
+                            <span class="text-end my-auto">{{ page.date | date(format="%d.%m.%Y") }}<br>{{ page.date | date(format="%H:%M") }}</span>
+                        {% endif %}
                     {% endif %}
                 </div>
             </a>

diff --git a/templates/album/album-single.html b/templates/album/album-single.html
@@ -12,11 +12,30 @@
 
     <h3 class="d-flex justify-content-between">
         {{ page.title }}
-        <a class="btn btn-secondary btn-sm" href="{{ page.path }}..">
-            {{ page.title }}
-            <!--{# TODO: BETTER BUTTON PLACEMENT #}-->
-            <!--{# TODO: TOTAL AMOUNT #}-->
-        </a>
+
+        {% if page.ancestors | length > 2 %}
+            {% set ancestor = get_section(path=page.ancestors | last) %}
+            <a class="btn btn-outline-primary btn-sm mb-1 d-flex" href="{{ ancestor.path }}">
+                <!-- Credit: https://icons.getbootstrap.com/icons/chevron-double-left/ -->
+                <svg class="align-self-center" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                     fill="currentColor" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd"
+                          d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"></path>
+                    <path fill-rule="evenodd"
+                          d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"></path>
+                </svg>
+
+                <!-- Credit: https://icons.getbootstrap.com/icons/images/ -->
+                <svg class="align-self-center" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                     fill="currentColor"
+                     viewBox="0 0 16 16">
+                    <path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"></path>
+                    <path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-1.998 2M14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 11V3a1 1 0 0 0-1-1M2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1z"></path>
+                </svg>
+
+                <span class="ms-1 align-self-center">{{ ancestor.title }}</span>
+            </a>
+        {% endif %}
     </h3>
 
     <div class="d-flex justify-content-around">

diff --git a/templates/blog.html b/templates/blog.html
@@ -2,12 +2,47 @@
 {% import "macros.html" as macros %}
 
 {% block content %}
+    <div class="d-flex justify-content-end">
+        {% if section.subsections | length > 0 %}
+            <div class="d-flex flex-wrap justify-content-center">
+                {% for sub_path in section.subsections | sort | reverse %}
+                    {% set subsection = get_section(path=sub_path) %}
+                    <a class="btn btn-sm btn-outline-primary my-1 ms-1" href="{{ subsection.path }}">
+                        {{ subsection.title }}
+                    </a>
+                {% endfor %}
+            </div>
+        {% else %}
+            {% set ancestor = get_section(path=section.ancestors | last) %}
+            <a class="btn btn-outline-primary btn-sm mb-1 d-flex" href="{{ ancestor.path }}">
+                <!-- Credit: https://icons.getbootstrap.com/icons/chevron-double-left/ -->
+                <svg class="align-self-center" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                     fill="currentColor" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd"
+                          d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"></path>
+                    <path fill-rule="evenodd"
+                          d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"></path>
+                </svg>
+
+                <!-- Credit: https://icons.getbootstrap.com/icons/newspaper/ -->
+                <svg class="align-self-center" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                     viewBox="0 0 16 16">
+                    <path d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5z"></path>
+                    <path d="M2 3h10v2H2zm0 3h4v3H2zm0 4h4v1H2zm0 2h4v1H2zm5-6h2v1H7zm3 0h2v1h-2zM7 8h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2z"></path>
+                </svg>
+
+                <span class="ms-1 align-self-center">{{ ancestor.title }}</span>
+            </a>
+        {% endif %}
+    </div>
+    <hr/>
+
     {% if paginator.current_index > 1 %}
         <a class="btn btn-outline-primary w-100" href="{{ paginator.previous }}">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                  class="bi bi-arrow-bar-up" viewBox="0 0 16 16">
                 <path fill-rule="evenodd"
-                      d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5m-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5"/>
+                      d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5m-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5"></path>
             </svg>
         </a>
     {% endif %}
@@ -18,7 +53,7 @@
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                  class="bi bi-arrow-bar-down" viewBox="0 0 16 16">
                 <path fill-rule="evenodd"
-                      d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5M8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6"/>
+                      d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5M8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6"></path>
             </svg>
         </a>
     {% endif %}