diff --git a/package.json b/package.json index 9382cb09..0cd8a538 100755 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "UUID": "annyudx7eo", "title": "Comty™", "DevBuild": true, - "version": "0.2.18", + "version": "0.2.19", "description": "", "main": "index.js", "author": "RageStudio", diff --git a/src/components/MobileWarning/index.js b/src/components/MobileWarning/index.js new file mode 100644 index 00000000..96345ced --- /dev/null +++ b/src/components/MobileWarning/index.js @@ -0,0 +1,38 @@ +import React from 'react' +import styles from './index.less' +import store from 'store' +import * as antd from 'antd' + +export default class MobileWarning extends React.PureComponent{ + + state = { + resbypass: store.get('resbypass') || false, + } + + ResByPassHandler = () => { + this.setState({resbypass: true}) + } + + render(){ + const { resbypass } = this.state + + if (resbypass == false) { + + return( +
+ +

This version of the application is not fully compatible with the resolution of this screen, a higher resolution is recommended for an optimal experience

+ Please choose an option to continue +

this.ResByPassHandler()}>Continue +
+ }/> + + ) + + } + return null + } + +} \ No newline at end of file diff --git a/src/components/MobileWarning/index.less b/src/components/MobileWarning/index.less new file mode 100644 index 00000000..99052393 --- /dev/null +++ b/src/components/MobileWarning/index.less @@ -0,0 +1,18 @@ + +.mobilewarning{ + background-color: rgba(0, 0, 0, 0.975); + color: white; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + z-index: 100000; + display: flex; + justify-content: center; + text-align: center; + :global { + .ant-result-title { + color: white; + } + } + } \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index eb25f831..eae6a249 100755 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,6 +1,7 @@ // @alias from 'components' // Helpers & Misc +import MobileWarning from './MobileWarning' import CustomIcons from './CustomIcons' import Loader from './Loader/Loader.js' import ScrollBar from './ScrollBar' @@ -27,7 +28,8 @@ import PostCreator from './PostCreator' // Mix & Export all export { - UserBadges, + UserBadges, + MobileWarning, PageTransition, SearchCard, HeaderSearch, diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js index 6efdc4de..907a6d8b 100755 --- a/src/layouts/PrimaryLayout.js +++ b/src/layouts/PrimaryLayout.js @@ -1,13 +1,11 @@ /* global window */ /* global document */ -import React, { PureComponent, Fragment } from 'react' +import React from 'react' import PropTypes from 'prop-types' import withRouter from 'umi/withRouter' import { connect } from 'dva' -import { MyLayout, PageTransition, HeaderSearch } from 'components' -import { Layout, Result, Button } from 'antd' +import { MyLayout, PageTransition, HeaderSearch, MobileWarning } from 'components' import { enquireScreen, unenquireScreen } from 'enquire-js' -import { langFromPath } from 'utils' import store from 'store'; import classnames from 'classnames' @@ -17,7 +15,7 @@ import * as Icons from '@ant-design/icons' import styles from './PrimaryLayout.less' -const { Content } = Layout +const { Content } = antd.Layout const { Sider, Control, Secondary } = MyLayout @withRouter @@ -29,8 +27,6 @@ class PrimaryLayout extends React.Component { this.state = { collapsed: ycore.DevOptions.default_collapse_sider, isMobile: false, - resbypass: store.get('resbypass') || false, - RemByPass: false, userData: '' } } @@ -57,16 +53,7 @@ class PrimaryLayout extends React.Component { store.set('collapsed', !fromStore) } - ResByPassHandler = () => { - const {RemByPass} = this.state; - if (RemByPass == true){ - this.setState({resbypass: true}) - store.set('resbypass', true) - return - } - this.setState({resbypass: true}) - } - + isDarkMode = () => { const {app} = this.props const { theme } = app @@ -78,25 +65,10 @@ class PrimaryLayout extends React.Component { render() { const { app, location, dispatch, children } = this.props - const { theme, routeList } = app - const { userData, isMobile, resbypass } = this.state - const collapsed = (this.state.collapsed? true : false) - + const { userData, collapsed, isMobile } = this.state const { onCollapseChange } = this - // Localized route name. - const lang = langFromPath(location.pathname) - const newRouteList = - lang !== 'en' - ? routeList.map(item => { - const { name, ...other } = item - return { - ...other, - name: (item[lang] || {}).name || name, - } - }) - : routeList - - + const { theme } = app + const SiderProps = { theme, @@ -111,43 +83,23 @@ class PrimaryLayout extends React.Component { }) }, } - - const ContainerProps = { - theme, - userData, - collapsed, - } const SecondaryProps = { - userData - } - - const MobileWarning = () =>{ - if (resbypass == false) { - if (isMobile == true) { - return( -
-

This version of the application is not fully compatible with the resolution of this screen, a higher resolution is recommended for an optimal experience

Please choose an option to continue

}/> - - ) - } - } - return null + userData, + isMobile, + theme, } - return ( - - + + {isMobile? : null}
- +
- - + {children} @@ -156,8 +108,8 @@ class PrimaryLayout extends React.Component { - - + + ) }