StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Some mobile improvements for the UI; make console fill space better

Browse source
This commit is contained in:
DaneEveritt 2022-06-21 18:43:59 -04:00
parent faff263f17
commit 54c619e6ba
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
9 changed files with 127 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

30
resources/scripts/components/server/console/StatBlock.tsx
View file

@ -3,6 +3,7 @@ import Icon from '@/components/elements/Icon';
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';
interface StatBlockProps {
title: string;
@ -10,33 +11,26 @@ interface StatBlockProps {
color?: string | undefined;
icon: IconDefinition;
children: React.ReactNode;
className?: string;
}
export default ({ title, icon, color, description, children }: StatBlockProps) => {
export default ({ title, icon, color, description, className, children }: StatBlockProps) => {
return (
<Tooltip arrow placement={'top'} disabled={!description} content={description || ''}>
<div className={'flex items-center space-x-4 bg-gray-600 rounded p-4 shadow-lg'}>
<div
className={classNames(
'transition-colors duration-500',
'flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-lg shadow-md',
color || 'bg-gray-700',
)}
>
<div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
<div className={classNames(styles.status_bar, color || 'bg-gray-700')}/>
<div className={classNames(styles.icon, color || 'bg-gray-700')}>
<Icon
icon={icon}
className={classNames(
'w-6 h-6 m-auto',
{
'text-gray-100': !color || color === 'bg-gray-700',
'text-gray-50': color && color !== 'bg-gray-700',
},
)}
className={classNames({
'text-gray-100': !color || color === 'bg-gray-700',
'text-gray-50': color && color !== 'bg-gray-700',
})}
/>
</div>
<div className={'flex flex-col justify-center overflow-hidden'}>
<p className={'font-header leading-tight text-sm text-gray-200'}>{title}</p>
<p className={'text-xl font-semibold text-gray-50 truncate'}>
<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'}>
{children}
</p>
</div>