Some Small Layout and Navigation Improvements

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,7 +275,6 @@ 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;
+}

tpl/gallery.html

@@ -51,6 +51,8 @@
   {% endif %}
   </div>
   <div class="page-footer">
+    <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>
@@ -66,5 +68,6 @@
       <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 %}

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>
 </div>
 {% endblock %}