ruihildt
/
spoti-search
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactor and improve layout

This commit is contained in:
rui hildt 2020-08-17 21:19:59 +02:00
parent 47a25fe939
commit 66f01bfc95
2 changed files with 96 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Album.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Box, Heading, Image } from 'grommet';
import { Box, Heading } from 'grommet';
import placeholder from '../assets/placeholder-music.jpg';
@ -10,10 +10,16 @@ export const Album = ({ image, name }: { image: string; name: string }) => {
}
return (
<Box round='xxsmall' elevation='small' overflow='hidden'>
<Box height='300px'>
<Image src={image} fit='cover' />
</Box>
<Box width='255px' margin={{right: '20px'}}>
<Box
height='255px'
width='255px'
background={{
repeat: 'no-repeat',
size: 'cover',
image: `url(${image})`,
}}
/>
<Heading
level='4'
margin={{ bottom: 'small', top: 'small', left: 'small' }}

166
src/components/Results.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Box, Grid, ResponsiveContext, Heading } from 'grommet';
import { Box, Heading } from 'grommet';
import { Album } from './Album';
import { Artists, Albums } from '../interfaces';
@ -34,87 +34,91 @@ export const Results = ({
});
return (
<Grid
as='section'
rows={['fit', 'fit']}
columns={['fit', 'fit']}
gap='large'
areas={[
['title', 'title'],
['artist-other', 'artist-other'],
['disco-title', 'disco-title'],
['discography', 'discography'],
]}
pad='xlarge'
>
<Heading
level='1'
gridArea='title'
size='medium'
margin={{ vertical: 'none' }}
>
{selectedName}
</Heading>
<>
<Box
gridArea='artist-other'
direction='row-responsive'
responsive
gap='large'
width='xxlarge'
margin={{
vertical: '0',
horizontal: 'auto',
}}
>
<Box width={{ min: '300px', max: '300px' }}>
<Box
round='full'
background={{
repeat: 'no-repeat',
size: 'cover',
image: `url(${selectedImage})`,
}}
height='300px'
width='300px'
/>
</Box>
<Box justify='center'>
<Heading
level='2'
margin={{ vertical: 'none' }}
size='small'
>
Other results
</Heading>
<Box
direction='row-reverse'
justify='end'
wrap
gap='medium'
width={{ min: '332px' }}
>
{otherArtists.map((artist) => (
<Other
key={artist.id}
image={artist.image}
name={artist.name}
handleClick={handleClick}
/>
))}
<Heading level='1' size='medium'>
{selectedName}
</Heading>
</Box>
<Box
as='section'
direction='row'
width='xxlarge'
margin={{
vertical: '0',
horizontal: 'auto',
}}
>
<Box
direction='column'
align='center'
width={{ min: '320px', max: '320px' }}
margin={{
top: '0',
bottom: '0',
left: '20px',
right: '80px',
}}
>
<Box>
<Box
round='full'
background={{
repeat: 'no-repeat',
size: 'cover',
image: `url(${selectedImage})`,
}}
height='270px'
width='270px'
margin={{
top: '0',
bottom: '15px',
left: '0',
right: '0',
}}
/>
</Box>
<Box>
<Heading
level='2'
size='small'
>
Other results
</Heading>
<Box direction='row-reverse' justify='around' wrap>
{otherArtists.map((artist) => (
<Other
key={artist.id}
image={artist.image}
name={artist.name}
handleClick={handleClick}
/>
))}
</Box>
</Box>
</Box>
</Box>
<Heading
level='2'
gridArea='disco-title'
size='medium'
margin={{ bottom: 'none' }}
>
Discography
</Heading>
<ResponsiveContext.Consumer>
{(size) => (
<Grid
gridArea='discography'
align='start'
columns={{ count: 'fill', size: '260px' }}
gap='large'
<Box
direction='column'
width={{ min: '320px' }}
margin={{ top: '-52px' }}
>
<Heading
level='2'
size='medium'
>
Discography
</Heading>
<Box direction='row' justify='start' wrap>
{selectedAlbums.map((album) => (
<Album
key={album.id}
@ -122,9 +126,9 @@ export const Results = ({
name={album.name}
/>
))}
</Grid>
)}
</ResponsiveContext.Consumer>
</Grid>
</Box>
</Box>
</Box>
</>
);
};