Issue #7: Solucionado problema de flexbox

Se decidio cambiar el space-between y dejarlo por default,
remplazandolo por una serie de margenes dado una media query por lo que
queda configurado para mostrar 1, 2, 3 o 4 entidades por lista
This commit is contained in:
Daniel Cortes
2020-06-19 17:12:02 -04:00
parent 9766f3781a
commit a8932f2c74
2 changed files with 13 additions and 4 deletions

View File

@@ -65,10 +65,19 @@ ul.entity-list {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
.entity-item { .entity-item {
padding-bottom: .75em; padding-bottom: .75em;
.entity-container{ width: 250px; }
@for $i from 1 through 4 {
@media (min-width: calc((250px * #{$i}) + (30px * #{$i}))) {
margin-right: calc(((100% / #{$i}) - 250px) / 2);
margin-left: calc(((100% / #{$i}) - 250px) / 2);
}
}
a { a {
.body { .body {
display: flex; display: flex;

View File

@@ -24,10 +24,10 @@ const Versions = (props) => {
props.onPageChanged(page); props.onPageChanged(page);
} }
let versionsComponent = <EntityList placeholder={true} size={10} cover={true}/>; let versionsComponent = <EntityList placeholder={true} size={10} grid={true} cover={true}/>;
if(versions) { if(versions) {
const items = versions.map((version) => { const items = versions.map((version) => {
const cover = (<CoverArt release={version} size={2}/>); const cover = (<CoverArt release={version} size={3}/>);
const subtitle = ( const subtitle = (
<Grid> <Grid>
<RowCol><span>{version.date}</span></RowCol> <RowCol><span>{version.date}</span></RowCol>
@@ -47,7 +47,7 @@ const Versions = (props) => {
const list = [{ const list = [{
'items': items 'items': items
}]; }];
versionsComponent = <EntityList list={list}/> versionsComponent = <EntityList list={list} grid={true}/>
} }
let paginateContent; let paginateContent;