From c0775455830c91d489cf2e48c55162616a1b4c2a Mon Sep 17 00:00:00 2001
From: Stefan Brand <seiichiro@seiichiro0185.org>
Date: Sat, 9 Dec 2023 15:44:57 +0100
Subject: [PATCH] Some Small Layout and Navigation Improvements

---
 css/style.css    | 33 +++++++++++++++++++++++++++------
 tpl/gallery.html | 31 +++++++++++++++++--------------
 tpl/single.html  | 26 +++++++++++++++++++-------
 3 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/css/style.css b/css/style.css
index fb98f33..931a0a5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -250,7 +250,7 @@ input[type=checkbox]{
 
 .content-single .clickable-left {
   grid-column: 1 / 2;
-  grid-row: 1 / 2;
+  grid-row: 1 / 3;
 }
 
 .content-single .clickable-center {
@@ -260,7 +260,7 @@ input[type=checkbox]{
 
 .content-single .clickable-right {
   grid-column: 3 / 4;
-  grid-row: 1 / 2;
+  grid-row: 1 / 3;
 }
 
 /* Error Page */
@@ -275,8 +275,7 @@ input[type=checkbox]{
 /* Page Footer Styling */
 .page-footer {
   padding: 8px;
-  margin: 10px 0px 0px 0px;
-  
+
   background-color: #404040;
   color: #c0c0c0;
 
@@ -289,7 +288,8 @@ input[type=checkbox]{
 
   text-align: center;
 
-  overflow: auto;
+  display: grid;
+  grid-template-columns: 8em 1fr 8em;
 }
 
 .page-footer a {
@@ -301,7 +301,7 @@ input[type=checkbox]{
   text-decoration: none;
 }
 
-.page-footer .info {
+.page-footer .info-item {
   margin-left: 0.5em;
   margin-right: 0.5em;
   font-size: 2em;
@@ -309,6 +309,11 @@ input[type=checkbox]{
   color: #ffffff;
 }
 
+.page-footer .tags {
+  grid-column: 2 / 3;
+  overflow: auto;
+}
+
 .page-footer .tag {
   margin-left: 0.5em;
   margin-right: 0.5em;
@@ -316,3 +321,19 @@ input[type=checkbox]{
   font-weight: normal !important;
   color: #00ff00;
 }
+
+.page-footer .footer-nav-left {
+  grid-column: 1 / 2;
+  width: 8em;
+  text-align: left;
+}
+
+.page-footer .footer-nav-right {
+  grid-column: 3 / 4;
+  width: 8em;
+  text-align: right;
+}
+
+.page-footer .footer-nav-right a {
+  padding-right: 16px;
+}
\ No newline at end of file
diff --git a/tpl/gallery.html b/tpl/gallery.html
index e1ce3a2..a9d37c1 100644
--- a/tpl/gallery.html
+++ b/tpl/gallery.html
@@ -51,20 +51,23 @@
   {% endif %}
   </div>
   <div class="page-footer">
-    {% if ($page > 1): %}
-    <a id="link-first" href="/index.php?d={{ $dir }}&so={{ $sort }}&p=1&s={{ $slice }}{{ $filter }}">1</a>
-    <a id="link-prev" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s={{ $slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-left"></i>&nbsp;</a>
-    {% endif %}
-    
-    {% if ($sort == 1): %}
-    <a class="info" href="/index.php?d={{ $dir }}&so=0&p={{ $page }}&s={{ $slice }}{{ $filter }}"><i class="fa fa-caret-down"></i>&nbsp;{{ $page }}</a>
-    {% else: %}
-    <a class="info" href="/index.php?d={{ $dir }}&so=1&p={{ $page }}&s={{ $slice }}{{ $filter }}"><i class="fa fa-caret-up"></i>&nbsp;{{ $page }}</a>
-    {% endif %}
-    {% if ($page < $last_page): %}
-    <a id="link-next" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s={{ $slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-right"></i>&nbsp;</a>
-    <a id="link-last" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $last_page }}&s={{ $slice }}{{ $filter }}">{{ $last_page }}</a>
-    {% endif %}
+    <div>&nbsp;</div>
+    <div class="info"></div>
+      {% if ($page > 1): %}
+      <a id="link-first" href="/index.php?d={{ $dir }}&so={{ $sort }}&p=1&s={{ $slice }}{{ $filter }}">1</a>
+      <a id="link-prev" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s={{ $slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-left"></i>&nbsp;</a>
+      {% endif %}
+
+      {% if ($sort == 1): %}
+      <a class="info" href="/index.php?d={{ $dir }}&so=0&p={{ $page }}&s={{ $slice }}{{ $filter }}"><i class="fa fa-caret-down"></i>&nbsp;{{ $page }}</a>
+      {% else: %}
+      <a class="info" href="/index.php?d={{ $dir }}&so=1&p={{ $page }}&s={{ $slice }}{{ $filter }}"><i class="fa fa-caret-up"></i>&nbsp;{{ $page }}</a>
+      {% endif %}
+      {% if ($page < $last_page): %}
+      <a id="link-next" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s={{ $slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-right"></i>&nbsp;</a>
+      <a id="link-last" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $last_page }}&s={{ $slice }}{{ $filter }}">{{ $last_page }}</a>
+      {% endif %}
+    </div>
   </div>
 </div>
 {% endblock %}
diff --git a/tpl/single.html b/tpl/single.html
index 125bf85..2293fd6 100644
--- a/tpl/single.html
+++ b/tpl/single.html
@@ -12,7 +12,7 @@
   {% endif %}
   {% if(str_starts_with($filetype, 'video/')): %}
     <div class="single-video">
-      <video controls muted loop>
+      <video controls loop>
         <source src='{{ $imageurl }}' type='{{ $filetype }}'>
       </video>
     </div>
@@ -20,27 +20,39 @@
     <div class="single-image">
       <img src='{{ $imageurl }}' title="{{ $page }}/{{ $last_page }}" />
     </div>
-  {% endif %}
     {% if ($page > 1): %}
-    <a id="link-prev" class="clickable clickable-left" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">
+    <a class="clickable clickable-left" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">
       <div></div>
     </a>
     {% endif %}
-    <a id="link-home" class="clickable clickable-center" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $gallery_page }}&s={{ $gallery_slice }}{{ $filter }}">
+    <a class="clickable clickable-center" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $gallery_page }}&s={{ $gallery_slice }}{{ $filter }}">
       <div></div>
     </a>
     {% if ($page < $last_page): %}
-    <a id="link-next" class="clickable clickable-right" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">
+    <a class="clickable clickable-right" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">
       <div></div>
     </a>
     {% endif %}
+  {% endif %}
   </div>
-  {% if(!empty($tags)): %}
   <div class="page-footer">
+    <div class="footer-nav footer-nav-left">
+      {% if ($page > 1): %}
+      <a id="link-prev" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-left"></i>&nbsp;</a>
+      {% endif %}
+      <a id="link-home" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $gallery_page }}&s={{ $gallery_slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-up"></i>&nbsp;</a>
+    </div>
+    <div class="tags">
     {% foreach($tags as $tag): %}
     <a href="/index.php?d={{ $dir }}&so={{ $sort }}&s={{ $gallery_slice }}&f={{{ $tag }}}"><span class="tag">{{ $tag }}</span></a>
     {% endforeach %}
+    </div>
+    <div class="footer-nav footer-nav-right">
+      {% if ($page < $last_page): %}
+      <a id="link-next" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-right"></i>&nbsp;</a>
+      {% endif %}
+    </div>
+  </div>
   </div>
-  {% endif %}
 </div>
 {% endblock %}