feat(ui): create idiomatic UI matching previous katbin iteration

Signed-off-by: SphericalKat <amolele@gmail.com>
This commit is contained in:
Amogh Lele 2021-08-13 06:33:43 +05:30
parent c6c54347a7
commit 13728f2ef8
No known key found for this signature in database
GPG Key ID: ED5C54FBBB920E51
7 changed files with 33 additions and 10 deletions

View File

@ -5,11 +5,25 @@ defmodule KetbinWeb.PageController do
alias Ketbin.Pastes.Paste alias Ketbin.Pastes.Paste
def index(conn, _params) do def index(conn, _params) do
render(conn, "index.html") changeset = Pastes.change_paste(%Paste{})
render(conn, "index.html", changeset: changeset)
end end
def show(conn, %{"id" => id}) do def show(conn, %{"id" => id}) do
paste = Pastes.get_paste!(id) paste = Pastes.get_paste!(id)
render(conn, "show.html", paste: paste) render(conn, "show.html", paste: paste)
end end
def create(conn, %{"paste" => paste_params}) do
# paste_params = Map.put(paste_params, "id", s)
case Pastes.create_paste(paste_params) do
{:ok, paste} ->
conn
|> put_flash(:info, "Paste created successfully.")
|> redirect(to: Routes.paste_path(conn, :show, paste))
{:error, %Ecto.Changeset{} = changeset} ->
render(conn, "index.html", changeset: changeset)
end
end
end end

View File

@ -21,6 +21,7 @@ defmodule KetbinWeb.Router do
get "/", PageController, :index get "/", PageController, :index
get "/:id", PageController, :show get "/:id", PageController, :show
post "/", PageController, :create
end end
# Other scopes may use custom stacks. # Other scopes may use custom stacks.

View File

@ -11,7 +11,7 @@
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script> <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head> </head>
<body> <body class="flex flex-col ">
<header class="flex w-full justify-between items-center py-3 px-6"> <header class="flex w-full justify-between items-center py-3 px-6">
<a href="<%= Routes.page_path(@conn, :index) %>"> <a href="<%= Routes.page_path(@conn, :index) %>">
<span class="font-semibold text-xl tracking-tight"> <span class="font-semibold text-xl tracking-tight">

View File

@ -0,0 +1,14 @@
<%= form_for @changeset, @action, [class: "flex flex-col w-full h-full relative"], fn f -> %>
<%= if @changeset.action do %>
<div class="w-full text-center bg-amber">
<p>Oops, something went wrong!</p>
</div>
<% end %>
<div>
<%= textarea f, :content, [class: "w-full h-full px-6 py-4 outline-none bg-light-grey font-bold resize-none", placeholder: "> Paste, save, share! (Pasting just a URL will shorten it!)"] %>
<div class="absolute top-0 right-0 p-4">
<%= submit "Save" %>
</div>
</div>
<% end %>

View File

@ -1,3 +1 @@
<div> <%= render "form.html", Map.put(assigns, :action, Routes.page_path(@conn, :create)) %>
hello, world!
</div>

View File

@ -1,5 +1 @@
<h1>New Paste</h1>
<%= render "form.html", Map.put(assigns, :action, Routes.paste_path(@conn, :create)) %> <%= render "form.html", Map.put(assigns, :action, Routes.paste_path(@conn, :create)) %>
<span><%= link "Back", to: Routes.paste_path(@conn, :index) %></span>

View File

@ -11,7 +11,7 @@ defmodule KetbinWeb.ErrorHelpers do
def error_tag(form, field) do def error_tag(form, field) do
Enum.map(Keyword.get_values(form.errors, field), fn error -> Enum.map(Keyword.get_values(form.errors, field), fn error ->
content_tag(:span, translate_error(error), content_tag(:span, translate_error(error),
class: "invalid-feedback", class: "absolute top-0 left-0 px-6 py-4",
phx_feedback_for: input_name(form, field) phx_feedback_for: input_name(form, field)
) )
end) end)