mirror of
https://github.com/nickzuber/meteorite.git
synced 2024-09-11 11:36:03 +03:00
fix mobile bug
This commit is contained in:
parent
c8d1d23d38
commit
e3640121d2
@ -100,7 +100,7 @@ function transformEventsForMobile (props) {
|
||||
return Object.keys(props).reduce((aux, prop) => {
|
||||
let propT = prop;
|
||||
switch (prop) {
|
||||
case 'onClick': propT = 'onTouchStart'; break;
|
||||
case 'onClick': propT = 'onTouchEnd'; break;
|
||||
// ...
|
||||
}
|
||||
aux[propT] = props[prop];
|
||||
@ -110,7 +110,7 @@ function transformEventsForMobile (props) {
|
||||
|
||||
function transformEvents (props) {
|
||||
return isMobile
|
||||
? transformEventsForMobile
|
||||
? transformEventsForMobile(props)
|
||||
: props;
|
||||
}
|
||||
|
||||
|
@ -16,8 +16,10 @@ import iPhoneXMockupPng from '../../images/screenshots/iphone-x-mockup.png';
|
||||
import iPhoneScreenshotPng from '../../images/screenshots/iphone-x.png';
|
||||
import { ReactComponent as MentionSvg } from '../../images/svg/mention.svg';
|
||||
import { ReactComponent as GoodTeamSvg } from '../../images/svg/good-team.svg';
|
||||
import { ReactComponent as ProcessgSvg } from '../../images/svg/process.svg'
|
||||
import { ReactComponent as MobileSvg } from '../../images/svg/mobile.svg'
|
||||
import { ReactComponent as ProcessgSvg } from '../../images/svg/process.svg';
|
||||
import { ReactComponent as MobileSvg } from '../../images/svg/mobile.svg';
|
||||
|
||||
import {InteractionMenu, Card} from '../NotificationsRedesign/redesign/ui';
|
||||
|
||||
import RobinLogo from '../../images/logos/robin-logo.png';
|
||||
import ForwardLogo from '../../images/logos/forward-logo.png';
|
||||
@ -32,6 +34,12 @@ const version = require('../../../package.json').version + hash;
|
||||
const WIDTH_FOR_MEDIUM_SCREENS = '1100px';
|
||||
const WIDTH_FOR_SMALL_SCREENS = '800px';
|
||||
|
||||
const HomeInteractionMenu = styled(InteractionMenu)`
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
left: 58px !important;
|
||||
`;
|
||||
|
||||
const PageContainer = styled('div')`
|
||||
overflow: hidden;
|
||||
background: #fcf8f3;
|
||||
@ -251,6 +259,7 @@ const IconLink = styled('span')`
|
||||
width: 40px;
|
||||
transition: all 150ms ease;
|
||||
i {
|
||||
font-size: 16px;
|
||||
color: inherit;
|
||||
}
|
||||
&:before {
|
||||
@ -350,6 +359,15 @@ const SmallLink = styled('a')`
|
||||
|
||||
export default function Scene ({loggedIn, onLogout, ...props}) {
|
||||
const [showBorder, setShowBorder] = React.useState(false);
|
||||
const [menu, openMenu] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const body = window.document.querySelector('body');
|
||||
const hideMenu = () => openMenu(false);
|
||||
// For mobile `touchend`
|
||||
body.addEventListener('click', hideMenu);
|
||||
return () => body.removeEventListener('click', hideMenu);
|
||||
}, []);
|
||||
|
||||
// React.useEffect(() => {
|
||||
// const PAGE_OFFSET = 100;
|
||||
@ -445,13 +463,19 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
|
||||
}
|
||||
`}>
|
||||
{/* @TODO implement the menu */}
|
||||
<IconLink>
|
||||
<IconLink onClick={() => openMenu(true)}>
|
||||
<i className="fas fa-bars"></i>
|
||||
</IconLink>
|
||||
</div>
|
||||
</Container>
|
||||
</FixedContainer>
|
||||
|
||||
<HomeInteractionMenu show={menu}>
|
||||
<Card css={css`padding: 0;`}>
|
||||
njskdjnk
|
||||
</Card>
|
||||
</HomeInteractionMenu>
|
||||
|
||||
<Container css={css`
|
||||
margin: 32px auto;
|
||||
flex-direction: column;
|
||||
|
@ -10,7 +10,7 @@ import Logo from '../../../components/Logo';
|
||||
import LoadingIcon from '../../../components/LoadingIcon'
|
||||
import {getFact} from '../../../utils/facts';
|
||||
import {Mode, Sort, View} from '../index';
|
||||
import {withOptimizedTouchEvents} from '../../../enhance';
|
||||
import {isMobile} from 'react-device-detect';
|
||||
import {
|
||||
stringOfError,
|
||||
getPRIssueIcon,
|
||||
@ -351,9 +351,10 @@ export default function Scene ({
|
||||
window.scrollTo(0, 0);
|
||||
const body = window.document.querySelector('body');
|
||||
const hideDropdownMenu = () => setDropdownOpen(false);
|
||||
// For mobile `touchstart`
|
||||
body.addEventListener('click', hideDropdownMenu);
|
||||
return () => body.removeEventListener('click', hideDropdownMenu);
|
||||
// For mobile `touchend`
|
||||
const eventType = isMobile ? 'touchend' : 'click';
|
||||
body.addEventListener(eventType, hideDropdownMenu);
|
||||
return () => body.removeEventListener(eventType, hideDropdownMenu);
|
||||
}, []);
|
||||
|
||||
// Updating the counts when new stats come in.
|
||||
|
@ -3,6 +3,7 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import {css, jsx, keyframes} from '@emotion/core';
|
||||
import {isMobile} from 'react-device-detect';
|
||||
import {navigate} from "@reach/router"
|
||||
import {routes} from '../../../../constants';
|
||||
import {withOnEnter, withOptimizedTouchEvents} from '../../../../enhance';
|
||||
@ -176,7 +177,7 @@ export const IconContainer = withOptimizedTouchEvents(styled('div')`
|
||||
overflow: hidden;
|
||||
}
|
||||
&:hover {
|
||||
background: ${props => props.selected ? 'transparent' : 'rgba(233, 233, 233, .1)'};
|
||||
background: ${props => props.selected ? 'rgba(255, 255, 255, 0)' : 'rgba(233, 233, 233, .1)'};
|
||||
}
|
||||
`);
|
||||
|
||||
@ -481,7 +482,7 @@ export const LoadingNotificationRow = withOptimizedTouchEvents(styled(Notificati
|
||||
transition: all 200ms ease;
|
||||
opacity: 0.75;
|
||||
&:after {
|
||||
background: linear-gradient(90deg, transparent, #f9f8f5, transparent);
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0), #f9f8f5, rgba(255, 255, 255, 0));
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -617,8 +618,9 @@ export function ProfileSection ({user, onLogout}) {
|
||||
React.useEffect(() => {
|
||||
const body = window.document.querySelector('body');
|
||||
const hideMenu = () => setMenuShow(false);
|
||||
body.addEventListener('click', hideMenu);
|
||||
return () => body.removeEventListener('click', hideMenu);
|
||||
const eventType = isMobile ? 'touchend' : 'click';
|
||||
body.addEventListener(eventType, hideMenu);
|
||||
return () => body.removeEventListener(eventType, hideMenu);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
@ -673,30 +675,30 @@ export function ProfileSection ({user, onLogout}) {
|
||||
opacity: 0.7;
|
||||
}
|
||||
`}>
|
||||
<div onClick={event => {
|
||||
<optimized.div onClick={event => {
|
||||
event.stopPropagation();
|
||||
navigate(routes.HOME);
|
||||
setMenuShow(false);
|
||||
}}>
|
||||
<h2>Go home</h2>
|
||||
<p>Head over back to the home page</p>
|
||||
</div>
|
||||
<div onClick={event => {
|
||||
</optimized.div>
|
||||
<optimized.div onClick={event => {
|
||||
event.stopPropagation();
|
||||
navigate(routes.NOTIFICATIONS);
|
||||
setMenuShow(false);
|
||||
}}>
|
||||
<h2>Use old design</h2>
|
||||
<p>Switch back to the original Meteorite design</p>
|
||||
</div>
|
||||
<div onClick={event => {
|
||||
</optimized.div>
|
||||
<optimized.div onClick={event => {
|
||||
event.stopPropagation();
|
||||
onLogout();
|
||||
setMenuShow(false);
|
||||
}}>
|
||||
<h2>Sign out</h2>
|
||||
<p>Log off your account and return to home page</p>
|
||||
</div>
|
||||
</optimized.div>
|
||||
</InteractionMenu>
|
||||
</>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user