Skip to content

Commit

Permalink
Merge pull request #17 from openearthplatforminitiative/fix/improve-s…
Browse files Browse the repository at this point in the history 
…tyling

fix/improve-styling
  • Loading branch information
@henrikav
henrikav authored Jan 26, 2024
2 parents a12af8e + 5c377fc commit 4127f28
Show file tree
Hide file tree
Showing 18 changed files with 441 additions and 495 deletions.
7 changes: 6 additions & 1 deletion app/components/ApiCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@ export interface CardProps {

const ApiCard = ({ header, subHeader, CardIcon, href }: CardProps) => {
return (
<Link href={href} className={'min-w-52 sm:w-80 max-w-80 h-48'}>
<Link
href={href}
className={
'flex flex-1 md:min-w-[280px] min-w-[230px] 2xs:max-w-[calc(100%-0.75rem)] sm:max-w-[calc(48%-0.75rem)] lg:max-w-[calc(31%-0.75rem)]'
}
>
<Card
className={
'group gap-6 bg-[#F2F4EF] hover:bg-secondary-90 relative overflow-visible transition duration-300 w-full h-full'
Expand Down
234 changes: 121 additions & 113 deletions app/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,126 +4,134 @@ import { OpenEPILogoSmall } from '@/app/icons/OpenEPILogoSmall';
import { Divider, List, ListItem } from '@mui/material';
import { ExternalLinkIcon } from '@/app/icons/ExternalLinkIcon';
import Link from 'next/link';
import { ExternalLinkIconSmall } from '@/app/icons/ExternalLinkIconSmall';

const Footer = () => {
return (
<Box className={'flex w-full flex-col bg-neutralVariant-90'}>
<Box className={'flex flex-col items-center lg:m-auto p-6'}>
<Box className='flex flex-row gap-5 mb-6 mt-11 w-full'>
<OpenEPILogoSmall />
<Typography className='lg:text-2xl text-xl'>
| Developer Portal
</Typography>
</Box>
<Box
className={
'flex flex-wrap justify-between lg:text-base text-lg w-full'
}
>
<Box>
<List className={'gap-4'}>
<ListItem>
<Link
className={'underline hover:no-underline'}
href={'/data-catalog'}
>
Data catalog
</Link>
</ListItem>
<ListItem>
<Link
className={'underline hover:no-underline'}
href={'/resources'}
>
Resources
</Link>
</ListItem>
<ListItem>
<Link
className={'underline hover:no-underline'}
href={'/contact'}
>
Contact
</Link>
</ListItem>
<ListItem>
<a
target={'_blank'}
className={
'flex flex-row gap-1 items-center underline hover:no-underline'
}
href={'https://openepi.io'}
>
About the project <ExternalLinkIcon />
</a>
</ListItem>
</List>
<footer
className={'flex w-full flex-col items-center bg-neutralVariant-90'}
>
<Box className={'lg:max-w-7xl w-full'}>
<Box className={'flex flex-col items-center p-6'}>
<Box className='flex flex-row gap-5 mb-6 mt-11 w-full'>
<OpenEPILogoSmall />
<Typography className='md:text-2xl sm:text-xl sm:contents hidden'>
| Developer Portal
</Typography>
</Box>
<Box>
<List className={'gap-4 '}>
<ListItem className={'text-secondary-main'}>
The OpenEPI project partners
</ListItem>
<ListItem>
<a
target={'_blank'}
href='https://knowit.no'
className={
'flex flex-row gap-1 underline hover:no-underline items-center'
}
>
Knowit <ExternalLinkIcon />
</a>
</ListItem>
<ListItem>
<a
target={'_blank'}
href='https://capto.no'
className={
'flex flex-row gap-1 underline hover:no-underline items-center'
}
>
Capto
<ExternalLinkIcon />
</a>
</ListItem>
<ListItem>
<a
target={'_blank'}
href='https://www.creativecommons.org/'
className={
'flex flex-row gap-1 underline hover:no-underline items-center'
}
>
Creative Commons
<ExternalLinkIcon />
</a>
</ListItem>
<ListItem>
<a
target={'_blank'}
href='https://openfuture.eu/'
className={
'flex flex-row gap-1 underline hover:no-underline items-center'
}
>
Open Future
<ExternalLinkIcon />
</a>
</ListItem>
</List>
<Box
className={
'flex flex-wrap gap-x-[420px] lg:text-base text-lg w-full'
}
>
<Box>
<List className={'gap-4'}>
<ListItem>
<Link
className={'underline hover:no-underline'}
href={'/data-catalog'}
>
Data catalog
</Link>
</ListItem>
<ListItem>
<Link
className={'underline hover:no-underline'}
href={'/resources'}
>
Resources
</Link>
</ListItem>
<ListItem>
<Link
className={'underline hover:no-underline'}
href={'/contact'}
>
Contact
</Link>
</ListItem>
<ListItem>
<a
target={'_blank'}
className={
'flex flex-row gap-1 items-center underline hover:no-underline'
}
href={'https://openepi.io'}
>
About the project <ExternalLinkIconSmall />
</a>
</ListItem>
</List>
</Box>
<Box>
<List className={'gap-4 '}>
<ListItem className={'text-secondary-main'}>
The OpenEPI project partners
</ListItem>
<ListItem>
<a
target={'_blank'}
href='https://knowit.no'
className={
'flex flex-row gap-1 underline hover:no-underline items-center'
}
>
Knowit{' '}
<Box className={'w-[10px] h-[10px]'}>
<ExternalLinkIconSmall />
</Box>
</a>
</ListItem>
<ListItem>
<a
target={'_blank'}
href='https://capto.no'
className={
'flex flex-row gap-1 underline hover:no-underline items-center'
}
>
Capto
<ExternalLinkIconSmall />
</a>
</ListItem>
<ListItem>
<a
target={'_blank'}
href='https://www.creativecommons.org/'
className={
'flex flex-row gap-1 underline hover:no-underline items-center'
}
>
Creative Commons
<ExternalLinkIconSmall />
</a>
</ListItem>
<ListItem>
<a
target={'_blank'}
href='https://openfuture.eu/'
className={
'flex flex-row gap-1 underline hover:no-underline items-center'
}
>
Open Future
<ExternalLinkIconSmall />
</a>
</ListItem>
</List>
</Box>
</Box>
<Box className={'flex flex-col gap-6 pt-14 pb-20 w-full'}>
<Divider />
<Typography>
2024 - Except where otherwise noted, content on this site is
licensed under a Creative Commons Attribution 4.0 International
license.
</Typography>
</Box>
</Box>
<Box className={'flex flex-col gap-6 pt-14 pb-20'}>
<Divider />
<Typography>
2023 - Except where otherwise noted, content on this site is
licensed under a Creative Commons Attribution 4.0 International
license.
</Typography>
</Box>
</Box>
</Box>
</footer>
);
};

Expand Down
2 changes: 1 addition & 1 deletion app/components/InfoCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const InfoCard = ({
<Box className={' flex flex-row justify-between px-2 items-center'}>
<Box className={'flex flex-row gap-2'}>
<CardIcon />
<Typography className={'text-2xl'}>{header}</Typography>
<Typography className={'text-xl xs:text-2xl'}>{header}</Typography>
</Box>
<Box className='transform transition-transform duration-300 group-hover:translate-x-2'>
{externalLink ? <ExternalLinkIcon /> : <InternalLinkIcon />}
Expand Down
22 changes: 18 additions & 4 deletions app/components/ResourceCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,28 @@ const ResourceCard = ({
alt,
}: ResourceCardProps) => {
return (
<Link target={'_blank'} href={href} className={'w-fit'}>
<Link
target={'_blank'}
href={href}
className={
'flex flex-1 md:min-w-[300px] min-w-[250px] 2xs:max-w-[calc(100%-0.75rem)] xs:max-w-[calc(50%-0.75rem)] lg:max-w-[calc(33%-0.75rem)] h-full'
}
>
<Card
className={'group rounded-xl w-fit bg-[#F2F4EF] hover:bg-secondary-90'}
className={
'group rounded-xl bg-[#F2F4EF] hover:bg-secondary-90 w-full h-full'
}
>
<Image src={imageUrl} alt={alt} width={331} height={188} />
<Image
src={imageUrl}
alt={alt}
width={0}
height={0}
className={'h-full w-full'}
/>
<Box className={'flex flex-col p-6'}>
<Box className={'flex flex-row justify-between items-center'}>
<Typography variant='h5' component='div'>
<Typography variant='h5' className={'text-xl xs:text-2xl'}>
{header}
</Typography>
<Box className='transform transition-transform duration-300 group-hover:translate-x-2'>
Expand Down
44 changes: 39 additions & 5 deletions app/contact/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,17 @@ import Link from 'next/link';
const Home = () => {
return (
<Box className={'w-full h-full lg:max-w-7xl p-6 lg:my-44 my-20'}>
<Typography className={'text-5xl mb-20'}>
<Typography
variant={'h1'}
className={
'leading-[48px] xs:leading-[64px] text-4xl xs:text-6xl mb-20'
}
>
Need help or want to get involved
</Typography>
<Box className={'flex sm:flex-row flex-col gap-28'}>
<Box className={'flex flex-col sm:w-1/2'}>
<Typography className={'text-3xl'}>
<Typography variant={'h2'} className={'text-2xl xs:text-3xl '}>
Submit bugs, feature requests and more
</Typography>
<Typography className={'mt-8 mb-10 text-base'}>
Expand All @@ -40,7 +45,7 @@ const Home = () => {
</Link>
</Box>
<Box className={'flex flex-col gap-30 sm:w-1/2'}>
<Typography className={'text-3xl'}>
<Typography variant={'h2'} className={'text-2xl xs:text-3xl'}>
Join the community and join the discussion
</Typography>
<Typography className={'mt-8 mb-10 text-base'}>
Expand All @@ -63,26 +68,53 @@ const Home = () => {
<Divider className={'my-16'} />
<Box className={'flex sm:flex-row flex-col gap-28'}>
<Box className={'sm:w-1/2'}>
<Typography className={'text-2xl mb-10'}>
<Typography variant={'h2'} className={'text-xl xs:text-2xl mb-10'}>
General enquiry about the project
</Typography>
<Box className={'flex flex-col w-full gap-3.5'}>
<TextField
className={'w-full'}
variant={'filled'}
placeholder={'Name'}
label={'Name'}
sx={{
'& .MuiFilledInput-underline:after': {
borderBottomColor: '#006D41',
},
'& label.Mui-focused': {
color: '#006D41',
},
}}
/>
<TextField
className={'w-full '}
variant={'filled'}
placeholder={'Email'}
label={'Email'}
sx={{
'& .MuiFilledInput-underline:after': {
borderBottomColor: '#006D41',
},
'& label.Mui-focused': {
color: '#006D41',
},
}}
/>
<TextField
className={'w-full h-36'}
variant={'filled'}
rows={5}
placeholder={'Message'}
label={'Message'}
multiline={true}
sx={{
'& .MuiFilledInput-underline:after': {
borderBottomColor: '#006D41',
},
'& label.Mui-focused': {
color: '#006D41',
},
}}
/>
</Box>
<Box className={'flex flex-col'}>
Expand All @@ -104,7 +136,9 @@ const Home = () => {
</Box>
</Box>
<Box className={'sm:w-1/2'}>
<Typography className={'text-2xl mb-8'}>Send us a line</Typography>
<Typography variant={'h2'} className={'text-xl xs:text-2xl mb-8'}>
Send us a line
</Typography>
<Typography className={'text-lg'}>
You may also contact us directly through email:
</Typography>
Expand Down
Loading

0 comments on commit 4127f28

Please sign in to comment.