Improve responsiveness and structure
This commit is contained in:
parent
8d182a1177
commit
84a6cc4f4e
@ -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}
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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) => (
|
||||
|
Loading…
Reference in New Issue
Block a user