-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Incorporate Chris background art + too many misc UI changes to really…
… put in one PR (#1543) * Add lounge bg art to Community and Profile pages * better * trying out homepage art * minor * minor * minor * trying out bg art for workshop * try node 16' * maybe * new assets * minor * minor * bringing in more chris art and other styling * oops * New NavMenu + more * Better Help styling * testing out some changes to the user menu too * better styling * Compressing images, adding gears wallpaper from wallpaperaccess.com for loading screen, fixing nav bar * better path logic * credits * more compression + some tweaks to splash page * minor * minor * minor * minor * rm unused fonts * minor * minor * minor * minor * more responsive profile page * minor * minor * minor * minor * minor * Make Set help text persistent * Set redesign I guess??? * better help functionality * minor * maybe set ui ok for now * better set draft picker * Draft button for published sets * Better sidebar handling in sandbox * minor * New longer conveyor art, better styling for disabled buttons, fix logged out bug in SetSummary * minor * holy shit * Restyle help pages + home page a bit * Make Decks page toolbar consistent with Sets page * minor * minor * resolve some warnings while I'm at it? * minor
- Loading branch information
1 parent
1f86742
commit 90eeb83
Showing
97 changed files
with
1,203 additions
and
786 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| interface BackgroundProps { | ||
| asset: string | ||
| opacity: number | ||
| style?: React.CSSProperties | ||
| } | ||
|
|
||
| export default class Background extends React.PureComponent<BackgroundProps> { | ||
| public render(): JSX.Element { | ||
| const { asset, opacity, style } = this.props; | ||
| return ( | ||
| <div | ||
| style={{ | ||
| position: 'fixed', | ||
| width: '100%', | ||
| height: '100%', | ||
| left: 0, | ||
| zIndex: -1, | ||
| background: `url('/static/artAssets/${asset}')`, | ||
| backgroundSize: 'cover', | ||
| opacity, | ||
| ...style | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,140 +1,56 @@ | ||
| import { withStyles, WithStyles } from '@material-ui/core'; | ||
| import Drawer from '@material-ui/core/Drawer'; | ||
| import Icon from '@material-ui/core/Icon'; | ||
| import MenuItem from '@material-ui/core/MenuItem'; | ||
| import { CSSProperties } from '@material-ui/core/styles/withStyles'; | ||
| import BuildIcon from '@material-ui/icons/Build'; | ||
| import HelpOutlineIcon from '@material-ui/icons/HelpOutline'; | ||
| import HomeIcon from '@material-ui/icons/Home'; | ||
| import InfoOutlineIcon from '@material-ui/icons/InfoOutlined'; | ||
| import LayersIcon from '@material-ui/icons/Layers'; | ||
| import PeopleIcon from '@material-ui/icons/People'; | ||
| import ViewListIcon from '@material-ui/icons/ViewList'; | ||
| import ViewModuleIcon from '@material-ui/icons/ViewModule'; | ||
| import * as React from 'react'; | ||
| import { NavLink } from 'react-router-dom'; | ||
| import { RouteComponentProps, withRouter } from 'react-router'; | ||
|
|
||
| import { HEADER_HEIGHT, MAX_Z_INDEX, SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_WIDTH, SIDEBAR_Z_INDEX, UNSUPPORTED_BROWSER_MESSAGE_HEIGHT } from '../constants'; | ||
| import { isFlagSet, isSupportedBrowser, toggleFlag } from '../util/browser'; | ||
| import { HEADER_HEIGHT, SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_Y_OFFSET, SIDEBAR_Z_INDEX, UNSUPPORTED_BROWSER_MESSAGE_HEIGHT } from '../constants'; | ||
|
|
||
| import Tooltip from './Tooltip'; | ||
| import NavMenuLink from './NavMenuLink'; | ||
|
|
||
| interface NavMenuProps { | ||
| canExpand: boolean | ||
| isExpanded: boolean | ||
| cardIdBeingEdited: string | null | ||
| onRerender: () => void | ||
| isUnsupportedBrowser: boolean | ||
| } | ||
|
|
||
| class NavMenu extends React.Component<NavMenuProps & WithStyles> { | ||
| public static styles: Record<string, CSSProperties> = { | ||
| drawerPaper: { | ||
| top: HEADER_HEIGHT, | ||
| transition: 'width 200ms ease-in-out', | ||
| height: 'calc(100% - 54px)', | ||
| overflow: 'visible', | ||
| zIndex: SIDEBAR_Z_INDEX, | ||
| '& .material-icons': { | ||
| color: '#666' | ||
| }, | ||
| '& li .material-icons': { | ||
| marginRight: 20 | ||
| } | ||
| }, | ||
| expanded: { | ||
| width: SIDEBAR_WIDTH | ||
| }, | ||
| collapsed: { | ||
| width: SIDEBAR_COLLAPSED_WIDTH | ||
| }, | ||
| unsupportedBrowser: { | ||
| top: HEADER_HEIGHT + UNSUPPORTED_BROWSER_MESSAGE_HEIGHT | ||
| } | ||
| }; | ||
|
|
||
| class NavMenu extends React.PureComponent<NavMenuProps & RouteComponentProps> { | ||
| public render(): JSX.Element { | ||
| const { canExpand, cardIdBeingEdited, isExpanded, classes } = this.props; | ||
| const { cardIdBeingEdited, isUnsupportedBrowser, history: { location } } = this.props; | ||
|
|
||
| const iconStyle = { | ||
| transform: 'skewY(-20deg)', | ||
| marginRight: 15 | ||
| }; | ||
|
|
||
| return ( | ||
| <Drawer | ||
| open | ||
| variant="permanent" | ||
| classes={{ paper: `${classes.drawerPaper} ${isExpanded ? classes.expanded : classes.collapsed} ${!isSupportedBrowser() && classes.unsupportedBrowser}` }} | ||
| <div | ||
| style={{ | ||
| position: 'fixed', | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| top: HEADER_HEIGHT + (isUnsupportedBrowser ? UNSUPPORTED_BROWSER_MESSAGE_HEIGHT : 0) + SIDEBAR_Y_OFFSET, | ||
| zIndex: SIDEBAR_Z_INDEX, | ||
| width: SIDEBAR_COLLAPSED_WIDTH | ||
| }} | ||
| > | ||
| {this.renderLink('/', 'Home', 'home')} | ||
| {this.renderLink('/play', 'Arena', 'crossed-swords', 'ra')} | ||
| {this.renderLink(`/card/${cardIdBeingEdited || 'new'}`, 'Workshop', 'build')} | ||
| {this.renderLink('/collection', 'Collection', 'view_module')} | ||
| {this.renderLink('/decks', 'Decks', 'view_list')} | ||
| {this.renderLink('/sets', 'Sets', 'layers')} | ||
| {this.renderLink('/community', 'Community', 'people')} | ||
| {this.renderLink('/help', 'Help', 'help_outline')} | ||
| {this.renderLink('/about', 'About', 'info_outline')} | ||
| {canExpand && this.renderExpandCollapseButton()} | ||
| </Drawer> | ||
| <NavMenuLink location={location} path="/" text="Home" icon={<HomeIcon style={iconStyle} />} /> | ||
| <NavMenuLink location={location} path="/play" text="Arena" icon={<Icon className={`ra ra-crossed-swords`} style={{ ...iconStyle, lineHeight: 1.2 }} />} /> | ||
| <NavMenuLink location={location} path={`/card/${cardIdBeingEdited || "new"}`} text="Workshop" icon={<BuildIcon style={iconStyle} />} /> | ||
| <NavMenuLink location={location} path="/collection" text="Collection" icon={<ViewModuleIcon style={iconStyle} />} /> | ||
| <NavMenuLink location={location} path="/decks" text="Decks" icon={<ViewListIcon style={iconStyle} />} /> | ||
| <NavMenuLink location={location} path="/sets" text="Sets" icon={<LayersIcon style={iconStyle} />} /> | ||
| <NavMenuLink location={location} path="/community" text="Community" icon={<PeopleIcon style={iconStyle} />} /> | ||
| <NavMenuLink location={location} path="/help" text="Help" icon={<HelpOutlineIcon style={iconStyle} />} /> | ||
| <NavMenuLink location={location} path="/about" text= "About" icon={<InfoOutlineIcon style={iconStyle} />} /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| private toggleExpanded = () => { | ||
| toggleFlag('sidebarCollapsed'); | ||
| this.props.onRerender(); | ||
| } | ||
|
|
||
| private renderIcon = (icon: string, iconFont: 'material' | 'ra'): React.ReactNode => { | ||
| if (iconFont === 'material') { | ||
| return ( | ||
| <Icon | ||
| className="material-icons" | ||
| style={{ left: this.props.isExpanded ? 4 : 8 }} | ||
| > | ||
| {icon} | ||
| </Icon> | ||
| ); | ||
| } else if (iconFont === 'ra') { | ||
| return ( | ||
| <Icon | ||
| className={`ra ra-${icon}`} | ||
| style={{ | ||
| left: this.props.isExpanded ? 4 : 8, | ||
| lineHeight: 1.2 | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| private renderLink = (path: string, text: string, icon: string, iconFont: 'material' | 'ra' = 'material') => ( | ||
| <NavLink exact to={path} activeClassName="activeNavLink"> | ||
| <Tooltip | ||
| disable={this.props.isExpanded} | ||
| text={text} | ||
| place="right" | ||
| style={{ zIndex: MAX_Z_INDEX }} | ||
| > | ||
| <MenuItem> | ||
| {this.renderIcon(icon, iconFont)} | ||
| {this.props.isExpanded ? text : ''} | ||
| </MenuItem> | ||
| </Tooltip> | ||
| </NavLink> | ||
| ) | ||
|
|
||
| private renderExpandCollapseButton = () => ( | ||
| <div | ||
| onClick={this.toggleExpanded} | ||
| style={{ | ||
| textAlign: 'center', | ||
| cursor: 'pointer' | ||
| }} | ||
| > | ||
| <Tooltip | ||
| text={isFlagSet('sidebarCollapsed') ? 'Expand' : 'Collapse'} | ||
| place="right" | ||
| > | ||
| {this.props.isExpanded | ||
| ? <React.Fragment> | ||
| <Icon className="material-icons" style={{ fontSize: '0.6em' }}>arrow_forward</Icon> | ||
| <Icon className="material-icons" style={{ fontSize: '0.6em' }}>arrow_back</Icon> | ||
| </React.Fragment> | ||
| : <React.Fragment> | ||
| <Icon className="material-icons" style={{ fontSize: '0.6em' }}>arrow_back</Icon> | ||
| <Icon className="material-icons" style={{ fontSize: '0.6em' }}>arrow_forward</Icon> | ||
| </React.Fragment> | ||
| } | ||
| </Tooltip> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default withStyles(NavMenu.styles)(NavMenu); | ||
| export default withRouter(NavMenu); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import MenuItem from '@material-ui/core/MenuItem'; | ||
| import { red } from '@material-ui/core/colors'; | ||
| import { Location } from 'history'; | ||
| import * as React from 'react'; | ||
| import { NavLink } from 'react-router-dom'; | ||
|
|
||
| import { MAX_Z_INDEX } from '../constants'; | ||
|
|
||
| interface NavMenuLinkProps { | ||
| path: string | ||
| text: string | ||
| icon: JSX.Element | ||
| location: Location | ||
| } | ||
|
|
||
| interface NavMenuLinkState { | ||
| isHovered: boolean | ||
| } | ||
|
|
||
| class NavMenuLink extends React.Component<NavMenuLinkProps, NavMenuLinkState> { | ||
| public state = { | ||
| isHovered: false | ||
| }; | ||
|
|
||
| get isActive(): boolean { | ||
| const { path, location } = this.props; | ||
|
|
||
| if (path === '/') { | ||
| return location.pathname === '/' || location.pathname.startsWith('/home'); | ||
| } else { | ||
| return location.pathname.startsWith(path); | ||
| } | ||
| } | ||
|
|
||
| public render(): JSX.Element { | ||
| const { path, text, icon } = this.props; | ||
| const { isHovered } = this.state; | ||
|
|
||
| return ( | ||
| <NavLink | ||
| to={path} | ||
| style={{ | ||
| transform: `skewY(20deg)`, | ||
| transformOrigin: '0% 0%', | ||
| width: isHovered ? 168 : 58, | ||
| border: `1px solid ${red[500]}`, | ||
| borderLeftWidth: this.isActive ? 4 : 0, | ||
| backgroundColor: this.isActive ? '#eee' : 'default', | ||
| marginBottom: 5, | ||
| background: 'white', | ||
| zIndex: MAX_Z_INDEX, | ||
| transition: 'width 100ms ease-in-out', | ||
| boxShadow: '1px 1px 5px #666b', | ||
| }} | ||
| > | ||
| <MenuItem onMouseOver={this.onHover} onMouseLeave={this.onUnhover}> | ||
| {icon} | ||
| {isHovered && <span style={{ fontFamily: '"Carter One"', textTransform: 'uppercase', color: '#666' }}> | ||
| {text} | ||
| </span>} | ||
| </MenuItem> | ||
| </NavLink> | ||
| ); | ||
| } | ||
|
|
||
| private onHover = () => { this.setState({ isHovered: true }); }; | ||
| private onUnhover = () => { this.setState({ isHovered: false }); }; | ||
| } | ||
|
|
||
| export default NavMenuLink; |
Oops, something went wrong.