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": { "dependencies": {
"@headlessui/react": "^1.7.2", "@headlessui/react": "^1.7.2",
"@kubernetes/client-node": "^0.17.1", "@kubernetes/client-node": "^0.17.1",
"@tailwindcss/container-queries": "^0.1.1",
"classnames": "^2.3.2", "classnames": "^2.3.2",
"compare-versions": "^5.0.1", "compare-versions": "^5.0.1",
"dockerode": "^3.3.4", "dockerode": "^3.3.4",

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

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

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

@ -30,7 +30,7 @@ export default function Item({ service, group }) {
}; };
return ( return (
<li key={service.name}> <li key={service.name} className="@container">
<div <div
className={`${ className={`${
hasLink ? "cursor-pointer " : " " 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", "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 }) { export default function List({ group, services, layout, isGroup = false }) {
return ( return (
<ul <ul
className={classNames( 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" isGroup ? undefined : "mt-3"
)} )}
> >

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

@ -7,7 +7,7 @@ export default function Block({ value, label }) {
return ( return (
<div <div
className={classNames( 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" : "" value === undefined ? "animate-pulse" : ""
)} )}
> >

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

@ -12,10 +12,23 @@ export default function Container({ error = false, children, service }) {
return null; return null;
} }
return <Error service={service} error={error} /> return <Error service={service} error={error} />;
} }
const childrenArray = Array.isArray(children) ? children : [children]; 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; let visibleChildren = childrenArray;
const fields = service?.widget?.fields; const fields = service?.widget?.fields;
@ -26,14 +39,20 @@ export default function Container({ error = false, children, service }) {
// fields: [ "resources.cpu", "resources.mem", "field"] // fields: [ "resources.cpu", "resources.mem", "field"]
// or even // or even
// fields: [ "resources.cpu", "widget_type.field" ] // fields: [ "resources.cpu", "widget_type.field" ]
visibleChildren = childrenArray?.filter(child => fields.some(field => { visibleChildren = childrenArray?.filter((child) =>
let fullField = field; fields.some((field) => {
if (!field.includes(".")) { let fullField = field;
fullField = `${type}.${field}`; if (!field.includes(".")) {
} fullField = `${type}.${field}`;
return fullField === child?.props?.label; }
})); 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>
);
} }

2
src/styles/globals.css
View File

@ -57,4 +57,4 @@ body {
::-webkit-details-marker { ::-webkit-details-marker {
display: none; display: none;
} }

49
tailwind.config.js
View File

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