Improve responsiveness and structure

This commit is contained in:
rui hildt 2020-07-24 18:42:26 +02:00
parent 8d182a1177
commit 84a6cc4f4e
4 changed files with 79 additions and 56 deletions

View File

@ -1,5 +1,5 @@
import React, { useState, useCallback, useEffect } from 'react';
import { Grommet, Heading } from 'grommet';
import { Grommet } from 'grommet';
import { debounce } from 'lodash';
import { gql, useLazyQuery } from '@apollo/client';
@ -50,7 +50,11 @@ export default function App() {
const handleSelect = (suggestion: string) => {
let updatedArtists: Artists = [];
let suggestedArtists: Artists = data.queryArtists.slice(0, 5);
let suggestedArtists: Artists = data.queryArtists
.slice(0, 5)
// Map to make a copy of the array, maybe uneeded
.map((artist: Artist) => artist);
// Find the selected artist and move it to index 0
for (let i = 0; i < suggestedArtists!.length; i++) {
@ -96,11 +100,7 @@ export default function App() {
return (
<Grommet theme={theme}>
<Header>
<Heading level='1' margin={{ vertical: 'small' }} color='light-1'>
Spoti Search
</Heading>
</Header>
<Header />
<Search
inputValue={inputValue}
suggestions={suggestions}

View File

@ -1,7 +1,7 @@
import React, { PropsWithChildren } from 'react';
import { Box } from 'grommet';
import React from 'react';
import { Box, Text } from 'grommet';
export const Header = (props: PropsWithChildren<{}>) => {
export const Header = () => {
return (
<Box
as='header'
@ -11,7 +11,15 @@ export const Header = (props: PropsWithChildren<{}>) => {
background='brand'
pad={{ left: 'medium', right: 'small', vertical: 'small' }}
style={{ zIndex: 1 }}
{...props}
/>
>
<Text
margin={{ vertical: 'small' }}
color='light-1'
size='xxlarge'
weight='bold'
>
Spoti Search
</Text>
</Box>
);
};

View File

@ -1,5 +1,5 @@
import React from 'react';
import { Box, Heading } from 'grommet';
import { Box, Text } from 'grommet';
import placeholder from '../assets/placeholder-music.jpg';
@ -20,20 +20,13 @@ export const Other = ({
return (
<Box
round='xxsmall'
overflow='hidden'
align='center'
pad='small'
pad='xsmall'
onClick={() => handleClick(name)}
width='130px'
>
<Heading
level='4'
margin={{ bottom: 'small', top: 'small', left: 'small' }}
>
{name}
</Heading>
<Box
height='small'
width='small'
height='120px'
width='120px'
round='full'
background={{
repeat: 'no-repeat',
@ -41,6 +34,14 @@ export const Other = ({
image: `url(${image})`,
}}
/>
<Text
margin={{ bottom: 'small', top: 'small', left: 'small' }}
textAlign='center'
weight='bold'
wordBreak='break-word'
>
{name}
</Text>
</Box>
);
};

View File

@ -37,11 +37,11 @@ export const Results = ({
<Grid
as='section'
rows={['fit', 'fit']}
columns={['fit', '2/3']}
columns={['fit', 'fit']}
gap='large'
areas={[
['artist-title', 'other-title'],
['artist', 'other'],
['title', 'title'],
['artist-other', 'artist-other'],
['disco-title', 'disco-title'],
['discography', 'discography'],
]}
@ -49,36 +49,45 @@ export const Results = ({
>
<Heading
level='1'
size='small'
gridArea='artist-title'
gridArea='title'
size='medium'
margin={{ vertical: 'none' }}
>
{selectedName}
</Heading>
<Box gridArea='artist'>
<Box
round='full'
background={{
repeat: 'no-repeat',
size: 'cover',
image: `url(${selectedImage})`,
}}
height='300px'
width='300px'
/>
</Box>
<Heading
level='2'
gridArea='other-title'
margin={{ vertical: 'none' }}
alignSelf='end'
size='small'
<Box
gridArea='artist-other'
direction='row-responsive'
responsive
gap='large'
>
Other results
</Heading>
<ResponsiveContext.Consumer>
{(size) => (
<Box gridArea='other' direction='row-reverse' justify='end' wrap gap='medium'>
<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}
@ -88,9 +97,14 @@ export const Results = ({
/>
))}
</Box>
)}
</ResponsiveContext.Consumer>
<Heading level='2' gridArea='disco-title' size='large' margin={{bottom: "none"}}>
</Box>
</Box>
<Heading
level='2'
gridArea='disco-title'
size='medium'
margin={{ bottom: 'none' }}
>
Discography
</Heading>
<ResponsiveContext.Consumer>
@ -98,7 +112,7 @@ export const Results = ({
<Grid
gridArea='discography'
align='start'
columns={{ count: 'fill', size: '300px' }}
columns={{ count: 'fill', size: '260px' }}
gap='large'
>
{selectedAlbums.map((album) => (