diff --git a/package.json b/package.json index a5b63a38..5c1102ff 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 c8cd13e6..b2a789b7 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) => { <Can action={'control.restart'}> <Button.Text className={'w-full sm:w-24'} - variant={Button.Variants.Secondary} disabled={!status} onClick={onButtonClick.bind(this, 'restart')} > @@ -61,7 +60,6 @@ export default ({ className }: PowerButtonProps) => { <Can action={'control.stop'}> <Button.Danger className={'w-full sm:w-24'} - variant={killable ? undefined : Button.Variants.Secondary} disabled={status === 'offline'} onClick={onButtonClick.bind(this, killable ? 'kill' : 'stop')} > diff --git a/resources/scripts/components/server/console/ServerDetailsBlock.tsx b/resources/scripts/components/server/console/ServerDetailsBlock.tsx index 9008a3e7..404b8393 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) } </StatBlock> - <StatBlock - icon={faWifi} - title={'Address'} - description={`You can connect to your server at: ${allocation}`} - > + <StatBlock icon={faWifi} title={'Address'}> {allocation} </StatBlock> </div> diff --git a/resources/scripts/components/server/console/StatBlock.tsx b/resources/scripts/components/server/console/StatBlock.tsx index 258d3303..32c5be39 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 ( <Tooltip arrow placement={'top'} disabled={!description} content={description || ''}> <div className={classNames(styles.stat_block, 'bg-gray-600', className)}> @@ -28,11 +31,15 @@ export default ({ title, icon, color, description, className, children }: StatBl })} /> </div> - <div className={'flex flex-col justify-center overflow-hidden'}> + <div className={'flex flex-col justify-center overflow-hidden w-full'}> <p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p> - <p className={'text-base md:text-xl font-semibold text-gray-50 truncate'}> + <div + ref={ref} + className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'} + style={{ fontSize }} + > {children} - </p> + </div> </div> </div> </Tooltip> diff --git a/yarn.lock b/yarn.lock index 2fd21fee..18b63cc4 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"