handle next/prev image in an album

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 %}

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">

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);
+}