init v0
This commit is contained in:
parent
561ea7543d
commit
43e6b6d318
25 changed files with 8063 additions and 374 deletions
|
|
@ -66,7 +66,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
|
||||
phx-key="escape"
|
||||
phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
|
||||
class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition"
|
||||
class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-ctp-base p-14 shadow-lg ring-1 transition"
|
||||
>
|
||||
<div class="absolute top-6 right-5">
|
||||
<button
|
||||
|
|
@ -202,7 +202,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
def simple_form(assigns) do
|
||||
~H"""
|
||||
<.form :let={f} for={@for} as={@as} {@rest}>
|
||||
<div class="mt-10 space-y-8 bg-white">
|
||||
<div class="mt-10 space-y-8 bg-ctp-base">
|
||||
<%= render_slot(@inner_block, f) %>
|
||||
<div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
|
||||
<%= render_slot(action, f) %>
|
||||
|
|
@ -310,7 +310,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
|
||||
~H"""
|
||||
<div>
|
||||
<label class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
|
||||
<label class="flex items-center gap-4 text-sm leading-6 text-ctp-overlay2">
|
||||
<input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
|
||||
<input
|
||||
type="checkbox"
|
||||
|
|
@ -318,7 +318,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
name={@name}
|
||||
value="true"
|
||||
checked={@checked}
|
||||
class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
|
||||
class="rounded border-ctp-surface2 text-ctp-overlay2 focus:ring-0"
|
||||
{@rest}
|
||||
/>
|
||||
<%= @label %>
|
||||
|
|
@ -335,7 +335,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
<select
|
||||
id={@id}
|
||||
name={@name}
|
||||
class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
|
||||
class="mt-2 block w-full rounded-md border border-gray-300 bg-ctp-base shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
|
||||
multiple={@multiple}
|
||||
{@rest}
|
||||
>
|
||||
|
|
@ -355,8 +355,8 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
id={@id}
|
||||
name={@name}
|
||||
class={[
|
||||
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6 min-h-[6rem]",
|
||||
@errors == [] && "border-zinc-300 focus:border-zinc-400",
|
||||
"mt-2 block w-full rounded-lg text-ctp-overlay2 focus:ring-0 sm:text-sm sm:leading-6 min-h-[6rem]",
|
||||
@errors == [] && "border-ctp-surface2 focus:border-zinc-400",
|
||||
@errors != [] && "border-rose-400 focus:border-rose-400"
|
||||
]}
|
||||
{@rest}
|
||||
|
|
@ -377,8 +377,8 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
id={@id}
|
||||
value={Phoenix.HTML.Form.normalize_value(@type, @value)}
|
||||
class={[
|
||||
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
|
||||
@errors == [] && "border-zinc-300 focus:border-zinc-400",
|
||||
"mt-2 block bg-ctp-base border border-ctp-crust w-full rounded-lg text-ctp-text focus:ring-0 sm:text-sm sm:leading-6",
|
||||
@errors == [] && "border-ctp-surface2 focus:border-ctp-mauve",
|
||||
@errors != [] && "border-rose-400 focus:border-rose-400"
|
||||
]}
|
||||
{@rest}
|
||||
|
|
@ -396,7 +396,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
|
||||
def label(assigns) do
|
||||
~H"""
|
||||
<label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
|
||||
<label for={@for} class="block text-sm font-semibold leading-6 text-ctp-text">
|
||||
<%= render_slot(@inner_block) %>
|
||||
</label>
|
||||
"""
|
||||
|
|
@ -429,10 +429,10 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
~H"""
|
||||
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
|
||||
<div>
|
||||
<h1 class="text-lg font-semibold leading-8 text-zinc-800">
|
||||
<h1 class="text-lg font-semibold leading-8">
|
||||
<%= render_slot(@inner_block) %>
|
||||
</h1>
|
||||
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
|
||||
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-ctp-overlay2">
|
||||
<%= render_slot(@subtitle) %>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -486,7 +486,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
<tbody
|
||||
id={@id}
|
||||
phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
|
||||
class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
|
||||
class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-ctp-overlay1"
|
||||
>
|
||||
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
|
||||
<td
|
||||
|
|
@ -496,7 +496,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
>
|
||||
<div class="block py-4 pr-6">
|
||||
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
|
||||
<span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
|
||||
<span class={["relative", i == 0 && "font-semibold text-ctp-overlay2"]}>
|
||||
<%= render_slot(col, @row_item.(row)) %>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -506,7 +506,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
|
||||
<span
|
||||
:for={action <- @action}
|
||||
class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
|
||||
class="relative ml-4 font-semibold leading-6 text-ctp-overlay2 hover:text-ctp-overlay1"
|
||||
>
|
||||
<%= render_slot(action, @row_item.(row)) %>
|
||||
</span>
|
||||
|
|
@ -539,7 +539,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
<dl class="-my-4 divide-y divide-zinc-100">
|
||||
<div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
|
||||
<dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt>
|
||||
<dd class="text-zinc-700"><%= render_slot(item) %></dd>
|
||||
<dd class="text-ctp-overlay1"><%= render_slot(item) %></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
@ -561,7 +561,7 @@ defmodule ZoeyscomputerWeb.CoreComponents do
|
|||
<div class="mt-16">
|
||||
<.link
|
||||
navigate={@navigate}
|
||||
class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
|
||||
class="text-sm font-semibold leading-6 text-ctp-overlay2 hover:text-ctp-overlay1"
|
||||
>
|
||||
<.icon name="hero-arrow-left-solid" class="h-3 w-3" />
|
||||
<%= render_slot(@inner_block) %>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
<header class="px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/">
|
||||
<img src={~p"/images/logo.svg"} width="36" />
|
||||
</a>
|
||||
<p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
|
||||
v<%= Application.spec(:phoenix, :vsn) %>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
|
||||
<a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
|
||||
@elixirphoenix
|
||||
</a>
|
||||
<a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
|
||||
GitHub
|
||||
</a>
|
||||
<a
|
||||
href="https://hexdocs.pm/phoenix/overview.html"
|
||||
class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
|
||||
>
|
||||
Get Started <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-4 py-20 sm:px-6 lg:px-8">
|
||||
<%!-- <header class="px-4 sm:px-6 lg:px-8"> --%>
|
||||
<%!-- <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm"> --%>
|
||||
<%!-- <div class="flex items-center gap-4"> --%>
|
||||
<%!-- <a href="/"> --%>
|
||||
<%!-- <img src={~p"/images/logo.svg"} width="36" /> --%>
|
||||
<%!-- </a> --%>
|
||||
<%!-- <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6"> --%>
|
||||
<%!-- v<%= Application.spec(:phoenix, :vsn) %> --%>
|
||||
<%!-- </p> --%>
|
||||
<%!-- </div> --%>
|
||||
<%!-- <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900"> --%>
|
||||
<%!-- <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700"> --%>
|
||||
<%!-- @elixirphoenix --%>
|
||||
<%!-- </a> --%>
|
||||
<%!-- <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700"> --%>
|
||||
<%!-- GitHub --%>
|
||||
<%!-- </a> --%>
|
||||
<%!-- <a --%>
|
||||
<%!-- href="https://hexdocs.pm/phoenix/overview.html" --%>
|
||||
<%!-- class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80" --%>
|
||||
<%!-- > --%>
|
||||
<%!-- Get Started <span aria-hidden="true">→</span> --%>
|
||||
<%!-- </a> --%>
|
||||
<%!-- </div> --%>
|
||||
<%!-- </div> --%>
|
||||
<%!-- </header> --%>
|
||||
<main class="bg-ctp-base px-4 py-20 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<.flash_group flash={@flash} />
|
||||
<%= @inner_content %>
|
||||
|
|
|
|||
|
|
@ -4,55 +4,48 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="csrf-token" content={get_csrf_token()} />
|
||||
<.live_title suffix=" · Phoenix Framework">
|
||||
<%= assigns[:page_title] || "Zoeyscomputer" %>
|
||||
<.live_title suffix=" - zoeys.computer">
|
||||
<%= assigns[:page_title] || "" %>
|
||||
</.live_title>
|
||||
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
|
||||
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-white">
|
||||
<ul class="relative z-10 flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">
|
||||
<%= if @current_user do %>
|
||||
<li class="text-[0.8125rem] leading-6 text-zinc-900">
|
||||
<%= @current_user.email %>
|
||||
</li>
|
||||
<li>
|
||||
<body class="ctp-mocha bg-ctp-base text-ctp-overlay0">
|
||||
<%= if @current_user do %>
|
||||
<div class="flex w-full">
|
||||
<div class="p-4 grow">
|
||||
<.link
|
||||
href={~p"/users/settings"}
|
||||
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
|
||||
class="text-ctp-mauve font-bold hover:border-b-2 border-ctp-mauve"
|
||||
navigate={~p"/"}
|
||||
>
|
||||
Settings
|
||||
zoey
|
||||
</.link>
|
||||
</li>
|
||||
<li>
|
||||
<.link
|
||||
href={~p"/users/log_out"}
|
||||
method="delete"
|
||||
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
|
||||
>
|
||||
Log out
|
||||
</.link>
|
||||
</li>
|
||||
<% else %>
|
||||
<li>
|
||||
<.link
|
||||
href={~p"/users/register"}
|
||||
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
|
||||
>
|
||||
Register
|
||||
</.link>
|
||||
</li>
|
||||
<li>
|
||||
<.link
|
||||
href={~p"/users/log_in"}
|
||||
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
|
||||
>
|
||||
Log in
|
||||
</.link>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="relative z-10 flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">
|
||||
<li class="text-[0.8125rem] leading-6">
|
||||
<%= @current_user.email %>
|
||||
</li>
|
||||
<li>
|
||||
<.link
|
||||
href={~p"/users/settings"}
|
||||
class="text-[0.8125rem] leading-6 font-semibold hover:text-ctp-mauve"
|
||||
>
|
||||
Settings
|
||||
</.link>
|
||||
</li>
|
||||
<li>
|
||||
<.link
|
||||
href={~p"/users/log_out"}
|
||||
method="delete"
|
||||
class="text-[0.8125rem] leading-6 font-semibold hover:text-ctp-mauve"
|
||||
>
|
||||
Log out
|
||||
</.link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= @inner_content %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue