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

added scss and changed the card sizing a bit

parent 4eea8edf
......@@ -13,6 +13,8 @@
"mapbox-gl": "^0.40.1",
"material-ui": "next",
"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",
"react": "^15.6.1",
"react-autosuggest": "^9.3.2",
......@@ -30,8 +32,12 @@
},
"proxy": "http://localhost:3001",
"scripts": {
"start": "react-scripts start ",
"build": "react-scripts build",
"build-css": "node-sass-chokidar src/ -o src/",
"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",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
......
......@@ -78,7 +78,7 @@ const FacilityCategory = ({classes, category}) => {
return (
<div className={classes.categoryWrapper}>
{generateAvatar()}
{/* {generateAvatar()} */}
<Typography type={'body1'} noWrap>
{category.name}
</Typography>
......
......@@ -134,12 +134,12 @@ class FacilityCard extends React.Component {
const {classes, facility, favorites, addFavoriteFacility, removeFavoriteFacility, setSidebar} = this.props
const twoLineEllipsis = CSS.supports('-webkit-line-clamp', 2) ? classes.twoLineEllipsisWebkit : classes.twoLineEllipsis;
return (
<Card onClick={this.handleClick} className={classes.root} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
<CardMedia className={classes.media}
<Card onClick={this.handleClick} className={'root'} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
<CardMedia className={'media'}
image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
<div className={classes.logoContainer}>
<CardMedia className={classes.logo}
<div className={'logoContainer'}>
<CardMedia className={'logo'}
image={'https://upload.wikimedia.org/wikipedia/en/d/d3/Starbucks_Corporation_Logo_2011.svg'}/>
</div>
......@@ -147,14 +147,14 @@ class FacilityCard extends React.Component {
<FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)}
addFavoriteFacility={addFavoriteFacility} isHovered={this.state.isHovered} removeFavoriteFacility={removeFavoriteFacility}/>
<CardContent className={classes.cardContent}>
<Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}>
<Grid item className={classes.smallGridItemSpacing}>
<Typography type={'title'} align={'center'} className={twoLineEllipsis}>
<CardContent className={'cardContent'}>
<Grid container align={'center'} direction={'column'} className={'smallGridContainerSpacing'}>
<Grid item className={'smallGridItemSpacing'}>
<Typography type={'subheading'} align={'center'} className={twoLineEllipsis}>
{removeBrackets(facility.facility_name)}
</Typography>
</Grid>
<Grid item className={classes.smallGridItemSpacing}>
<Grid item className={'smallGridItemSpacing'}>
<FacilityCategory category={facility.facility_category} />
</Grid>
</Grid>
......@@ -162,11 +162,11 @@ class FacilityCard extends React.Component {
<CardActions>
<Grid container justify={'space-around'}>
<Grid item className={classes.extraInfoWrapper}>
<Grid item className={'extraInfoWrapper'}>
<FacilityStatus facility={facility}/>
</Grid>
<Grid item className={classes.extraInfoWrapper}>
<Grid item className={'extraInfoWrapper'}>
<Typography type={'caption'}>
<LocationOnIcon/>
</Typography>
......
......@@ -14,3 +14,4 @@ body>#root{
width:100%;
height: 100%;
}
......@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import {applyMiddleware, compose, createStore} from 'redux';
import './index.css';
import './styles/containers/facilityCard.css'
import Layout from './containers/Layout';
import registerServiceWorker from './registerServiceWorker';
import createHistory from 'history/createBrowserHistory'
......
@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; } }
@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
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