Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix modal layout positioning

Browse source
This commit is contained in:
Dane Everitt 2020-04-03 16:39:55 -07:00
parent 85e3945cd7
commit 807cd815ea
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/scripts/components/elements/Modal.tsx
View file

@ -3,11 +3,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes'; import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
import { CSSTransition } from 'react-transition-group'; import { CSSTransition } from 'react-transition-group';
import Spinner from '@/components/elements/Spinner'; import Spinner from '@/components/elements/Spinner';
import classNames from 'classnames';
export interface RequiredModalProps { export interface RequiredModalProps {
visible: boolean; visible: boolean;
onDismissed: () => void; onDismissed: () => void;
appear?: boolean; appear?: boolean;
top?: boolean;
} }
type Props = RequiredModalProps & { type Props = RequiredModalProps & {
@ -18,7 +20,7 @@ type Props = RequiredModalProps & {
children: React.ReactNode; children: React.ReactNode;
} }
export default ({ visible, appear, dismissable, showSpinnerOverlay, closeOnBackground = true, closeOnEscape = true, onDismissed, children }: Props) => { export default ({ visible, appear, dismissable, showSpinnerOverlay, top = true, closeOnBackground = true, closeOnEscape = true, onDismissed, children }: Props) => {
const [render, setRender] = useState(visible); const [render, setRender] = useState(visible);
const isDismissable = useMemo(() => { const isDismissable = useMemo(() => {
@ -58,7 +60,7 @@ export default ({ visible, appear, dismissable, showSpinnerOverlay, closeOnBackg
} }
} }
}}> }}>
<div className={'modal-container top'}> <div className={classNames('modal-container', { top })}>
{isDismissable && {isDismissable &&
<div className={'modal-close-icon'} onClick={() => setRender(false)}> <div className={'modal-close-icon'} onClick={() => setRender(false)}>
<FontAwesomeIcon icon={faTimes}/> <FontAwesomeIcon icon={faTimes}/>

2
resources/scripts/components/server/users/EditSubuserModal.tsx
View file

@ -45,7 +45,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
const permissions = useStoreState((state: ApplicationStore) => state.permissions.data); const permissions = useStoreState((state: ApplicationStore) => state.permissions.data);
return ( return (
<Modal {...props} showSpinnerOverlay={isSubmitting}> <Modal {...props} top={false} showSpinnerOverlay={isSubmitting}>
<h3 ref={ref}> <h3 ref={ref}>
{subuser ? {subuser ?
`${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}` `${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}`

4
resources/styles/components/modal.css
View file

@ -6,9 +6,9 @@
& > .modal-container { & > .modal-container {
@apply .relative .w-full .max-w-1/2 .m-auto .flex-col .flex; @apply .relative .w-full .max-w-1/2 .m-auto .flex-col .flex;
/*&.top { &.top {
margin-top: 10%; margin-top: 10%;
}*/ }
& > .modal-close-icon { & > .modal-close-icon {
@apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50; @apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50;