improved static styles and x-browser scrollbars
This commit is contained in:
Ben Phelps
parent
2271cc0044
commit
f52c6f3b41
5 changed files with 61 additions and 27 deletions
|
|
@ -9,11 +9,7 @@ export default function Document() {
|
|||
content="A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations."
|
||||
/>
|
||||
</Head>
|
||||
<body
|
||||
className="
|
||||
relative w-full h-full bg-theme-50 dark:bg-theme-800 transition duration-150 ease-in-out
|
||||
"
|
||||
>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import useSWR, { SWRConfig } from "swr";
|
||||
import Head from "next/head";
|
||||
import dynamic from "next/dynamic";
|
||||
import classNames from "classnames";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { useEffect, useContext, useState } from "react";
|
||||
import { BiError } from "react-icons/bi";
|
||||
|
|
@ -12,12 +13,12 @@ import BookmarksGroup from "components/bookmarks/group";
|
|||
import Widget from "components/widgets/widget";
|
||||
import Revalidate from "components/toggles/revalidate";
|
||||
import createLogger from "utils/logger";
|
||||
import useWindowFocus from "utils/hooks/window-focus";
|
||||
import { getSettings } from "utils/config/config";
|
||||
import { ColorContext } from "utils/contexts/color";
|
||||
import { ThemeContext } from "utils/contexts/theme";
|
||||
import { SettingsContext } from "utils/contexts/settings";
|
||||
import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response";
|
||||
import useWindowFocus from "utils/hooks/window-focus";
|
||||
|
||||
const ThemeToggle = dynamic(() => import("components/toggles/theme"), {
|
||||
ssr: false,
|
||||
|
|
@ -74,7 +75,7 @@ export async function getStaticProps() {
|
|||
}
|
||||
}
|
||||
|
||||
export default function Index({ initialSettings, fallback }) {
|
||||
function Index({ initialSettings, fallback }) {
|
||||
const windowFocused = useWindowFocus();
|
||||
const [stale, setStale] = useState(false);
|
||||
const { data: errorsData } = useSWR("/api/validate");
|
||||
|
|
@ -119,7 +120,7 @@ export default function Index({ initialSettings, fallback }) {
|
|||
|
||||
if (errorsData && errorsData.length > 0) {
|
||||
return (
|
||||
<div className="w-full container m-auto justify-center p-10">
|
||||
<div className="w-full h-screen container m-auto justify-center p-10 pointer-events-none">
|
||||
<div className="flex flex-col">
|
||||
{errorsData.map((error, i) => (
|
||||
<div
|
||||
|
|
@ -163,10 +164,10 @@ function Home({ initialSettings }) {
|
|||
const { data: widgets } = useSWR("/api/widgets");
|
||||
|
||||
const wrappedStyle = {};
|
||||
if (settings && settings.background) {
|
||||
wrappedStyle.backgroundImage = `url(${settings.background})`;
|
||||
if (initialSettings && initialSettings.background) {
|
||||
wrappedStyle.backgroundImage = `url(${initialSettings.background})`;
|
||||
wrappedStyle.backgroundSize = "cover";
|
||||
wrappedStyle.opacity = settings.backgroundOpacity ?? 1;
|
||||
wrappedStyle.opacity = initialSettings.backgroundOpacity ?? 1;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -186,12 +187,12 @@ function Home({ initialSettings }) {
|
|||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{settings.title || "Homepage"}</title>
|
||||
{settings.base && <base href={settings.base} />}
|
||||
{settings.favicon && <link rel="icon" href={settings.favicon} />}
|
||||
<title>{initialSettings.title || "Homepage"}</title>
|
||||
{initialSettings.base && <base href={initialSettings.base} />}
|
||||
{initialSettings.favicon && <link rel="icon" href={initialSettings.favicon} />}
|
||||
</Head>
|
||||
<div className="fixed w-full h-full m-0 p-0" style={wrappedStyle} />
|
||||
<div className="relative w-full container m-auto flex flex-col h-screen justify-between">
|
||||
<div className="fixed w-screen h-screen m-0 p-0 z-0 pointer-events-none" style={wrappedStyle} />
|
||||
<div className="relative container m-auto flex flex-col justify-between z-10">
|
||||
<div className="flex flex-row flex-wrap m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between">
|
||||
{widgets && (
|
||||
<>
|
||||
|
|
@ -215,7 +216,7 @@ function Home({ initialSettings }) {
|
|||
{services && (
|
||||
<div className="flex flex-wrap p-8 items-start">
|
||||
{services.map((group) => (
|
||||
<ServicesGroup key={group.name} services={group} layout={settings.layout?.[group.name]} />
|
||||
<ServicesGroup key={group.name} services={group} layout={initialSettings.layout?.[group.name]} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -229,9 +230,9 @@ function Home({ initialSettings }) {
|
|||
)}
|
||||
|
||||
<div className="flex p-8 pb-0 w-full justify-end">
|
||||
{!settings?.color && <ColorToggle />}
|
||||
{!initialSettings?.color && <ColorToggle />}
|
||||
<Revalidate />
|
||||
{!settings?.theme && <ThemeToggle />}
|
||||
{!initialSettings?.theme && <ThemeToggle />}
|
||||
</div>
|
||||
|
||||
<div className="flex p-8 pt-4 w-full justify-end">
|
||||
|
|
@ -241,3 +242,23 @@ function Home({ initialSettings }) {
|
|||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Wrapper({ initialSettings, fallback }) {
|
||||
return (
|
||||
<div
|
||||
id="page_wrapper"
|
||||
className={classNames(
|
||||
"relative w-full h-full",
|
||||
initialSettings.theme && initialSettings.theme,
|
||||
initialSettings.color && `theme-${initialSettings.color}`
|
||||
)}
|
||||
>
|
||||
<div
|
||||
id="page_container"
|
||||
className="fixed overflow-auto w-full h-full bg-theme-50 dark:bg-theme-800 transition-all"
|
||||
>
|
||||
<Index initialSettings={initialSettings} fallback={fallback} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,33 +9,50 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: Manrope, "Manrope-Fallback", Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#page_wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: overlay;
|
||||
}
|
||||
|
||||
.light body::-webkit-scrollbar {
|
||||
.light #page_container {
|
||||
scrollbar-color: rgb(var(--color-300)) rgb(var(--color-200));
|
||||
}
|
||||
|
||||
.dark #page_container {
|
||||
scrollbar-color: rgb(var(--color-600)) rgb(var(--color-700));
|
||||
}
|
||||
|
||||
.light ::-webkit-scrollbar {
|
||||
width: 0.75em;
|
||||
}
|
||||
|
||||
.light body::-webkit-scrollbar-track {
|
||||
.light ::-webkit-scrollbar-track {
|
||||
background-color: rgb(var(--color-200));
|
||||
}
|
||||
|
||||
.light body::-webkit-scrollbar-thumb {
|
||||
.light ::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(var(--color-300));
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
.dark body::-webkit-scrollbar {
|
||||
.dark ::-webkit-scrollbar {
|
||||
width: 0.75em;
|
||||
}
|
||||
|
||||
.dark body::-webkit-scrollbar-track {
|
||||
.dark ::-webkit-scrollbar-track {
|
||||
background-color: rgb(var(--color-700));
|
||||
}
|
||||
|
||||
.dark body::-webkit-scrollbar-thumb {
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(var(--color-600));
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export function ColorProvider({ initialTheme, children }) {
|
|||
const [color, setColor] = useState(getInitialColor);
|
||||
|
||||
const rawSetColor = (rawColor) => {
|
||||
const root = window.document.documentElement;
|
||||
const root = window.document.getElementById("page_wrapper");
|
||||
|
||||
root.classList.remove(`theme-${lastColor}`);
|
||||
root.classList.add(`theme-${rawColor}`);
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export function ThemeProvider({ initialTheme, children }) {
|
|||
const [theme, setTheme] = useState(getInitialTheme);
|
||||
|
||||
const rawSetTheme = (rawTheme) => {
|
||||
const root = window.document.documentElement;
|
||||
const root = window.document.getElementById("page_wrapper");
|
||||
const isDark = rawTheme === "dark";
|
||||
|
||||
root.classList.remove(isDark ? "light" : "dark");
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue