skrd/musiclist-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mas cmabios de estilo, relamente no se exactamente que cambio hice

Browse Source
This commit is contained in:
Daniel Cortes
2020-06-17 07:20:26 -04:00
parent 6a19e651d3
commit 5fbbc1dd1c
4 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/EntityList.scss
View File

@@ -17,7 +17,6 @@ ul.entity-list {
width: 200px; width: 200px;
height: 200px; height: 200px;
background-color: var(--gray-2); background-color: var(--gray-2);
margin-right: 1em;
} }
.body { .body {
@@ -55,6 +54,10 @@ ul.entity-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.cover {
margin-right: 1em;
}
} }
.widget { .widget {
@@ -74,8 +77,7 @@ ul.entity-list {
justify-content: space-between; justify-content: space-between;
.entity-item { .entity-item {
margin-bottom: 2em; padding-bottom: .5em;
a { a {
.cover { .cover {
width: 250px; width: 250px;
@@ -83,7 +85,9 @@ ul.entity-list {
} }
.body { .body {
height: 15px; display: flex;
flex-direction: column;
.title { .title {
max-width: 250px; max-width: 250px;
display: inline-block; display: inline-block;
@@ -91,8 +95,8 @@ ul.entity-list {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.subtitle { .subtitle {
display: none;
} }
} }
} }
@@ -131,6 +135,7 @@ ul.entity-list {
border-bottom: solid var(--line-width) var(--accent); border-bottom: solid var(--line-width) var(--accent);
transition: width 300ms ease-in; transition: width 300ms ease-in;
width: 0; width: 0;
margin-top: -5px;
} }
.cover { .cover {

12
src/services/search_service.js
View File

@@ -2,20 +2,20 @@ import axios from 'axios'
let baseUrl = `${process.env.REACT_APP_API_SERVER}/api/brainz`; let baseUrl = `${process.env.REACT_APP_API_SERVER}/api/brainz`;
export async function searchArtist(query, page) { export async function searchArtist(query, page, per_page=10) {
const url = `${baseUrl}/artist?query=${query}&page=${page}`; const url = `${baseUrl}/artist?query=${query}&page=${page}&per_page=${per_page}`;
const response = await axios.get(url); const response = await axios.get(url);
return response.data return response.data
} }
export async function searchDisc(query, page) { export async function searchDisc(query, page, per_page=10) {
const url = `${baseUrl}/disc?query=${query}&page=${page}`; const url = `${baseUrl}/disc?query=${query}&page=${page}&per_page=${per_page}`;
const response = await axios.get(url); const response = await axios.get(url);
return response.data return response.data
} }
export async function searchSong(query, page) { export async function searchSong(query, page, per_page=10) {
const url = `${baseUrl}/recording?query=${query}&page=${page}`; const url = `${baseUrl}/recording?query=${query}&page=${page}&per_page=${per_page}`;
const response = await axios.get(url); const response = await axios.get(url);
return response.data return response.data
} }

3
src/styles/grid.scss
View File

@@ -5,8 +5,11 @@
.row { .row {
display: flex; display: flex;
flex-direction: row;
flex-wrap: wrap;
& > * { & > * {
padding: .5em; padding: .5em;
min-width: 300px;
} }
.col, col-1 { .col, col-1 {

6
src/views/Search.jsx
View File

@@ -97,13 +97,13 @@ const SearchDiscs = (props) => {
const loadDiscs = (query, page) => { const loadDiscs = (query, page) => {
page = page ? page : 1; page = page ? page : 1;
searchDisc(query, page).then((response) => { searchDisc(query, page, 16).then((response) => {
setDiscs(response.discs); setDiscs(response.discs);
setPaginate(response.paginate); setPaginate(response.paginate);
}) })
}; };
let discsComponent = <EntityList placeholder={true} size={10} cover={true}/>; let discsComponent = <EntityList placeholder={true} grid={true} size={16} cover={true}/>;
if (discs) { if (discs) {
const items = discs.map((disc) => ({ const items = discs.map((disc) => ({
'cover': <CoverArt disc={disc}/>, 'cover': <CoverArt disc={disc}/>,
@@ -114,7 +114,7 @@ const SearchDiscs = (props) => {
const list = [{ const list = [{
'items': items 'items': items
}] }]
discsComponent = <EntityList list={list}/> discsComponent = <EntityList list={list} grid={true}/>
} }
let paginateComponent; let paginateComponent;