return base modal before bug on size
This commit is contained in:
parent
2b8770f3c2
commit
be6b1b119f
1 changed files with 17 additions and 20 deletions
|
|
@ -115,47 +115,44 @@ function BaseModal({
|
||||||
break;
|
break;
|
||||||
case "smaller":
|
case "smaller":
|
||||||
minWidth = "min-w-[40vw]";
|
minWidth = "min-w-[40vw]";
|
||||||
height = "";
|
height = "h-[11rem]";
|
||||||
break;
|
break;
|
||||||
case "smaller-h-full":
|
case "smaller-h-full":
|
||||||
minWidth = "min-w-[40vw]";
|
minWidth = "min-w-[40vw]";
|
||||||
height = " ";
|
height = "h-full";
|
||||||
break;
|
break;
|
||||||
case "small":
|
case "small":
|
||||||
minWidth = "min-w-[40vw]";
|
minWidth = "min-w-[40vw]";
|
||||||
height = "";
|
height = "h-[40vh]";
|
||||||
break;
|
break;
|
||||||
case "small-h-full":
|
case "small-h-full":
|
||||||
minWidth = "min-w-[40vw]";
|
minWidth = "min-w-[40vw]";
|
||||||
height = " ";
|
|
||||||
break;
|
break;
|
||||||
case "medium":
|
case "medium":
|
||||||
minWidth = "min-w-[60vw]";
|
minWidth = "min-w-[60vw]";
|
||||||
height = "";
|
height = "h-[60vh]";
|
||||||
break;
|
break;
|
||||||
case "medium-h-full":
|
case "medium-h-full":
|
||||||
minWidth = "min-w-[60vw]";
|
minWidth = "min-w-[60vw]";
|
||||||
height = " ";
|
|
||||||
break;
|
break;
|
||||||
case "large":
|
case "large":
|
||||||
minWidth = "min-w-[85vw]" ;
|
minWidth = "min-w-[85vw]";
|
||||||
height = "h-[90vh]";
|
height = "h-[80vh]";
|
||||||
break;
|
break;
|
||||||
case "three-cards":
|
case "three-cards":
|
||||||
minWidth = "min-w-[1066px]";
|
minWidth = "min-w-[1066px]";
|
||||||
height = "";
|
height = "h-[80vh]";
|
||||||
break;
|
break;
|
||||||
case "large-thin":
|
case "large-thin":
|
||||||
minWidth = "min-w-[65vw]";
|
minWidth = "min-w-[65vw]";
|
||||||
height = "h-[90vh]";
|
height = "h-[80vh]";
|
||||||
break;
|
break;
|
||||||
case "large-h-full":
|
case "large-h-full":
|
||||||
minWidth = "min-w-[80vw]";
|
minWidth = "min-w-[80vw]";
|
||||||
height = " ";
|
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
minWidth = "min-w-[80vw]";
|
minWidth = "min-w-[80vw]";
|
||||||
height = "";
|
height = "h-[80vh]";
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -171,34 +168,34 @@ function BaseModal({
|
||||||
{type === "modal" ? (
|
{type === "modal" ? (
|
||||||
<Modal open={open} onOpenChange={setOpen}>
|
<Modal open={open} onOpenChange={setOpen}>
|
||||||
{triggerChild}
|
{triggerChild}
|
||||||
<ModalContent className={cn(minWidth, height, "duration-300")}>
|
<ModalContent className={cn(minWidth, "duration-300")}>
|
||||||
<div className="truncate-doubleline flex-shrink-0 word-break-break-word">
|
<div className="truncate-doubleline word-break-break-word">
|
||||||
{headerChild}
|
{headerChild}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`flex flex-col h-full w-full transition-all duration-300`}
|
className={`flex flex-col ${height!} w-full transition-all duration-300`}
|
||||||
>
|
>
|
||||||
{ContentChild}
|
{ContentChild}
|
||||||
</div>
|
</div>
|
||||||
{ContentFooter && (
|
{ContentFooter && (
|
||||||
<div className="flex flex-row-reverse flex-shrink-0">{ContentFooter}</div>
|
<div className="flex flex-row-reverse">{ContentFooter}</div>
|
||||||
)}
|
)}
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
</Modal>
|
</Modal>
|
||||||
) : (
|
) : (
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
{triggerChild}
|
{triggerChild}
|
||||||
<DialogContent className={cn(minWidth, height, "duration-300")}>
|
<DialogContent className={cn(minWidth, "duration-300")}>
|
||||||
<div className="truncate-doubleline flex-shrink-0 word-break-break-word">
|
<div className="truncate-doubleline word-break-break-word">
|
||||||
{headerChild}
|
{headerChild}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`flex flex-col flex-1 h-full w-full transition-all duration-300`}
|
className={`flex flex-col ${height!} w-full transition-all duration-300`}
|
||||||
>
|
>
|
||||||
{ContentChild}
|
{ContentChild}
|
||||||
</div>
|
</div>
|
||||||
{ContentFooter && (
|
{ContentFooter && (
|
||||||
<div className="flex flex-row-reverse flex-shrink-0">{ContentFooter}</div>
|
<div className="flex flex-row-reverse">{ContentFooter}</div>
|
||||||
)}
|
)}
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue