Merge pull request 'devel' (#255) from devel into main
Reviewed-on: #255
This commit is contained in:
commit
9fbe6c2d20
5 changed files with 94 additions and 47 deletions
|
@ -18,6 +18,8 @@ defmodule ChiyaWeb.CoreComponents do
|
||||||
alias Phoenix.LiveView.JS
|
alias Phoenix.LiveView.JS
|
||||||
import ChiyaWeb.Gettext
|
import ChiyaWeb.Gettext
|
||||||
|
|
||||||
|
import ChiyaWeb.DarkModeToggle
|
||||||
|
|
||||||
def favicon(assigns) do
|
def favicon(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
||||||
|
@ -30,17 +32,6 @@ defmodule ChiyaWeb.CoreComponents do
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
attr :class, :string, default: nil
|
|
||||||
|
|
||||||
def darkmode_toggle(assigns) do
|
|
||||||
~H"""
|
|
||||||
<.link href="#" id="dark-mode-toggle" class={["text-sm leading-6", @class]}>
|
|
||||||
<span class="hidden dark:inline">🌙</span>
|
|
||||||
<span class="inline dark:hidden">☀️</span>
|
|
||||||
</.link>
|
|
||||||
"""
|
|
||||||
end
|
|
||||||
|
|
||||||
@doc """
|
@doc """
|
||||||
Renders a modal.
|
Renders a modal.
|
||||||
|
|
||||||
|
|
14
lib/chiya_web/components/darkmode_toggle.ex
Normal file
14
lib/chiya_web/components/darkmode_toggle.ex
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
defmodule ChiyaWeb.DarkModeToggle do
|
||||||
|
use Phoenix.Component
|
||||||
|
|
||||||
|
attr :class, :string, default: ""
|
||||||
|
|
||||||
|
def darkmode_toggle(assigns) do
|
||||||
|
~H"""
|
||||||
|
<.link href="#" id="dark-mode-toggle" class={["text-sm leading-6", @class]}>
|
||||||
|
<span class="hidden dark:inline">🌙</span>
|
||||||
|
<span class="inline dark:hidden">☀️</span>
|
||||||
|
</.link>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
end
|
|
@ -1,7 +1,7 @@
|
||||||
defmodule ChiyaWeb.Layouts do
|
defmodule ChiyaWeb.Layouts do
|
||||||
use ChiyaWeb, :html
|
use ChiyaWeb, :html
|
||||||
|
|
||||||
import ChiyaWeb.PublicComponents, only: [divider: 1]
|
import ChiyaWeb.PublicComponents, only: [divider: 1, site_header: 1]
|
||||||
|
|
||||||
embed_templates "layouts/*"
|
embed_templates "layouts/*"
|
||||||
end
|
end
|
||||||
|
|
|
@ -38,42 +38,9 @@
|
||||||
<aside class="block print:hidden">
|
<aside class="block print:hidden">
|
||||||
<%= raw(@settings.custom_html) %>
|
<%= raw(@settings.custom_html) %>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<header class="my-8 block px-3 print:hidden">
|
<header class="my-8 block px-3 print:hidden">
|
||||||
<nav class="mx-auto max-w-2xl">
|
<.site_header user={@current_user} />
|
||||||
<ul class="flex gap-3">
|
|
||||||
<li>
|
|
||||||
<a href="/" class="button">
|
|
||||||
<.icon name="hero-home" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/about" class="button">
|
|
||||||
<.icon name="hero-face-smile" /> About
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/wiki" class="button">
|
|
||||||
<.icon name="hero-paper-clip" /> Wiki
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/bookmarks" class="button">
|
|
||||||
<.icon name="hero-bookmark" /> Bookmarks
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="flex-1"></li>
|
|
||||||
<%= if @current_user do %>
|
|
||||||
<li>
|
|
||||||
<a href="/admin" class="button">
|
|
||||||
<.icon name="hero-beaker" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<% end %>
|
|
||||||
<li>
|
|
||||||
<.darkmode_toggle class="button" />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="mx-3 md:mx-0">
|
<main class="mx-3 md:mx-0">
|
||||||
|
|
|
@ -10,6 +10,8 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
import ChiyaWeb.Markdown, only: [render: 1]
|
import ChiyaWeb.Markdown, only: [render: 1]
|
||||||
import Phoenix.HTML, only: [raw: 1]
|
import Phoenix.HTML, only: [raw: 1]
|
||||||
|
|
||||||
|
import ChiyaWeb.DarkModeToggle
|
||||||
|
|
||||||
@doc """
|
@doc """
|
||||||
Renders a [Hero Icon](https://heroicons.com).
|
Renders a [Hero Icon](https://heroicons.com).
|
||||||
|
|
||||||
|
@ -246,6 +248,79 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
|
attr :user, :map, required: true
|
||||||
|
|
||||||
|
def site_header(assigns) do
|
||||||
|
~H"""
|
||||||
|
<nav class="mx-auto max-w-2xl">
|
||||||
|
<ul class="flex gap-3">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="button">
|
||||||
|
<.icon name="hero-home" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about" class="button">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="bi bi-umbrella inline"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path d="M8 0a.5.5 0 0 1 .5.5v.514C12.625 1.238 16 4.22 16 8c0 0 0 .5-.5.5-.149 0-.352-.145-.352-.145l-.004-.004-.025-.023a3.484 3.484 0 0 0-.555-.394A3.166 3.166 0 0 0 13 7.5c-.638 0-1.178.213-1.564.434a3.484 3.484 0 0 0-.555.394l-.025.023-.003.003s-.204.146-.353.146-.352-.145-.352-.145l-.004-.004-.025-.023a3.484 3.484 0 0 0-.555-.394 3.3 3.3 0 0 0-1.064-.39V13.5H8h.5v.039l-.005.083a2.958 2.958 0 0 1-.298 1.102 2.257 2.257 0 0 1-.763.88C7.06 15.851 6.587 16 6 16s-1.061-.148-1.434-.396a2.255 2.255 0 0 1-.763-.88 2.958 2.958 0 0 1-.302-1.185v-.025l-.001-.009v-.003s0-.002.5-.002h-.5V13a.5.5 0 0 1 1 0v.506l.003.044a1.958 1.958 0 0 0 .195.726c.095.191.23.367.423.495.19.127.466.229.879.229s.689-.102.879-.229c.193-.128.328-.304.424-.495a1.958 1.958 0 0 0 .197-.77V7.544a3.3 3.3 0 0 0-1.064.39 3.482 3.482 0 0 0-.58.417l-.004.004S5.65 8.5 5.5 8.5c-.149 0-.352-.145-.352-.145l-.004-.004a3.482 3.482 0 0 0-.58-.417A3.166 3.166 0 0 0 3 7.5c-.638 0-1.177.213-1.564.434a3.482 3.482 0 0 0-.58.417l-.004.004S.65 8.5.5 8.5C0 8.5 0 8 0 8c0-3.78 3.375-6.762 7.5-6.986V.5A.5.5 0 0 1 8 0zM6.577 2.123c-2.833.5-4.99 2.458-5.474 4.854A4.124 4.124 0 0 1 3 6.5c.806 0 1.48.25 1.962.511a9.706 9.706 0 0 1 .344-2.358c.242-.868.64-1.765 1.271-2.53zm-.615 4.93A4.16 4.16 0 0 1 8 6.5a4.16 4.16 0 0 1 2.038.553 8.688 8.688 0 0 0-.307-2.13C9.434 3.858 8.898 2.83 8 2.117c-.898.712-1.434 1.74-1.731 2.804a8.687 8.687 0 0 0-.307 2.131zm3.46-4.93c.631.765 1.03 1.662 1.272 2.53.233.833.328 1.66.344 2.358A4.14 4.14 0 0 1 13 6.5c.77 0 1.42.23 1.897.477-.484-2.396-2.641-4.355-5.474-4.854z" />
|
||||||
|
</svg>
|
||||||
|
<span class="hidden sm:inline-block">About</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/wiki" class="button">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="bi bi-journals inline"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2z" />
|
||||||
|
<path d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 2.5v.5H.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0z" />
|
||||||
|
</svg>
|
||||||
|
<span class="hidden sm:inline">Wiki</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/bookmarks" class="button">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="bi bi-bookmark-fill inline"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z" />
|
||||||
|
</svg>
|
||||||
|
<span class="hidden sm:inline-block">Bookmarks</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="flex-1"></li>
|
||||||
|
<%= if @user do %>
|
||||||
|
<li>
|
||||||
|
<a href="/admin" class="button">
|
||||||
|
<.icon name="hero-beaker" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<% end %>
|
||||||
|
<li>
|
||||||
|
<.darkmode_toggle class="button" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
attr :note, :map, required: true
|
attr :note, :map, required: true
|
||||||
|
|
||||||
def featured_images(assigns) do
|
def featured_images(assigns) do
|
||||||
|
|
Loading…
Reference in a new issue