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:
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user