Remove grid mode

.build.yml

@@ -1,6 +0,0 @@
-image: alpine/edge
-tasks:
-  - say-hello: |
-      echo hello
-  - say-world: |
-      echo world

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

@@ -6,12 +6,6 @@ defmodule WishWeb.HomeLive.Index do
 
   @impl true
   def mount(_params, session, socket) do
-    grid? =
-      case Map.get(session, "user_display", "grid") do
-        "grid" -> true
-        _ -> false
-      end
-
     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)}
+    {:ok, assign(socket, :items, items) |> assign(:hidden, false)}
-  end
-
-  @impl true
-  def handle_event("toggle_view_state", _, socket) do
-    {:noreply, assign(socket, :grid, !socket.assigns.grid)}
   end
 
   @impl true

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,128 +12,61 @@
   </:actions>
 </.header>
 
-<%= if @grid do %>
+<div class="flex flex-col mt-4 space-y-4">
-  <div class="grid grid-cols-3 gap-4 mt-4" id="items-grid">
+  <div
-    <div
+    :for={item <- @items}
-      :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
-      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"
-    >
+    phx-click={JS.navigate(~p"/details/#{item}")}
-      <div class="aspect-square relative flex flex-col justify-center bg-white border border-black">
+  >
-        <img
+    <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 bg-white border border-black">
-          :if={item.image_url}
+      <img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
-          src={item.image_url}
+      <%= if item.received && !@current_user do %>
-          alt={item.title}
+        <div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">
-          height="224"
+          <.icon name="hero-check-circle" />Purchased
-          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>
       <% end %>
     </div>
-  </div>
+    <div class="col-span-3 text-lg font-display">
-<% else %>
+      <%= item.title %>
-  <div class="flex flex-col mt-4 space-y-4">
+    </div>
-    <div
+    <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
-      :for={item <- @items}
+      <.icon
-      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
+        name="hero-ellipsis-vertical"
-            hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition
+        class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500"
-            cursor-pointer"
+      />
-      phx-click={JS.navigate(~p"/details/#{item}")}
+      <.dropdown item={item} />
-    >
+    </div>
-      <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 bg-white border border-black">
+    <%= if item.price do %>
-        <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">
-        <%= 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">
-            Price:
-          </div>
-          <div class="text-sm">
-            ~£<%= item.price %>
-          </div>
-        </div>
-      <% end %>
-      <%= if item.description do %>
-        <div class="col-span-3 w-full">
-          <div class="text-sm opacity-60">
-            Description:
-          </div>
-          <div>
-            <%= item.description %>
-          </div>
-        </div>
-      <% end %>
       <div class="col-span-3">
         <div class="text-sm opacity-60">
-          Priority:
+          Price:
+        </div>
+        <div class="text-sm">
+          ~£<%= item.price %>
         </div>
-        <span>
-          <%= for _ <- 1..item.desire do %>
-            <.icon name="hero-star" class="bg-red-500 text-red-500" />
-          <% end %>
-        </span>
       </div>
+    <% end %>
+    <%= if item.description do %>
+      <div class="col-span-3 w-full">
+        <div class="text-sm opacity-60">
+          Description:
+        </div>
+        <div>
+          <%= item.description %>
+        </div>
+      </div>
+    <% end %>
+    <div class="col-span-3">
+      <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>
   </div>
-<% end %>
+</div>