mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-06 20:28:48 +00:00
Enhancement: apply layout settings to bookmarks (#1902)
* Apply layout settings to bookmarks * merge columnMap const * Remove bookmarksOnTop setting --------- Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
This commit is contained in:
parent
4d55f1fba4
commit
9529553102
8 changed files with 142 additions and 76 deletions
|
@ -209,7 +209,7 @@ function Home({ initialSettings }) {
|
|||
searchProvider = searchProviders[searchWidget.options?.provider];
|
||||
}
|
||||
}
|
||||
const headerStyle = initialSettings?.headerStyle || "underlined";
|
||||
const headerStyle = settings?.headerStyle || "underlined";
|
||||
|
||||
useEffect(() => {
|
||||
function handleKeyDown(e) {
|
||||
|
@ -233,12 +233,12 @@ function Home({ initialSettings }) {
|
|||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{initialSettings.title || "Homepage"}</title>
|
||||
{initialSettings.base && <base href={initialSettings.base} />}
|
||||
{initialSettings.favicon ? (
|
||||
<title>{settings.title || "Homepage"}</title>
|
||||
{settings.base && <base href={settings.base} />}
|
||||
{settings.favicon ? (
|
||||
<>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href={initialSettings.favicon} />
|
||||
<link rel="icon" href={initialSettings.favicon} />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href={settings.favicon} />
|
||||
<link rel="icon" href={settings.favicon} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
@ -248,11 +248,8 @@ function Home({ initialSettings }) {
|
|||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=4" />
|
||||
</>
|
||||
)}
|
||||
<meta
|
||||
name="msapplication-TileColor"
|
||||
content={themes[initialSettings.color || "slate"][initialSettings.theme || "dark"]}
|
||||
/>
|
||||
<meta name="theme-color" content={themes[initialSettings.color || "slate"][initialSettings.theme || "dark"]} />
|
||||
<meta name="msapplication-TileColor" content={themes[settings.color || "slate"][settings.theme || "dark"]} />
|
||||
<meta name="theme-color" content={themes[settings.color || "slate"][settings.theme || "dark"]} />
|
||||
</Head>
|
||||
<div className="relative container m-auto flex flex-col justify-start z-10 h-full">
|
||||
<QuickLaunch
|
||||
|
@ -267,7 +264,7 @@ function Home({ initialSettings }) {
|
|||
className={classNames(
|
||||
"flex flex-row flex-wrap justify-between",
|
||||
headerStyles[headerStyle],
|
||||
initialSettings.cardBlur !== undefined && headerStyle === "boxed" && `backdrop-blur${initialSettings.cardBlur.length ? '-' : ""}${initialSettings.cardBlur}`
|
||||
settings.cardBlur !== undefined && headerStyle === "boxed" && `backdrop-blur${settings.cardBlur.length ? '-' : ""}${settings.cardBlur}`
|
||||
)}
|
||||
>
|
||||
{widgets && (
|
||||
|
@ -275,7 +272,7 @@ function Home({ initialSettings }) {
|
|||
{widgets
|
||||
.filter((widget) => !rightAlignedWidgets.includes(widget.type))
|
||||
.map((widget, i) => (
|
||||
<Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: false, cardBlur: initialSettings.cardBlur }} />
|
||||
<Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: false, cardBlur: settings.cardBlur }} />
|
||||
))}
|
||||
|
||||
<div className={classNames(
|
||||
|
@ -285,7 +282,7 @@ function Home({ initialSettings }) {
|
|||
{widgets
|
||||
.filter((widget) => rightAlignedWidgets.includes(widget.type))
|
||||
.map((widget, i) => (
|
||||
<Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: true, cardBlur: initialSettings.cardBlur }} />
|
||||
<Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: true, cardBlur: settings.cardBlur }} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
|
@ -293,39 +290,42 @@ function Home({ initialSettings }) {
|
|||
</div>
|
||||
|
||||
{services?.length > 0 && (
|
||||
<div className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
|
||||
<div key="services" className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
|
||||
{services.map((group) => (
|
||||
<ServicesGroup
|
||||
<ServicesGroup
|
||||
key={group.name}
|
||||
group={group.name}
|
||||
services={group}
|
||||
layout={initialSettings.layout?.[group.name]}
|
||||
fiveColumns={settings.fiveColumns}
|
||||
disableCollapse={settings.disableCollapse} />
|
||||
layout={settings.layout?.[group.name]}
|
||||
fiveColumns={settings.fiveColumns}
|
||||
disableCollapse={settings.disableCollapse}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{bookmarks?.length > 0 && (
|
||||
<div className={`grow flex flex-wrap pt-0 p-4 sm:p-8 gap-2 grid-cols-1 lg:grid-cols-2 lg:grid-cols-${Math.min(6, bookmarks.length)}`}>
|
||||
<div key="bookmarks" className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
|
||||
{bookmarks.map((group) => (
|
||||
<BookmarksGroup
|
||||
key={group.name}
|
||||
group={group}
|
||||
disableCollapse={settings.disableCollapse} />
|
||||
bookmarks={group}
|
||||
layout={settings.layout?.[group.name]}
|
||||
disableCollapse={settings.disableCollapse}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col mt-auto p-8 w-full">
|
||||
<div className="flex w-full justify-end">
|
||||
{!initialSettings?.color && <ColorToggle />}
|
||||
{!settings?.color && <ColorToggle />}
|
||||
<Revalidate />
|
||||
{!initialSettings?.theme && <ThemeToggle />}
|
||||
{!settings.theme && <ThemeToggle />}
|
||||
</div>
|
||||
|
||||
<div className="flex mt-4 w-full justify-end">
|
||||
{!initialSettings?.hideVersion && <Version />}
|
||||
{!settings.hideVersion && <Version />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue