added mobile warning

kholmogorov27 · Mar 8, 2023 · 089a65e · 089a65e
1 parent 7e41d8f
commit 089a65e
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "minisearch": "^6.0.1",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.3.5",
     "react-icons": "^4.7.1",

diff --git a/src/App.jsx b/src/App.jsx
@@ -9,9 +9,12 @@ import LayoutButton from './components/LayoutButton/LayoutButton'
 import { BsGearFill, BsChevronRight } from 'react-icons/bs'
 import { RiMenu5Fill } from 'react-icons/ri'
 import { allowedModes } from './rules'
-import styles from './App.module.css'
+import { isMobile } from 'react-device-detect'
+import classes from './App.module.css'
 import './App.css'
 
+const ignoreMobile = localStorage.getItem('ignoreMobile')
+
 function App() {
   // settings
   const settings = useContext(SettingsContext)
@@ -112,42 +115,57 @@ function App() {
 
   return (
     <div className='app'>
-      <AnimatePresence>
-        {
-          showSettings
-            ? <Settings key='settings' onClose={() => {
-              setShowSettings(false) 
-              resetStore()}}/>
-            : 
-            <motion.div 
-              key={timestamp}
-              onClick={() => inputRef.current && inputRef.current.focus()}
-              className={styles['container']} 
-              initial={{ opacity: 0 }} 
-              animate={{ opacity: 1 }} 
-              exit={redirected || { opacity: 0 }}>
-                <ActiveElements/>
-                <QueryField ref={inputRef}/>
-                <LayoutButton
-                  id='settings'
-                  style={{ right: 0, top: 0 }}
-                  onClick={() => setShowSettings(state => !state)}>
-                    <BsGearFill/>
-                </LayoutButton>
-                <LayoutButton
-                  id='macros-menu'
-                  style={{ right: 0, bottom: 0 }}
-                  onClick={switchMacrosMenu}>
-                    {
-                      mode === 'default' && <RiMenu5Fill/>
-                    }
-                    {
-                      mode === 'opened' && <BsChevronRight/>
-                    }
-                </LayoutButton>
-            </motion.div>
-        }
-      </AnimatePresence>
+      {
+        !isMobile || ignoreMobile
+          ? <AnimatePresence>
+              {
+                showSettings
+                  ? <Settings key='settings' onClose={() => {
+                    setShowSettings(false) 
+                    resetStore()}}/>
+                  : 
+                  <motion.div 
+                    key={timestamp}
+                    onClick={() => inputRef.current && inputRef.current.focus()}
+                    className={classes['container']} 
+                    initial={{ opacity: 0 }} 
+                    animate={{ opacity: 1 }} 
+                    exit={redirected || { opacity: 0 }}>
+                      <ActiveElements/>
+                      <QueryField ref={inputRef}/>
+                      <LayoutButton
+                        id='settings'
+                        style={{ right: 0, top: 0 }}
+                        onClick={() => setShowSettings(state => !state)}>
+                          <BsGearFill/>
+                      </LayoutButton>
+                      <LayoutButton
+                        id='macros-menu'
+                        style={{ right: 0, bottom: 0 }}
+                        onClick={switchMacrosMenu}>
+                          {
+                            mode === 'default' && <RiMenu5Fill/>
+                          }
+                          {
+                            mode === 'opened' && <BsChevronRight/>
+                          }
+                      </LayoutButton>
+                  </motion.div>
+              }
+            </AnimatePresence>
+          : <div className={classes['mobile-warning']}>
+              <div>
+                Mobile devices are not supported :( <br />
+                <span className={classes['ignore-mobile-button']}
+                onClick={() => {
+                  localStorage.setItem('ignoreMobile', true)
+                  location.reload()
+                }}>
+                  ignore this warning
+                </span>
+              </div>
+            </div>
+      }
     </div>
   )
 }

diff --git a/src/App.module.css b/src/App.module.css
@@ -5,4 +5,20 @@
   margin: 0;
   width: 100vw;
   height: 100vh;
+}
+
+.mobile-warning {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+.mobile-warning > div {
+  text-align: center;
+}
+.ignore-mobile-button {
+  text-decoration: underline;
+  cursor: pointer;
 }