Update server listing and associated logic to pull from the panel dynamiacally
This commit is contained in:
parent
952dff854e
commit
fb9c106448
26 changed files with 384 additions and 239 deletions
|
@ -61,7 +61,7 @@ export default (props: Props) => {
|
|||
className={'absolute w-full h-full rounded flex items-center justify-center'}
|
||||
style={{ background: 'hsla(211, 10%, 53%, 0.25)' }}
|
||||
>
|
||||
<Spinner large={false}/>
|
||||
<Spinner/>
|
||||
</div>
|
||||
}
|
||||
<div className={'modal-content p-6'}>
|
||||
|
|
|
@ -1,11 +1,19 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default ({ large, centered }: { large?: boolean; centered?: boolean }) => (
|
||||
export type SpinnerSize = 'large' | 'normal' | 'tiny';
|
||||
|
||||
export default ({ size, centered }: { size?: SpinnerSize; centered?: boolean }) => (
|
||||
centered ?
|
||||
<div className={classNames('flex justify-center', { 'm-20': large, 'm-6': !large })}>
|
||||
<div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}/>
|
||||
<div className={classNames('flex justify-center', { 'm-20': size === 'large', 'm-6': size !== 'large' })}>
|
||||
<div className={classNames('spinner-circle spinner-white', {
|
||||
'spinner-lg': size === 'large',
|
||||
'spinner-sm': size === 'tiny',
|
||||
})}/>
|
||||
</div>
|
||||
:
|
||||
<div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}/>
|
||||
<div className={classNames('spinner-circle spinner-white', {
|
||||
'spinner-lg': size === 'large',
|
||||
'spinner-sm': size === 'tiny',
|
||||
})}/>
|
||||
);
|
||||
|
|
|
@ -1,18 +1,25 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import Spinner, { SpinnerSize } from '@/components/elements/Spinner';
|
||||
|
||||
export default ({ large, fixed, visible }: { visible: boolean; fixed?: boolean; large?: boolean }) => (
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
fixed?: boolean;
|
||||
size?: SpinnerSize;
|
||||
backgroundOpacity?: number;
|
||||
}
|
||||
|
||||
export default ({ size, fixed, visible, backgroundOpacity }: Props) => (
|
||||
<CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
|
||||
<div
|
||||
className={classNames('z-50 pin-t pin-l flex items-center justify-center w-full h-full rounded', {
|
||||
absolute: !fixed,
|
||||
fixed: fixed,
|
||||
})}
|
||||
style={{ background: 'rgba(0, 0, 0, 0.45)' }}
|
||||
style={{ background: `rgba(0, 0, 0, ${backgroundOpacity || 0.45})` }}
|
||||
>
|
||||
<Spinner large={large}/>
|
||||
<Spinner size={size}/>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
);
|
||||
|
|
Reference in a new issue