diff --git a/src/components/EntityList.scss b/src/components/EntityList.scss index 2601dc0..10e8b1b 100644 --- a/src/components/EntityList.scss +++ b/src/components/EntityList.scss @@ -17,7 +17,6 @@ ul.entity-list { width: 200px; height: 200px; background-color: var(--gray-2); - margin-right: 1em; } .body { @@ -55,6 +54,10 @@ ul.entity-list { display: flex; flex-direction: column; } + + .cover { + margin-right: 1em; + } } .widget { @@ -74,8 +77,7 @@ ul.entity-list { justify-content: space-between; .entity-item { - margin-bottom: 2em; - + padding-bottom: .5em; a { .cover { width: 250px; @@ -83,7 +85,9 @@ ul.entity-list { } .body { - height: 15px; + display: flex; + flex-direction: column; + .title { max-width: 250px; display: inline-block; @@ -91,8 +95,8 @@ ul.entity-list { overflow: hidden; text-overflow: ellipsis; } + .subtitle { - display: none; } } } @@ -131,6 +135,7 @@ ul.entity-list { border-bottom: solid var(--line-width) var(--accent); transition: width 300ms ease-in; width: 0; + margin-top: -5px; } .cover { diff --git a/src/services/search_service.js b/src/services/search_service.js index b904725..60888b9 100644 --- a/src/services/search_service.js +++ b/src/services/search_service.js @@ -2,20 +2,20 @@ import axios from 'axios' let baseUrl = `${process.env.REACT_APP_API_SERVER}/api/brainz`; -export async function searchArtist(query, page) { - const url = `${baseUrl}/artist?query=${query}&page=${page}`; +export async function searchArtist(query, page, per_page=10) { + const url = `${baseUrl}/artist?query=${query}&page=${page}&per_page=${per_page}`; const response = await axios.get(url); return response.data } -export async function searchDisc(query, page) { - const url = `${baseUrl}/disc?query=${query}&page=${page}`; +export async function searchDisc(query, page, per_page=10) { + const url = `${baseUrl}/disc?query=${query}&page=${page}&per_page=${per_page}`; const response = await axios.get(url); return response.data } -export async function searchSong(query, page) { - const url = `${baseUrl}/recording?query=${query}&page=${page}`; +export async function searchSong(query, page, per_page=10) { + const url = `${baseUrl}/recording?query=${query}&page=${page}&per_page=${per_page}`; const response = await axios.get(url); return response.data } diff --git a/src/styles/grid.scss b/src/styles/grid.scss index 315be0e..59b14ab 100644 --- a/src/styles/grid.scss +++ b/src/styles/grid.scss @@ -5,8 +5,11 @@ .row { display: flex; + flex-direction: row; + flex-wrap: wrap; & > * { padding: .5em; + min-width: 300px; } .col, col-1 { diff --git a/src/views/Search.jsx b/src/views/Search.jsx index c8161b3..3e98715 100644 --- a/src/views/Search.jsx +++ b/src/views/Search.jsx @@ -97,13 +97,13 @@ const SearchDiscs = (props) => { const loadDiscs = (query, page) => { page = page ? page : 1; - searchDisc(query, page).then((response) => { + searchDisc(query, page, 16).then((response) => { setDiscs(response.discs); setPaginate(response.paginate); }) }; - let discsComponent = ; + let discsComponent = ; if (discs) { const items = discs.map((disc) => ({ 'cover': , @@ -114,7 +114,7 @@ const SearchDiscs = (props) => { const list = [{ 'items': items }] - discsComponent = + discsComponent = } let paginateComponent;