Adjustments

lib/wish_web/live/home_live/details.html.heex

@@ -1,4 +1,4 @@
-<.link href={~p"/"}>
+<.link patch={~p"/"}>
   <.icon name="hero-arrow-left" /> Back to list
 </.link>
 

lib/wish_web/live/home_live/index.ex

@@ -5,13 +5,7 @@ defmodule WishWeb.HomeLive.Index do
   use Phoenix.Component
 
   @impl true
-  def mount(_params, session, socket) do
-    grid? =
-      case Map.get(session, "user_display", "grid") do
-        "grid" -> true
-        _ -> false
-      end
-
+  def mount(_params, _session, socket) do
     items =
       if socket.assigns.current_user do
         Wishlist.list_visible_items()
@@ -19,12 +13,7 @@ defmodule WishWeb.HomeLive.Index do
         Wishlist.list_available_items()
       end
 
-    {:ok, assign(socket, :items, items) |> assign(:grid, grid?) |> assign(:hidden, false)}
-  end
-
-  @impl true
-  def handle_event("toggle_view_state", _, socket) do
-    {:noreply, assign(socket, :grid, !socket.assigns.grid)}
+    {:ok, assign(socket, :items, items) |> assign(:hidden, false)}
   end
 
   @impl true
@@ -62,7 +51,7 @@ defmodule WishWeb.HomeLive.Index do
     ~H"""
     <div
       id={"dropdown-#{@item.id}"}
-      class="absolute z-10 w-40 bg-purple-100 origin-top right-0 whitespace-nowrap border border-black"
+      class="absolute z-10 w-auto bg-purple-100 origin-top right-0 whitespace-nowrap border border-black"
       phx-click-away={JS.hide()}
       hidden
     >

lib/wish_web/live/home_live/index.html.heex

@@ -1,19 +1,7 @@
 <.header>
   Daniel's Wishlist
-  <:actions>
-    <.button phx-click={
-      JS.push("toggle_view_state")
-      |> JS.dispatch("toggle_view_state", detail: %{"grid" => !@grid})
-    }>
-      <%= if @grid do %>
-        List View
-      <% else %>
-        Grid View
-      <% end %>
-    </.button>
-  </:actions>
   <:actions :if={!@current_user}>
-    <.button phx-click={JS.push("toggle_hidden_items")}>
+    <.button phx-click={JS.push("toggle_hidden_items")} id="showhide-button" phx-throttle="300">
       <%= if @hidden do %>
         Hide
       <% else %>
@@ -24,98 +12,27 @@
   </:actions>
 </.header>
 
-<%= if @grid do %>
-  <div class="grid grid-cols-3 gap-4 mt-4" id="items-grid">
-    <div
-      :for={item <- @items}
-      phx-click={JS.navigate(~p"/details/#{item}")}
-      class="p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black
-            hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition
-            cursor-pointer"
-    >
-      <div class="aspect-square relative flex flex-col justify-center bg-white border border-black">
-        <img
-          :if={item.image_url}
-          src={item.image_url}
-          alt={item.title}
-          height="224"
-          width="224"
-          class="rounded"
-        />
-        <%= if item.received && !@current_user do %>
-          <div class="bg-red-400 text-white absolute w-full h-7 bottom-0">
-            <.icon name="hero-check-circle" />Received
-          </div>
-        <% end %>
-      </div>
-      <div class="flex flex-row justify-between mt-1 font-display">
-        <%= item.title %>
-        <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
-          <div class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500">
-            <.icon name="hero-ellipsis-vertical" class="w-full h-full" />
-          </div>
-          <.dropdown item={item} />
-        </div>
-      </div>
-      <%= if item.price do %>
-        <div>
-          <div class="text-sm opacity-60">
-            Price:
-          </div>
-          <div class="text-sm">
-            ~£<%= item.price %>
-          </div>
-        </div>
-      <% end %>
-      <div>
-        <div class="text-sm opacity-60">
-          Priority:
-        </div>
-        <span>
-          <%= for _ <- 1..item.desire do %>
-            <.icon name="hero-star" class="bg-red-500 text-red-500" />
-          <% end %>
-        </span>
-      </div>
-      <%= if item.description do %>
-        <div>
-          <div class="text-sm opacity-60">
-            Description:
-          </div>
-          <div>
-            <%= item.description %>
-          </div>
+<div class="flex flex-col mt-4 space-y-4">
+  <div
+    :for={item <- @items}
+    class="grid grid-cols-12 gap-3 p-3 bg-purple-200
+      hover:bg-purple-300 active:bg-purple-400 border-2 border-black
+      hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5
+      transition cursor-pointer"
+    phx-click={JS.navigate(~p"/details/#{item}")}
+  >
+    <div class="relative col-span-4 flex flex-col justify-center max-h-full h-full bg-white border border-black">
+      <img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
+      <%= if item.received && !@current_user do %>
+        <div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">
+          <.icon name="hero-check-circle" />Purchased
         </div>
       <% end %>
     </div>
-  </div>
-<% else %>
-  <div class="flex flex-col mt-4 space-y-4">
-    <div
-      :for={item <- @items}
-      class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black
-            hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition
-            cursor-pointer"
-      phx-click={JS.navigate(~p"/details/#{item}")}
-    >
-      <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 bg-white border border-black">
-        <img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
-        <%= if item.received && !@current_user do %>
-          <div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">
-            <.icon name="hero-check-circle" />Purchased
-          </div>
-        <% end %>
-      </div>
-      <div class="col-span-3 text-lg font-display">
+    <div class="col-span-7 flex flex-col">
+      <div class="text-lg font-display">
         <%= item.title %>
       </div>
-      <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
-        <.icon
-          name="hero-ellipsis-vertical"
-          class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500"
-        />
-        <.dropdown item={item} />
-      </div>
       <%= if item.price do %>
         <div class="col-span-3">
           <div class="text-sm opacity-60">
@@ -147,5 +64,14 @@
         </span>
       </div>
     </div>
+    <div class="col-span-1">
+      <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative float-right mt-1">
+        <.icon
+          name="hero-ellipsis-vertical"
+          class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500"
+        />
+        <.dropdown item={item} />
+      </div>
+    </div>
   </div>
-<% end %>
+</div>