UX improvements on table view

lnu-norge · May 2, 2024 · a2f4b67 · a2f4b67
1 parent 4148981
commit a2f4b67
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 16 deletions.
diff --git a/app/assets/stylesheets/space_table.css b/app/assets/stylesheets/space_table.css
@@ -18,13 +18,16 @@ body.view-as-table {
     /* Sticky left column */
     thead tr th:first-child,
     tbody tr th:first-child {
-        @apply sticky left-0 z-4;
+        @apply md:sticky md:left-0 md:z-4;
     }
-    thead tr th:first-child::after {
-        @apply block absolute shadow-2xl left-0 right-0 top-0 h-screen md:h-screen-below-desktop-menu pointer-events-none;
-        content: "";
+    @media (min-width: theme('screens.md')) {
+        thead tr th:first-child::after {
+            @apply block absolute shadow-2xl left-0 right-0 top-0 h-screen md:h-screen-below-desktop-menu pointer-events-none;
+            content: "";
+        }
     }
 
+
     tbody {
         @apply relative;
         th {
@@ -36,6 +39,7 @@ body.view-as-table {
         }
 
         th, td {
+            @apply relative;
             > :first-child {
                 @apply h-48 overflow-scroll block;
             }

diff --git a/app/views/spaces/index.html.erb b/app/views/spaces/index.html.erb
@@ -1,12 +1,16 @@
 <div
   class="md:flex max-w-screen"
   data-controller="mapbox" data-api-key="<%= ENV["MAPBOX_API_KEY"]%>" >
-  <nav data-mapbox-target="searchBox"
-       class="hidden fixed inset-0 z-100 bg-white overflow-y-auto overscroll-contain
-              md:block md:static md:inset-auto md:z-10 md:h-screen-below-desktop-menu
-              md:shadow-2xl md:max-w-md md:w-1/4 md:min-w-60
-  ">
-    <%= render 'spaces/index/filters' %>
+  <nav
+       class="fixed top-0 left-0 right-0 max-h-screen z-100 bg-white overflow-y-auto overscroll-contain
+              md:static md:inset-auto md:z-10 md:h-screen-below-desktop-menu
+              md:shadow-2xl md:max-w-md md:w-1/4 md:min-w-60">
+    <div class="fixed bottom-24 left-0 right-0 z-2 md:sticky md:right-auto md:bottom-auto md:top-2 md:mt-8">
+      <%= render 'spaces/index/set_view_buttons' %>
+    </div>
+    <div class="hidden md:block " data-mapbox-target="searchBox">
+      <%= render 'spaces/index/filters' %>
+    </div>
   </nav>
   <div class="relative
         flex flex-col-reverse
@@ -25,15 +29,17 @@
                 md:view-as-table:flex-1
   ">
       <%= render 'spaces/index/filter_button' %>
+
       <%= render 'spaces/index/handlebar_for_mobile' %>
       <div
         id="space-listing"
         data-controller="set-selected-space"
-        class="px-2 md:py-8 md:view-as-table:p-0 loading-spaces-when-empty"></div>
+        class="px-2 md:py-8 md:view-as-table:p-0 view-as-table:mt-16 md:view-as-table:mt-0 loading-spaces-when-empty"></div>
     </div>
     <div
       class="
       h-screen-3/5 md:pb-0
+      view-as-table:h-[5em]
       md:h-screen-below-desktop-menu
       w-full md:w-min-1/2
       md:view-as-table:absolute
@@ -62,7 +68,7 @@
                                   md:view-as-table:border-l border-gray-200
                                   "
       %>
-      <div class="md:view-as-table:hidden relative h-full md:h-full w-full pl-1/2 peer-empty/space:pl-0">
+      <div class="view-as-table:hidden relative h-full md:h-full w-full pl-1/2 peer-empty/space:pl-0">
         <%= render "spaces/index/map" %>
       </div>
     </div>

diff --git a/app/views/spaces/index/_filter_button.html.erb b/app/views/spaces/index/_filter_button.html.erb
@@ -1,4 +1,4 @@
-<nav class="fixed md:hidden m-4 md:m-0 z-10 top-0 md:top-14 right-0 left-0 justify-center md:block md:px-4 md:pt-4 md:mb-8">
+<nav class="fixed md:hidden m-4 md:m-0 z-10 top-0 md:top-14 right-0 left-0 justify-center md:px-4 md:pt-4 md:mb-8">
   <button
     id="toggle_search_box"
     data-action="click->mapbox#showSearchBox"

diff --git a/app/views/spaces/index/_filters.html.erb b/app/views/spaces/index/_filters.html.erb
@@ -13,7 +13,6 @@
   </header>
 
   <main class="p-8">
-    <%= render 'spaces/index/set_view_buttons' %>
     <%= render partial: "spaces/index/search_form" %>
   </main>
 

diff --git a/app/views/spaces/index/_handlebar_for_mobile.html.erb b/app/views/spaces/index/_handlebar_for_mobile.html.erb
@@ -1,3 +1,3 @@
-<div class="md:hidden flex justify-center pb-8 pt-4">
+<div class="md:hidden view-as-table:hidden flex justify-center pb-8 pt-4">
   <div class="h-1 bg-gray-100 w-32 shadow-inner rounded-full"></div>
 </div>
diff --git a/app/views/spaces/index/_set_view_buttons.html.erb b/app/views/spaces/index/_set_view_buttons.html.erb
@@ -1,4 +1,4 @@
-<fieldset class="mb-8 flex flex-col items-center">
+<fieldset class="mb-8 flex flex-col items-center sticky top-2 z-10">
   <legend class="text-center mb-1 text-xs uppercase text-gray-400 sr-only">
     <%= t('space_filter.choose_view') %>
   </legend>