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

package.json

@@ -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

@@ -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

@@ -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

+/* 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

-@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

-@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

+@import './variables.scss';
+@import './mixins.scss';
+
+@import './containers/facilityCard.scss';
\ No newline at end of file