dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-07 06:08:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Enhancement: icons-only bookmarks style (#4384)

Browse source
This commit is contained in:
shamoon 2024-12-05 15:35:31 -08:00 • committed by GitHub
parent c58f59c105
commit cb3248117f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 69 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/bookmarks/item.jsx
View file

@ -4,12 +4,17 @@ import classNames from "classnames";
import { SettingsContext } from "utils/contexts/settings";
import ResolvedIcon from "components/resolvedicon";
export default function Item({ bookmark }) {
export default function Item({ bookmark, iconOnly = false }) {
const description = bookmark.description ?? new URL(bookmark.href).hostname;
const { settings } = useContext(SettingsContext);
return (
<li key={bookmark.name} id={bookmark.id} className="bookmark" data-name={bookmark.name}>
<li
key={bookmark.name}
id={bookmark.id}
className={classNames("bookmark", iconOnly && "grid")}
data-name={bookmark.name}
>
<a
href={bookmark.href}
title={bookmark.name}
@ -17,25 +22,37 @@ export default function Item({ bookmark }) {
target={bookmark.target ?? settings.target ?? "_blank"}
className={classNames(
settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
"block w-full text-left cursor-pointer transition-all h-15 mb-3 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10",
"text-left cursor-pointer transition-all rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10",
iconOnly ? "h-[60px] w-[60px] grid" : "block w-full h-15 mb-3",
)}
>
<div className="flex">
<div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md bookmark-icon">
{iconOnly ? (
<div className="flex items-center justify-center text-theme-700 hover:text-theme-700 dark:text-theme-200 text-xl font-medium rounded-md bookmark-icon py-0.5">
{bookmark.icon && (
<div className="flex-shrink-0 w-5 h-5">
<div className="w-7 h-7">
<ResolvedIcon icon={bookmark.icon} alt={bookmark.abbr} />
</div>
)}
{!bookmark.icon && bookmark.abbr}
</div>
<div className="flex-1 overflow-hidden flex items-center justify-between rounded-r-md bookmark-text">
<div className="pl-3 py-2 text-xs bookmark-name">{bookmark.name}</div>
<div className="shrink truncate px-2 py-2 text-theme-500 dark:text-theme-300 text-xs bookmark-description">
{description}
) : (
<div className="flex">
<div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md bookmark-icon">
{bookmark.icon && (
<div className="flex-shrink-0 w-5 h-5">
<ResolvedIcon icon={bookmark.icon} alt={bookmark.abbr} />
</div>
)}
{!bookmark.icon && bookmark.abbr}
</div>
<div className="flex-1 overflow-hidden flex items-center justify-between rounded-r-md bookmark-text">
<div className="pl-3 py-2 text-xs bookmark-name">{bookmark.name}</div>
<div className="shrink truncate px-2 py-2 text-theme-500 dark:text-theme-300 text-xs bookmark-description">
{description}
</div>
</div>
</div>
</div>
)}
</a>
</li>
);