mirror of
https://github.com/gethomepage/homepage.git
synced 2025-08-07 09:01:23 -04:00
Fixhancement: restore native scrolling, background (#5573)
This commit is contained in:
shamoon
GitHub
parent
0c000c1ecd
commit
8c4e73e122
@ -498,60 +498,73 @@ function Home({ initialSettings }) {
|
||||
}
|
||||
|
||||
export default function Wrapper({ initialSettings, fallback }) {
|
||||
const { themeContext } = useContext(ThemeContext);
|
||||
const wrappedStyle = {};
|
||||
const { theme } = useContext(ThemeContext);
|
||||
let backgroundImage = "";
|
||||
let opacity = initialSettings?.backgroundOpacity ?? 1;
|
||||
let backgroundBlur = false;
|
||||
let backgroundSaturate = false;
|
||||
let backgroundBrightness = false;
|
||||
if (initialSettings && initialSettings.background) {
|
||||
let opacity = initialSettings.backgroundOpacity ?? 1;
|
||||
let backgroundImage = initialSettings.background;
|
||||
if (typeof initialSettings.background === "object") {
|
||||
backgroundImage = initialSettings.background.image;
|
||||
backgroundBlur = initialSettings.background.blur !== undefined;
|
||||
backgroundSaturate = initialSettings.background.saturate !== undefined;
|
||||
backgroundBrightness = initialSettings.background.brightness !== undefined;
|
||||
if (initialSettings.background.opacity !== undefined) opacity = initialSettings.background.opacity / 100;
|
||||
const bg = initialSettings.background;
|
||||
if (typeof bg === "object") {
|
||||
backgroundImage = bg.image || "";
|
||||
if (bg.opacity !== undefined) {
|
||||
opacity = bg.opacity / 100;
|
||||
}
|
||||
backgroundBlur = bg.blur !== undefined;
|
||||
backgroundSaturate = bg.saturate !== undefined;
|
||||
backgroundBrightness = bg.brightness !== undefined;
|
||||
} else {
|
||||
backgroundImage = bg;
|
||||
}
|
||||
const opacityValue = 1 - opacity;
|
||||
wrappedStyle.backgroundImage = `
|
||||
linear-gradient(
|
||||
rgb(var(--bg-color) / ${opacityValue}),
|
||||
rgb(var(--bg-color) / ${opacityValue})
|
||||
),
|
||||
url('${backgroundImage}')`;
|
||||
wrappedStyle.backgroundPosition = "center";
|
||||
wrappedStyle.backgroundSize = "cover";
|
||||
}
|
||||
|
||||
// Apply background styles to <body> and theme classes to <html>
|
||||
useEffect(() => {
|
||||
const html = document.documentElement;
|
||||
const body = document.body;
|
||||
|
||||
if (backgroundImage) {
|
||||
body.style.backgroundImage = `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${backgroundImage}')`;
|
||||
} else {
|
||||
body.style.backgroundImage = "none";
|
||||
body.style.backgroundColor = "rgb(var(--bg-color))";
|
||||
}
|
||||
body.style.backgroundSize = "cover";
|
||||
body.style.backgroundPosition = "center";
|
||||
body.style.backgroundAttachment = "fixed";
|
||||
body.style.backgroundRepeat = "no-repeat";
|
||||
|
||||
html.classList.remove("dark", "scheme-dark", "scheme-light");
|
||||
if (theme === "dark") {
|
||||
html.classList.add("dark");
|
||||
}
|
||||
html.classList.add(theme === "dark" ? "scheme-dark" : "scheme-light");
|
||||
|
||||
html.classList.remove(...Array.from(html.classList).filter((cls) => cls.startsWith("theme-")));
|
||||
const themeClass = initialSettings.color ? `theme-${initialSettings.color}` : "theme-slate";
|
||||
html.classList.add(themeClass);
|
||||
|
||||
return () => {
|
||||
body.style.backgroundImage = "";
|
||||
body.style.backgroundColor = "";
|
||||
};
|
||||
}, [backgroundImage, opacity, theme, initialSettings.color]);
|
||||
|
||||
return (
|
||||
<div
|
||||
id="page_wrapper"
|
||||
className={classNames(
|
||||
"relative",
|
||||
initialSettings.theme && initialSettings.theme,
|
||||
initialSettings.color && `theme-${initialSettings.color}`,
|
||||
themeContext === "dark" ? "scheme-dark" : "scheme-light",
|
||||
)}
|
||||
>
|
||||
<div id="page_wrapper" className="relative min-h-screen">
|
||||
<div
|
||||
id="page_container"
|
||||
className="fixed overflow-auto w-full h-full bg-theme-50 dark:bg-theme-800 transition-all"
|
||||
style={wrappedStyle}
|
||||
id="inner_wrapper"
|
||||
tabIndex="-1"
|
||||
className={classNames(
|
||||
"w-full h-full overflow-auto",
|
||||
backgroundBlur &&
|
||||
`backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`,
|
||||
backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
|
||||
backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
|
||||
)}
|
||||
>
|
||||
<div
|
||||
id="inner_wrapper"
|
||||
tabIndex="-1"
|
||||
className={classNames(
|
||||
"fixed overflow-auto w-full h-full",
|
||||
backgroundBlur &&
|
||||
`backdrop-blur${initialSettings.background.blur.length ? "-" : ""}${initialSettings.background.blur}`,
|
||||
backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
|
||||
backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
|
||||
)}
|
||||
>
|
||||
<Index initialSettings={initialSettings} fallback={fallback} />
|
||||
</div>
|
||||
<Index initialSettings={initialSettings} fallback={fallback} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -25,8 +25,6 @@
|
||||
}
|
||||
|
||||
#__next {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@ -34,16 +32,17 @@
|
||||
html,
|
||||
body {
|
||||
font-family: Manrope, "Manrope-Fallback", Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
letter-spacing: 0.1px;
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
}
|
||||
|
||||
#page_wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@ -60,15 +59,6 @@ body {
|
||||
--scrollbar-track: rgb(var(--color-700));
|
||||
}
|
||||
|
||||
#page_container {
|
||||
overflow: auto;
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0.75em;
|
||||
}
|
||||
|
||||
dialog ::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ export function ColorProvider({ initialTheme, children }) {
|
||||
const [color, setColor] = useState(getInitialColor);
|
||||
|
||||
const rawSetColor = (rawColor) => {
|
||||
const root = window.document.getElementById("page_wrapper");
|
||||
const root = window.document.documentElement;
|
||||
|
||||
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.getElementById("page_wrapper");
|
||||
const root = window.document.documentElement;
|
||||
const isDark = rawTheme === "dark";
|
||||
|
||||
root.classList.remove(isDark ? "light" : "dark");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user