Better sub-columns breakpoints && wip
This commit is contained in:
lukylix
parent
f79e1963a5
commit
726828c556
@ -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",
|
||||
|
||||
@ -1,51 +1,52 @@
|
||||
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 &&
|
||||
<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' : ''
|
||||
)} />
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
enter="transition duration-200 ease-out"
|
||||
enterFrom="transform scale-75 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-75 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<List group={group} services={services.services} layout={layout} />
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
|
||||
{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" : ""
|
||||
)}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
enter="transition duration-200 ease-out"
|
||||
enterFrom="transform scale-75 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-75 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<List group={group} services={services.services} layout={layout} />
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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 " : " "
|
||||
|
||||
@ -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"
|
||||
)}
|
||||
>
|
||||
|
||||
@ -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" : ""
|
||||
)}
|
||||
>
|
||||
|
||||
@ -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 => {
|
||||
let fullField = field;
|
||||
if (!field.includes(".")) {
|
||||
fullField = `${type}.${field}`;
|
||||
}
|
||||
return fullField === child?.props?.label;
|
||||
}));
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -57,4 +57,4 @@ body {
|
||||
|
||||
::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
@ -11,7 +12,7 @@ module.exports = {
|
||||
],
|
||||
variants: {
|
||||
extend: {
|
||||
display: ["group-hover"],
|
||||
display: ["group-hover"],
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
@ -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",
|
||||
],
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user