diff --git a/package.json b/package.json index a5b63a38e..5c1102ff6 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "styled-components-breakpoint": "^3.0.0-preview.20", "swr": "^0.2.3", "tailwindcss": "^3.0.24", + "use-fit-text": "^2.4.0", "uuid": "^3.3.2", "xterm": "^4.15.0", "xterm-addon-attach": "^0.6.0", diff --git a/resources/scripts/components/server/console/PowerButtons.tsx b/resources/scripts/components/server/console/PowerButtons.tsx index c8cd13e68..b2a789b78 100644 --- a/resources/scripts/components/server/console/PowerButtons.tsx +++ b/resources/scripts/components/server/console/PowerButtons.tsx @@ -51,7 +51,6 @@ export default ({ className }: PowerButtonProps) => { @@ -61,7 +60,6 @@ export default ({ className }: PowerButtonProps) => { diff --git a/resources/scripts/components/server/console/ServerDetailsBlock.tsx b/resources/scripts/components/server/console/ServerDetailsBlock.tsx index 9008a3e71..404b83930 100644 --- a/resources/scripts/components/server/console/ServerDetailsBlock.tsx +++ b/resources/scripts/components/server/console/ServerDetailsBlock.tsx @@ -146,11 +146,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => { bytesToHuman(stats.rx) } - + {allocation} diff --git a/resources/scripts/components/server/console/StatBlock.tsx b/resources/scripts/components/server/console/StatBlock.tsx index 258d33034..32c5be394 100644 --- a/resources/scripts/components/server/console/StatBlock.tsx +++ b/resources/scripts/components/server/console/StatBlock.tsx @@ -4,6 +4,7 @@ import { IconDefinition } from '@fortawesome/free-solid-svg-icons'; import classNames from 'classnames'; import Tooltip from '@/components/elements/tooltip/Tooltip'; import styles from './style.module.css'; +import useFitText from 'use-fit-text'; interface StatBlockProps { title: string; @@ -15,6 +16,8 @@ interface StatBlockProps { } export default ({ title, icon, color, description, className, children }: StatBlockProps) => { + const { fontSize, ref } = useFitText({ minFontSize: 8, maxFontSize: 500 }); + return (
@@ -28,11 +31,15 @@ export default ({ title, icon, color, description, className, children }: StatBl })} />
-
+

{title}

-

+

{children} -

+
diff --git a/yarn.lock b/yarn.lock index 2fd21feec..18b63cc4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7336,6 +7336,11 @@ requires-port@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" +resize-observer-polyfill@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" + integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a" @@ -8624,6 +8629,13 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-fit-text@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/use-fit-text/-/use-fit-text-2.4.0.tgz#d3d1cd72f6d29cfb2233ec0e0b38c6f25d319f67" + integrity sha512-Iy4LMrXcdxWlyZ5phntMpJMgyXGB1p3tV73y2r0QrZ6f/thPh+/QU3ie6RCXmjF8tHMs20FKMPskXeDYIla/Ww== + dependencies: + resize-observer-polyfill "^1.5.1" + use-isomorphic-layout-effect@^1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"