From 5e01eb4a8dad794a06f5931988fc121cf14ac696 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Marques?= <jose.marques.fend@gmail.com>
Date: Wed, 6 Dec 2023 22:52:02 +0000
Subject: [PATCH] Feature: setting for equal height cards (#2432)

---
 docs/configs/settings.md          | 22 ++++++++++++++++++++++
 src/components/services/group.jsx |  4 ++--
 src/components/services/item.jsx  |  5 +++--
 src/components/services/list.jsx  |  9 +++++++--
 src/pages/index.jsx               |  2 ++
 5 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/docs/configs/settings.md b/docs/configs/settings.md
index ac137d234..fdc5eff23 100644
--- a/docs/configs/settings.md
+++ b/docs/configs/settings.md
@@ -229,6 +229,28 @@ disableCollapse: true
 
 By default the feature is enabled.
 
+### Use Equal Height Cards
+
+You can enable equal height cards for groups of services, this will make all cards in a row the same height.
+
+Global setting in `settings.yaml`:
+
+```yaml
+useEqualHeights: true
+```
+
+Per layout group in `settings.yaml`:
+
+```yaml
+useEqualHeights: false
+layout:
+  ...
+  Group Name:
+    useEqualHeights: true # overrides global setting
+```
+
+By default the feature is disabled
+
 ## Header Style
 
 There are currently 4 options for header styles, you can see each one below.
diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index 736fd27e2..bcc3ce5d0 100644
--- a/src/components/services/group.jsx
+++ b/src/components/services/group.jsx
@@ -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>
           </>
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index d9d962abd..89319691c 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -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">
diff --git a/src/components/services/list.jsx b/src/components/services/list.jsx
index fe5c913c5..854361788 100644
--- a/src/components/services/list.jsx
+++ b/src/components/services/list.jsx
@@ -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>
   );
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index ffded0e97..928331173 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -307,6 +307,7 @@ function Home({ initialSettings }) {
                   layout={settings.layout?.[group.name]}
                   fiveColumns={settings.fiveColumns}
                   disableCollapse={settings.disableCollapse}
+                  useEqualHeights={settings.useEqualHeights}
                 />
               ) : (
                 <BookmarksGroup
@@ -355,6 +356,7 @@ function Home({ initialSettings }) {
     settings.layout,
     settings.fiveColumns,
     settings.disableCollapse,
+    settings.useEqualHeights,
     settings.cardBlur,
     initialSettings.layout,
   ]);