improved static styles and x-browser scrollbars

2 years ago · f52c6f3b41
parent 2271cc0044
commit f52c6f3b41
5 changed files with 61 additions and 27 deletions
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@ -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>
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@ -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>
+  );
+}
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -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;
 }
--- a/src/utils/contexts/color.jsx
+++ b/src/utils/contexts/color.jsx
@ -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}`);
--- a/src/utils/contexts/theme.jsx
+++ b/src/utils/contexts/theme.jsx
@ -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");