Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Added in some responsive design to the Comments modals for mobile

Browse source 
refs https://github.com/TryGhost/Team/issues/1703
This commit is contained in:
James Morris 2022-07-22 09:35:52 +01:00
parent 8d41ec360b
commit 2c013b8db0
2 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/comments-ui/src/components/modals/GenericDialog.js
View file

@ -27,7 +27,7 @@ const GenericDialog = (props) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed top-0 left-0 overflow-hidden w-screen h-screen flex pt-12 justify-center bg-gradient-to-b from-[rgba(0,0,0,0.2)] to-rgba(0,0,0,0.1) backdrop-blur-[2px]" onClick={close}>
<div className="fixed top-0 left-0 overflow-hidden w-screen h-screen flex pt-0 sm:pt-12 justify-center bg-gradient-to-b from-[rgba(0,0,0,0.2)] to-rgba(0,0,0,0.1) backdrop-blur-[2px]" onClick={close}>
<Transition.Child
enter="transition duration-200 delay-150 linear"
enterFrom="translate-y-4 opacity-0"
@ -36,7 +36,7 @@ const GenericDialog = (props) => {
leaveFrom="translate-y-0 opacity-100"
leaveTo="translate-y-4 opacity-0"
>
<div className="bg-white w-[500px] p-8 rounded-xl text-center shadow-modal" onClick={stopPropagation}>
<div className="bg-white w-screen sm:w-[500px] h-screen sm:h-auto p-8 rounded-none sm:rounded-xl text-center shadow-modal" onClick={stopPropagation}>
{props.children}
</div>
</Transition.Child>

3
apps/comments-ui/tailwind.config.js
View file

@ -161,6 +161,9 @@ module.exports = {
'0%, 100%': {transform: 'scale(1)'},
'50%': {transform: 'scale(1.3)'}
}
},
screens: {
'sm': '481px'
}
},
content: [