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

Feature: setting for equal height cards (#2432)

Browse source
This commit is contained in:
José Marques 2023-12-06 22:52:02 +00:00 • committed by GitHub
parent 7edcf6b047
commit 5e01eb4a8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 36 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/services/group.jsx
View file

@ -6,7 +6,7 @@ import { MdKeyboardArrowDown } from "react-icons/md";
import List from "components/services/list";
import ResolvedIcon from "components/resolvedicon";
export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse }) {
export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse, useEqualHeights }) {
const panel = useRef();
return (
@ -62,7 +62,7 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
}}
>
<Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
<List group={group} services={services.services} layout={layout} />
<List group={group} services={services.services} layout={layout} useEqualHeights={useEqualHeights} />
</Disclosure.Panel>
</Transition>
</>

5
src/components/services/item.jsx
View file

@ -12,7 +12,7 @@ import Kubernetes from "widgets/kubernetes/component";
import { SettingsContext } from "utils/contexts/settings";
import ResolvedIcon from "components/resolvedicon";
export default function Item({ service, group }) {
export default function Item({ service, group, useEqualHeights }) {
const hasLink = service.href && service.href !== "#";
const { settings } = useContext(SettingsContext);
const showStats = service.showStats === false ? false : settings.showStats;
@ -37,7 +37,8 @@ export default function Item({ service, group }) {
className={classNames(
settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
hasLink && "cursor-pointer",
"transition-all h-15 mb-2 p-1 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 relative overflow-clip service-card",
useEqualHeights && "h-[calc(100%-0.5rem)]",
"transition-all mb-2 p-1 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 relative overflow-clip service-card",
)}
>
<div className="flex select-none z-0 service-title">

9
src/components/services/list.jsx
View file

@ -4,7 +4,7 @@ import { columnMap } from "../../utils/layout/columns";
import Item from "components/services/item";
export default function List({ group, services, layout }) {
export default function List({ group, services, layout, useEqualHeights }) {
return (
<ul
className={classNames(
@ -13,7 +13,12 @@ export default function List({ group, services, layout }) {
)}
>
{services.map((service) => (
<Item key={service.container ?? service.app ?? service.name} service={service} group={group} />
<Item
key={service.container ?? service.app ?? service.name}
service={service}
group={group}
useEqualHeights={layout?.useEqualHeights ?? useEqualHeights}
/>
))}
</ul>
);