Merge pull request #68 from AJ-Quran/66-app-for-phones

App for Phones
AJ-Quran · Apr 24, 2024 · 7a604e0 · 7a604e0
2 parents 071169d + f314373
commit 7a604e0
Show file tree

Hide file tree

Showing 17 changed files with 160 additions and 23 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
 import { localInitialData } from './js/utils/checkers'
 import { checkTheme } from './js/utils/theme'
+import { deviceIsPhone } from './js/utils/device'
 
 import './css/App.css'
 
@@ -29,6 +30,9 @@ export default function App() {
 }
 
 function checkApp() {
+  const isPhone = deviceIsPhone()
+  if (isPhone) document.body.classList.add('is_phone')
+
   localInitialData()
   checkTheme()
 }
diff --git a/src/components/Choose/Choose.jsx b/src/components/Choose/Choose.jsx
@@ -14,7 +14,14 @@ function getTop(element) {
   return rect.top - parentRect.top
 }
 
-export default function Choose({ axe, label, children, iOption }) {
+export default function Choose({
+  axe,
+  label,
+  children,
+  iOption,
+  optionsSize,
+  chooseConStyle,
+}) {
   const chooseArea = useRef(null)
   const [chosenStyle, setChosenStyle] = useState(() => ({
     width: '0',
@@ -78,7 +85,11 @@ export default function Choose({ axe, label, children, iOption }) {
     <div className={`choose_area list_y ${axe}`} label={label}>
       <div className="choose_con_area">
         <div className="chosen" style={chosenStyle} index={activeChildI}></div>
-        <div ref={chooseArea} className={`choose_con list_${axe}`}>
+        <div
+          ref={chooseArea}
+          className={`choose_con list_${axe}`}
+          style={chooseConStyle}
+        >
           {children.map((child, i) => {
             const childProps = child.props
 
@@ -96,6 +107,7 @@ export default function Choose({ axe, label, children, iOption }) {
                 key={i}
                 onClick={click}
                 index={i}
+                style={optionsSize}
               >
                 {child}
               </div>

diff --git a/src/css/utils/scroll.css b/src/css/utils/scroll.css
@@ -26,6 +26,17 @@
   border-radius: var(--bd-ra);
 }
 
+.is_phone {
+  .scroll_y::-webkit-scrollbar {
+    width: var(--scroll-size-phone);
+  }
+
+  .scroll_x::-webkit-scrollbar {
+    height: var(--scroll-size-phone);
+  }
+}
+
 :root {
   --scroll-size: 5px;
+  --scroll-size-phone: 2px;
 }
diff --git a/src/css/utils/text.css b/src/css/utils/text.css
@@ -42,3 +42,11 @@
   text-align: right;
   line-height: 2em;
 }
+
+.txt_wrap_b {
+  text-wrap: balance;
+}
+
+.txt_alg_ce {
+  text-align: center;
+}
diff --git a/src/js/utils/device.js b/src/js/utils/device.js
@@ -0,0 +1,5 @@
+export function deviceIsPhone() {
+  const mobileRegex =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
+  return mobileRegex.test(navigator.userAgent)
+}
diff --git a/src/pages/Main/Main.css b/src/pages/Main/Main.css
@@ -12,12 +12,32 @@
   padding-right: 0;
 }
 
+.is_phone {
+  .menu {
+    width: 100%;
+    height: var(--menu-size);
+    bottom: 0;
+  }
+}
+
 .main {
+  width: 100%;
   margin-left: var(--menu-size);
   padding: var(--pd-small);
   flex: 1;
 }
 
+.is_phone {
+  .main {
+    margin-left: 0;
+    margin-bottom: var(--menu-size);
+
+    &:has(.home_page) {
+      padding: 0;
+    }
+  }
+}
+
 .main_area:has(.two_blur_balls) .menu {
   z-index: 1;
 }
@@ -38,6 +58,16 @@
   width: 500px;
 }
 
+.is_phone {
+  .main_w {
+    width: 100%;
+  }
+
+  .main_w_small {
+    width: 100%;
+  }
+}
+
 .social_media > * {
   width: 40px;
   aspect-ratio: 1;

diff --git a/src/pages/Main/components/Home/Home.css b/src/pages/Main/components/Home/Home.css
@@ -96,6 +96,12 @@
   bottom: 80px;
 }
 
+.is_phone {
+  .mission_txt {
+    bottom: var(--pd-small);
+  }
+}
+
 .all_rights_txt {
   position: absolute;
   bottom: var(--pd-small);
@@ -104,6 +110,15 @@
   text-orientation: mixed;
 }
 
+.is_phone {
+  .all_rights_txt {
+    left: 50%;
+    transform: translateX(-50%);
+    text-wrap: nowrap;
+    writing-mode: inherit;
+  }
+}
+
 .scroll_btns {
   position: absolute;
   top: 50%;

diff --git a/src/pages/Main/components/Home/components/HomeAboutUs/HomeAboutUs.jsx b/src/pages/Main/components/Home/components/HomeAboutUs/HomeAboutUs.jsx
@@ -22,7 +22,7 @@ export default function HomeAboutUs() {
         <b className="main_big_text">
           <span className="txt_gradient">About us</span>
         </b>
-        <div className="txt_opa">We are the developers of AJ Quran 🧑‍💻📖</div>
+        <div className="txt_opa txt_wrap_b txt_alg_ce">We are the developers of AJ Quran 🧑‍💻📖</div>
       </div>
       <div className="list_y df_ai_ce">
         <div className="list_x facts about_us_area">
@@ -34,7 +34,7 @@ export default function HomeAboutUs() {
           {people?.map((p, i) => GetPerson(p, i))}
         </div>
       </div>
-      <div className="txt_opa fz_mono mission_txt">
+      <div className="txt_opa fz_mono txt_wrap_b txt_alg_ce mission_txt">
         Our mission is to enable access to the <b>Quran</b> for all, anytime,
         anywhere
       </div>

diff --git a/src/pages/Main/components/Home/components/HomeFacts/HomeFacts.jsx b/src/pages/Main/components/Home/components/HomeFacts/HomeFacts.jsx
@@ -1,17 +1,21 @@
+import { deviceIsPhone } from '../../../../../../js/utils/device'
+
 export default function HomeFacts() {
+  const isPhone = deviceIsPhone()
+
   return (
     <div className="h_100 list_y df_ai_ce df_jc_sb scroll_area home_page_item">
       <div className="list_y df_ai_ce two_blur_balls">
         <b className="main_big_text">
           <span className="txt_gradient">Facts</span>
         </b>
-        <div className="txt_opa">
+        <div className="txt_opa txt_wrap_b txt_alg_ce">
           Discover the secrets of the Quran ✨ - Start your enlightening
           journey! 📖
         </div>
       </div>
       <div className="list_y df_ai_ce">
-        <div className="list_x facts">
+        <div className={`list_${isPhone ? 'y' : 'x'} facts`}>
           <div className="con_bg_gradient">
             <div className="con_bg_dr facts_bg"></div>
             <div className="con_bg_dr facts_con df_jc_sb">

diff --git a/src/pages/Main/components/Home/components/HomeFeedback/HomeFeedback.jsx b/src/pages/Main/components/Home/components/HomeFeedback/HomeFeedback.jsx
@@ -110,7 +110,7 @@ export default function HomeFeedback() {
         <b className="main_big_text">
           <span className="txt_gradient">Feedback</span>
         </b>
-        <div className="txt_opa">
+        <div className="txt_opa txt_wrap_b txt_alg_ce">
           Dive into the Quran - Your insights are valued! 😊📖
         </div>
       </div>

diff --git a/src/pages/Main/components/Home/components/HomeSubcscribe/HomeSubcscribe.jsx b/src/pages/Main/components/Home/components/HomeSubcscribe/HomeSubcscribe.jsx
@@ -1,4 +1,8 @@
+import { deviceIsPhone } from '../../../../../../js/utils/device'
+
 export default function HomeSubcscribe({ scrollDotActiveI }) {
+  const isPhone = deviceIsPhone()
+
   function scrollUp(e) {
     const homePage = e.target.closest('.home_page')
 
@@ -12,10 +16,12 @@ export default function HomeSubcscribe({ scrollDotActiveI }) {
         <b className="main_big_text">
           <span className="txt_gradient">Subcscribe</span>
         </b>
-        <div className="txt_opa">Do not lose hope - Follow us for more! 😊</div>
+        <div className="txt_opa txt_wrap_b txt_alg_ce">
+          Do not lose hope - Follow us for more! 😊
+        </div>
       </div>
       <div className="list_y df_ai_ce">
-        <div className="list_x subscribe_area fz_big">
+        <div className={`list_${isPhone ? 'y' : 'x'} subscribe_area fz_big`}>
           <a
             href="https://github.com/AJ-Quran"
             rel="noreferrer"

diff --git a/src/pages/Main/components/Home/components/HomeWelcome/HomeWelcome.jsx b/src/pages/Main/components/Home/components/HomeWelcome/HomeWelcome.jsx
@@ -12,7 +12,7 @@ export default function HomeWelcome({ setSurahI }) {
         <b className="main_big_text">
           <span className="txt_gradient">AJ Quran</span>
         </b>
-        <div className="txt_opa">
+        <div className="txt_opa txt_wrap_b txt_alg_ce">
           The Quran - Explore and collaborate on the holy book of Islam. 📖✨
         </div>
       </div>

diff --git a/src/pages/Main/components/Menu/Menu.jsx b/src/pages/Main/components/Menu/Menu.jsx
@@ -4,10 +4,13 @@ import Button from '../../../../components/Button/Button'
 import Avatar from '../Account/components/utils/Avatar'
 import Choose from '../../../../components/Choose/Choose'
 
+import { deviceIsPhone } from '../../../../js/utils/device'
+
 import './Menu.css'
 
 export default function Menu({ setActievPage }) {
   const menu = useRef(null)
+  const isPhone = deviceIsPhone()
 
   function activeClick(btn) {
     const button = btn.target.querySelector('button')
@@ -16,9 +19,17 @@ export default function Menu({ setActievPage }) {
   }
 
   return (
-    <div className="menu_area list_x">
+    <div className={`menu_area list_${isPhone ? 'y' : 'x'}`}>
       <div className="menu_con list_y df_jc_ce" ref={menu}>
-        <Choose className="df_jc_sb" axe="y">
+        {isPhone && <div className="line_x"></div>}
+        <Choose
+          className="df_jc_sb"
+          axe={isPhone ? 'x' : 'y'}
+          {...(isPhone && {
+            optionsSize: { width: '50px', height: '50px' },
+            chooseConStyle: { justifyContent: 'space-between' },
+          })}
+        >
           <Button className="active" option="home" onClick={activeClick}>
             <span className="material-symbols-outlined">home</span>
           </Button>
@@ -32,17 +43,19 @@ export default function Menu({ setActievPage }) {
             <span className="material-symbols-outlined">settings</span>
           </Button>
         </Choose>
-        <div className="social_media df_f_ce">
-          <a
-            href="https://github.com/AJ-Quran"
-            rel="noreferrer"
-            className="con_bg_df con_ha df_f_ce"
-          >
-            <i className="fa-brands fa-github fz_big"></i>
-          </a>
-        </div>
+        {!isPhone && (
+          <div className="social_media df_f_ce">
+            <a
+              href="https://github.com/AJ-Quran"
+              rel="noreferrer"
+              className="con_bg_df con_ha df_f_ce"
+            >
+              <i className="fa-brands fa-github fz_big"></i>
+            </a>
+          </div>
+        )}
       </div>
-      <div className="line_y"></div>
+      {!isPhone && <div className="line_y"></div>}
     </div>
   )
 }
diff --git a/src/pages/Main/components/Quran/ReadArea/ReadArea.css b/src/pages/Main/components/Quran/ReadArea/ReadArea.css
@@ -24,4 +24,15 @@
 
 .read_con .loading_area {
   width: 400px;
-}
+}
+
+.is_phone {
+  .read_con,
+  .read_con .loading_area {
+    width: 100%;
+  }
+
+  .read_con {
+    padding: var(--pd-small);
+  }
+}
diff --git a/src/pages/Main/components/Quran/ReadArea/components/AyahsArea/AyahsArea.css b/src/pages/Main/components/Quran/ReadArea/components/AyahsArea/AyahsArea.css
@@ -2,6 +2,12 @@
   width: 400px;
 }
 
+.is_phone {
+  .ayahs_area_info {
+    width: 100%;
+  }
+}
+
 .ayahs_area_info > * {
   width: 100%;
 }

diff --git a/src/pages/Main/components/Quran/ReadArea/components/SurahName/SurahName.css b/src/pages/Main/components/Quran/ReadArea/components/SurahName/SurahName.css
@@ -3,6 +3,12 @@
   width: 400px;
 }
 
+.is_phone {
+  .surah_name {
+    width: 100%;
+  }
+}
+
 .surah_name button {
   position: absolute;
   top: var(--pd-small);

diff --git a/src/pages/Main/components/Quran/components/LastRead/LastRead.css b/src/pages/Main/components/Quran/components/LastRead/LastRead.css
@@ -6,6 +6,12 @@
   overflow: hidden;
 }
 
+.is_phone {
+  .last_read {
+    min-width: 100%;
+  }
+}
+
 .last_read:hover {
   & img {
     scale: 1.05;