From ac08b1fc8475bde40bdd090f06b4da86a6df19bc Mon Sep 17 00:00:00 2001
From: Nick Pegg <nick@nickpegg.com>
Date: Sun, 4 Aug 2024 08:25:16 -0700
Subject: [PATCH] handle next/prev image in an album

---
 photoalbum/generate.py                | 11 ++++++-
 photoalbum/skel/_templates/album.html | 12 ++++---
 photoalbum/skel/_templates/photo.html | 22 +++++++++++--
 photoalbum/skel/static/index.css      | 45 +++++++++++++++++++++++++++
 4 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/photoalbum/generate.py b/photoalbum/generate.py
index b041239..ddd4975 100644
--- a/photoalbum/generate.py
+++ b/photoalbum/generate.py
@@ -169,7 +169,7 @@ def generate_html(config: Config, root_dir: ImageDirectory) -> None:
                     )
                 )
 
-            for image_path in album_dir.images:
+            for pos, image_path in enumerate(album_dir.images):
                 # TODO: If a file with a matching name but .txt or .md, add that as the
                 # description for the image
                 html_path = image_path.html_path()
@@ -178,12 +178,21 @@ def generate_html(config: Config, root_dir: ImageDirectory) -> None:
                 ) / "static"
                 html_path.parent.mkdir(exist_ok=True)
 
+                prev_image = None
+                next_image = None
+                if pos != 0:
+                    prev_image = album_dir.images[pos-1]
+                if pos < len(album_dir.images) - 1:
+                    next_image = album_dir.images[pos+1]
+
                 logger.debug(f"Rendering {html_path}")
                 with html_path.open("w") as f:
                     f.write(
                         photo_tmpl.render(
                             static_dir=static_path,
                             image_path=image_path,
+                            prev_image=prev_image,
+                            next_image=next_image,
                         )
                     )
 
diff --git a/photoalbum/skel/_templates/album.html b/photoalbum/skel/_templates/album.html
index 9985b0d..819a16c 100644
--- a/photoalbum/skel/_templates/album.html
+++ b/photoalbum/skel/_templates/album.html
@@ -3,21 +3,23 @@
 {% block content %}
     {% if not album_dir.is_root %}
         <p>
-            <a href="..">up</a>
+            <a href="..">
+                <i class="arrow arrow-up"></i>
+            </a>
         </p>
     {% endif %}
 
     {% if album_dir.children %}
         <h1>Albums</h1>
-        <div id="album-children">
+        <ul id="album-children">
             {% for child in album_dir.children %}
-                <div class="album">
+                <li class="album">
                     <a href="{{child.path.name}}/">
                         {{child.path.name}}
                     </a>
-                </div>
+                </li>
             {% endfor %}
-        </div>
+        </ul>
     {% endif %}
 
     {% if album_dir.images %}
diff --git a/photoalbum/skel/_templates/photo.html b/photoalbum/skel/_templates/photo.html
index 12302f8..82aa97c 100644
--- a/photoalbum/skel/_templates/photo.html
+++ b/photoalbum/skel/_templates/photo.html
@@ -2,9 +2,25 @@
 
 {% block content %}
 <div id="nav">
-    prev
-    <a href="..">up</a>
-    next
+    <div>
+        {% if prev_image %}
+            <a href="{{prev_image.html_filename()}}">
+                <i class="arrow arrow-left"></i>
+            </a>
+        {% endif %}
+    </div>
+    <div>
+        <a href="..">
+            <i class="arrow arrow-up"></i>
+        </a>
+    </div>
+    <div>
+        {% if next_image %}
+            <a href="{{next_image.html_filename()}}">
+                <i class="arrow arrow-right"></i>
+            </a>
+        {% endif %}
+    </div>
 </div>
 
 <div id="photo">
diff --git a/photoalbum/skel/static/index.css b/photoalbum/skel/static/index.css
index f9325a8..f5ba8c6 100644
--- a/photoalbum/skel/static/index.css
+++ b/photoalbum/skel/static/index.css
@@ -4,6 +4,18 @@ body {
 #content {
   width: 1500px;
   text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#content > * {
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ul {
+  padding-left: 1.5em;
 }
 
 #album-photos {
@@ -17,3 +29,36 @@ body {
   display: flex;
   align-items: center;
 }
+
+#nav {
+  width: 150px;
+  margin: auto;
+  display: flex;
+  padding: 0.5em;
+}
+
+#nav div {
+  width: 50px;
+}
+
+.arrow {
+  border: solid black;
+  border-width: 0 3px 3px 0;
+  display: inline-block;
+  padding: 3px;
+}
+
+.arrow-right {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+
+.arrow-left {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
+
+.arrow-up {
+  transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+}