Skip to content

GitLab

Commit af713e04 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Finished making all components sassy.

parent 3846eee2
Hide whitespace changes
Inline Side-by-side
src/components/TextwTitle.js
View file @ af713e04
import React from 'react'
import {withStyles } from 'material-ui/styles';
const TextwTitle = ({classes,label,content}) => {
const TextwTitle = ({label,content}) => {
return(<div>
<div className={classes.label}>
<div className={'text-w-title-label'}>
{label}
</div>
<div className={classes.content}>
<div className={'text-w-title-content'}>
{content}
</div>
</div>)
}
const styleSheet = {
label:{
fontWeight:400,
fontSize:"12px",
color:"rgba(0,0,0,.54)",
},
content:{
fontWeight:400,
fontSize:"14px",
textOverflow: 'ellipsis',
width:176,
whiteSpace:'nowrap',
overflow:'hidden',
};
}
}
export default withStyles(styleSheet)(TextwTitle)
\ No newline at end of file
export default TextwTitle;
\ No newline at end of file
src/containers/Layout.js
View file @ af713e04
import React from 'react';
import {withStyles } from 'material-ui/styles';
import {compose} from 'redux';
import {connect} from 'react-redux';
import {toggleSidebar,toggleSidebarMap,setAllFavorites} from '../actions/ui';
import {setAllFavorites, toggleSidebar, toggleSidebarMap} from '../actions/ui';
import AppBar from '../components/AppBar';
import Sidebar from '../components/Sidebar';
import { getFacilities, setFacilities } from '../actions/api';
import Button from 'material-ui/Button';
import {getFacilities, setFacilities} from '../actions/api';
import CardContainer from '../components/CardContainer';
import SearchBar from './SearchBar';
import Icon from 'material-ui/Icon';
import KeyboardArrowLeft from 'material-ui-icons/KeyboardArrowLeft';
import KeyboardArrowRight from 'material-ui-icons/KeyboardArrowRight';
class Layout extends React.Component {
constructor(props){
constructor(props) {
super(props);
}
componentWillMount() {
/*
This is done in order to immediately load the page (retrieving from local storage is faster
than an API call). After retrieving from local storage, then call the API to see if there
are any updates.
*/
if(localStorage.getItem('facilities')){
if (localStorage.getItem('facilities')) {
const facilities = localStorage.getItem('facilities');
this.props.setFacilities(facilities)
}
if(localStorage.getItem('favorites')){
if (localStorage.getItem('favorites')) {
const favorites = JSON.parse(localStorage.getItem('favorites'));
this.props.setAllFavorites(favorites);
}
......@@ -39,98 +34,53 @@ class Layout extends React.Component {
};
render() {
const {classes, isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities,sidebarFacility} = this.props;
const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, sidebarFacility} = this.props;
return (
<div className={classes.root}>
<AppBar isOpen={false} handleMenuClick={ ()=>{} }/>
<div className={classes.container}>
<div className={classes.mainContent}>
<SearchBar styles={styleSheet.searchBar} suggestions={{}}/>
<div className={classes.cardContainer}>
<CardContainer styles={styleSheet.cardContainer} searchTerm={this.props.searchTerm} facilities={this.props.facilities}/>
<div className={'layout-root'}>
<AppBar isOpen={false} handleMenuClick={() => {
}}/>
<div className={'layout-container'}>
<div className={'layout-main-content'}>
<SearchBar suggestions={{}}/>
<div className={'layout-card-container'}>
<CardContainer styles={'layout-card-container'} searchTerm={this.props.searchTerm}
facilities={this.props.facilities}/>
</div>
</div>
<div className={classes.sidebarToggleContainer}>
<button onClick={toggleSidebar} className={classes.openCloseButton}>
</div>
<div className={'layout-sidebar-toggle-container'}>
<button onClick={toggleSidebar} className={'layout-sidebar-toggle-btn'}>
{isSidebarOpen &&
<KeyboardArrowLeft className={classes.arrowIcon}/>
<KeyboardArrowLeft className={'layout-arrow-icon'}/>
}
{!isSidebarOpen &&
<KeyboardArrowRight className={classes.arrowIcon}/>
<KeyboardArrowRight className={'layout-arrow-icon'}/>
}
</button>
</div>
<Sidebar facilities={this.props.facilities} facility={sidebarFacility} isSidebarOpen={isSidebarOpen} isSidebarMapOpen={isSidebarMapOpen} toggleSidebarMap={toggleSidebarMap}/>
</div>
<Sidebar facilities={this.props.facilities} facility={sidebarFacility} isSidebarOpen={isSidebarOpen}
isSidebarMapOpen={isSidebarMapOpen} toggleSidebarMap={toggleSidebarMap}/>
</div>
</div>
)
}
}
const styleSheet = {
root:{
paddingTop:64,
boxSizing:'border-box',
height:'100%',
},
container:{
width:'100%',
height:'100%',
display:'flex'
},
mainContent:{
boxSizing:'border-box',
position:'relative',
flex:'1 1 100%',
height:'100%',
width: '100%',
paddingTop:16,
},
sidebarToggleContainer:{
width:16,
position:'relative',
},
openCloseButton:{
width:24,
height:48,
position:'absolute',
top:16,
right:-1,
border:0,
backgroundColor:'white',
boxShadow:'0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
outline:'none',
borderRadius:1,
},
arrowIcon:{
position:'absolute',
top:12,
right:0,
width:24,
height:24,
},
cardContainer:{
height:'calc(100% - 86px)',
overflowY:'auto',
overflowX:'hidden',
},
'@media screen and (max-width: 600px)': {
sidebarToggleContainer: {
display: 'none'
}
}
};
function mapStateToProps(state) {
return {
facilities: state.facilities.data,
favorites:state.ui.favorites,
searchTerm:state.ui.search.term,
favorites: state.ui.favorites,
searchTerm: state.ui.search.term,
isLoading: state.facilities.isLoading,
sidebarFacility:state.ui.sidebar.facility,
sidebarFacility: state.ui.sidebar.facility,
isSidebarOpen: state.ui.sidebar.isOpen,
isSidebarMapOpen: state.ui.sidebar.isMapOpen,
}
}
export default compose(connect(mapStateToProps,{toggleSidebar,toggleSidebarMap,getFacilities,setFacilities,setAllFavorites}), withStyles(styleSheet))(Layout);
export default connect(mapStateToProps, {
toggleSidebar,
toggleSidebarMap,
getFacilities,
setFacilities,
setAllFavorites
})(Layout);
src/index.js
View file @ af713e04
......@@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom';
import {applyMiddleware, compose, createStore} from 'redux';
import './index.css';
import './styles/whatsOpen.css'
import Layout from './containers/Layout';
import registerServiceWorker from './registerServiceWorker';
import createHistory from 'history/createBrowserHistory'
......@@ -12,6 +11,7 @@ import ReduxThunk from 'redux-thunk';
import reducers from './reducers/index';
import {MuiThemeProvider} from 'material-ui/styles';
import theme from './theme';
import './styles/whatsOpen.css';
// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory();
......
src/styles/components/appBar.scss
View file @ af713e04
.app-bar {
background-color: white !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) !important;
};
}
.app-bar-title {
margin-right: auto !important;
};
}
.app-bar-menu-button {
display: none !important;
};
}
.app-bar-logo {
width: 30px;
height: 30px;
margin-right: 5px;
};
}
.app-bar-text-color {
color: #354052;
};
}
@media screen and (max-width: 600px) {
.app-bar-link-button {
display: block !important;
padding: 0 !important;
text-align: left;
};
}
.app-bar-menu-button {
display: inherit !important;
};
}
.app-bar-hide {
max-height: 0 !important;
overflow: hidden
};
}
.app-bar-tool-bar {
flex-wrap: wrap;
};
}
.app-bar-link-container {
display: block;
......
src/styles/components/cardContainer.scss
View file @ af713e04
......@@ -3,4 +3,4 @@
width: 100%;
display: flex;
flex-wrap: wrap;
};
\ No newline at end of file
}
\ No newline at end of file
src/styles/components/facilityCategory.scss
View file @ af713e04
.facility-category-wrapper {
display: flex;
align-items: center
};
}
.facility-category-icon {
width: 14px !important;
height: 14px !important;
padding: 4px !important;
};
}
.facility-category-icon {
width: auto !important;
height: auto !important;
margin-right: 8px
};
\ No newline at end of file
}
\ No newline at end of file
src/styles/components/facilityStatus.scss
View file @ af713e04
.facility-status-text {
display: flex;
align-items: center;
};
\ No newline at end of file
}
\ No newline at end of file
src/styles/components/favoriteButton.scss
View file @ af713e04
......@@ -2,28 +2,28 @@
position: absolute;
top: 0;
right: 0;
height: 24px;
width: 24px;
padding: 5px;
height: 24px !important;
width: 24px !important;
padding: 5px !important;
cursor: pointer;
};
}
.favorite-button-heart-favorited {
color: #E91E63; //TODO: Somehow use materials color system
};
}
.favorite-button-heart-hover {
color: grey;
};
}
.favorite-button-heart-no-hover {
color: rgba(0,0,0,0);
color: rgba(0, 0, 0, 0);
}
@media screen and (min-width:1024px) and (max-width:1679px) {
@media screen and (min-width: 1024px) and (max-width: 1679px) {
.favorite-button-heart {
height: 24 * $favorite-button-md-scale;
width: 24 * $favorite-button-md-scale;
padding: 5 * $favorite-button-md-scale;
height: 24px * $favorite-button-md-scale !important;
width: 24px * $favorite-button-md-scale !important;
padding: 5px * $favorite-button-md-scale !important;
}
}
\ No newline at end of file
src/styles/components/sidebar.scss
View file @ af713e04
.sidebar-label-row {
display:flex;
};
display: flex;
}
.sidebar-label-holder {
margin: 16px;
};
}
.sidebar-open {
flex: 1 0 400px;
};
}
.sidebar-closed {
flex: 1 0 0;
};
}
.sidebar-root {
overflow: hidden;
......@@ -21,35 +21,34 @@
position: relative;
@include transition(150ms ease-in-out);
};
}
.sidebar-divider {
margin: 16px;
};
}
.sidebar-row1 {
display: flex;
padding: 8px;
};
}
.sidebar-avatar {
width: 100px !important;
height: 100px !important;
};
}
.sidebar-title {
height: 100px;
margin-left: 8px;
display: flex;
align-items: center;
};
}
.sidebar-row2 {
position: absolute;
bottom: 0;
width: 100%;
};
}
.sidebar-toggle-map-btn {
width: 100%;
......@@ -58,5 +57,5 @@
@media screen and (max-width: 600px) {
.sidebar-root {
display: none !important;
};
}
}
\ No newline at end of file
src/styles/components/textwTitle.scss 0 → 100644
View file @ af713e04
.text-w-title-label {
font-weight: 400;
font-size: 12px;
color: rgba(0,0,0,.54);
};
.text-w-title-content {
font-weight: 400;
font-size: 14px;
text-overflow: ellipsis;
width: 176px;
white-space: nowrap;
overflow: hidden;
}
\ No newline at end of file
src/styles/containers/facilityCard.scss
View file @ af713e04
......@@ -4,6 +4,7 @@
max-height: 2em;
overflow: hidden;
}
.fc-two-line-ellipsis-webkit {
overflow: hidden;
text-overflow: ellipsis;
......@@ -14,92 +15,106 @@
/* 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;
}
.fc-card-content {
padding: 8px 4px 0 4px !important;
}
.fc-small-grid-container-spacing {
margin: -2px -8px !important;
}
.fc-small-grid-item-spacing {
padding: 0 8px !important;
}
.fc-media {
flex: 1;
border-radius: 5px 5px 0 0;
height: 115px * $fc-mdScale;
}
.fc-logo-container {
width: 100px * $fc-mdScale;
height: 100px * $fc-mdScale;
margin: auto;
margin-top: -60px * $fc-mdScale;
border-radius: 50%;
border: 5px solid white;
}
.fc-logo {
width: 100px * $fc-mdScale;
height: 100px * $fc-mdScale;
margin: auto;
border-radius: 50%;
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);
}
.fc-extra-info-wrapper {
display: flex;
align-items: center;
max-width: 50%;
font-size: 11px;
}
@media screen and (min-width:1024px) and (max-width:1679px) {
.fc-root {
width: 250px * $fc-mdScale;
height: 230px;
border-radius: 5px !important;
position: relative;
}
.fc-card-content {
padding: 8px 4px 0 4px !important;
}
.fc-small-grid-container-spacing {
margin: -2px -8px !important;
}
.fc-small-grid-item-spacing {
padding: 0 8px !important;
}
.fc-media {
flex: 1;
border-radius: 5px 5px 0 0;
height: 115px * $fc-mdScale;
}
.fc-logo-container {
width: 100px * $fc-mdScale;
height: 100px * $fc-mdScale;
margin: auto;
margin-top: -60px * $fc-mdScale;
border-radius: 50%;
border: 5px solid white;
}
.fc-logo {
width: 100px * $fc-mdScale;
height: 100px * $fc-mdScale;
margin: auto;
border-radius: 50%;
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);
}
.fc-extra-info-wrapper {
display: flex;
align-items: center;
max-width: 50%;
font-size: 11px;
}
.fc-card-map-marker-icon {
height:20px !important;
width: 20px !important;
}
.fc-card-map-marker-icon {
height: 20px !important;
width: 20px !important;
}
}
@media screen and (min-width:1680px) {
.fc-root {
width: 250px;
border-radius: 5px;
position: relative;
}
.fc-card-content {
padding: 8px 4px 0 4px !important;
}
.fc-small-grid-container-spacing {
margin: -2px -8px !important;
}
.fc-small-grid-item-spacing {
padding: 3px 8px !important;
}
.fc-media {
flex: 1;
height: 115px;
}
.fc-logo-container {
width: 100px;
height: 100px;
margin: auto;
margin-top: -60px;
border-radius: 90px;
border: 5px solid white;
}
.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);
}
.fc-extra-info-wrapper {
display: flex;
align-items: center;
max-width: 50%;
}
@media screen and (min-width: 1680px) {
.fc-root {
width: 250px;
border-radius: 5px;
position: relative;
}
.fc-card-content {
padding: 8px 4px 0 4px !important;
}
.fc-small-grid-container-spacing {
margin: -2px -8px !important;
}