Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Film 100 #109

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Film 100 #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
78b4e4b
Home and Search page mobile opt
ejmudrak Feb 18, 2018
5342039
Account, Profile, Vendors, and Locations optimization
ejmudrak Feb 24, 2018
594297a
Removed unused variables and things from mobile optimizing pass
ejmudrak Feb 24, 2018
c602496
adding grid to view profile
Feb 26, 2018
dc6d3b1
Added back VirtualMenu code
ejmudrak Mar 4, 2018
4344665
Merge pull request #112 from IndyTechFellowship/profile-with-grid
ejmudrak Mar 4, 2018
c9d727e
Merge branch 'FILM-100' of https://github.com/IndyTechFellowship/film…
ejmudrak Mar 4, 2018
07a42f6
Increased css breakpoint for mobile styles
ejmudrak Mar 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
341 changes: 341 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

42 changes: 36 additions & 6 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ a { text-decoration: none; }

.App {
text-align: center;
overflow-x: hidden;
}

.App-logo {
Expand Down Expand Up @@ -52,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 {
Expand All @@ -66,6 +70,7 @@ a { text-decoration: none; }
margin-left: -25px !important;
margin-bottom: 5px !important;
}

.accountLogin {
margin-top: 18px !important;
margin-right: 1em;
Expand All @@ -89,11 +94,9 @@ 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;*/
}

.searchIcon {
Expand All @@ -103,8 +106,35 @@ 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: 775px) {
.logo {
margin-left: 0;
width: 2em;
}

.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;
}
}
329 changes: 178 additions & 151 deletions src/App.js
View file
Open in desktop

Large diffs are not rendered by default.

36 changes: 36 additions & 0 deletions src/presentation/account/accountPage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -117,3 +125,31 @@
text-align: left;
width: 100%;
}

@media (max-width: 775px) {
.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
}
}
48 changes: 24 additions & 24 deletions src/presentation/account/accountPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,15 +143,15 @@ class AccountPage extends React.Component {
</div>
) : null}
<h2 className="resetHeader">Vendors</h2>
<Card className="passwordCard">
<div style={{ display: 'flex', flexDirection: 'row' }}>
<Card className="addCard">
<div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
{Object.keys(vendors).map((key) => {
const vend = vendors[key]
return (
<Chip
onRequestDelete={() => deleteVendor(key)}
key={vend.name}
style={{ marginRight: 5 }}
style={{ marginRight: 5, marginBottom: 10 }}
>
{vend.name}
</Chip>
Expand All @@ -168,28 +168,28 @@ class AccountPage extends React.Component {
createVendor(values.name)
}}
/>
</Card>
</Card>

<h2 className="resetHeader">Locations</h2>
<Card className="passwordCard">
<div style={{ display: 'flex', flexDirection: 'row' }}>
{Object.keys(locations).map((key) => {
const loc = locations[key]
return (
<Chip
onRequestDelete={() => deleteLocation(key)}
key={loc.name}
style={{ marginRight: 5 }}
>
{loc.name}
</Chip>
)
})}
{Object.keys(locations).length === 0 ?
'Press Add to create a Location'
: null
}
</div>
<h2 className="resetHeader">Locations</h2>
<Card className="addCard">
<div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
{Object.keys(locations).map((key) => {
const loc = locations[key]
return (
<Chip
onRequestDelete={() => deleteLocation(key)}
key={loc.name}
style={{ marginRight: 5, marginBottom: 10 }}
>
{loc.name}
</Chip>
)
})}
{Object.keys(locations).length === 0 ?
'Press Add to create a Location'
: null
}
</div>
<LocationCreateModal
submitLocationCreate={submitLocationCreate}
onSubmit={(values) => {
Expand Down
46 changes: 34 additions & 12 deletions src/presentation/common/LocationMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -42,6 +43,11 @@ class LocationMenu extends React.Component {
<Link onClick={closeDropdown} to={`/location/${key}`}> <MenuItem primaryText={location.name} /> </Link>
)
})

const width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth

return (
<div>
<div
Expand All @@ -55,18 +61,34 @@ class LocationMenu extends React.Component {
Locations
</div>
</div>
<Popover
open={this.state.open}
anchorEl={this.state.anchorEl}
anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
targetOrigin={{ horizontal: 'right', vertical: 'top' }}
onRequestClose={this.handleRequestClose}
>
<Menu>
{menuItems}
<MenuItem primaryText="Add Location" onClick={onAddLocationClick} />
</Menu>
</Popover>
{ width > 450 && (
<Popover
open={this.state.open}
anchorEl={this.state.anchorEl}
anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
targetOrigin={{ horizontal: 'right', vertical: 'top' }}
onRequestClose={this.handleRequestClose}
>
<Menu>
{menuItems}
<MenuItem primaryText="Add Location" leftIcon={<Add />} onClick={onAddLocationClick} />
</Menu>
</Popover>
)}
{ width <= 450 && (
<Popover
open={this.state.open}
anchorEl={this.state.anchorEl}
anchorOrigin={{ horizontal: 'center', vertical: 'top' }}
targetOrigin={{ horizontal: 'right', vertical: 'top' }}
onRequestClose={this.handleRequestClose}
>
<Menu>
{menuItems}
<MenuItem primaryText="Add Location" leftIcon={<Add />} onClick={onAddLocationClick} />
</Menu>
</Popover>
)}
</div>
)
}
Expand Down
48 changes: 36 additions & 12 deletions src/presentation/common/VendorMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -41,6 +44,11 @@ class VendorMenu extends React.Component {
<Link onClick={closeDropdown} to={`/vendor/${key}`}> <MenuItem primaryText={location.name} /> </Link>
)
})

const width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth

return (
<div>
<div
Expand All @@ -54,18 +62,34 @@ class VendorMenu extends React.Component {
Vendors
</div>
</div>
<Popover
open={this.state.open}
anchorEl={this.state.anchorEl}
anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
targetOrigin={{ horizontal: 'right', vertical: 'top' }}
onRequestClose={this.handleRequestClose}
>
<Menu>
{menuItems}
<MenuItem primaryText="Add Location" onClick={onAddVendorClick} />
</Menu>
</Popover>
{ width > 450 && (
<Popover
open={this.state.open}
anchorEl={this.state.anchorEl}
anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
targetOrigin={{ horizontal: 'right', vertical: 'top' }}
onRequestClose={this.handleRequestClose}
>
<Menu>
{menuItems}
<MenuItem primaryText="Add Vendor" leftIcon={<Add />} onClick={onAddVendorClick} />
</Menu>
</Popover>
)}
{ width <= 450 && (
<Popover
open={this.state.open}
anchorEl={this.state.anchorEl}
anchorOrigin={{ horizontal: 'center', vertical: 'top' }}
targetOrigin={{ horizontal: 'right', vertical: 'top' }}
onRequestClose={this.handleRequestClose}
>
<Menu>
{menuItems}
<MenuItem primaryText="Add Vendor" leftIcon={<Add />} onClick={onAddVendorClick} />
</Menu>
</Popover>
)}
</div>
)
}
Expand Down
Loading