Fixed some issues with mobile styling, particularly homepage. (#7205)

Homepage was stretching beyond edge of screen on mobile devices. Fixed this so that main contents scroll, while header and social footer are fixed. Editor Projects Page now scrolls on mobile as well. Made Other Audio Settings selector be the row the button is in rather than just the arrow. Co-authored-by: Hanzla Mateen <hanzlamateen@live.com>
EtherealEngine · Nov 11, 2022 · 73b7d23 · 73b7d23
1 parent 4322560
commit 73b7d23
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 17 deletions.
diff --git a/packages/client-core/src/systems/ui/SettingDetailView/index.tsx b/packages/client-core/src/systems/ui/SettingDetailView/index.tsx
@@ -169,9 +169,9 @@ const SettingDetailView = () => {
                 }}
               />
             </div>
-            <div className="sectionRow justifySpaceBetween">
+            <div className="sectionRow justifySpaceBetween" onClick={toggleShowOtherAudioSettings}>
               <h4 className="title">{t('user:usermenu.setting.other-audio-setting')}</h4>
-              <div xr-layer="true" className="showHideButton" onClick={toggleShowOtherAudioSettings}>
+              <div xr-layer="true" className="showHideButton">
                 {showAudioDetails ? 'hide details' : 'show details'}
               </div>
             </div>

diff --git a/packages/client-core/src/user/components/UserMenu/index.module.scss b/packages/client-core/src/user/components/UserMenu/index.module.scss
@@ -521,6 +521,8 @@
   max-height: calc(100vh - 150px);
   touch-action: auto;
   overflow-y: auto;
+  max-width: 95%;
+  margin: auto;
 
   * {
     touch-action: auto;

diff --git a/packages/client-core/src/user/components/UserMenu/menus/SettingMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/SettingMenu.tsx
@@ -474,16 +474,14 @@ const SettingMenu = ({ changeActiveMenu, isPopover }: Props): JSX.Element => {
                 />
               </div>
               <section className={styles.settingSection}>
-                <div className={styles.row}>
+                <div
+                  className={styles.row}
+                  onClick={() => setOpenOtherAudioSettings(!openOtherAudioSettings)}
+                  onPointerUp={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
+                  onPointerEnter={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
+                >
                   <div className={styles.settingHeader}>{t('user:usermenu.setting.other-audio-setting')}</div>
-                  <IconButton
-                    className={styles.collapseBtn}
-                    aria-label="expand"
-                    size="small"
-                    onClick={() => setOpenOtherAudioSettings(!openOtherAudioSettings)}
-                    onPointerUp={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
-                    onPointerEnter={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
-                  >
+                  <IconButton className={styles.collapseBtn} aria-label="expand" size="small">
                     {openOtherAudioSettings ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
                   </IconButton>
                 </div>

diff --git a/packages/client/src/pages/index.tsx b/packages/client/src/pages/index.tsx
@@ -83,7 +83,6 @@ export const HomePage = (): any => {
                     top: 0px;
                     left: 0px;
                     width: 100%;
-                    min-width: 420px;
                     transform: none;
                     pointer-events: auto;
                 }

diff --git a/packages/client/src/pages/room.tsx b/packages/client/src/pages/room.tsx
@@ -46,7 +46,6 @@ export const RoomPage = (): any => {
                     top: 0px;
                     left: 0px;
                     width: 100%;
-                    min-width: 420px;
                     transform: none;
                     pointer-events: auto;
                 }

diff --git a/packages/client/src/pages/styles.scss b/packages/client/src/pages/styles.scss
@@ -283,11 +283,12 @@ body {
 }
 
 .lander {
-  min-height: 100vh;
-  background-image: linear-gradient(150deg, #00022e, #dbdbdb 100%);
+  height: 100%;
   background-image: linear-gradient(150deg, #00022e, #ff007d4a);
   position: relative;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
   * {
     font-family: Inter;
@@ -427,11 +428,11 @@ body {
   .main-section {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
     padding: 5px;
     max-width: 1024px;
     margin: auto;
+    width: 100%;
+    overflow-y: auto;
 
     .desc {
       font-size: 30px;
@@ -471,3 +472,16 @@ vite-error-overlay {
 .prompt-box-8w {
   pointer-events: auto;
 }
+
+
+#root {
+  height: 100%;
+
+  .fullscreen {
+    height: 100%;
+  }
+
+  #engine-container {
+    height: 100%;
+  }
+}
diff --git a/packages/editor/src/components/projects/ProjectsPage.tsx b/packages/editor/src/components/projects/ProjectsPage.tsx
@@ -420,6 +420,10 @@ const ProjectsPage = () => {
         #menu-tagData {
           z-index: 1500;
         }
+        #engine-container {
+          display: flex;
+          flex-direction: column;
+        }
         `}
       </style>
       <div className={styles.projectPageContainer}>

diff --git a/packages/editor/src/components/projects/styles.module.scss b/packages/editor/src/components/projects/styles.module.scss
@@ -54,6 +54,7 @@
   display: flex;
   background-color: var(--mainBackground);
   pointer-events: auto;
+  max-height: 100%;
 }
 
 .projectPageContainer {
@@ -67,6 +68,7 @@
   border-radius: 10px;
   min-height: calc(100vh - 110px);
   max-width: 1280px;
+  overflow-y: auto;
 
   .projectGridContainer {
     display: flex;