Skip to content

Commit

Permalink
Merge pull request #26 from chnm/refactor/api-data
Browse files Browse the repository at this point in the history 
refactor: Fixed if-else logic on button navigation
  • Loading branch information
@hepplerj
hepplerj authored Oct 9, 2024
2 parents f8892b3 + 8fcd26a commit 00e03e3
Showing 1 changed file with 50 additions and 46 deletions.
96 changes: 50 additions & 46 deletions exhibits/templates/exhibits/exhibit_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand Down

0 comments on commit 00e03e3

Please sign in to comment.