weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Additional responsive changes [Login]

Browse Source 
- Updated responsive design for login screen to go fill the entire screen when on small screen sizes i.e. mobile
This commit is contained in:
Dogma 2024-05-03 00:20:10 +10:00
parent 5c4b09735a
commit 3ddafa4fff
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/react/src/ui/modals/components/card.tsx
View File

@ -6,7 +6,7 @@ export function Card(props: {
children?: JSX.Element | JSX.Element[],
className?: string
}) {
return <div className={props.className + "flex flex-col gap-3 max-h-80 w-full max-w-64 dark:hover:bg-olympus-300 content-start rounded-md p-5 drop-shadow dark:bg-olympus-500 text-black dark:text-white text-pretty cursor-pointer"}>
return <div className={props.className + "flex flex-col gap-3 max-h-80 w-full max-w-64 max-lg:max-w-[100%] dark:hover:bg-olympus-300 content-start rounded-md p-5 drop-shadow dark:bg-olympus-500 text-black dark:text-white text-pretty cursor-pointer"}>
{props.children}
<div className='flex flex-grow justify-end items-end text-black dark:text-gray-500'><FontAwesomeIcon className="" icon={faArrowRight} /></div>
</div>

2
frontend/react/src/ui/modals/components/modal.tsx
View File

@ -5,7 +5,7 @@ export function Modal(props: {
children?: JSX.Element | JSX.Element[],
className?: string
}) {
return <div className={props.className + "fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-48%] z-ui-4 rounded-xl border-solid border-[1px] border-gray-500 drop-shadow"}>
return <div className={props.className + "fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-ui-4 rounded-xl border-solid border-[1px] border-gray-500 drop-shadow "}>
{props.children}
</div>
}

8
frontend/react/src/ui/modals/login.tsx
View File

@ -17,8 +17,8 @@ export function LoginModal(props: {
const [password, setPassword] = useState("");
const [displayName, setDisplayName] = useState("");
return <Modal className="inline-flex max-h-[600px] overflow-y-auto h-[75%] scroll-smooth w-[80%] max-w-[1100px] bg-white dark:bg-olympus-800 ">
<div className='absolute gap-8 flex flex-col p-16 max-lg:p-12 w-full'>
return <Modal className="inline-flex max-h-[600px] overflow-y-auto h-[75%] scroll-smooth w-[80%] max-w-[1100px] bg-white dark:bg-olympus-800 max-md:w-full max-md:h-full max-md:max-h-full max-md:rounded-none max-md:border-none ">
<div className='absolute gap-8 flex flex-col p-16 max-lg:p-8 w-full '>
<div className="flex flex-row max-lg:flex-col w-full gap-6">
<div className="flex flex-grow flex-col gap-5 w-[40%] max-lg:w-[100%] content-center justify-start">
{
@ -82,7 +82,7 @@ export function LoginModal(props: {
</div>
<div className='flex flex-grow flex-row overflow-hidden gap-2 content-end justify-center max-lg:justify-start max-md:flex-col'>
<Card className=''>
<img src="/resources/theme/images/splash/1.jpg" className='h-[40%] contents-center w-full object-cover rounded-md'></img>
<img src="/resources/theme/images/splash/1.jpg" className='h-[40%] max-h-[120px] contents-center w-full object-cover rounded-md'></img>
<div className='font-bold mt-2'>
YouTube Video Guide
</div>
@ -91,7 +91,7 @@ export function LoginModal(props: {
</div>
</Card>
<Card className=''>
<img src="/resources/theme/images/splash/1.jpg" className='h-[40%] contents-center w-full object-cover rounded-md'></img>
<img src="/resources/theme/images/splash/1.jpg" className='h-[40%] max-h-[120px] contents-center w-full object-cover rounded-md'></img>
<div className='font-bold mt-2'>
Wiki Guide
</div>