From 8fcd26ac1f04a942b9b35c4eafdcaff1954c432d Mon Sep 17 00:00:00 2001
From: Jason Heppler <jason.heppler@gmail.com>
Date: Wed, 9 Oct 2024 15:12:02 -0500
Subject: [PATCH] refactor: Fixed if-else logic on button navigation

---
 exhibits/templates/exhibits/exhibit_page.html | 96 ++++++++++---------
 1 file changed, 50 insertions(+), 46 deletions(-)

diff --git a/exhibits/templates/exhibits/exhibit_page.html b/exhibits/templates/exhibits/exhibit_page.html
index 96259af..3c55e53 100644
--- a/exhibits/templates/exhibits/exhibit_page.html
+++ b/exhibits/templates/exhibits/exhibit_page.html
@@ -923,28 +923,32 @@ <h1>{{ page.title }}</h1>
           <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css" />
         {% elif page.image %}
           {% image page.image original class="w-full max-h-[80vh] object-contain" %}
-          <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 right-0 m-4 hidden md:block">
-            <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
-              {% if page.image_caption %}
-                <button @click="openCaption = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
-                  Caption
-                </button>
-              {% endif %}
+        {% endif  %}
+        <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 right-0 m-4 hidden md:block">
+          <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
+            {% if page.image_caption %}
+              <button @click="openCaption = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
+                Caption
+              </button>
+            {% endif %}
+            {% if page.image %}
               <button @click="openImage = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                 View Full Image
               </button>
-            </div>
-            {% if page.image_caption %}
-              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak
-                   class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
-                <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
-                  &times;
-                </button>
-                <p class="text-sm">
-                  {{ page.image_caption }}
-                </p>
-              </div>
             {% endif %}
+          </div>
+          {% if page.image_caption %}
+            <div :class="{ 'hidden': !openCaption }" x-transition x-cloak
+                 class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
+              <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
+                &times;
+              </button>
+              <p class="text-sm">
+                {{ page.image_caption }}
+              </p>
+            </div>
+          {% endif %}
+          {% if page.image %}
             <div :class="{ 'hidden': !openImage }" x-transition x-cloak
                  class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
               <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4 max-h-screen overflow-y-auto">
@@ -961,38 +965,38 @@ <h1>{{ page.title }}</h1>
                 {% endif %}
               </div>
             </div>
-          </div>
-          <div class="absolute top-0 right-0 m-4 hidden md:block mt-16">
-            <div class="flex flex-col items-center mb-2 space-y-2">
-              <div class="flex space-x-2">
-                {% if page.link_to_previous_page %}
-                  <a href="{% pageurl page.link_to_previous_page %}"
-                     class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                    Previous
-                  </a>
-                {% endif %}
-                {% if page.link_to_next_page %}
-                  <a href="{% pageurl page.link_to_next_page %}"
-                     class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                    Next
-                  </a>
-                {% endif %}
-              </div>
-              <div class="flex flex-col items-center space-y-2">
-                <a href="/#exhibits"
+          {% endif %}
+        </div>
+        <div class="absolute top-0 right-0 m-4 hidden md:block mt-16">
+          <div class="flex flex-col items-center mb-2 space-y-2">
+            <div class="flex space-x-2">
+              {% if page.link_to_previous_page %}
+                <a href="{% pageurl page.link_to_previous_page %}"
                    class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                  Take me to the beginning
+                  Previous
                 </a>
-                {% if page.link_to_subsection %}
-                  <a href="{% pageurl page.link_to_subsection %}"
-                     class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                    Skip to next section
-                  </a>
-                {% endif %}
-              </div>
+              {% endif %}
+              {% if page.link_to_next_page %}
+                <a href="{% pageurl page.link_to_next_page %}"
+                   class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                  Next
+                </a>
+              {% endif %}
+            </div>
+            <div class="flex flex-col items-center space-y-2">
+              <a href="/#exhibits"
+                 class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                Take me to the beginning
+              </a>
+              {% if page.link_to_subsection %}
+                <a href="{% pageurl page.link_to_subsection %}"
+                   class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                  Skip to next section
+                </a>
+              {% endif %}
             </div>
           </div>
-        {% endif %}
+        </div>
 
         {% for item in page.gallery_images.all %}
           <div style="float: inline-start; margin: 10px">