ash-project/ash_hq
1
0
Fork 0
mirror of https://github.com/ash-project/ash_hq.git synced 2024-09-19 21:03:30 +12:00
Code Issues Projects Releases Packages Wiki Activity

fix: Dark mode borders and scrollbars (#57)

Browse source
This commit is contained in:
Mike Buhot 2022-11-16 15:29:29 +10:00 committed by GitHub
parent 54151e9f7e
commit 1012d1edbc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/css/app.css
View file

@ -116,6 +116,11 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
/* Ensure dark-mode is applied to native elements, eg scrollbars */
.dark {
color-scheme: dark;
}
/* Constrain sidebar container size to screen height - Topbar height - mobile button height*/ /* Constrain sidebar container size to screen height - Topbar height - mobile button height*/
.sidebar-container { .sidebar-container {
max-height: calc(100vh - 8.5rem); max-height: calc(100vh - 8.5rem);

2
lib/ash_hq_web/components/app_view/top_bar.ex
View file

@ -18,7 +18,7 @@ defmodule AshHqWeb.Components.AppView.TopBar do
id="top-bar" id="top-bar"
class={ class={
"flex justify-between items-center py-4 px-4 h-20 sticky top-0 z-50", "flex justify-between items-center py-4 px-4 h-20 sticky top-0 z-50",
"border-b bg-white dark:bg-base-dark-850": @live_action == :docs_dsl "border-b border-base-light-300 dark:border-base-dark-700 bg-white dark:bg-base-dark-850": @live_action == :docs_dsl
} }
> >
<div class="flex flex-row align-baseline"> <div class="flex flex-row align-baseline">

4
lib/ash_hq_web/pages/docs.ex
View file

@ -36,7 +36,7 @@ defmodule AshHqWeb.Pages.Docs do
def render(assigns) do def render(assigns) do
~F""" ~F"""
<div class="flex flex-col xl:flex-row justify-center"> <div class="flex flex-col xl:flex-row justify-center">
<div class="xl:hidden sticky top-20 z-40 h-14 bg-white dark:bg-base-dark-850 flex flex-row justify-start w-full space-x-12 items-center border-b border-t border-base-light-600 py-3"> <div class="xl:hidden sticky top-20 z-40 h-14 bg-white dark:bg-base-dark-850 flex flex-row justify-start w-full space-x-12 items-center border-b border-t border-base-light-300 dark:border-base-dark-700 py-3">
<button class="dark:hover:text-base-dark-600" phx-click={show_sidebar()}> <button class="dark:hover:text-base-dark-600" phx-click={show_sidebar()}>
<Heroicons.Outline.MenuIcon class="w-8 h-8 ml-4" /> <Heroicons.Outline.MenuIcon class="w-8 h-8 ml-4" />
</button> </button>
@ -67,7 +67,7 @@ defmodule AshHqWeb.Pages.Docs do
</div> </div>
</span> </span>
<div class="grow w-full flex flex-row max-w-[1800px] justify-between md:space-x-12"> <div class="grow w-full flex flex-row max-w-[1800px] justify-between md:space-x-12">
<div class="sidebar-container sticky overflow-y-auto overflow-x-hidden shrink-0 top-20 xl:border-r xl:border-b lg:pr-2 lg:pt-4"> <div class="sidebar-container sticky overflow-y-auto overflow-x-hidden shrink-0 top-20 xl:border-r xl:border-b xl:border-base-light-300 xl:dark:border-base-dark-700 lg:pr-2 lg:pt-4">
<DocSidebar <DocSidebar
id="sidebar" id="sidebar"
class="hidden xl:block w-80" class="hidden xl:block w-80"