I am currently utilizing react, with Material-ui being used for the Cards. For the layout, I have implemented CSS Grid Layout for the Grid system. Presently, the structure looks like this:
https://i.stack.imgur.com/0FDyY.png
However, my desired outcome is more along the lines of:
https://i.stack.imgur.com/Ue2TW.png
Yet, there are two main issues I am facing:
I intend to make all the
cardsuniform in height (415px). Despite trying to set the height to 415px on.BeerListingScroll-info-box, it does not seem to take effect.The images of bottles and kegs differ in size [keg (80px x 160px) vs. bottle (80px x 317px)]. Is there a way to render them at a more similar size?
-
Code:
BeerListingScroll
import React, { Component } from 'react';
import ReduxLazyScroll from 'redux-lazy-scroll';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchBeers } from '../../actions/';
import BeersListItem from '../../components/BeersListItem';
import ProgressIndicator from '../../components/ProgressIndicator';
import './style.css';
class BeerListingScroll extends Component {
constructor(props) {
super(props);
this.loadBeers = this.loadBeers.bind(this);
}
loadBeers() {
const { skip, limit } = this.props.beers;
this.props.fetchBeers(skip, limit);
}
render() {
const { beersArray, isFetching, errorMessage, hasMore } = this.props.beers;
return (
<div className="container beers-lazy-scroll">
<ReduxLazyScroll
isFetching={isFetching}
errorMessage={errorMessage}
loadMore={this.loadBeers}
hasMore={hasMore}
>
<div className="BeerListingScroll-wrapper">
{beersArray.map(beer => (
<div key={beer.id} className="BeerListingScroll-info-box">
<BeersListItem beer={beer} />
</div>
))}
</div>
</ReduxLazyScroll>
<div className="row beers-lazy-scroll__messages">
{isFetching && (
<div className="alert alert-info">
<ProgressIndicator />
</div>
)}
{!hasMore &&
!errorMessage && (
<div className="alert alert-success">
All the beers have been loaded successfully.
</div>
)}
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
beers: state.beers,
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ fetchBeers }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(BeerListingScroll);
BeerListingScroll css
.BeerListingScroll-wrapper {
display: grid;
margin: 0;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr) ) ;
background-color: #f7f7f7;
}
.BeerListingScroll-info-box {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
width: 320px;
}
/* This applies from 600px onwards */
@media (min-width: 1820px) {
.BeerListingScroll-wrapper {
margin: 0 400px;
}
}
@media (min-width: 1620px) {
.BeerListingScroll-wrapper {
margin: 0 300px;
}
}
@media (min-width: 1366px) {
.BeerListingScroll-wrapper {
margin: 0 200px;
}
}
BeerListItem serves as the child component of BeerListingScroll
import React from 'react';
import Card, { CardContent } from 'material-ui/Card';
import Typography from 'material-ui/Typography';
function BeerListItem(props) {
return (
<div>
<Card raised>
<CardContent>
<img src={props.beer.image_url} alt="beer" width="30%" />
<Typography variant="headline" component="h2">
{props.beer.name}
</Typography>
<Typography component="p">{props.beer.tagline}</Typography>
</CardContent>
</Card>
</div>
);
}
export default BeerListItem;
Complete project details can be found on github -> Github