Skip to content

GitLab

Commit 2759de21 authored by Mattias J Duffy's avatar Mattias J Duffy
Browse files

added scss and changed the card sizing a bit

parent 4eea8edf
Expand all Hide whitespace changes
Inline Side-by-side
package.json
View file @ 2759de21
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
"mapbox-gl": "^0.40.1", "mapbox-gl": "^0.40.1",
"material-ui": "next", "material-ui": "next",
"material-ui-icons": "^1.0.0-alpha.19", "material-ui-icons": "^1.0.0-alpha.19",
"node-sass-chokidar": "^0.0.3",
"npm-run-all": "^4.1.1",
"prop-types": "^15.5.10", "prop-types": "^15.5.10",
"react": "^15.6.1", "react": "^15.6.1",
"react-autosuggest": "^9.3.2", "react-autosuggest": "^9.3.2",
...@@ -30,8 +32,12 @@ ...@@ -30,8 +32,12 @@
}, },
"proxy": "http://localhost:3001", "proxy": "http://localhost:3001",
"scripts": { "scripts": {
"start": "react-scripts start ", "build-css": "node-sass-chokidar src/ -o src/",
"build": "react-scripts build", "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom", "test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject", "eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public", "storybook": "start-storybook -p 9009 -s public",
......
src/components/FacilityCategory.js
View file @ 2759de21
...@@ -78,7 +78,7 @@ const FacilityCategory = ({classes, category}) => { ...@@ -78,7 +78,7 @@ const FacilityCategory = ({classes, category}) => {
return ( return (
<div className={classes.categoryWrapper}> <div className={classes.categoryWrapper}>
{generateAvatar()} {/* {generateAvatar()} */}
<Typography type={'body1'} noWrap> <Typography type={'body1'} noWrap>
{category.name} {category.name}
</Typography> </Typography>
......
src/containers/FacilityCard.js
View file @ 2759de21
...@@ -134,12 +134,12 @@ class FacilityCard extends React.Component { ...@@ -134,12 +134,12 @@ class FacilityCard extends React.Component {
const {classes, facility, favorites, addFavoriteFacility, removeFavoriteFacility, setSidebar} = this.props const {classes, facility, favorites, addFavoriteFacility, removeFavoriteFacility, setSidebar} = this.props
const twoLineEllipsis = CSS.supports('-webkit-line-clamp', 2) ? classes.twoLineEllipsisWebkit : classes.twoLineEllipsis; const twoLineEllipsis = CSS.supports('-webkit-line-clamp', 2) ? classes.twoLineEllipsisWebkit : classes.twoLineEllipsis;
return ( return (
<Card onClick={this.handleClick} className={classes.root} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised> <Card onClick={this.handleClick} className={'root'} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
<CardMedia className={classes.media} <CardMedia className={'media'}
image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/> image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
<div className={classes.logoContainer}> <div className={'logoContainer'}>
<CardMedia className={classes.logo} <CardMedia className={'logo'}
image={'https://upload.wikimedia.org/wikipedia/en/d/d3/Starbucks_Corporation_Logo_2011.svg'}/> image={'https://upload.wikimedia.org/wikipedia/en/d/d3/Starbucks_Corporation_Logo_2011.svg'}/>
</div> </div>
...@@ -147,14 +147,14 @@ class FacilityCard extends React.Component { ...@@ -147,14 +147,14 @@ class FacilityCard extends React.Component {
<FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)} <FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)}
addFavoriteFacility={addFavoriteFacility} isHovered={this.state.isHovered} removeFavoriteFacility={removeFavoriteFacility}/> addFavoriteFacility={addFavoriteFacility} isHovered={this.state.isHovered} removeFavoriteFacility={removeFavoriteFacility}/>
<CardContent className={classes.cardContent}> <CardContent className={'cardContent'}>
<Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}> <Grid container align={'center'} direction={'column'} className={'smallGridContainerSpacing'}>
<Grid item className={classes.smallGridItemSpacing}> <Grid item className={'smallGridItemSpacing'}>
<Typography type={'title'} align={'center'} className={twoLineEllipsis}> <Typography type={'subheading'} align={'center'} className={twoLineEllipsis}>
{removeBrackets(facility.facility_name)} {removeBrackets(facility.facility_name)}
</Typography> </Typography>
</Grid> </Grid>
<Grid item className={classes.smallGridItemSpacing}> <Grid item className={'smallGridItemSpacing'}>
<FacilityCategory category={facility.facility_category} /> <FacilityCategory category={facility.facility_category} />
</Grid> </Grid>
</Grid> </Grid>
...@@ -162,11 +162,11 @@ class FacilityCard extends React.Component { ...@@ -162,11 +162,11 @@ class FacilityCard extends React.Component {
<CardActions> <CardActions>
<Grid container justify={'space-around'}> <Grid container justify={'space-around'}>
<Grid item className={classes.extraInfoWrapper}> <Grid item className={'extraInfoWrapper'}>
<FacilityStatus facility={facility}/> <FacilityStatus facility={facility}/>
</Grid> </Grid>
<Grid item className={classes.extraInfoWrapper}> <Grid item className={'extraInfoWrapper'}>
<Typography type={'caption'}> <Typography type={'caption'}>
<LocationOnIcon/> <LocationOnIcon/>
</Typography> </Typography>
......
src/index.css
View file @ 2759de21
...@@ -14,3 +14,4 @@ body>#root{ ...@@ -14,3 +14,4 @@ body>#root{
width:100%; width:100%;
height: 100%; height: 100%;
} }
src/index.js
View file @ 2759de21
...@@ -2,6 +2,7 @@ import React from 'react'; ...@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import {applyMiddleware, compose, createStore} from 'redux'; import {applyMiddleware, compose, createStore} from 'redux';
import './index.css'; import './index.css';
import './styles/containers/facilityCard.css'
import Layout from './containers/Layout'; import Layout from './containers/Layout';
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';
import createHistory from 'history/createBrowserHistory' import createHistory from 'history/createBrowserHistory'
......
src/styles/containers/facilityCard.css 0 → 100644
View file @ 2759de21
@media screen and (min-width: 1024px) {
.root {
width: 187.5px;
height: 230px;
border-radius: 5px;
position: relative; }
.cardContent {
padding: 8px 4px 0 4px !important; }
.smallGridContainerSpacing {
margin: -2px -8px !important; }
.smallGridItemSpacing {
padding: 0px 8px !important; }
.media {
flex: 1;
height: 86.25px; }
.logoContainer {
width: 75px;
height: 75px;
margin: auto;
margin-top: -45px;
border-radius: 50%;
border: 5px solid white; }
.logo {
width: 75px;
height: 75px;
margin: auto;
border-radius: 50%;
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
.extraInfoWrapper {
display: flex;
align-items: center;
max-width: 50%; }
.twoLineEllipsis {
position: relative;
line-height: 1em;
max-height: 2em;
overflow: hidden; }
.twoLineEllipsisWebkit {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; } }
@media screen and (min-width: 1680px) {
.root {
width: 250px;
border-radius: 5px;
position: relative; }
.cardContent {
padding: 8px 4px 0 4px !important; }
.smallGridContainerSpacing {
margin: -2px -8px !important; }
.smallGridItemSpacing {
padding: 3px 8px !important; }
.media {
flex: 1;
height: 115px; }
.logoContainer {
width: 100px;
height: 100px;
margin: auto;
margin-top: -60px;
border-radius: 90px;
border: 5px solid white; }
.logo {
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
.extraInfoWrapper {
display: flex;
align-items: center;
max-width: 50%; }
.twoLineEllipsis {
position: relative;
line-height: 1em;
max-height: 2em;
overflow: hidden; }
.twoLineEllipsisWebkit {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; } }
src/styles/containers/facilityCard.scss 0 → 100644
View file @ 2759de21
@media screen and (min-width:1024px) {
.root {
width: 250px * .75;
height:230px;
border-radius: 5px;
position: relative;
}
.cardContent {
padding: 8px 4px 0 4px !important;
}
.smallGridContainerSpacing {
margin: -2px -8px !important;
}
.smallGridItemSpacing {
padding: 0px 8px !important;
}
.media {
flex: 1;
height: 115px * .75;
}
.logoContainer {
width: 100px * .75;
height: 100px * .75;
margin: auto;
margin-top: -60px * .75;
border-radius: 50%;
border: 5px solid white;
}
.logo {
width: 100px * .75;
height: 100px * .75;
margin: auto;
border-radius: 50%;
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.extraInfoWrapper {
display: flex;
align-items: center;
max-width: 50%;
}
.twoLineEllipsis {
position: relative;
line-height: 1em;
max-height: 2em;
overflow: hidden;
}
.twoLineEllipsisWebkit {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
@media screen and (min-width:1680px) {
.root {
width: 250px;
border-radius: 5px;
position: relative;
}
.cardContent {
padding: 8px 4px 0 4px !important;
}
.smallGridContainerSpacing {
margin: -2px -8px !important;
}
.smallGridItemSpacing {
padding: 3px 8px !important;
}
.media {
flex: 1;
height: 115px;
}
.logoContainer {
width: 100px;
height: 100px;
margin: auto;
margin-top: -60px;
border-radius: 90px;
border: 5px solid white;
}
.logo {
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.extraInfoWrapper {
display: flex;
align-items: center;
max-width: 50%;
}
.twoLineEllipsis {
position: relative;
line-height: 1em;
max-height: 2em;
overflow: hidden;
}
.twoLineEllipsisWebkit {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
\ No newline at end of file
yarn.lock
View file @ 2759de21
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment