From 78b4e4be6eae4dc1b736939e4e32371934f078e3 Mon Sep 17 00:00:00 2001 From: ejmudrak Date: Sun, 18 Feb 2018 14:29:09 -0500 Subject: [PATCH 1/5] Home and Search page mobile opt --- package-lock.json | 3 +- src/App.css | 23 +- src/App.js | 296 +++++++++++++------------- src/presentation/home/homePage.css | 39 +++- src/presentation/home/homePage.js | 43 ++-- src/presentation/search/SearchBody.js | 248 +++++++++++---------- 6 files changed, 375 insertions(+), 277 deletions(-) diff --git a/package-lock.json b/package-lock.json index feb3c51..28e3985 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4725,7 +4725,8 @@ }, "jsbn": { "version": "0.1.1", - "bundled": true + "bundled": true, + "optional": true }, "json-schema": { "version": "0.2.3", diff --git a/src/App.css b/src/App.css index 0a25f1f..e7a7760 100644 --- a/src/App.css +++ b/src/App.css @@ -6,6 +6,7 @@ a { text-decoration: none; } .App { text-align: center; + overflow-x: hidden; } .App-logo { @@ -89,13 +90,17 @@ a { text-decoration: none; } .menuSearchCard { position: relative; display: block !important; - /*margin: auto !important;*/ margin-top: 10px !important; margin-bottom: 25px !important; margin-left: 4em !important; - /*margin-bottom: 1em !important;*/ } +/*.menuSearchCard div, .menuSearchCard input { + display: block; + margin: auto; + width: 100% !important; +}*/ + .searchIcon { color: #38b5e6 !important; margin-left: 1.25em; @@ -108,3 +113,17 @@ a { text-decoration: none; } object-fit: cover; border: 0; } + +@media (max-width: 400px) { + .logo { + margin-left: 0; + width: 2em; + } + + .menuSearchCard { + margin: 0 !important; + } + .menuSearchCard div, .menuSearchCard input { + width: auto !important; + } +} diff --git a/src/App.js b/src/App.js index 99b1bd5..39d4f26 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import { InstantSearch, Index, Configure, CurrentRefinements } from 'react-insta import { connectAutoComplete, connectMenu } from 'react-instantsearch/connectors' import Autosuggest from 'react-autosuggest' import QueryString from 'query-string' +import { Grid, Row, Col } from 'react-flexbox-grid' import 'react-instantsearch-theme-algolia/style.css' // Material UI Components @@ -264,157 +265,158 @@ class App extends React.Component { const appBarStyle = location.pathname === '/search' ? { boxShadow: 'none' } : {} return (
- -
- Film Indy Logo - { location.pathname !== '/' && - -
- - - - - items.filter(item => item.public === 'true' || item.public === 'false')} - /> - - - - - items.filter(item => item.public === 'true' || item.public === 'false')} - /> - - - - - items.filter(item => item.public === 'true' || item.public === 'false')} - /> - - - - this.searchQuery = query} - onEnterHit={() => { - if (this.searchQuery) { - history.push({ pathname: '/search', search: `?query=${encodeURIComponent(this.searchQuery)}&show=all` }) - } + + + + + Film Indy Logo + + { location.pathname !== '/' && + + +
+ + + + + + + this.searchQuery = query} + onEnterHit={() => { + if (this.searchQuery) { + history.push({ pathname: '/search', search: `?query=${encodeURIComponent(this.searchQuery)}&show=all` }) + } + }} + onSuggestionClicked={(suggestion, index) => { + if (index === 0) { + history.push({ pathname: '/search', search: `?query=${encodeURIComponent(suggestion.roleName)}&show=all&role=${encodeURIComponent(suggestion.roleName)}` }) + } else if (index === 1) { + history.push({ pathname: '/profile', search: `?query=${encodeURIComponent(suggestion.objectID)}` }) + } else if (index === 2) { + history.push({ pathname: `/vendor/${suggestion.objectID}` }) + } else if (index === 3) { + history.push({ pathname: `/location/${suggestion.objectID}` }) + } else if (index === 4) { + history.push({ pathname: '/search', search: `?query=''&show=locations&locationType=${encodeURIComponent(suggestion.type)}` }) + } + }} + /> + + { + if (this.searchQuery) { + history.push({ pathname: '/search', search: `?query=${encodeURIComponent(this.searchQuery)}&show=all` }) + } else { + history.push({ pathname: '/search', search: `?query=${encodeURIComponent('')}&show=all` }) + } + }} + /> +
+ + + } + + {location.pathname === '/search' ? + ( + + { + const newQs = QueryString.stringify({ ...parsed, show: 'all' }) + history.push({ pathname: '/search', search: newQs }) }} - onSuggestionClicked={(suggestion, index) => { - if (index === 0) { - history.push({ pathname: '/search', search: `?query=${encodeURIComponent(suggestion.roleName)}&show=all&role=${encodeURIComponent(suggestion.roleName)}` }) - } else if (index === 1) { - history.push({ pathname: '/profile', search: `?query=${encodeURIComponent(suggestion.objectID)}` }) - } else if (index === 2) { - history.push({ pathname: `/vendor/${suggestion.objectID}` }) - } else if (index === 3) { - history.push({ pathname: `/location/${suggestion.objectID}` }) - } else if (index === 4) { - history.push({ pathname: '/search', search: `?query=''&show=locations&locationType=${encodeURIComponent(suggestion.type)}` }) - } + /> + { + const newQs = QueryString.stringify({ ...parsed, show: 'crew' }) + history.push({ pathname: '/search', search: newQs }) }} /> - - { - if (this.searchQuery) { - history.push({ pathname: '/search', search: `?query=${encodeURIComponent(this.searchQuery)}&show=all` }) - } else { - history.push({ pathname: '/search', search: `?query=${encodeURIComponent('')}&show=all` }) - } - }} - /> -
- - } + { + const newQs = QueryString.stringify({ ...parsed, show: 'vendors' }) + history.push({ pathname: '/search', search: newQs }) + }} + /> + { + const newQs = QueryString.stringify({ ...parsed, show: 'locations' }) + history.push({ pathname: '/search', search: newQs }) + }} + /> + + + ) : null}
- {location.pathname === '/search' ? - ( - { - const newQs = QueryString.stringify({ ...parsed, show: 'all' }) - history.push({ pathname: '/search', search: newQs }) - }} - /> - { - const newQs = QueryString.stringify({ ...parsed, show: 'crew' }) - history.push({ pathname: '/search', search: newQs }) - }} - /> - { - const newQs = QueryString.stringify({ ...parsed, show: 'vendors' }) - history.push({ pathname: '/search', search: newQs }) - }} - /> - { - const newQs = QueryString.stringify({ ...parsed, show: 'locations' }) - history.push({ pathname: '/search', search: newQs }) - }} - /> - ) : null} -
- } - iconElementRight={uid ? ( -
- - -
- ) : ( -
- { - const photoFile = values.photoFile || values.avatar - signUp(values.firstName, values.lastName, photoFile, values.email, values.password) - }} - getDefaultAccountImages={getDefaultAccountImages} - defaultAccountImages={account.defaultAccountImages} - account={account} - cancelSignInUpForm={cancelSignInUpForm} - signUpWithGoogle={signUpWithGoogle} - signUpWithFacebook={signUpWithFacebook} - sendSubmit={submitSignUp} - /> - { - signIn(values.email, values.password) - }} - account={account} - cancelSignInUpForm={cancelSignInUpForm} - signInWithFacebook={signInWithFacebook} - signInWithGoogle={signInWithGoogle} - sendSubmit={submitSignIn} - /> -
- )} - zDepth={2} - /> + } + iconElementRight={uid ? ( + +
+ + +
+ + ) : ( + + +
+ + { + const photoFile = values.photoFile || values.avatar + signUp(values.firstName, values.lastName, photoFile, values.email, values.password) + }} + getDefaultAccountImages={getDefaultAccountImages} + defaultAccountImages={account.defaultAccountImages} + account={account} + cancelSignInUpForm={cancelSignInUpForm} + signUpWithGoogle={signUpWithGoogle} + signUpWithFacebook={signUpWithFacebook} + sendSubmit={submitSignUp} + /> + + + { + signIn(values.email, values.password) + }} + account={account} + cancelSignInUpForm={cancelSignInUpForm} + signInWithFacebook={signInWithFacebook} + signInWithGoogle={signInWithGoogle} + sendSubmit={submitSignIn} + /> + +
+ + + )} + zDepth={2} + /> + { diff --git a/src/presentation/home/homePage.css b/src/presentation/home/homePage.css index 3ce2121..99c68ef 100644 --- a/src/presentation/home/homePage.css +++ b/src/presentation/home/homePage.css @@ -30,7 +30,7 @@ color: #38b5e6; color: #004b8d; font-size: 28pt; - font-weight: 600; + font-weight: 600; margin: auto; text-align: left; } @@ -39,7 +39,7 @@ color: #38b5e6; color: #004b8d; font-size: 24pt; - font-weight: 600; + font-weight: 600; margin: auto; text-align: center; } @@ -51,6 +51,7 @@ } .searchCard { + width: auto; position: relative; display: block !important; margin: auto !important; @@ -58,6 +59,12 @@ margin-bottom: 25px !important; } +.searchCard div, .searchCard input { + display: block; + margin: auto; + width: 100% !important; +} + .searchIcon { color: #38b5e6 !important; margin-left: .50em; @@ -148,4 +155,30 @@ color: #38b5e6; } - +@media (max-width: 400px) { + .bg-image { + position: relative; + top: -100px; + padding-top: 100px; + width: 100%; + height: 55%; + background: url('./bg2.jpg'); + background-size: cover; + background-position: center bottom; + } + + .main-header { + text-align: center; + } + + .header-wrapper { + width: 100%; + top: 35%; + text-align: center; + } + + .category-card { + margin: 10px; + cursor: pointer; + } +} diff --git a/src/presentation/home/homePage.js b/src/presentation/home/homePage.js index bf9a164..ef781f4 100644 --- a/src/presentation/home/homePage.js +++ b/src/presentation/home/homePage.js @@ -2,9 +2,11 @@ import React from 'react' import '../../App.css' import './homePage.css' import PropTypes from 'prop-types' + import { InstantSearch, Index, CurrentRefinements, Configure } from 'react-instantsearch/dom' import { connectAutoComplete, connectMenu } from 'react-instantsearch/connectors' -import 'react-instantsearch-theme-algolia/style.css' +import { Grid, Row, Col } from 'react-flexbox-grid' + import ImageSlider from 'react-slick' import { Link } from 'react-router-dom' import Autosuggest from 'react-autosuggest' @@ -248,7 +250,12 @@ class homePage extends React.Component { slidesToShow: 6, slidesToScroll: 2, nextArrow: , - prevArrow: + prevArrow: , + responsive: [ + { breakpoint: 400, settings: { slidesToShow: 1, centerMode: true, slidesToScroll: 1, dots: false } }, + { breakpoint: 768, settings: { slidesToShow: 3 } }, + { breakpoint: 1024, settings: { slidesToShow: 5 } } + ] } return (
@@ -257,7 +264,7 @@ class homePage extends React.Component {
Film Indy
If it isn't on video,
it didn't happen.
- +
Explore Indy
-
- { - categories.map(item => ( - - - - Explore Categories - - - - )) - } -
+ + + { + categories.map(item => ( + + + + + Explore Categories + + + + + )) + } + +
Popular Roles
diff --git a/src/presentation/search/SearchBody.js b/src/presentation/search/SearchBody.js index 26626f1..a62eb00 100644 --- a/src/presentation/search/SearchBody.js +++ b/src/presentation/search/SearchBody.js @@ -5,6 +5,7 @@ import { Card, CardMedia, CardText } from 'material-ui/Card' import RaisedButton from 'material-ui/RaisedButton' import { GridList } from 'material-ui/GridList' import MasonryInfiniteScroller from 'react-masonry-infinite' +import { Grid, Row, Col } from 'react-flexbox-grid' import { get, take } from 'lodash' import PropTypes from 'prop-types' @@ -38,121 +39,152 @@ const SearchBody = ({ enriched, enrichedVendors, enrichedLocations, location, to if (showOnly === 'all') { if ((totalHits.hasLoaded && enriched.length > 0) || (totalVendorHits.hasLoaded && enrichedVendors.length > 0) || (totalLocationHits.hasLoaded && enrichedLocations.length > 0)) { return ( -
- { enriched.length > 0 ? ( -
-
-

Crew

- {showOnly === 'all' ? - { - const newQs = QueryString.stringify({ ...parsed, show: 'crew' }) - history.push({ pathname: '/search', search: newQs }) - }} - style={{ marginRight: 225, backgroundColor: '#38b5e6' }} - /> - : null } -
-
- - {take(enriched, 4).map((enrichedResult, i) => ( - - - - - -
- - {`${get(enrichedResult, 'firstName', '')} ${get(enrichedResult, 'lastName', '')}`} - - - {get(enrichedResult, 'headline', '')} - -
- - - ))} - -
-
- ) : null } - {enrichedVendors.length !== 0 ? ( -
-
-

Vendors

- {showOnly === 'all' ? - { - const newQs = QueryString.stringify({ ...parsed, show: 'vendors' }) - history.push({ pathname: '/search', search: newQs }) - }} - style={{ marginRight: 225, backgroundColor: '#38b5e6' }} - /> - : null } -
-
- - {take(enrichedVendors, 8).map((enrichedResult, i) => ( -
- - + +
+ { enriched.length > 0 ? ( +
+ +
+ +

Crew

+ + {showOnly === 'all' ? + + + { + const newQs = QueryString.stringify({ ...parsed, show: 'crew' }) + history.push({ pathname: '/search', search: newQs }) + }} + /> + + + : null } +
+ +
+ + {take(enriched, 4).map((enrichedResult, i) => ( + + - + +
+ + {`${get(enrichedResult, 'firstName', '')} ${get(enrichedResult, 'lastName', '')}`} + + + {get(enrichedResult, 'headline', '')} + +
-

{`${get(enrichedResult, 'vendorName', '')}`}

-
- ))} - -
-
- ) : null - } + ))} + +
- {enrichedLocations.length !== 0 ? ( -
-
-

Locations

- {showOnly === 'all' ? - { - const newQs = QueryString.stringify({ ...parsed, show: 'locations' }) - history.push({ pathname: '/search', search: newQs }) - }} - style={{ marginRight: 225, backgroundColor: '#38b5e6' }} - /> - : null }
-
- - {take(enrichedLocations, 4).map((enrichedResult, i) => ( -
- - - - - - - -

{`${get(enrichedResult, 'locationName', '')}`}

-
- ))} - + ) : null } + {enrichedVendors.length !== 0 ? ( +
+ +
+ +

Vendors

+ + {showOnly === 'all' ? + + + { + const newQs = QueryString.stringify({ ...parsed, show: 'vendors' }) + history.push({ pathname: '/search', search: newQs }) + }} + /> + + + : null } +
+ +
+ + {take(enrichedVendors, 8).map((enrichedResult, i) => ( +
+ + + + + + + +

{`${get(enrichedResult, 'vendorName', '')}`}

+
+ ))} + +
-
- ) : null - } -
+ ) : null + } + + {enrichedLocations.length !== 0 ? ( +
+ +
+ +

Locations

+ + {showOnly === 'all' ? + + + { + const newQs = QueryString.stringify({ ...parsed, show: 'locations' }) + history.push({ pathname: '/search', search: newQs }) + }} + /> + + + : null } +
+ +
+ + {take(enrichedLocations, 4).map((enrichedResult, i) => ( +
+ + + + + + + +

{`${get(enrichedResult, 'locationName', '')}`}

+
+ ))} + +
+
+ ) : null + } +
+ ) } else if (totalHits.hasLoaded && enriched.length === 0 && enrichedVendors.length === 0 && totalVendorHits.hasLoaded && enrichedLocations.length === 0 && totalLocationHits.hasLoaded) { return ( From 5342039056eb9885f4e07c6f82cc77f30f81350e Mon Sep 17 00:00:00 2001 From: ejmudrak Date: Sat, 24 Feb 2018 17:04:23 -0500 Subject: [PATCH 2/5] Account, Profile, Vendors, and Locations optimization --- src/App.css | 31 ++++-- src/App.js | 20 +++- src/presentation/account/accountPage.css | 36 ++++++ src/presentation/account/accountPage.js | 48 ++++---- src/presentation/common/LocationMenu.js | 46 ++++++-- src/presentation/common/VendorMenu.js | 48 ++++++-- .../locationProfile/EditLocationProfile.css | 103 ++++++++---------- .../locationProfile/EditLocationProfile.js | 23 ++-- .../locationProfile/LocationProfile.css | 44 +++++++- .../locationProfile/LocationProfile.js | 6 +- src/presentation/profile/EditProfile.js | 25 ++--- src/presentation/profile/ViewProfile.css | 47 ++++++-- src/presentation/profile/ViewProfile.js | 8 +- .../vendorProfile/EditVendorProfile.css | 54 +++++++-- .../vendorProfile/EditVendorProfile.js | 26 ++--- .../vendorProfile/VendorProfile.css | 44 +++++++- .../vendorProfile/vendorProfile.js | 8 +- 17 files changed, 424 insertions(+), 193 deletions(-) diff --git a/src/App.css b/src/App.css index e7a7760..f71fb5b 100644 --- a/src/App.css +++ b/src/App.css @@ -53,11 +53,14 @@ a { text-decoration: none; } object-fit: cover; border: 0; } + .accountIcon { margin-right: 1em; margin-top: 0.25em; cursor: pointer; border: 2px solid white !important; + width: 60px !important; + height: 60px !important; } .arrowIcon { @@ -67,6 +70,7 @@ a { text-decoration: none; } margin-left: -25px !important; margin-bottom: 5px !important; } + .accountLogin { margin-top: 18px !important; margin-right: 1em; @@ -95,12 +99,6 @@ a { text-decoration: none; } margin-left: 4em !important; } -/*.menuSearchCard div, .menuSearchCard input { - display: block; - margin: auto; - width: 100% !important; -}*/ - .searchIcon { color: #38b5e6 !important; margin-left: 1.25em; @@ -108,10 +106,11 @@ a { text-decoration: none; } margin-top: 0.75em; } -/* prevents Avatar component images from stretching */ -.avatar { - object-fit: cover; - border: 0; +.searchButton { + height: 30px !important; + margin-top: 5px !important; + margin-left: 30px !important; + margin-right: 10px !important; } @media (max-width: 400px) { @@ -122,8 +121,20 @@ a { text-decoration: none; } .menuSearchCard { margin: 0 !important; + margin-bottom: 10px !important; } .menuSearchCard div, .menuSearchCard input { width: auto !important; } + + .accountIcon { + width: 30px !important; + height: 30px !important; + } + + .searchButton { + height: 30px !important; + margin-top: 5px !important; + margin-left: 0px !important; + } } diff --git a/src/App.js b/src/App.js index 39d4f26..ea97af9 100644 --- a/src/App.js +++ b/src/App.js @@ -314,7 +314,7 @@ class App extends React.Component { label="Search" labelColor="#fff" backgroundColor={'#02BDF2'} - style={{ height: 30, marginTop: 10, marginLeft: 30 }} + className="searchButton" onClick={() => { if (this.searchQuery) { history.push({ pathname: '/search', search: `?query=${encodeURIComponent(this.searchQuery)}&show=all` }) @@ -328,7 +328,7 @@ class App extends React.Component { } - {location.pathname === '/search' ? + { location.pathname === '/search' ? ( - ) : null} + ) : null }
} iconElementRight={uid ? (
- +
@@ -451,8 +451,14 @@ class App extends React.Component { { uid ? ( // renders dropdown items depending on if logged in
- } /> - } /> + + } /> + + + + } /> + + + this.setState({ showSubMenu: true })} @@ -472,6 +479,7 @@ class App extends React.Component { }} /> } onClick={(e) => { firebase.logout(); this.signOutMessage() }} /> +
) : (
diff --git a/src/presentation/account/accountPage.css b/src/presentation/account/accountPage.css index 85d47dc..753ee86 100644 --- a/src/presentation/account/accountPage.css +++ b/src/presentation/account/accountPage.css @@ -90,6 +90,14 @@ padding: 1em; } +.addCard { + width: 50%; + height: auto; + display: block; + margin: auto auto 1em auto; + padding: 1em; +} + /* Profile Privacy Card Styles */ .toggle { @@ -117,3 +125,31 @@ text-align: left; width: 100%; } + +@media (max-width: 400px) { + .profileCard, .passwordCard { + box-shadow: none !important; + width: 100%; + } + + .passwordCard { + width: 100%; + height: auto; + display: block; + margin: auto auto 1em auto; + padding: 1em; + + } + + .addCard { + width: 100%; + height: auto; + display: block; + margin: auto auto 1em auto; + padding: 1em; + } + .accountHeader { + width: 100%; + text-align: center + } +} diff --git a/src/presentation/account/accountPage.js b/src/presentation/account/accountPage.js index bd2b730..6fc248f 100644 --- a/src/presentation/account/accountPage.js +++ b/src/presentation/account/accountPage.js @@ -143,15 +143,15 @@ class AccountPage extends React.Component {
) : null}

Vendors

- -
+ +
{Object.keys(vendors).map((key) => { const vend = vendors[key] return ( deleteVendor(key)} key={vend.name} - style={{ marginRight: 5 }} + style={{ marginRight: 5, marginBottom: 10 }} > {vend.name} @@ -168,28 +168,28 @@ class AccountPage extends React.Component { createVendor(values.name) }} /> - + -

Locations

- -
- {Object.keys(locations).map((key) => { - const loc = locations[key] - return ( - deleteLocation(key)} - key={loc.name} - style={{ marginRight: 5 }} - > - {loc.name} - - ) - })} - {Object.keys(locations).length === 0 ? - 'Press Add to create a Location' - : null - } -
+

Locations

+ +
+ {Object.keys(locations).map((key) => { + const loc = locations[key] + return ( + deleteLocation(key)} + key={loc.name} + style={{ marginRight: 5, marginBottom: 10 }} + > + {loc.name} + + ) + })} + {Object.keys(locations).length === 0 ? + 'Press Add to create a Location' + : null + } +
{ diff --git a/src/presentation/common/LocationMenu.js b/src/presentation/common/LocationMenu.js index 92a91df..5f551e7 100644 --- a/src/presentation/common/LocationMenu.js +++ b/src/presentation/common/LocationMenu.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import MenuItem from 'material-ui/MenuItem' import { Link } from 'react-router-dom' import ArrowDropLeft from 'material-ui/svg-icons/hardware/keyboard-arrow-left' +import Add from 'material-ui/svg-icons/content/add' import Popover from 'material-ui/Popover' import Menu from 'material-ui/Menu' import './LocationMenu.css' @@ -42,6 +43,11 @@ class LocationMenu extends React.Component { ) }) + + const width = window.innerWidth + || document.documentElement.clientWidth + || document.body.clientWidth + return (
- - - {menuItems} - - - + { width > 450 && ( + + + {menuItems} + } onClick={onAddLocationClick} /> + + + )} + { width <= 450 && ( + + + {menuItems} + } onClick={onAddLocationClick} /> + + + )}
) } diff --git a/src/presentation/common/VendorMenu.js b/src/presentation/common/VendorMenu.js index 3f863d3..b6bce6b 100644 --- a/src/presentation/common/VendorMenu.js +++ b/src/presentation/common/VendorMenu.js @@ -3,8 +3,11 @@ import PropTypes from 'prop-types' import MenuItem from 'material-ui/MenuItem' import { Link } from 'react-router-dom' import ArrowDropLeft from 'material-ui/svg-icons/hardware/keyboard-arrow-left' +import Add from 'material-ui/svg-icons/content/add' import Popover from 'material-ui/Popover' import Menu from 'material-ui/Menu' +import './LocationMenu.css' + class VendorMenu extends React.Component { constructor(props) { @@ -41,6 +44,11 @@ class VendorMenu extends React.Component { ) }) + + const width = window.innerWidth + || document.documentElement.clientWidth + || document.body.clientWidth + return (
- - - {menuItems} - - - + { width > 450 && ( + + + {menuItems} + } onClick={onAddVendorClick} /> + + + )} + { width <= 450 && ( + + + {menuItems} + } onClick={onAddVendorClick} /> + + + )}
) } diff --git a/src/presentation/locationProfile/EditLocationProfile.css b/src/presentation/locationProfile/EditLocationProfile.css index 8a4c5ad..fd5c282 100644 --- a/src/presentation/locationProfile/EditLocationProfile.css +++ b/src/presentation/locationProfile/EditLocationProfile.css @@ -1,77 +1,70 @@ -.profile { - text-align: left; - margin-top: 25px; +.ViewProfile { + text-align: left; + margin-top: 25px; } -.crew-image { +.vendor-text { + width: 80%; +} + +.crew-image-container { height: 100%; } +.crew-image { + width: 250px !important; + height: 250px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 250px !important; + min-height: 250px !important; +} + .crew-headline { - font-weight: 500; + font-weight: 500; } .crew-text { - font-weight: 400; - min-width: 100%; - margin-top: -10px; + font-weight: 400; + min-width: 100%; + margin-top: -10px; } .profile-card { - width: 50%; - border-radius: 2; - margin: auto; - margin-bottom: 1%; -} - -.small-card, .top-card { - max-height: 20%; + width: 50% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; } .small-card, .big-card { - padding: 10px; + padding: 16px; } .big-card { - max-height: 45%; -} - -.roles { - display: flex; - flex-direction: row; - flex-wrap: wrap; + max-height: 45%; } -.role-column { - width: 40%; - display: flex; - flex-direction: column; - padding-left: 5%; - padding-right: 5%; -} +@media (max-width: 400px) { + .profile-card { + width: 100% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; + } -.rounded-header { - max-width: 100%; - min-height: 40px; - background: #4A90E2; /* Color from Invision designs */ - background-color: rgb(0, 75, 141); /* Color from FilmIndy site */ - border-radius: 100px; - text-align: center; - color: white; + .crew-image { + width: 150px !important; + height: 150px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 150px !important; + min-height: 150px !important; + } } - -.rounded-header span { - display: block; - margin-top: 10px; - padding: 0 10px 10px 10px; -} - -.credits { - display: block; - width: 100%; - margin-top: 10px; - margin-bottom: 10px; - margin-left: 20px; - border-left: 2px solid rgb(0, 75, 141); - padding-left: 10px; -} \ No newline at end of file diff --git a/src/presentation/locationProfile/EditLocationProfile.js b/src/presentation/locationProfile/EditLocationProfile.js index 3132e80..2f783fc 100644 --- a/src/presentation/locationProfile/EditLocationProfile.js +++ b/src/presentation/locationProfile/EditLocationProfile.js @@ -234,7 +234,8 @@ class EditLocationProfile extends React.Component {
- + +
-
+
Just here to search? Turn your profile to "Private" to not appear in other's searches.
- + +
- + +
@@ -382,7 +385,8 @@ class EditLocationProfile extends React.Component {
- + +
updateLocationProfile(values, locationId))}>
@@ -412,7 +416,8 @@ class EditLocationProfile extends React.Component {
- + +
{locationLinks.map((link, i) => ( @@ -488,7 +493,8 @@ class EditLocationProfile extends React.Component {
- + + { video ? (
- + +
{ diff --git a/src/presentation/locationProfile/LocationProfile.css b/src/presentation/locationProfile/LocationProfile.css index 0615518..fd5c282 100644 --- a/src/presentation/locationProfile/LocationProfile.css +++ b/src/presentation/locationProfile/LocationProfile.css @@ -7,8 +7,18 @@ width: 80%; } +.crew-image-container { + height: 100%; +} + .crew-image { - height: 100%; + width: 250px !important; + height: 250px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 250px !important; + min-height: 250px !important; } .crew-headline { @@ -21,10 +31,40 @@ margin-top: -10px; } +.profile-card { + width: 50% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; +} + .small-card, .big-card { padding: 16px; } .big-card { max-height: 45%; -} \ No newline at end of file +} + +@media (max-width: 400px) { + .profile-card { + width: 100% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; + } + + .crew-image { + width: 150px !important; + height: 150px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 150px !important; + min-height: 150px !important; + } +} diff --git a/src/presentation/locationProfile/LocationProfile.js b/src/presentation/locationProfile/LocationProfile.js index b97a7a4..740b015 100644 --- a/src/presentation/locationProfile/LocationProfile.js +++ b/src/presentation/locationProfile/LocationProfile.js @@ -63,7 +63,7 @@ const LocationProfilePage = (props) => {
{ locationCreator === uid ? ( -
+
} /> @@ -110,7 +110,7 @@ const LocationProfilePage = (props) => {
- +
{ locationBio ? ( @@ -133,7 +133,7 @@ const LocationProfilePage = (props) => { { video ? ( - + diff --git a/src/presentation/profile/EditProfile.js b/src/presentation/profile/EditProfile.js index ecb7577..da718d2 100644 --- a/src/presentation/profile/EditProfile.js +++ b/src/presentation/profile/EditProfile.js @@ -31,14 +31,7 @@ import '../../App.css' import '../../presentation/profile/ViewProfile.css' const styles = { - card: { - width: '40%', - height: 'auto', - marginTop: '1em', - display: 'block', - margin: 'auto', - padding: '1em' - }, + chipStyle: { margin: 6 } @@ -265,7 +258,7 @@ class EditProfile extends React.Component { const isPublic = get(profile, 'public', false) const video = get(userProfile, 'video', '')[0] let videoType = 0 - if (video) videoType = video.url.indexOf('youtube') > -1 ? 1 : 2 // 1 for Youtube, 2 for Vimeo + if (video) videoType = video.url.indexOf('youtube') > -1 ? 1 : 2 // 1 for Youtube, 2 for Vimeo const addYoutubeActions = [
- +
-
+
Just here to search? Turn your profile to "Private" to not appear in other's searches.
- +
@@ -454,7 +447,7 @@ class EditProfile extends React.Component {
- +
@@ -484,7 +477,7 @@ class EditProfile extends React.Component {
- +
{userLinks.map((link, i) => ( @@ -561,7 +554,7 @@ class EditProfile extends React.Component {
- + { video ? (
- +
{ diff --git a/src/presentation/profile/ViewProfile.css b/src/presentation/profile/ViewProfile.css index 8a4c5ad..a26d008 100644 --- a/src/presentation/profile/ViewProfile.css +++ b/src/presentation/profile/ViewProfile.css @@ -3,25 +3,37 @@ margin-top: 25px; } -.crew-image { +.crew-image-container { height: 100%; } +.crew-image { + width: 250px !important; + height: 250px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 250px !important; + min-height: 250px !important; +} + .crew-headline { font-weight: 500; } .crew-text { font-weight: 400; - min-width: 100%; + min-width: 200% !important; margin-top: -10px; } .profile-card { - width: 50%; - border-radius: 2; - margin: auto; - margin-bottom: 1%; + width: 50% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; } .small-card, .top-card { @@ -74,4 +86,25 @@ margin-left: 20px; border-left: 2px solid rgb(0, 75, 141); padding-left: 10px; -} \ No newline at end of file +} + +@media (max-width: 400px) { + .profile-card { + width: 100% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; + } + + .crew-image { + width: 150px !important; + height: 150px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 150px !important; + min-height: 150px !important; + } +} diff --git a/src/presentation/profile/ViewProfile.js b/src/presentation/profile/ViewProfile.js index fcfc90e..5efd77c 100644 --- a/src/presentation/profile/ViewProfile.js +++ b/src/presentation/profile/ViewProfile.js @@ -91,7 +91,7 @@ class ViewProfile extends React.Component {
{ authorizedUid === uid ? ( -
+
} /> @@ -100,11 +100,11 @@ class ViewProfile extends React.Component { }
- - + +
- + { isNaN(numYears) ? null : ( diff --git a/src/presentation/vendorProfile/EditVendorProfile.css b/src/presentation/vendorProfile/EditVendorProfile.css index 8a4c5ad..8d188d0 100644 --- a/src/presentation/vendorProfile/EditVendorProfile.css +++ b/src/presentation/vendorProfile/EditVendorProfile.css @@ -2,26 +2,37 @@ text-align: left; margin-top: 25px; } +.crew-image-container { + height: 100%; +} .crew-image { - height: 100%; + width: 250px !important; + height: 250px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 250px !important; + min-height: 250px !important; } .crew-headline { - font-weight: 500; + font-weight: 500; } .crew-text { - font-weight: 400; - min-width: 100%; - margin-top: -10px; + font-weight: 400; + min-width: 100%; + margin-top: -10px; } .profile-card { - width: 50%; - border-radius: 2; - margin: auto; - margin-bottom: 1%; + width: 50% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; } .small-card, .top-card { @@ -70,8 +81,29 @@ display: block; width: 100%; margin-top: 10px; - margin-bottom: 10px; +margin-bottom: 10px; margin-left: 20px; border-left: 2px solid rgb(0, 75, 141); padding-left: 10px; -} \ No newline at end of file +} + +@media (max-width: 400px) { + .profile-card { + width: 100% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; + } + + .crew-image { + width: 150px !important; + height: 150px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 150px !important; + min-height: 150px !important; + } +} diff --git a/src/presentation/vendorProfile/EditVendorProfile.js b/src/presentation/vendorProfile/EditVendorProfile.js index b48eff9..180c42b 100644 --- a/src/presentation/vendorProfile/EditVendorProfile.js +++ b/src/presentation/vendorProfile/EditVendorProfile.js @@ -29,14 +29,7 @@ import './EditVendorProfile.css' const styles = { - card: { - width: '40%', - height: 'auto', - marginTop: '1em', - display: 'block', - margin: 'auto', - padding: '1em' - }, + chipStyle: { margin: 6 } @@ -144,7 +137,7 @@ class EditVendorProfile extends React.Component { const isPublic = get(vendorProfile, 'public', false) const video = get(vendorProfile, 'video', '')[0] let videoType = 0 - if (video) videoType = video.url.indexOf('youtube') > -1 ? 1 : 2 // 1 for Youtube, 2 for Vimeo + if (video) videoType = video.url.indexOf('youtube') > -1 ? 1 : 2 // 1 for Youtube, 2 for Vimeo const profileImageUrl = get(vendorProfile, 'profileImage', 'https://images.vexels.com/media/users/3/144866/isolated/preview/927c4907bbd0598c70fb79de7af6a35c-business-building-silhouette-by-vexels.png') const addLinkActions = [ @@ -204,7 +197,7 @@ class EditVendorProfile extends React.Component {
- +
-
+
Just here to search? Turn your profile to "Private" to not appear in other's searches.
- +
@@ -333,7 +326,7 @@ class EditVendorProfile extends React.Component {
- +
@@ -441,7 +434,7 @@ class EditVendorProfile extends React.Component {
- + updateVendorProfile(values, vendorId))}>
@@ -471,7 +464,7 @@ class EditVendorProfile extends React.Component {
- +
{vendorLinks.map((link, i) => ( @@ -547,7 +540,7 @@ class EditVendorProfile extends React.Component {
- + { video ? ( { const video = get(vendorProfile, 'video', '')[0] let videoType = 0 - if(video) videoType = video.url.indexOf("youtube") > -1 ? 1 : 2 // 1 for Youtube, 2 for Vimeo + if (video) videoType = video.url.indexOf('youtube') > -1 ? 1 : 2 // 1 for Youtube, 2 for Vimeo const vendorAddressLine1 = get(vendorProfile, 'addressLine1', '') const vendorAddressLine2 = get(vendorProfile, 'addressLine2', '') @@ -85,7 +85,7 @@ const VendorProfilePage = (props) => {
{ vendorCreator === uid ? ( -
+
} /> @@ -93,8 +93,8 @@ const VendorProfilePage = (props) => { ) : null } - - + +
From 594297a05159a4840e40fdd0e837bdce3ade7455 Mon Sep 17 00:00:00 2001 From: ejmudrak Date: Sat, 24 Feb 2018 17:11:40 -0500 Subject: [PATCH 3/5] Removed unused variables and things from mobile optimizing pass --- .../locationProfile/EditLocationProfile.js | 15 --------------- src/presentation/profile/EditProfile.js | 8 +------- 2 files changed, 1 insertion(+), 22 deletions(-) diff --git a/src/presentation/locationProfile/EditLocationProfile.js b/src/presentation/locationProfile/EditLocationProfile.js index 2f783fc..e661e25 100644 --- a/src/presentation/locationProfile/EditLocationProfile.js +++ b/src/presentation/locationProfile/EditLocationProfile.js @@ -31,21 +31,6 @@ import States from './States' import Gallery from '../common/Gallery' import './EditLocationProfile.css' - -const styles = { - card: { - width: '50%', - height: 'auto', - marginTop: '1em', - display: 'block', - margin: 'auto', - padding: '1em' - }, - chipStyle: { - margin: 6 - } -} - const renderTextField = ({ input, name, label, meta: { touched, error }, ...custom }) => ( (
- +
{userLinks.map((link, i) => ( From c602496751f42f07a1695142e1c24d507e4d95e3 Mon Sep 17 00:00:00 2001 From: Kyle Potts Date: Sun, 25 Feb 2018 20:29:38 -0500 Subject: [PATCH 4/5] adding grid to view profile --- src/presentation/profile/ViewProfile.js | 262 +++++++++++++++--------- 1 file changed, 169 insertions(+), 93 deletions(-) diff --git a/src/presentation/profile/ViewProfile.js b/src/presentation/profile/ViewProfile.js index 5efd77c..45cfcd3 100644 --- a/src/presentation/profile/ViewProfile.js +++ b/src/presentation/profile/ViewProfile.js @@ -7,6 +7,7 @@ import ModeEditIcon from 'material-ui/svg-icons/editor/mode-edit' import { get } from 'lodash' import PropTypes from 'prop-types' import formatLink from '../../util/formatLink' +import { Grid, Row, Col } from 'react-flexbox-grid' import '../../App.css' import './ViewProfile.css' @@ -86,103 +87,178 @@ class ViewProfile extends React.Component { const name = `${get(userAccount, 'firstName', '')} ${get(userAccount, 'lastName', '')}` const phone = formatPhoneNumber(get(userAccount, 'phone')) - const email = get(userProfile, 'displayEmail') ? userProfile.displayEmail : get(data, 'auth.email') + const email = get(userProfile, 'displayEmail') ? userProfile.displayEmail : get(auth, 'email') return ( -
- { - authorizedUid === uid ? ( -
- - } /> - -
- ) : null - } -
- - - - -
- - { isNaN(numYears) ? - null - : ( - - {numYears} year(s) in industry - - ) - } - { phone ? ( - - {phone} - - ) : null - } - - {email} - -
- - - - - - { bio ? ( - - {bio} - - ) : ( - + +
+ { + authorizedUid === uid ? ( +
+ + } /> + +
+ ) : null + } +
+ + + + + + + + + + +
+ + + + + + + + { isNaN(numYears) ? + null + : ( + + {numYears} year(s) in industry + + ) + } + + + + + { phone ? ( + + {phone} + + ) : null + } + + + + + + {email} + + + +
+ + + + + + + + + + + + + + + + + { bio ? ( + + {bio} + + ) : ( + Contact me directly for more information. - - ) - } - - - {userLinks.map(link => ( - - ))} - - - - { video ? ( - - - - - ) : null } - - - - -
- { - userRoles.map((role) => { - const associatedCredits = userCredits.filter(c => c.roleId === role.roleId) - - associatedCredits.sort((a, b) => { - if (a.year < b.year) { return -1 } - if (a.year > b.year) { return 1 } - return 0 - }) - return ( -
-
{role.roleName}
-
- { associatedCredits.map(credit => ( -

{credit.year}{credit.genre ? ` (${credit.genre})` : ''} : {credit.title}

- ) - )} + + ) + } + + + + + + + {userLinks.map(link => ( + + ))} + + + + + + + { video ? ( + + + + + + + + + + + + + + + + + ) : null } + + + + + + + + + + +
+ { + userRoles.map((role) => { + const associatedCredits = userCredits.filter(c => c.roleId === role.roleId) + + associatedCredits.sort((a, b) => { + if (a.year < b.year) { return -1 } + if (a.year > b.year) { return 1 } + return 0 + }) + return ( +
+ + +
+ {role.roleName} +
+
+ { associatedCredits.map(credit => ( + + +

{credit.year}{credit.genre ? ` (${credit.genre})` : ''} : {credit.title}

+ + + ) + )} +
+ + +
+ ) + }) + }
-
- ) - }) - } -
- + + + + + + +
-
+ ) } } From 07a42f6cdfc3db6cf140fe8e86eb52c0816dd9b3 Mon Sep 17 00:00:00 2001 From: ejmudrak Date: Sun, 4 Mar 2018 12:41:55 -0500 Subject: [PATCH 5/5] Increased css breakpoint for mobile styles --- src/App.css | 2 +- src/presentation/account/accountPage.css | 2 +- src/presentation/home/homePage.css | 2 +- src/presentation/locationProfile/EditLocationProfile.css | 2 +- src/presentation/locationProfile/LocationProfile.css | 2 +- src/presentation/profile/ViewProfile.css | 2 +- src/presentation/profile/ViewProfile.js | 2 +- src/presentation/vendorProfile/EditVendorProfile.css | 2 +- src/presentation/vendorProfile/VendorProfile.css | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/App.css b/src/App.css index f71fb5b..b1db49e 100644 --- a/src/App.css +++ b/src/App.css @@ -113,7 +113,7 @@ a { text-decoration: none; } margin-right: 10px !important; } -@media (max-width: 400px) { +@media (max-width: 775px) { .logo { margin-left: 0; width: 2em; diff --git a/src/presentation/account/accountPage.css b/src/presentation/account/accountPage.css index 753ee86..ac6a51d 100644 --- a/src/presentation/account/accountPage.css +++ b/src/presentation/account/accountPage.css @@ -126,7 +126,7 @@ width: 100%; } -@media (max-width: 400px) { +@media (max-width: 775px) { .profileCard, .passwordCard { box-shadow: none !important; width: 100%; diff --git a/src/presentation/home/homePage.css b/src/presentation/home/homePage.css index 99c68ef..9b5cc9b 100644 --- a/src/presentation/home/homePage.css +++ b/src/presentation/home/homePage.css @@ -155,7 +155,7 @@ color: #38b5e6; } -@media (max-width: 400px) { +@media (max-width: 775px) { .bg-image { position: relative; top: -100px; diff --git a/src/presentation/locationProfile/EditLocationProfile.css b/src/presentation/locationProfile/EditLocationProfile.css index fd5c282..4fd72a4 100644 --- a/src/presentation/locationProfile/EditLocationProfile.css +++ b/src/presentation/locationProfile/EditLocationProfile.css @@ -48,7 +48,7 @@ max-height: 45%; } -@media (max-width: 400px) { +@media (max-width: 775px) { .profile-card { width: 100% !important; height: auto !important; diff --git a/src/presentation/locationProfile/LocationProfile.css b/src/presentation/locationProfile/LocationProfile.css index fd5c282..4fd72a4 100644 --- a/src/presentation/locationProfile/LocationProfile.css +++ b/src/presentation/locationProfile/LocationProfile.css @@ -48,7 +48,7 @@ max-height: 45%; } -@media (max-width: 400px) { +@media (max-width: 775px) { .profile-card { width: 100% !important; height: auto !important; diff --git a/src/presentation/profile/ViewProfile.css b/src/presentation/profile/ViewProfile.css index a26d008..fdd2d1d 100644 --- a/src/presentation/profile/ViewProfile.css +++ b/src/presentation/profile/ViewProfile.css @@ -88,7 +88,7 @@ padding-left: 10px; } -@media (max-width: 400px) { +@media (max-width: 775px) { .profile-card { width: 100% !important; height: auto !important; diff --git a/src/presentation/profile/ViewProfile.js b/src/presentation/profile/ViewProfile.js index 45cfcd3..afcb90a 100644 --- a/src/presentation/profile/ViewProfile.js +++ b/src/presentation/profile/ViewProfile.js @@ -93,7 +93,7 @@ class ViewProfile extends React.Component {
{ authorizedUid === uid ? ( -
+
} /> diff --git a/src/presentation/vendorProfile/EditVendorProfile.css b/src/presentation/vendorProfile/EditVendorProfile.css index 8d188d0..004f106 100644 --- a/src/presentation/vendorProfile/EditVendorProfile.css +++ b/src/presentation/vendorProfile/EditVendorProfile.css @@ -87,7 +87,7 @@ margin-bottom: 10px; padding-left: 10px; } -@media (max-width: 400px) { +@media (max-width: 775px) { .profile-card { width: 100% !important; height: auto !important; diff --git a/src/presentation/vendorProfile/VendorProfile.css b/src/presentation/vendorProfile/VendorProfile.css index fd5c282..4fd72a4 100644 --- a/src/presentation/vendorProfile/VendorProfile.css +++ b/src/presentation/vendorProfile/VendorProfile.css @@ -48,7 +48,7 @@ max-height: 45%; } -@media (max-width: 400px) { +@media (max-width: 775px) { .profile-card { width: 100% !important; height: auto !important;