diff --git a/package.json b/package.json index b46cea8d..1d35fdd7 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx index eb64cc3d..7c7f882c 100644 --- a/src/components/services/group.jsx +++ b/src/components/services/group.jsx @@ -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 (
- {({ open }) => ( - <> - - {layout?.icon && -
- -
- } -

{services.name}

- - - - - - - - - )} + {({ open }) => ( + <> + + {layout?.icon && ( +
+ +
+ )} +

{services.name}

+ + + + + + + + + )}
); diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx index 36e454ce..a0f282c1 100644 --- a/src/components/services/item.jsx +++ b/src/components/services/item.jsx @@ -30,7 +30,7 @@ export default function Item({ service, group }) { }; return ( -
  • +
  • diff --git a/src/components/services/widget/block.jsx b/src/components/services/widget/block.jsx index 2af53fff..0cac23fd 100644 --- a/src/components/services/widget/block.jsx +++ b/src/components/services/widget/block.jsx @@ -7,7 +7,7 @@ export default function Block({ value, label }) { return (
    diff --git a/src/components/services/widget/container.jsx b/src/components/services/widget/container.jsx index 4b8a06ca..7cb468ac 100644 --- a/src/components/services/widget/container.jsx +++ b/src/components/services/widget/container.jsx @@ -12,10 +12,23 @@ export default function Container({ error = false, children, service }) { return null; } - return + return ; } 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
    {visibleChildren}
    ; + return ( +
    + {visibleChildren} +
    + ); } diff --git a/src/styles/globals.css b/src/styles/globals.css index ea780576..402db588 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -57,4 +57,4 @@ body { ::-webkit-details-marker { display: none; -} \ No newline at end of file +} diff --git a/tailwind.config.js b/tailwind.config.js index a075f6e9..5937ff89 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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", ], -} +};