Cutlery/homepage
1
0
Fork 0
mirror of https://github.com/gethomepage/homepage.git synced 2025-08-11 09:13:38 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixhancement: restore native scrolling, background (#5573)

Browse Source
This commit is contained in:
shamoon 2025-07-25 18:01:03 -07:00 committed by GitHub
parent 0c000c1ecd
commit 8c4e73e122
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 63 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/pages/index.jsx
View File

@ -498,54 +498,68 @@ function Home({ initialSettings }) {
} }
export default function Wrapper({ initialSettings, fallback }) { export default function Wrapper({ initialSettings, fallback }) {
const { themeContext } = useContext(ThemeContext); const { theme } = useContext(ThemeContext);
const wrappedStyle = {}; let backgroundImage = "";
let opacity = initialSettings?.backgroundOpacity ?? 1;
let backgroundBlur = false; let backgroundBlur = false;
let backgroundSaturate = false; let backgroundSaturate = false;
let backgroundBrightness = false; let backgroundBrightness = false;
if (initialSettings && initialSettings.background) { if (initialSettings && initialSettings.background) {
let opacity = initialSettings.backgroundOpacity ?? 1; const bg = initialSettings.background;
let backgroundImage = initialSettings.background; if (typeof bg === "object") {
if (typeof initialSettings.background === "object") { backgroundImage = bg.image || "";
backgroundImage = initialSettings.background.image; if (bg.opacity !== undefined) {
backgroundBlur = initialSettings.background.blur !== undefined; opacity = bg.opacity / 100;
backgroundSaturate = initialSettings.background.saturate !== undefined; }
backgroundBrightness = initialSettings.background.brightness !== undefined; backgroundBlur = bg.blur !== undefined;
if (initialSettings.background.opacity !== undefined) opacity = initialSettings.background.opacity / 100; 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 ( return (
<div <div id="page_wrapper" className="relative min-h-screen">
id="page_wrapper"
className={classNames(
"relative",
initialSettings.theme && initialSettings.theme,
initialSettings.color && `theme-${initialSettings.color}`,
themeContext === "dark" ? "scheme-dark" : "scheme-light",
)}
>
<div
id="page_container"
className="fixed overflow-auto w-full h-full bg-theme-50 dark:bg-theme-800 transition-all"
style={wrappedStyle}
>
<div <div
id="inner_wrapper" id="inner_wrapper"
tabIndex="-1" tabIndex="-1"
className={classNames( className={classNames(
"fixed overflow-auto w-full h-full", "w-full h-full overflow-auto",
backgroundBlur && backgroundBlur &&
`backdrop-blur${initialSettings.background.blur.length ? "-" : ""}${initialSettings.background.blur}`, `backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`,
backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`, backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`, backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
)} )}
@ -553,6 +567,5 @@ export default function Wrapper({ initialSettings, fallback }) {
<Index initialSettings={initialSettings} fallback={fallback} /> <Index initialSettings={initialSettings} fallback={fallback} />
</div> </div>
</div> </div>
</div>
); );
} }

18
src/styles/globals.css
View File

@ -25,8 +25,6 @@
} }
#__next { #__next {
width: 100%;
height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -34,16 +32,17 @@
html, html,
body { body {
font-family: Manrope, "Manrope-Fallback", Arial, sans-serif; font-family: Manrope, "Manrope-Fallback", Arial, sans-serif;
overflow: hidden; height: 100%;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
letter-spacing: 0.1px; letter-spacing: 0.1px;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
} }
#page_wrapper { #page_wrapper {
width: 100vw; width: 100%;
height: 100vh; min-height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -60,15 +59,6 @@ body {
--scrollbar-track: rgb(var(--color-700)); --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 { dialog ::-webkit-scrollbar {
display: none; display: none;
} }

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.getElementById("page_wrapper"); const root = window.document.documentElement;
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.getElementById("page_wrapper"); const root = window.document.documentElement;
const isDark = rawTheme === "dark"; const isDark = rawTheme === "dark";
root.classList.remove(isDark ? "light" : "dark"); root.classList.remove(isDark ? "light" : "dark");