57 lines
1.7 KiB
Text
57 lines
1.7 KiB
Text
|
<.header>
|
||
|
|
Listing Images
|
||
|
|
<:actions>
|
||
|
|
<.link patch={~p"/images/new"}>
|
||
|
|
<.button>New Image</.button>
|
||
|
|
</.link>
|
||
|
|
</:actions>
|
||
|
|
</.header>
|
||
|
|
|
||
|
|
<%!-- <.table --%>
|
||
|
|
<%!-- id="images" --%>
|
||
|
|
<%!-- rows={@streams.images} --%>
|
||
|
|
<%!-- row_click={fn {_id, image} -> JS.navigate(~p"/images/#{image.file}") end} --%>
|
||
|
|
<%!-- > --%>
|
||
|
|
<%!-- <:col :let={{_id, image}} label="File"><%= image.file %></:col> --%>
|
||
|
|
<%!-- <:action :let={{_id, image}}> --%>
|
||
|
|
<%!-- <div class="sr-only"> --%>
|
||
|
|
<%!-- <.link navigate={~p"/images/#{image.file}"}>Show</.link> --%>
|
||
|
|
<%!-- </div> --%>
|
||
|
|
<%!-- <.link patch={~p"/images/#{image}/edit"}>Edit</.link> --%>
|
||
|
|
<%!-- </:action> --%>
|
||
|
|
<%!-- <:action :let={{id, image}}> --%>
|
||
|
|
<%!-- <.link --%>
|
||
|
|
<%!-- phx-click={JS.push("delete", value: %{id: image.id}) |> hide("##{id}")} --%>
|
||
|
|
<%!-- data-confirm="Are you sure?" --%>
|
||
|
|
<%!-- > --%>
|
||
|
|
<%!-- Delete --%>
|
||
|
|
<%!-- </.link> --%>
|
||
|
|
<%!-- </:action> --%>
|
||
|
|
<%!-- </.table> --%>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-3 gap-4">
|
||
|
|
<img
|
||
|
|
:for={{dom_id, image} <- @streams.images}
|
||
|
|
src={"https://s3.zoeys.computer/imgs/uploads/#{image.file}.png"}
|
||
|
|
phx-click={JS.navigate(~p"/images/#{image.file}")}
|
||
|
|
class="cursor-pointer hover:shadow-lg transition duration-300 hover:scale-105 rounded-lg ease-out border-2 border-ctp-base hover:border-ctp-mauve"
|
||
|
|
id={dom_id}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<.modal
|
||
|
|
:if={@live_action in [:new, :edit]}
|
||
|
|
id="image-modal"
|
||
|
|
show
|
||
|
|
on_cancel={JS.patch(~p"/images")}
|
||
|
|
>
|
||
|
|
<.live_component
|
||
|
|
module={ZoeyscomputerWeb.ImageLive.FormComponent}
|
||
|
|
id={@image.id || :new}
|
||
|
|
title={@page_title}
|
||
|
|
action={@live_action}
|
||
|
|
image={@image}
|
||
|
|
patch={~p"/images"}
|
||
|
|
/>
|
||
|
|
</.modal>
|