OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better sub-columns breakpoints && wip

Browse Source
This commit is contained in:
lukylix 2023-07-07 15:39:34 +02:00
parent f79e1963a5
commit 726828c556
8 changed files with 105 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -12,6 +12,7 @@
"dependencies": {
"@headlessui/react": "^1.7.2",
"@kubernetes/client-node": "^0.17.1",
"@tailwindcss/container-queries": "^0.1.1",
"classnames": "^2.3.2",
"compare-versions": "^5.0.1",
"dockerode": "^3.3.4",

21
src/components/services/group.jsx
View File

@ -1,36 +1,37 @@
import classNames from "classnames";
import { Disclosure, Transition } from '@headlessui/react';
import { Disclosure, Transition } from "@headlessui/react";
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 }) {
return (
<div
key={services.name}
className={classNames(
layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4",
layout?.style !== "row" && fiveColumns ? "3xl:basis-1/5" : "",
"flex-1 p-1"
"flex-1 p-1 @container"
)}
>
<Disclosure defaultOpen>
{({ open }) => (
<>
<Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
{layout?.icon &&
{layout?.icon && (
<div className="flex-shrink-0 mr-2 w-7 h-7">
<ResolvedIcon icon={layout.icon} />
</div>
}
)}
<h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
<MdKeyboardArrowDown className={classNames(
disableCollapse ? 'hidden' : '',
'transition-opacity opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
open ? 'rotate-180 transform' : ''
)} />
<MdKeyboardArrowDown
className={classNames(
disableCollapse ? "hidden" : "",
"transition-opacity opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl",
open ? "rotate-180 transform" : ""
)}
/>
</Disclosure.Button>
<Transition
enter="transition duration-200 ease-out"

2
src/components/services/item.jsx
View File

@ -30,7 +30,7 @@ export default function Item({ service, group }) {
};
return (
<li key={service.name}>
<li key={service.name} className="@container">
<div
className={`${
hasLink ? "cursor-pointer " : " "

16
src/components/services/list.jsx
View File

@ -14,11 +14,25 @@ const columnMap = [
"grid-cols-1 md:grid-cols-2 lg:grid-cols-8",
];
const subcolumnMap = [
"grid-cols-1",
"grid-cols-1",
"grid-cols-[repeat(auto-fit,minmax(11rem,1fr))]",
"grid-cols-[repeat(auto-fit,minmax(9rem,1fr))]",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
];
export default function List({ group, services, layout, isGroup = false }) {
return (
<ul
className={classNames(
layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col",
layout?.style === "row"
? `grid auto-rows-max ${isGroup ? subcolumnMap[layout?.columns] : columnMap[layout?.columns]} gap-x-2`
: "flex flex-col",
isGroup ? undefined : "mt-3"
)}
>

2
src/components/services/widget/block.jsx
View File

@ -7,7 +7,7 @@ export default function Block({ value, label }) {
return (
<div
className={classNames(
"bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
"bg-theme-200/50 dark:bg-theme-900/20 rounded flex flex-col items-center justify-center text-center p-1",
value === undefined ? "animate-pulse" : ""
)}
>

27
src/components/services/widget/container.jsx
View File

@ -12,10 +12,23 @@ export default function Container({ error = false, children, service }) {
return null;
}
return <Error service={service} error={error} />
return <Error service={service} error={error} />;
}
const childrenArray = Array.isArray(children) ? children : [children];
const numberOfChildren = childrenArray.filter((e) => e).length;
// needed for taillwind class detection
const subColumnsClassMap = [
"",
"",
"@[12rem]:cols-2",
"@[12rem]:cols-2 @[18rem]:cols-3",
"@[12rem]:cols-2 @[18rem]:cols-3 @[24rem]:cols-4",
"@[12rem]:cols-2 @[18rem]:cols-3 @[24rem]:cols-4 @[30rem]:cols-5",
"@[12rem]:cols-2 @[18rem]:cols-3 @[24rem]:cols-4 @[30rem]:cols-5 @[36rem]:cols-6",
"@[12rem]:cols-2 @[18rem]:cols-3 @[24rem]:cols-4 @[30rem]:cols-5 @[36rem]:cols-6 @[42rem]:cols-7",
"@[12rem]:cols-2 @[18rem]:cols-3 @[24rem]:cols-4 @[30rem]:cols-5 @[36rem]:cols-6 @[42rem]:cols-7 @[48rem]:cols-8",
];
let visibleChildren = childrenArray;
const fields = service?.widget?.fields;
@ -26,14 +39,20 @@ export default function Container({ error = false, children, service }) {
// fields: [ "resources.cpu", "resources.mem", "field"]
// or even
// fields: [ "resources.cpu", "widget_type.field" ]
visibleChildren = childrenArray?.filter(child => fields.some(field => {
visibleChildren = childrenArray?.filter((child) =>
fields.some((field) => {
let fullField = field;
if (!field.includes(".")) {
fullField = `${type}.${field}`;
}
return fullField === child?.props?.label;
}));
})
);
}
return <div className="relative flex flex-row w-full">{visibleChildren}</div>;
return (
<div className={`relative grid p-1 gap-2 w-full auto-rows-max grid-cols-[repeat(auto-fit,minmax(6rem,1fr))]`}>
{visibleChildren}
</div>
);
}

47
tailwind.config.js
View File

@ -1,6 +1,7 @@
/** @type {import('tailwindcss').Config} */
const tailwindForms = require("@tailwindcss/forms");
const tailwindScrollbars = require("tailwind-scrollbar");
const tailwindQueries = require("@tailwindcss/container-queries");
module.exports = {
darkMode: "class",
@ -31,33 +32,33 @@ module.exports = {
},
},
screens: {
'3xl': '1800px',
"3xl": "1800px",
// => @media (min-width: 1800px) { ... }
},
},
},
plugins: [tailwindForms, tailwindScrollbars],
plugins: [tailwindForms, tailwindScrollbars, tailwindQueries],
// always include these in build as classes are dynamically constructed
safelist: [
'backdrop-blur',
'backdrop-blur-sm',
'backdrop-blur-md',
'backdrop-blur-xl',
'backdrop-saturate-0',
'backdrop-saturate-50',
'backdrop-saturate-100',
'backdrop-saturate-150',
'backdrop-saturate-200',
'backdrop-brightness-0',
'backdrop-brightness-50',
'backdrop-brightness-75',
'backdrop-brightness-90',
'backdrop-brightness-95',
'backdrop-brightness-100',
'backdrop-brightness-105',
'backdrop-brightness-110',
'backdrop-brightness-125',
'backdrop-brightness-150',
'backdrop-brightness-200',
"backdrop-blur",
"backdrop-blur-sm",
"backdrop-blur-md",
"backdrop-blur-xl",
"backdrop-saturate-0",
"backdrop-saturate-50",
"backdrop-saturate-100",
"backdrop-saturate-150",
"backdrop-saturate-200",
"backdrop-brightness-0",
"backdrop-brightness-50",
"backdrop-brightness-75",
"backdrop-brightness-90",
"backdrop-brightness-95",
"backdrop-brightness-100",
"backdrop-brightness-105",
"backdrop-brightness-110",
"backdrop-brightness-125",
"backdrop-brightness-150",
"backdrop-brightness-200",
],
}
};