Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

improved static styles and x-browser scrollbars

Browse Source
This commit is contained in:
Ben Phelps 2022-09-30 22:13:37 +03:00
parent 2271cc0044
commit f52c6f3b41
5 changed files with 61 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/_document.jsx
View File

@ -9,11 +9,7 @@ export default function Document() {
content="A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations." content="A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations."
/> />
</Head> </Head>
<body <body>
className="
relative w-full h-full bg-theme-50 dark:bg-theme-800 transition duration-150 ease-in-out
"
>
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>

49
src/pages/index.jsx
View File

@ -2,6 +2,7 @@
import useSWR, { SWRConfig } from "swr"; import useSWR, { SWRConfig } from "swr";
import Head from "next/head"; import Head from "next/head";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import classNames from "classnames";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { useEffect, useContext, useState } from "react"; import { useEffect, useContext, useState } from "react";
import { BiError } from "react-icons/bi"; import { BiError } from "react-icons/bi";
@ -12,12 +13,12 @@ import BookmarksGroup from "components/bookmarks/group";
import Widget from "components/widgets/widget"; import Widget from "components/widgets/widget";
import Revalidate from "components/toggles/revalidate"; import Revalidate from "components/toggles/revalidate";
import createLogger from "utils/logger"; import createLogger from "utils/logger";
import useWindowFocus from "utils/hooks/window-focus";
import { getSettings } from "utils/config/config"; import { getSettings } from "utils/config/config";
import { ColorContext } from "utils/contexts/color"; import { ColorContext } from "utils/contexts/color";
import { ThemeContext } from "utils/contexts/theme"; import { ThemeContext } from "utils/contexts/theme";
import { SettingsContext } from "utils/contexts/settings"; import { SettingsContext } from "utils/contexts/settings";
import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response"; import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response";
import useWindowFocus from "utils/hooks/window-focus";
const ThemeToggle = dynamic(() => import("components/toggles/theme"), { const ThemeToggle = dynamic(() => import("components/toggles/theme"), {
ssr: false, ssr: false,
@ -74,7 +75,7 @@ export async function getStaticProps() {
} }
} }
export default function Index({ initialSettings, fallback }) { function Index({ initialSettings, fallback }) {
const windowFocused = useWindowFocus(); const windowFocused = useWindowFocus();
const [stale, setStale] = useState(false); const [stale, setStale] = useState(false);
const { data: errorsData } = useSWR("/api/validate"); const { data: errorsData } = useSWR("/api/validate");
@ -119,7 +120,7 @@ export default function Index({ initialSettings, fallback }) {
if (errorsData && errorsData.length > 0) { if (errorsData && errorsData.length > 0) {
return ( 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"> <div className="flex flex-col">
{errorsData.map((error, i) => ( {errorsData.map((error, i) => (
<div <div
@ -163,10 +164,10 @@ function Home({ initialSettings }) {
const { data: widgets } = useSWR("/api/widgets"); const { data: widgets } = useSWR("/api/widgets");
const wrappedStyle = {}; const wrappedStyle = {};
if (settings && settings.background) { if (initialSettings && initialSettings.background) {
wrappedStyle.backgroundImage = `url(${settings.background})`; wrappedStyle.backgroundImage = `url(${initialSettings.background})`;
wrappedStyle.backgroundSize = "cover"; wrappedStyle.backgroundSize = "cover";
wrappedStyle.opacity = settings.backgroundOpacity ?? 1; wrappedStyle.opacity = initialSettings.backgroundOpacity ?? 1;
} }
useEffect(() => { useEffect(() => {
@ -186,12 +187,12 @@ function Home({ initialSettings }) {
return ( return (
<> <>
<Head> <Head>
<title>{settings.title || "Homepage"}</title> <title>{initialSettings.title || "Homepage"}</title>
{settings.base && <base href={settings.base} />} {initialSettings.base && <base href={initialSettings.base} />}
{settings.favicon && <link rel="icon" href={settings.favicon} />} {initialSettings.favicon && <link rel="icon" href={initialSettings.favicon} />}
</Head> </Head>
<div className="fixed w-full h-full m-0 p-0" style={wrappedStyle} /> <div className="fixed w-screen h-screen m-0 p-0 z-0 pointer-events-none" style={wrappedStyle} />
<div className="relative w-full container m-auto flex flex-col h-screen justify-between"> <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"> <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 && ( {widgets && (
<> <>
@ -215,7 +216,7 @@ function Home({ initialSettings }) {
{services && ( {services && (
<div className="flex flex-wrap p-8 items-start"> <div className="flex flex-wrap p-8 items-start">
{services.map((group) => ( {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> </div>
)} )}
@ -229,9 +230,9 @@ function Home({ initialSettings }) {
)} )}
<div className="flex p-8 pb-0 w-full justify-end"> <div className="flex p-8 pb-0 w-full justify-end">
{!settings?.color && <ColorToggle />} {!initialSettings?.color && <ColorToggle />}
<Revalidate /> <Revalidate />
{!settings?.theme && <ThemeToggle />} {!initialSettings?.theme && <ThemeToggle />}
</div> </div>
<div className="flex p-8 pt-4 w-full justify-end"> <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>
);
}

29
src/styles/globals.css
View File

@ -9,33 +9,50 @@
padding: 0; padding: 0;
} }
html,
body { body {
font-family: Manrope, "Manrope-Fallback", Arial, sans-serif; font-family: Manrope, "Manrope-Fallback", Arial, sans-serif;
overflow: hidden;
}
#page_wrapper {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: overlay; 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; width: 0.75em;
} }
.light body::-webkit-scrollbar-track { .light ::-webkit-scrollbar-track {
background-color: rgb(var(--color-200)); background-color: rgb(var(--color-200));
} }
.light body::-webkit-scrollbar-thumb { .light ::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-300)); background-color: rgb(var(--color-300));
border-radius: 0.25em; border-radius: 0.25em;
} }
.dark body::-webkit-scrollbar { .dark ::-webkit-scrollbar {
width: 0.75em; width: 0.75em;
} }
.dark body::-webkit-scrollbar-track { .dark ::-webkit-scrollbar-track {
background-color: rgb(var(--color-700)); background-color: rgb(var(--color-700));
} }
.dark body::-webkit-scrollbar-thumb { .dark ::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-600)); background-color: rgb(var(--color-600));
border-radius: 0.25em; border-radius: 0.25em;
} }

2
src/utils/contexts/color.jsx
View File

@ -20,7 +20,7 @@ export function ColorProvider({ initialTheme, children }) {
const [color, setColor] = useState(getInitialColor); const [color, setColor] = useState(getInitialColor);
const rawSetColor = (rawColor) => { const rawSetColor = (rawColor) => {
const root = window.document.documentElement; const root = window.document.getElementById("page_wrapper");
root.classList.remove(`theme-${lastColor}`); root.classList.remove(`theme-${lastColor}`);
root.classList.add(`theme-${rawColor}`); root.classList.add(`theme-${rawColor}`);

2
src/utils/contexts/theme.jsx
View File

@ -22,7 +22,7 @@ export function ThemeProvider({ initialTheme, children }) {
const [theme, setTheme] = useState(getInitialTheme); const [theme, setTheme] = useState(getInitialTheme);
const rawSetTheme = (rawTheme) => { const rawSetTheme = (rawTheme) => {
const root = window.document.documentElement; const root = window.document.getElementById("page_wrapper");
const isDark = rawTheme === "dark"; const isDark = rawTheme === "dark";
root.classList.remove(isDark ? "light" : "dark"); root.classList.remove(isDark ? "light" : "dark");