Skip to content

GitLab

W
whats-open-web
Commit 626b36f0 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files
Options

Changes to SASS structure. Fixed bugs caused from SASS change.

parent 3809d706
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 229 deletions
package.json
View file @ 626b36f0
......@@ -32,8 +32,8 @@
},
"proxy": "http://localhost:3001",
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"build-css": "node-sass-chokidar src/styles/whatsOpen.scss -o src/styles/",
"watch-css": "npm run build-css --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
......
src/containers/FacilityCard.js
View file @ 626b36f0
......@@ -40,14 +40,16 @@ const materialColors = [red, pink, purple, deepPurple, indigo, blue, lightBlue,
lightGreen, lime, yellow, amber, orange, deepOrange, brown, grey, blueGrey];
class FacilityCard extends React.Component {
constructor(props){
super(props)
super(props);
this.state = {
isHovered:false
}
}
handleClick = () => {
setSidebar(this.props.facility)
this.props.setSidebar(this.props.facility)
};
/**
......@@ -119,27 +121,31 @@ class FacilityCard extends React.Component {
this.setState({
isHovered:true
})
}
};
handleMouseLeave = () =>{
this.setState({
isHovered:false
})
}
/**
* By adding this property to an element, the text will not exceed 2 lines. On webkit browsers,
* -webkit-line-clamp will show ellipsis. This checks to see if the browser is webkit and uses
* an appropriate class.
*/
render(){
const {classes, facility, favorites, addFavoriteFacility, removeFavoriteFacility, setSidebar} = this.props
const twoLineEllipsis = CSS.supports('-webkit-line-clamp', 2) ? classes.twoLineEllipsisWebkit : classes.twoLineEllipsis;
};
render() {
const {facility, favorites, addFavoriteFacility, removeFavoriteFacility} = this.props;
/**
* By adding this property to an element, the text will not exceed 2 lines. On webkit browsers,
* -webkit-line-clamp will show ellipsis. This checks to see if the browser is webkit and uses
* an appropriate class.
*/
const twoLineEllipsis = CSS.supports('-webkit-line-clamp', 2) ? 'fc-two-line-ellipsis-webkit' : 'fc-two-line-ellipsis';
return (
<Card onClick={this.handleClick} className={'root'} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
<CardMedia className={'media'}
<Card onClick={this.handleClick} className={'fc-root'} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
<CardMedia className={'fc-media'}
image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
<div className={'logoContainer'}>
<CardMedia className={'logo'}
<div className={'fc-logo-container'}>
<CardMedia className={'fc-logo'}
image={'https://upload.wikimedia.org/wikipedia/en/d/d3/Starbucks_Corporation_Logo_2011.svg'}/>
</div>
......@@ -147,14 +153,14 @@ class FacilityCard extends React.Component {
<FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)}
addFavoriteFacility={addFavoriteFacility} isHovered={this.state.isHovered} removeFavoriteFacility={removeFavoriteFacility}/>
<CardContent className={'cardContent'}>
<Grid container align={'center'} direction={'column'} className={'smallGridContainerSpacing'}>
<Grid item className={'smallGridItemSpacing'}>
<CardContent className={'fc-card-content'}>
<Grid container align={'center'} direction={'column'} className={'fc-small-grid-container-spacing'}>
<Grid item className={'fc-small-grid-item-spacing'}>
<Typography type={'subheading'} align={'center'} className={twoLineEllipsis}>
{removeBrackets(facility.facility_name)}
</Typography>
</Grid>
<Grid item className={'smallGridItemSpacing'}>
<Grid item className={'fc-small-grid-item-spacing'}>
<FacilityCategory category={facility.facility_category} />
</Grid>
</Grid>
......@@ -162,13 +168,13 @@ class FacilityCard extends React.Component {
<CardActions>
<Grid container justify={'space-around'}>
<Grid item className={'extraInfoWrapper'}>
<Grid item className={'fc-extraInfoWrapper'}>
<FacilityStatus facility={facility}/>
</Grid>
<Grid item className={'extraInfoWrapper'}>
<Grid item className={'fc-extra-info-wrapper'}>
<Typography type={'caption'}>
<LocationOnIcon className={'card-map-marker-icon'}/>
<LocationOnIcon className={'fc-card-map-marker-icon'}/>
</Typography>
<Typography type={'caption'} align={'center'} className={twoLineEllipsis}>
{facility.facility_location.building}
......@@ -179,72 +185,14 @@ class FacilityCard extends React.Component {
</Card>
)
}
};
const sizeScale = .75
const styleSheet = {
root: {
width: 250 * sizeScale,
borderRadius: '5px',
position: 'relative'
},
cardContent: {
padding: '8px 4px 0 4px !important'
},
smallGridContainerSpacing: {
margin: '-2px -8px !important'
},
smallGridItemSpacing: {
padding: '3px 8px !important'
},
media: {
flex: 1,
height: 115*sizeScale,
},
logoContainer: {
width: 100 * sizeScale,
height: 100 * sizeScale,
margin: 'auto',
marginTop: '-60px',
borderRadius: '90px',
border: '5px solid white',
},
logo: {
width: 100 * sizeScale,
height: 100 * sizeScale,
margin: 'auto',
borderRadius: '50%',
boxShadow: '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',
alignItems: 'center',
maxWidth: '50%'
},
twoLineEllipsis: {
position: 'relative',
lineHeight: '1em',
maxHeight: '2em',
overflow: 'hidden',
},
twoLineEllipsisWebkit: {
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
},
tempclass:{
width:20,
height:20,
}
};
}
const mapStateToProps = state => ({
favorites: state.ui.favorites
});
export default compose(connect(mapStateToProps, {
export default connect(mapStateToProps, {
setSidebar,
addFavoriteFacility,
removeFavoriteFacility
}), withStyles(styleSheet))(FacilityCard);
\ No newline at end of file
})(FacilityCard);
\ No newline at end of file
src/index.js
View file @ 626b36f0
......@@ -2,7 +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 './styles/whatsOpen.css'
import Layout from './containers/Layout';
import registerServiceWorker from './registerServiceWorker';
import createHistory from 'history/createBrowserHistory'
......
src/styles/_variables.scss 0 → 100644
View file @ 626b36f0
/* FacilityCard */
/*
This is the scaling that is applied to medium sized devices.
*/
$fc-mdScale: .8;
\ No newline at end of file
src/styles/containers/facilityCard.css deleted 100644 → 0
View file @ 3809d706
@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
View file @ 626b36f0
@media screen and (min-width:1024px) {
.root {
width: 250px * .75;
height:230px;
.fc-two-line-ellipsis {
position: relative;
line-height: 1em;
max-height: 2em;
overflow: hidden;
}
.fc-two-line-ellipsis-webkit {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box !important;
/* autoprefixer: off */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
@media screen and (min-width:1024px) and (max-width:1679px) {
.fc-root {
width: 250px * $fc-mdScale;
height: 230px;
border-radius: 5px !important;
position: relative;
}
.cardContent {
.fc-card-content {
padding: 8px 4px 0 4px !important;
}
.smallGridContainerSpacing {
.fc-small-grid-container-spacing {
margin: -2px -8px !important;
}
.smallGridItemSpacing {
padding: 0px 8px !important;
.fc-small-grid-item-spacing {
padding: 0 8px !important;
}
.media {
.fc-media {
flex: 1;
border-radius: 5px 5px 0px 0px;
height: 115px * .75;
border-radius: 5px 5px 0 0;
height: 115px * $fc-mdScale;
}
.logoContainer {
width: 100px * .75;
height: 100px * .75;
.fc-logo-container {
width: 100px * $fc-mdScale;
height: 100px * $fc-mdScale;
margin: auto;
margin-top: -60px * .75;
margin-top: -60px * $fc-mdScale;
border-radius: 50%;
border: 5px solid white;
}
.logo {
width: 100px * .75;
height: 100px * .75;
.fc-logo {
width: 100px * $fc-mdScale;
height: 100px * $fc-mdScale;
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);
box-shadow: 0 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 {
.fc-extra-info-wrapper {
display: flex;
align-items: center;
max-width: 50%;
font-size: 11px;
}
.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;
}
.card-map-marker-icon {
.fc-card-map-marker-icon {
height:20px !important;
width: 20px !important;
}
}
@media screen and (min-width:1680px) {
.root {
.fc-root {
width: 250px;
border-radius: 5px;
position: relative;
}
.cardContent {
.fc-card-content {
padding: 8px 4px 0 4px !important;
}
.smallGridContainerSpacing {
.fc-small-grid-container-spacing {
margin: -2px -8px !important;
}
.smallGridItemSpacing {
.fc-small-grid-item-spacing {
padding: 3px 8px !important;
}
.media {
.fc-media {
flex: 1;
height: 115px;
}
.logoContainer {
.fc-logo-container {
width: 100px;
height: 100px;
margin: auto;
......@@ -87,29 +90,16 @@
border-radius: 90px;
border: 5px solid white;
}
.logo {
.fc-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 {
.fc-extra-info-wrapper {
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
src/styles/whatsOpen.scss 0 → 100644
View file @ 626b36f0
@import './variables.scss';
@import './mixins.scss';
@import './containers/facilityCard.scss';
\ No newline at end of file
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