Allow modals to specify max width
This commit is contained in:
parent
d9f252a077
commit
0e15fe53e6
|
@ -95,6 +95,7 @@ class CustomNodeModal extends React.Component<Props, State> {
|
|||
isOpen={true}
|
||||
buttons={buttons}
|
||||
handleClose={handleClose}
|
||||
maxWidth={580}
|
||||
>
|
||||
<div>
|
||||
{isHttps && <div className="alert alert-warning small">{translate('NODE_Warning')}</div>}
|
||||
|
|
|
@ -111,7 +111,7 @@ $m-anim-speed: 400ms;
|
|||
|
||||
// Mobile styles
|
||||
@media(max-width: $screen-sm) {
|
||||
width: calc(100% - 40px);
|
||||
width: calc(100% - 40px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -15,8 +15,13 @@ interface Props {
|
|||
disableButtons?: boolean;
|
||||
children: any;
|
||||
buttons?: IButton[];
|
||||
maxWidth?: number;
|
||||
handleClose?(): void;
|
||||
}
|
||||
interface ModalStyle {
|
||||
width?: string;
|
||||
maxWidth?: string;
|
||||
}
|
||||
|
||||
const Fade = ({ children, ...props }) => (
|
||||
<CSSTransition {...props} timeout={300} classNames="animate-modal">
|
||||
|
@ -46,16 +51,22 @@ export default class Modal extends PureComponent<Props, {}> {
|
|||
}
|
||||
|
||||
public render() {
|
||||
const { isOpen, title, children, buttons, handleClose } = this.props;
|
||||
const { isOpen, title, children, buttons, handleClose, maxWidth } = this.props;
|
||||
const hasButtons = buttons && buttons.length;
|
||||
const modalStyle: ModalStyle = {};
|
||||
|
||||
if (maxWidth) {
|
||||
modalStyle.width = '100%';
|
||||
modalStyle.maxWidth = `${maxWidth}px`;
|
||||
}
|
||||
|
||||
return (
|
||||
<TransitionGroup>
|
||||
{isOpen && (
|
||||
<Fade>
|
||||
<div>
|
||||
<div className={`Modalshade`} />
|
||||
<div className={`Modal`}>
|
||||
<div className="Modalshade" />
|
||||
<div className="Modal" style={modalStyle}>
|
||||
{title && (
|
||||
<div className="Modal-header flex-wrapper">
|
||||
<h2 className="Modal-header-title">{title}</h2>
|
||||
|
|
Loading…
Reference in New Issue