MobileWarning improved

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",

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(
+                 <div className={styles.mobilewarning}>
+                    <antd.Result status="warning" title="Low resolution warning" 
+                     extra={
+                          <div style={{ color: "white" }}>
+                              <h3 style={{ color: "white" }}>This version of the application is not fully compatible with the resolution of this screen, a higher resolution is recommended for an optimal experience</h3>
+                              <span>Please choose an option to continue</span>
+                              <br /><br /><antd.Button type="dashed" onClick={() => this.ResByPassHandler()}>Continue</antd.Button>
+                        </div> 
+                    }/>
+                 </div>
+               )
+        
+         }
+         return null
+    }
+
+}

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;
+      }
+    }
+  }

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'
@@ -28,6 +29,7 @@ import PostCreator from './PostCreator'
 export 
 { 
     UserBadges,
+    MobileWarning, 
     PageTransition, 
     SearchCard, 
     HeaderSearch, 

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,15 +53,6 @@ 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
@@ -78,24 +65,9 @@ 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 = {
@@ -112,42 +84,22 @@ class PrimaryLayout extends React.Component {
       },
     }
 
-    const ContainerProps = {
-      theme,
-      userData,
-      collapsed,
-    }
-
     const SecondaryProps = {
-      userData
+      userData,
+      isMobile,
+      theme,
     }
 
-    const MobileWarning = () =>{
-      if (resbypass == false) {
-         if (isMobile == true) {
-            return(
-              <div className={styles.mobilewarning}>
-                 <Result status="warning" title="Low resolution warning" 
-                  extra={ <div style={{ color: "white" }}><h3 style={{ color: "white" }}>This version of the application is not fully compatible with the resolution of this screen, a higher resolution is recommended for an optimal experience</h3><span>Please choose an option to continue</span><br /><br /><Button type="dashed" onClick={this.ResByPassHandler}>Continue</Button></div> }/>
-              </div>
-            )
-         }
-      }
-      return null
-    }
-
- 
       return (
-        <Fragment>
-          <MobileWarning />
+        <React.Fragment>
+          {isMobile?  <MobileWarning /> : null}
           <div className={styles.BarControlWrapper}><Control /></div>
-          <Layout className={classnames( styles.layout, {[styles.md_dark]: this.isDarkMode() })}>
+          <antd.Layout className={classnames( styles.layout, {[styles.md_dark]: this.isDarkMode() })}>
            <Sider {...SiderProps}/>
 
             <div id="primaryLayout" className={styles.leftContainer}>
                 <PageTransition preset="moveToRightScaleUp" id="scroller" transitionKey={location.pathname}>
-                   
-                    <Content {...ContainerProps} className={classnames(styles.content, {[styles.collapsed]: !collapsed} )}>
+                    <Content className={classnames(styles.content, {[styles.collapsed]: !collapsed} )}>
                         <HeaderSearch />
                         {children}
                     </Content>
@@ -156,8 +108,8 @@ class PrimaryLayout extends React.Component {
 
             <Secondary {...SecondaryProps} />
           
-          </Layout>
-        </Fragment>
+          </antd.Layout>
+        </React.Fragment>
       )
     
   }