From 54fd5283025a70e60844a8cb6b7af4e845d6cb31 Mon Sep 17 00:00:00 2001
From: Daniel Jackson <daniel@snilldesign.no>
Date: Thu, 14 Mar 2024 15:16:32 +0100
Subject: [PATCH] Refine opening spaces in sidebar. Works pretty well now!

---
 app/views/space_images/_image_slider.html.erb |  4 +--
 .../spaces/_back_to_search_button.html.erb    | 25 +++++++++++++++++++
 .../spaces/index/_space_listing.html.erb      |  7 +++++-
 app/views/spaces/show.html.erb                | 19 +-------------
 app/views/spaces/show/_image_header.html.erb  |  4 +--
 5 files changed, 36 insertions(+), 23 deletions(-)
 create mode 100644 app/views/spaces/_back_to_search_button.html.erb

diff --git a/app/views/space_images/_image_slider.html.erb b/app/views/space_images/_image_slider.html.erb
index e0c8b202..b7d19a3b 100644
--- a/app/views/space_images/_image_slider.html.erb
+++ b/app/views/space_images/_image_slider.html.erb
@@ -23,10 +23,10 @@
             <% end %>
         >
           <img data-splide-lazy="<%= image.url %>" />
-          <div class="absolute bottom-1 left-1 right-1 flex justify-between gap-2">
+          <div class="absolute bottom-2 left-2 right-2 flex justify-between gap-2">
             <% if defined?(show_caption_credits) && show_caption_credits %>
               <% if image.caption&.present? %>
-                <div class="truncate max-w-full bold rounded bg-black bg-opacity-80 text-white text-opacity-80 py-1 px-2">
+                <div class="truncate max-w-full ml-14 bold rounded bg-black bg-opacity-80 text-white text-opacity-80 py-1 px-2">
                   <%= image.caption %>
                 </div>
               <% end %>
diff --git a/app/views/spaces/_back_to_search_button.html.erb b/app/views/spaces/_back_to_search_button.html.erb
new file mode 100644
index 00000000..05936ff3
--- /dev/null
+++ b/app/views/spaces/_back_to_search_button.html.erb
@@ -0,0 +1,25 @@
+<div class="hidden md:block h-0 w-fit sticky top-2  inset-x-auto mx-auto md:right-2 md:mr-0 z-100">
+  <%= link_to spaces_path,
+              data: {
+                "turbo-frame": "spaces-open-here", # This updates the spaces-open-here frame
+                "turbo-action": "advance" # And updates browser history
+              },
+              class:"
+                    show-only-if-inside-space-open-in-sidebar
+                    inline-block
+                    unstyled-link
+                    rounded-xl
+                    bg-white
+                    hover:bg-lnu-pink focus:bg-lnu-pink
+                    hover:text-white focus:text-white
+                    hover:fill-white focus:fill-white
+                    shadow-xl"  do %>
+    <span class="inline-flex md:hidden gap-0.5 items-center py-2 pl-3 pr-4">
+      <%= inline_svg "search" %> Tilbake til søket
+    </span>
+    <span class="hidden md:inline-flex gap-0.5 items-center py-2 pl-3 pr-4">
+      <%= inline_svg "x" %> Lukk
+    </span>
+<% end %>
+
+</div>
diff --git a/app/views/spaces/index/_space_listing.html.erb b/app/views/spaces/index/_space_listing.html.erb
index 7ddc5931..8474cdfd 100644
--- a/app/views/spaces/index/_space_listing.html.erb
+++ b/app/views/spaces/index/_space_listing.html.erb
@@ -2,7 +2,12 @@
   Partial for rendering a space listing in the search results.
 %>
 
-<%= link_to space_path(space), class: "unstyled-link space-listing", data: {"turbo-frame": "spaces-open-here" } do %>
+<%= link_to space_path(space),
+            class: "unstyled-link space-listing",
+            data: {
+              "turbo-frame": "spaces-open-here", # This updates the spaces-open-here frame
+              "turbo-action": "advance" # And updates browser history
+            } do %>
 
   <div class="mt-4 mb-12 max-w-lg">
 
diff --git a/app/views/spaces/show.html.erb b/app/views/spaces/show.html.erb
index d051293f..1b688aca 100644
--- a/app/views/spaces/show.html.erb
+++ b/app/views/spaces/show.html.erb
@@ -6,24 +6,7 @@
   Styled in part by content.scss
 %>
 <%= turbo_frame_tag "spaces-open-here", target: "_top" do %>
-  <button class=" show-only-if-inside-space-open-in-sidebar
-                  absolute top-5
-                  z-10
-                  p-1 px-3
-                  mr-4 mt-24 md:mt-2
-                  rounded-xl
-                  border-lnu-pink border-2
-                  bg-white
-                  hover:bg-lnu-pink focus:bg-lnu-pink
-                  hover:text-white focus:text-white
-                  hover:fill-white focus:fill-white
-                  shadow-xl
-
-  "
-
-          onclick="document.getElementById('spaces-open-here').innerHTML = ''">
-    Tilbake til kartet
-  </button>
+  <%= render 'back_to_search_button' %>
   <main
     class="max-w-prose mx-auto w-full">
       <%= render partial: "spaces/show/image_header"  %>
diff --git a/app/views/spaces/show/_image_header.html.erb b/app/views/spaces/show/_image_header.html.erb
index 80bd4bb1..1918a1e4 100644
--- a/app/views/spaces/show/_image_header.html.erb
+++ b/app/views/spaces/show/_image_header.html.erb
@@ -8,12 +8,12 @@
       link_to_fullscreen: true,
       show_caption_credits: true
     } %>
-    <div class="absolute right-2 top-2">
+    <div class="absolute bottom-2 left-2">
       <div>
         <%= render partial: 'spaces/show/image_header_upload_button' %>
       </div>
     </div>
-    <div class="absolute right-2 top-14">
+    <div class="absolute bottom-14 left-2">
       <div>
         <%= render partial: 'spaces/show/image_header_edit_button' %>
       </div>