Skip to content

GitLab

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

Updated to support API v2.1 features (logos, building friendly names, and... 

Updated to support API v2.1 features (logos, building friendly names, and phone numbers). Use mobile cards in desktop version due to lack of support for facility images.
parent 9205d591
Hide whitespace changes
Inline Side-by-side
Showing with 16 additions and 127 deletions
.eslintrc.json
View file @ e845e457
......@@ -65,7 +65,7 @@
"object-curly-spacing": "warn",
"object-property-newline": "warn",
"operator-assignment": "warn",
"operator-linebreak": "warn",
"operator-linebreak": ["warn", "after"],
"quote-props": [
"warn",
"as-needed"
......
src/components/FacilityDialog.js
View file @ e845e457
......@@ -56,7 +56,7 @@ class FacilityDialog extends React.Component {
<Grid item className={'fd-header-container'}>
<Grid container className={'fd-header'}>
<Grid item>
<Avatar src={require('../images/chipotleLogo.png')} />
<Avatar src={facility.logo} />
</Grid>
<Grid item className={'fd-header-text-container'}>
<Typography className={'fd-header-text'} type={'headline'}>
......
src/components/Sidebar.js
View file @ e845e457
......@@ -17,7 +17,7 @@ const Sidebar = ({facility, isSidebarOpen, facilities}) => {
<Paper
className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}>
<div className={'sidebar-row1'}>
<Avatar className={'sidebar-avatar'} src={require('../images/chipotleLogo.png')} />
<Avatar className={'sidebar-avatar'} src={facility.logo} />
<div className={'sidebar-title'}>
<Typography type="display1">{removeBrackets(facility.facility_name)}</Typography>
</div>
......@@ -29,6 +29,8 @@ const Sidebar = ({facility, isSidebarOpen, facilities}) => {
content={facility.facility_location && facility.facility_location.building} />
<TextwTitle label="Address"
content={facility.facility_location && facility.facility_location.address} />
<TextwTitle label="Phone Number"
content={facility.phone_number ? facility.phone_number : 'Unknown'} />
<TextwTitle label="Tags" content={<FacilityTags facility={facility} />} />
<TextwTitle label="Hours" content={<WeekHours facility={facility} />} />
</div>
......
src/containers/FacilityCard.js
View file @ e845e457
......@@ -65,6 +65,10 @@ class FacilityCard extends React.Component {
return todaysHours[0].text;
};
const buildingName = facility.facility_location.friendly_building ?
facility.facility_location.friendly_building :
facility.facility_location.building;
return (
<Card onClick={this.handleCardClick} className={classNames('fc-root', isSelected && 'fc-selected')}
onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
......@@ -73,7 +77,7 @@ class FacilityCard extends React.Component {
<div className={'fc-logo-container'}>
<CardMedia className={'fc-logo'}
image={'https://upload.wikimedia.org/wikipedia/en/d/d3/Starbucks_Corporation_Logo_2011.svg'} />
image={facility.logo} />
</div>
......@@ -110,9 +114,9 @@ class FacilityCard extends React.Component {
<Typography type={'caption'}>
<LocationOnIcon className={'fc-card-map-marker-icon'} />
</Typography>
<Typography title={facility.facility_location.building} type={'caption'} align={'center'}
<Typography title={buildingName} type={'caption'} align={'center'}
className={'fc-two-line-ellipsis'}>
{facility.facility_location.building}
{buildingName}
</Typography>
</Grid>
</Grid>
......
src/images/Incometestblock.svg deleted 100644 → 0
View file @ 9205d591
<?xml version="1.0" encoding="UTF-8"?>
<svg width="36px" height="192px" viewBox="0 0 36 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Incometestblock</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="97.783801%" x2="50%" y2="1.55905295%" id="linearGradient-1">
<stop stop-color="#1991EB" offset="0%"></stop>
<stop stop-color="#2DA1F8" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Home-V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Context-Window-&amp;-No-Filter" transform="translate(-1196.000000, -421.000000)" fill="url(#linearGradient-1)">
<g id="Context-Window" transform="translate(1030.000000, 70.000000)">
<g id="Opening-Closing-Week" transform="translate(37.000000, 297.215686)">
<g id="Graphs" transform="translate(66.000000, 7.274510)">
<rect id="Income" x="63" y="46.7647059" width="36" height="191.215686" rx="4"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/images/WKschedule.svg deleted 100644 → 0
View file @ 9205d591
<?xml version="1.0" encoding="UTF-8"?>
<svg width="498px" height="274px" viewBox="0 0 498 274" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Opening Closing WeekWKschedule</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="97.783801%" x2="50%" y2="1.55905295%" id="linearGradient-1">
<stop stop-color="#1991EB" offset="0%"></stop>
<stop stop-color="#2DA1F8" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Home-V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Context-Window-&amp;-No-Filter" transform="translate(-1067.000000, -372.000000)">
<g id="Context-Window" transform="translate(1030.000000, 70.000000)">
<g id="Opening-Closing-Week" transform="translate(37.000000, 297.215686)">
<g id="Lines" transform="translate(41.000000, 8.313725)" fill="#E6EAEE">
<rect id="Graph-Lines" x="0" y="0" width="457" height="1.03921569"></rect>
<rect id="Graph-Lines" x="0" y="228.627451" width="457" height="1.03921569"></rect>
<rect id="Graph-Lines" x="0" y="249.411765" width="457" height="1.03921569"></rect>
<rect id="Graph-Lines" x="0" y="187.058824" width="457" height="1.03921569"></rect>
<rect id="Graph-Lines" x="0" y="207.843137" width="457" height="1.03921569"></rect>
<rect id="Graph-Lines" x="0" y="145.490196" width="457" height="1.03921569"></rect>
<rect id="Graph-Lines" x="0" y="20.7843137" width="457" height="1.03921569"></rect>
<rect id="Graph-Lines" x="0" y="41.5686275" width="457" height="1.03921569"></rect>
<rect id="Graph-Lines" x="0" y="62.3529412" width="457" height="1.03921569"></rect>
<rect id="Graph-Lines" x="0" y="83.1372549" width="457" height="1.03921569"></rect>
<rect id="Graph-Lines" x="0" y="103.921569" width="457" height="1.03921569"></rect>
<rect id="Graph-Lines" x="0" y="124.705882" width="457" height="1.03921569"></rect>
<rect id="Graph-Lines" x="0" y="166.27451" width="457" height="1.03921569"></rect>
</g>
<g id="Values" font-size="12" font-family="SourceSansPro-Regular, Source Sans Pro" fill="#354052" font-weight="normal">
<text id="12-AM" opacity="0.504256063">
<tspan x="0.396" y="12">12 AM</tspan>
</text>
<text id="4-AM" opacity="0.504256063">
<tspan x="6.36" y="53.5686275">4 AM</tspan>
</text>
<text id="8-AM" opacity="0.504256063">
<tspan x="6.36" y="95.1372549">8 AM </tspan>
</text>
<text id="12-PM" opacity="0.495566121">
<tspan x="0.012" y="136.705882">12 PM</tspan>
</text>
<text id="4-PM" opacity="0.504256063">
<tspan x="5.976" y="178.27451">4 PM</tspan>
</text>
<text id="8-PM" opacity="0.504256063">
<tspan x="5.976" y="219.843137">8 PM</tspan>
</text>
<text id="12-AM" opacity="0.504256063">
<tspan x="0.396" y="261.411765">12 AM</tspan>
</text>
</g>
<g id="Months" transform="translate(72.000000, 265.000000)" font-size="12" font-family="SourceSansPro-Regular, Source Sans Pro" fill="#354052" opacity="0.504256063" font-weight="normal">
<text id="MON">
<tspan x="0.272" y="12">MON</tspan>
</text>
<text id="TUES">
<tspan x="64.252" y="12">TUE</tspan>
</text>
<text id="WED">
<tspan x="124.932" y="12">WED</tspan>
</text>
<text id="THURS">
<tspan x="187.502" y="12">THU</tspan>
</text>
<text id="FRI">
<tspan x="252.472" y="12">FRI</tspan>
</text>
<text id="SAT">
<tspan x="313.056" y="12">SAT</tspan>
</text>
<text id="SUN">
<tspan x="373.544" y="12">SUN</tspan>
</text>
</g>
<g id="Graphs" transform="translate(66.000000, 7.274510)">
<rect id="Income" fill="url(#linearGradient-1)" x="63" y="46.7647059" width="36" height="191.215686" rx="4"></rect>
<rect id="Income" fill="url(#linearGradient-1)" x="1" y="15.5882353" width="36" height="144.45098" rx="4"></rect>
<rect id="Income" fill="url(#linearGradient-1)" x="125" y="36.372549" width="36" height="144.45098" rx="4"></rect>
<rect id="Income" fill="url(#linearGradient-1)" x="187" y="5.19607843" width="36" height="139.254902" rx="4"></rect>
<rect id="Income" fill="url(#linearGradient-1)" x="249" y="25.9803922" width="36" height="134.058824" rx="4"></rect>
<rect id="Income" fill="url(#linearGradient-1)" x="311" y="15.5882353" width="36" height="165.235294" rx="4"></rect>
<rect id="Income" fill="url(#linearGradient-1)" x="374" y="15.5882353" width="36" height="175.627451" rx="4"></rect>
<text id="3-PM" font-family="SourceSansPro-Regular, Source Sans Pro" font-size="12" font-weight="normal" fill="#354052">
<tspan x="7.976" y="172.039216">3 PM</tspan>
</text>
<text id="1:45-PM" font-family="SourceSansPro-Regular, Source Sans Pro" font-size="12" font-weight="normal" fill="#354052">
<tspan x="0.06" y="12">1:45 PM</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/styles/containers/facilityCard.scss
View file @ e845e457
......@@ -96,6 +96,7 @@
}
}
/**
//Between lg and xl
@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
.fc-root {
......@@ -133,8 +134,9 @@
width: 20px !important;
}
}
**/
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
//@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.fc-root {
width: 270px !important;
display: flex !important;
......@@ -184,4 +186,4 @@
height: 20px !important;
width: 20px !important;
}
}
\ No newline at end of file
//}
\ 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