Refine opening spaces in sidebar. Works pretty well now!

lnu-norge · Mar 14, 2024 · 54fd528 · 54fd528
1 parent 396e9e9
commit 54fd528
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>