Merge pull request #239 from lnu-norge/open-spaces-over-map

Open spaces over map
lnu-norge · Mar 14, 2024 · 84543e6 · 84543e6
2 parents d3aeee8 + 54fd528
commit 84543e6
Show file tree

Hide file tree

Showing 12 changed files with 125 additions and 60 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -15,6 +15,7 @@
 @import "./map.css";
 @import "./modal.css";
 @import "./radio_slider.css";
+@import "./show-only-if-inside-space-open-in-sidebar.css";
 @import "./space_index.css";
 @import "./star_picker.css";
 @import "./tom_select.css";
diff --git a/app/assets/stylesheets/show-only-if-inside-space-open-in-sidebar.css b/app/assets/stylesheets/show-only-if-inside-space-open-in-sidebar.css
@@ -0,0 +1,7 @@
+.show-only-if-inside-space-open-in-sidebar {
+    display: none;
+}
+
+.space-open-in-sidebar .show-only-if-inside-space-open-in-sidebar {
+    display: inherit;
+}
diff --git a/app/javascript/controllers/mapbox_controller.js b/app/javascript/controllers/mapbox_controller.js
@@ -18,12 +18,6 @@ export default class extends Controller {
     mapboxgl.accessToken = this.element.dataset.apiKey;
 
     await this.parseUrl();
-
-    // When you hit the back button, the page will reload.
-    // Even if the history was set with replaceState or pushState.
-    window.onpopstate = () => {
-      location.reload();
-    };
   }
 
   showSearchBox() {
@@ -55,9 +49,16 @@ export default class extends Controller {
     this.map = new mapboxgl.Map({
       container: 'map-frame',
       style: 'mapbox://styles/mapbox/streets-v11',
+      trackResize: true,
       ...options,
     });
 
+    // Set up a resize observer as well
+    const resizeObserver = new ResizeObserver(() => {
+      this.map.resize();
+    });
+    resizeObserver.observe(document.getElementById('map-frame'));
+
     this.setupEventCallbacks();
 
     // Hash for storing markers, based on
@@ -362,7 +363,7 @@ export default class extends Controller {
   moveMapToFitBounds(bounds) {
     console.log(bounds)
     this.map.fitBounds(bounds, {
-      padding: 10,
+      padding: 0,
       animate: false
     }, {
       wasZoom: true,

diff --git a/app/models/image.rb b/app/models/image.rb
@@ -8,6 +8,9 @@ class Image < ApplicationRecord
 
   before_destroy :delete_image
 
+  # Default to order by newest first. TODO: Add some way to order images manually
+  default_scope { order(created_at: :desc) }
+
   def url
     Rails.application.routes.url_helpers.url_for(image)
   end

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.html.erb b/app/views/spaces/index.html.erb
@@ -9,7 +9,9 @@
     <%= render 'spaces/index/filters' %>
   </nav>
   <div class="relative flex flex-col-reverse md:flex-row md:flex-1">
-    <div class="relative rounded-t-xl -mt-8 z-4 bg-white
+    <div class="relative z-4
+                bg-white md:shadow-2xl
+                rounded-t-xl -mt-8
                 md:mt-0 md:rounded-none
                 md:max-w-md md:w-1/2 md:min-w-[14rem]
                 md:overscroll-contain md:overflow-y-auto
@@ -18,10 +20,25 @@
       <%= render 'spaces/index/handlebar_for_mobile' %>
       <div id="space-listing" class="px-4 md:py-8"></div>
     </div>
-    <div class="h-screen-3/5 md:pb-0
-    md:h-screen-below-desktop-menu
+    <div
+      class="h-screen-3/5 md:pb-0
+    md:h-screen-below-desktop-menu md:relative
     w-full md:w-min-1/2">
-      <%= render 'spaces/index/map' %>
+      <%= turbo_frame_tag "spaces-open-here",
+                          target: "_top",
+                          class: "empty:hidden
+                                  peer/space
+                                  space-open-in-sidebar
+                                  fixed inset-0 bottom-24 z-5
+                                  md:absolute md:inset-0 md:z-3
+                                  3xl:w-1/2 3xl:right-auto
+                                  3xl:shadow-2xl
+                                  3xl:px-4
+                                  overscroll-contain
+                                  overflow-y-auto
+                                  bg-white"
+      %>
+      <%= render "spaces/index/map" %>
     </div>
   </div>
 </div>
diff --git a/app/views/spaces/index/_map.html.erb b/app/views/spaces/index/_map.html.erb
@@ -1,4 +1,4 @@
-<div class="relative w-full h-full md:h-full">
+<div class="relative h-full md:h-full w-full pl-1/2 peer-empty/space:pl-0">
   <link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet">
   <div class="w-full h-full md:h-full" id="map-frame"></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" 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
@@ -5,59 +5,64 @@
 
   Styled in part by content.scss
 %>
-<main class="max-w-prose mx-auto w-screen">
-  <%= render partial: "spaces/show/image_header"  %>
+<%= turbo_frame_tag "spaces-open-here", target: "_top" do %>
+  <%= render 'back_to_search_button' %>
+  <main
+    class="max-w-prose mx-auto w-full">
+      <%= render partial: "spaces/show/image_header"  %>
 
-  <section class="content px-4 pb-8">
 
-    <%= render partial: 'spaces/show/basics' %>
+      <section class="content px-4 pb-8">
 
-    <hr />
+        <%= render partial: 'spaces/show/basics' %>
 
-    <%= inline_editable :how_to_book  do %>
-      <%= render_space_and_group_field @space, :how_to_book %>
-    <% end %>
-    <%= render 'space_contacts/index' %>
+        <hr />
 
-    <hr />
+        <%= inline_editable :how_to_book  do %>
+          <%= render_space_and_group_field @space, :how_to_book %>
+        <% end %>
+        <%= render 'space_contacts/index' %>
 
-    <%= render partial: 'spaces/show/facilities' %>
-    <hr />
+        <hr />
 
-    <%= inline_editable :who_can_use  do %>
-      <%= render_space_and_group_field @space, :who_can_use %>
-    <% end %>
-    <hr />
+        <%= render partial: 'spaces/show/facilities' %>
+        <hr />
 
-    <%= inline_editable :pricing do %>
-      <%= render_space_and_group_field @space, :pricing %>
-    <% end %>
-    <hr />
+        <%= inline_editable :who_can_use  do %>
+          <%= render_space_and_group_field @space, :who_can_use %>
+        <% end %>
+        <hr />
 
-    <%= render partial: 'spaces/show/where' %>
-    <hr />
+        <%= inline_editable :pricing do %>
+          <%= render_space_and_group_field @space, :pricing %>
+        <% end %>
+        <hr />
 
-    <%= inline_editable :more_info do %>
-      <%= render_space_and_group_field @space, :more_info %>
-    <% end %>
-    <hr />
+        <%= render partial: 'spaces/show/where' %>
+        <hr />
 
-    <%= inline_editable :terms do %>
-      <%= render_space_and_group_field @space, :terms %>
-    <% end %>
-    <hr />
+        <%= inline_editable :more_info do %>
+          <%= render_space_and_group_field @space, :more_info %>
+        <% end %>
+        <hr />
 
-    <%= render partial: 'spaces/show/reviews' %>
+        <%= inline_editable :terms do %>
+          <%= render_space_and_group_field @space, :terms %>
+        <% end %>
+        <hr />
 
-    <% if current_user&.admin? %>
-      <hr />
-      <section class="bg-pink-50 shadow-lg p-4 rounded-lg border border-lnu-pink">
-        <h3 class="no-mt pt-1">Admin:</h3>
-        <p>
-          <%= link_to t("space_show.show_changelog"), admin_history_path(@space) %>
-        </p>
-      </section>
-    <% end %>
+        <%= render partial: 'spaces/show/reviews' %>
+
+        <% if current_user&.admin? %>
+          <hr />
+          <section class="bg-pink-50 shadow-lg p-4 rounded-lg border border-lnu-pink">
+            <h3 class="no-mt pt-1">Admin:</h3>
+            <p>
+              <%= link_to t("space_show.show_changelog"), admin_history_path(@space) %>
+            </p>
+          </section>
+        <% end %>
 
-  </section>
-</main>
+      </section>
+  </main>
+<% end %>
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>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -32,7 +32,8 @@ module.exports = {
         },
         extend: {
             screens: {
-                'xs': '360px'
+                'xs': '360px',
+                '3xl': '1792px'
             },
             cursor: {
                 zoom: 'zoom-in'