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

Tags and hours now on mobile. Bug fixes.

parent 317bf10c
Pipeline #1786 passed with stage
in 1 minute and 43 seconds
import React from 'react';
import Chip from 'material-ui/Chip';
const FacilityTags = ({facility}) => {
return (
<div className={'tag-chip-holder'}>
{facility.facility_product_tags && facility.facility_product_tags.map(tag =>
<Chip className={'tag-chip'} key={tag} label={tag}/>
)}
</div>
)
};
export default FacilityTags;
\ No newline at end of file
......@@ -10,6 +10,7 @@ import Button from 'material-ui/Button';
import Chip from 'material-ui/Chip';
import WeekHours from './WeekHours';
import { toggleSidebar } from '../actions/ui';
import FacilityTags from './FacilityTags';
const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, facilities}) => {
......@@ -36,17 +37,6 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
toggleSidebarMap()
}
let productChips;
try{
let index = -1;
productChips = facility.facility_product_tags.map((tag) => {
index++;
return (<Chip key={tag+index} label={tag} />)
})
}catch(e){
productChips = ''
}
return (
<Paper
className={classNames(['sidebar-root', (!isSidebarOpen && 'sidebar-open'), (isSidebarOpen && 'sidebar-closed')])}>
......@@ -61,8 +51,8 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
<TextwTitle label="Building" content="The Johnson Center"/>
<TextwTitle label="Address" content="https://amenufromaplace.com"/>
<TextwTitle label="Phone Number" content="The Johnson Center"/>
<TextwTitle label="Tags" content={<div className='chip-holder'>{productChips}</div>}/>
<TextwTitle label="Hours" content={<WeekHours facility={facility}/>}/>
<TextwTitle label="Tags" content={<FacilityTags facility={facility} />}/>
<TextwTitle label="Hours" content={<WeekHours facility={facility} />}/>
</div>
......
import React from 'react'
import {withStyles} from 'material-ui/styles';
import {facilities} from '../reducers/api';
import Grid from 'material-ui/Grid';
const WeekHours = ({facility}) => {
......@@ -56,15 +55,15 @@ const WeekHours = ({facility}) => {
break;
}
}
console.log(dayOfWeek)
if (hours === null) {
hours = 'Closed'
}
output[dayOfWeek] = (
<div key={facility.slug + dayOfWeek} className='week-hours-row'>
<div className='week-hours-day'>{weekDays[dayOfWeek]}</div>
<div className='week-hours-times'>{hours}</div>
</div>
<Grid container key={facility.slug + dayOfWeek} className='week-hours-row'>
<Grid item xs={2} className='week-hours-day'>{weekDays[dayOfWeek]}</Grid>
<Grid item className='week-hours-times'>{hours}</Grid>
</Grid>
)
}
} catch (e) {}
......
......@@ -16,6 +16,8 @@ import classnames from 'classnames';
import MapDialog from '../components/MapDialog';
import Button from 'material-ui/Button';
import {getMaxBounds} from '../utils/mapboxUtils';
import WeekHours from '../components/WeekHours';
import FacilityTags from '../components/FacilityTags';
import {
amber,
......@@ -197,6 +199,14 @@ class FacilityCard extends React.Component {
</Grid>
</Grid>
<Grid item className={'fc-facility-tags'}>
<FacilityTags facility={facility}/>
</Grid>
<Grid item className={'fc-week-hours'}>
<WeekHours facility={facility} />
</Grid>
<Grid item className={'fc-toggle-map-btn-container'}>
<Button className={'fc-toggle-map-btn'} onClick={this.toggleMap}>Open Map</Button>
</Grid>
......
......@@ -22,8 +22,6 @@ class Layout extends React.Component {
are any updates.
*/
try {
localStorage = window.localStorage;
if (localStorage.getItem('facilities')) {
const facilities = localStorage.getItem('facilities');
this.props.setFacilities(facilities)
......
@import '../variables';
.tag-chip-holder {
display: flex;
flex-wrap: wrap;
}
.tag-chip {
height: 24px !important;
}
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.tag-chip-holder {
justify-content: center;
padding: 8px;
}
}
\ No newline at end of file
......@@ -61,10 +61,6 @@
width: 100%;
}
.chip-holder {
display: flex;
height:32px;
}
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.sidebar-root {
display: none !important;
......
.week-hours-row{
display: flex;
font-size: 14px;
color:#354052;
@import '../variables';
.week-hours-row {
font-size: 14px;
color: #354052;
}
.week-hours-day{
.week-hours-day {
font-family: Roboto-Regular,Helvetica-Neue;
margin-right: 16px;
// width:28px;
}
.week-hours-times{
.week-hours-times {
font-family: Roboto-Medium;
margin-bottom: 4px;
}
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.week-hours-row {
justify-content: center;
}
}
\ No newline at end of file
......@@ -71,6 +71,14 @@
display: none !important;
}
.fc-week-hours {
display: none !important;
}
.fc-facility-tags {
display: none !important;
}
@supports (-webkit-line-clamp: 2) {
.fc-two-line-ellipsis {
overflow: hidden;
......@@ -151,6 +159,14 @@
display: block !important;
}
.fc-week-hours {
display: block !important;
}
.fc-facility-tags {
display: block !important;
}
.fc-toggle-map-btn {
width: 100% !important;
}
......
......@@ -6,6 +6,7 @@
@import './components/cardContainer';
@import './components/facilityCategory';
@import './components/facilityStatus';
@import './components/facilityTags';
@import './components/favoriteButton';
@import './components/sidebar';
@import './components/textwTitle';
......
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