thelonius/phoenix-ausblick
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

More dark mode

Browse Source
This commit is contained in:
Thelonius Kort
2023-02-11 19:56:34 +01:00
parent 32df023891
commit 7cd9a09cfd
3 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/js/dark-mode-widget.js
View File

@ -2,25 +2,29 @@ let DarkModeHook = {
mounted() { mounted() {
this.button = this.el.querySelector("button") this.button = this.el.querySelector("button")
this.button.addEventListener("click", this.show_selector.bind(this)) this.button.addEventListener("click", this.toggle_chooser.bind(this))
this.selector = this.el.querySelector("ul") this.chooser = this.el.querySelector("ul")
var lis = this.el.querySelectorAll("li") var lis = this.el.querySelectorAll("li")
lis[0].addEventListener("click", this.switch_to_day_mode.bind(this)) lis[0].addEventListener("click", this.switch_to_day_mode.bind(this))
lis[1].addEventListener("click", this.switch_to_night_mode.bind(this)) lis[1].addEventListener("click", this.switch_to_night_mode.bind(this))
lis[2].addEventListener("click", this.switch_to_system_mode.bind(this)) lis[2].addEventListener("click", this.switch_to_system_mode.bind(this))
}, },
show_selector(){ toggle_chooser(){
this.selector.classList.remove("hidden") if (this.chooser.classList.contains("hidden")){
this.chooser.classList.remove("hidden")
} else {
this.chooser.classList.add("hidden")
}
}, },
switch_to_day_mode() { switch_to_day_mode() {
document.documentElement.classList.remove('dark') document.documentElement.classList.remove('dark')
localStorage.theme = 'light' localStorage.theme = 'light'
this.selector.classList.add("hidden") this.chooser.classList.add("hidden")
}, },
switch_to_night_mode() { switch_to_night_mode() {
document.documentElement.classList.add('dark') document.documentElement.classList.add('dark')
localStorage.theme = 'dark' localStorage.theme = 'dark'
this.selector.classList.add("hidden") this.chooser.classList.add("hidden")
}, },
switch_to_system_mode() { switch_to_system_mode() {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) { if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
@ -29,7 +33,7 @@ let DarkModeHook = {
document.documentElement.classList.remove('dark') document.documentElement.classList.remove('dark')
} }
localStorage.removeItem('theme') localStorage.removeItem('theme')
this.selector.classList.add("hidden") this.chooser.classList.add("hidden")
}, },
} }

6
lib/outlook_web/components/public_components.ex
View File

@ -12,7 +12,7 @@ defmodule OutlookWeb.PublicComponents do
def autor(assigns) do def autor(assigns) do
~H""" ~H"""
<a href={"/autoren/#{@autor.id}"}> <a href={"/autoren/#{@autor.id}"}>
<div class="p-4 my-2 border rounded-lg border-slate-400 text-slate-800"> <div class="p-4 my-2 border rounded-lg border-stone-400 text-stone-800 dark:text-stone-300 ">
<div class="font-bold"><%= @autor.name %></div> <div class="font-bold"><%= @autor.name %></div>
<div class=""><%= @autor.description %></div> <div class=""><%= @autor.description %></div>
</div> </div>
@ -26,8 +26,8 @@ defmodule OutlookWeb.PublicComponents do
def artikel(assigns) do def artikel(assigns) do
~H""" ~H"""
<.link navigate={"/artikel/#{@artikel.id}"}> <.link navigate={"/artikel/#{@artikel.id}"}>
<div class="my-2 px-2 rounded border-2 border-solid border-gray-300"> <div class="my-2 px-2 rounded border-2 border-solid border-gray-300 dark:border-stone-800">
<h4 class="font-bold py-2"><%= @artikel.title %></h4> <h4 class="font-bold text-stone-800 dark:text-stone-300 py-2"><%= @artikel.title %></h4>
<div :if={@show_author}><small><%= @artikel.article.author.name %></small></div> <div :if={@show_author}><small><%= @artikel.article.author.name %></small></div>
<div><small><%= @artikel.date |> Calendar.strftime("%d.%m.%Y") %></small></div> <div><small><%= @artikel.date |> Calendar.strftime("%d.%m.%Y") %></small></div>
<div><%= @artikel.teaser |> raw %></div> <div><%= @artikel.teaser |> raw %></div>

12
lib/outlook_web/controllers/artikel_html/show.html.heex
View File

@ -1,17 +1,17 @@
<header class="mb-20"> <header class="mb-6">
<h1 class="text-lg font-semibold leading-8 text-stone-800 dark:text-stone-200"><%= @artikel.title %></h1> <h1 class="text-lg font-semibold leading-tight text-stone-800 dark:text-stone-200"><%= @artikel.title %></h1>
<p class="my-2"><.link href={"/autoren/#{@artikel.article.author.id}"}><%= @artikel.article.author.name %></.link> <p class="my-2"><.link href={"/autoren/#{@artikel.article.author.id}"}><%= @artikel.article.author.name %></.link>
&nbsp;&nbsp;&nbsp; — &nbsp;&nbsp;&nbsp;<%= Calendar.strftime(@artikel.article.date, "%d.%m.%Y") %></p> &nbsp;&nbsp;&nbsp; — &nbsp;&nbsp;&nbsp;<%= Calendar.strftime(@artikel.article.date, "%d.%m.%Y") %></p>
<div>Original <div>Original Artikel:
<.link href={@artikel.article.url} > <.link class="hover:text-sky-700" href={@artikel.article.url} >
<%= @artikel.article.title %> <%= @artikel.article.title %>
</.link><br> </.link><br>
</div> </div>
<div class="my-2"> <div class="my-2">
Übersetzung <%= Calendar.strftime(@artikel.date, "%d.%m.%Y") %> Übersetzung: <%= Calendar.strftime(@artikel.date, "%d.%m.%Y") %>
</div> </div>
</header> </header>
<div class="article w-full"><%= @artikel.public_content |> raw %></div> <div class="article w-full mx-auto max-w-xs"><%= @artikel.public_content |> raw %></div>
<.back navigate={~p"/autoren/#{@artikel.article.author}"}>Back to Autor</.back> <.back navigate={~p"/autoren/#{@artikel.article.author}"}>Back to Autor</.back>