Notch and overscroll support

HorusGoul · Sep 25, 2023 · fa0b3c7 · fa0b3c7
1 parent 3f8060b
commit fa0b3c7
Show file tree

Hide file tree

Showing 23 changed files with 260 additions and 56 deletions.
diff --git a/apps/pwa/src/components/App.scss b/apps/pwa/src/components/App.scss
@@ -4,6 +4,5 @@
   &,
   &__content {
     height: 100%;
-    min-height: 100%;
   }
 }
diff --git a/apps/pwa/src/components/App.tsx b/apps/pwa/src/components/App.tsx
@@ -32,12 +32,14 @@ import { ElementProvider } from "@/contexts/ElementContext";
 import { createPack } from "react-component-pack";
 import ConfirmProvider from "./shared/confirm";
 import { ServiceWorkerProvider } from "@/contexts/ServiceWorkerContext";
+import { SafeAreaInsetProvider } from "@/contexts/SafeAreaInsetContext";
 
 const ProviderPack = createPack(
   (HelmetProvider as unknown) as React.FunctionComponent<{
     children: React.ReactNode;
   }>,
   ServiceWorkerProvider,
+  SafeAreaInsetProvider,
   ElementProvider,
   ConfirmProvider
 );

diff --git a/apps/pwa/src/components/about/About.scss b/apps/pwa/src/components/about/About.scss
@@ -3,9 +3,12 @@
 @import "../../scss/helpers.scss";
 
 .about {
-  @extend %page;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
 
   @include themify($themes) {
+    background-color: themed("backgroundColor");
     color: themed("contentTextColor");
     fill: themed("contentTextColor");
   }
@@ -58,4 +61,14 @@
       color: transparentize(themed("contentTextColor"), 0.22);
     }
   }
+
+  &__content {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: env(safe-area-inset-bottom);
+
+    max-width: 1024px;
+    margin: 0 auto;
+    width: 100%;
+  }
 }
diff --git a/apps/pwa/src/components/about/About.tsx b/apps/pwa/src/components/about/About.tsx
@@ -25,38 +25,40 @@ function About() {
         onBackButtonClick={onNavbarBackButtonClick}
       />
 
-      <Card className="about__app-preferences">
-        <div className="about__subtitle">{i18n("app_settings")}</div>
+      <div className="about__content">
+        <Card className="about__app-preferences">
+          <div className="about__subtitle">{i18n("app_settings")}</div>
 
-        <div className="about__app-preferences__buttons">
-          <LocaleSelector />
-          <ThemeSelector />
-        </div>
-      </Card>
+          <div className="about__app-preferences__buttons">
+            <LocaleSelector />
+            <ThemeSelector />
+          </div>
+        </Card>
 
-      <Card className="about__about">
-        <div className="about__about__buttons">
-          <IconButton
-            link={i18n("contact_me_url")}
-            iconName="at"
-            text={i18n("contact_me")}
-          />
+        <Card className="about__about">
+          <div className="about__about__buttons">
+            <IconButton
+              link={i18n("contact_me_url")}
+              iconName="at"
+              text={i18n("contact_me")}
+            />
 
-          <IconButton
-            link="https://github.com/HorusGoul/atom-pwa"
-            iconName="source_branch"
-            text={i18n("source_code")}
-          />
+            <IconButton
+              link="https://github.com/HorusGoul/atom-pwa"
+              iconName="source_branch"
+              text={i18n("source_code")}
+            />
 
-          <IconButton
-            link={`mailto:${i18n("author_email")}`}
-            iconName="bug_report"
-            text={i18n("bug_report")}
-          />
-        </div>
-      </Card>
+            <IconButton
+              link={`mailto:${i18n("author_email")}`}
+              iconName="bug_report"
+              text={i18n("bug_report")}
+            />
+          </div>
+        </Card>
 
-      <div className="about__appVersion">{FULL_VERSION}</div>
+        <div className="about__appVersion">{FULL_VERSION}</div>
+      </div>
     </div>
   );
 }

diff --git a/apps/pwa/src/components/hub/Hub.module.scss b/apps/pwa/src/components/hub/Hub.module.scss
@@ -1,23 +1,46 @@
-@import "../../scss/common.scss";
 @import "../../scss/helpers.scss";
+@import "../../scss/common.scss";
 
 .hub {
   display: flex;
   align-items: center;
   flex-direction: column;
   background-color: var(--backgroundColor);
   color: var(--contentTextColor);
+  padding-bottom: env(safe-area-inset-bottom);
 }
 
 .header {
   display: flex;
   align-items: center;
   flex-direction: column;
   width: 100%;
+  padding-top: env(safe-area-inset-top);
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -300px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+  }
 }
 
-:global(.theme-light) .header {
-  background: linear-gradient(-130deg, #00897b 0%, #01665c 100%);
+:global(.theme-light) {
+  .hub {
+    @include overscroll-top($color: var(--primary));
+  }
+
+  .header::before {
+    background: linear-gradient(
+      -130deg,
+      var(--primary) 0%,
+      var(--primaryDarker) 100%
+    );
+  }
 }
 
 .content {
@@ -69,6 +92,7 @@
 }
 
 .logo {
+  z-index: 1;
   border-radius: 128px;
   padding: 8px;
   margin-right: auto;

diff --git a/apps/pwa/src/components/mass-calculator/MassCalculator.scss b/apps/pwa/src/components/mass-calculator/MassCalculator.scss
@@ -3,7 +3,8 @@
 @import "../../scss/helpers.scss";
 
 .mass-calculator {
-  @extend %page;
+  min-height: 100%;
+  background-color: var(--backgroundColor);
 
   @include themify($themes) {
     color: themed("contentTextColor");
@@ -13,6 +14,8 @@
     display: flex;
     align-items: center;
     padding: 16px;
+    padding-left: calc(16px + env(safe-area-inset-left));
+    padding-right: calc(16px + env(safe-area-inset-right));
     z-index: 2;
 
     @include box-shadow($level: 1);
@@ -170,6 +173,16 @@
       }
     }
   }
+
+  &__controls,
+  &__element-list {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
+
+  &__element-list {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }
 
 @keyframes element-enter {

diff --git a/apps/pwa/src/components/periodic-table-page/PeriodicTablePage.scss b/apps/pwa/src/components/periodic-table-page/PeriodicTablePage.scss
@@ -8,15 +8,14 @@
   height: 100%;
 
   &__navbar {
-    position: fixed;
     z-index: 1;
 
     @include box-shadow($level: 1);
   }
 
   &__table {
-    padding-top: 56px;
     flex: 1;
+    z-index: 1;
 
     @include themify($themes) {
       background-color: themed("cardBackgroundColor");

diff --git a/apps/pwa/src/components/periodic-table-page/PeriodicTablePage.tsx b/apps/pwa/src/components/periodic-table-page/PeriodicTablePage.tsx
@@ -11,13 +11,15 @@ import SwipeableModal from "@/components/shared/swipeable-modal/SwipeableModal";
 import ElementInfo from "./element-info/ElementInfo";
 import "./PeriodicTablePage.scss";
 import { useAddRecent } from "@/hooks/useRecent";
+import { usePreventDocumentOverscroll } from "@/hooks/usePreventDocumentOverscroll";
 
 function PeriodicTablePage() {
   const navigate = useNavigate();
   const { i18n } = useLocale();
   const { getElement } = useElements();
 
   useAddRecent("periodic-table");
+  usePreventDocumentOverscroll();
 
   const onNavbarBackButtonClick = () => {
     navigate(HUB);

diff --git a/apps/pwa/src/components/periodic-table-test/PeriodicTableTest.scss b/apps/pwa/src/components/periodic-table-test/PeriodicTableTest.scss
@@ -8,16 +8,21 @@
   height: 100%;
 
   &__navbar {
-    position: fixed;
     z-index: 1;
 
     @include box-shadow($level: 1);
   }
 
   &__result,
   &__table {
-    padding-top: 56px;
     flex: 1;
+    z-index: 1;
+  }
+
+  &__table {
+    @include themify($themes) {
+      background-color: themed("cardBackgroundColor");
+    }
   }
 
   &__result {
@@ -69,10 +74,11 @@
 
   &__current-question {
     position: fixed;
-    left: 24px;
-    bottom: 32px;
+    left: calc(24px + env(safe-area-inset-left, 0px));
+    bottom: calc(32px + env(safe-area-inset-bottom, 0px));
     height: 72px;
     width: 72px;
+    z-index: 10;
 
     display: flex;
     justify-content: center;

diff --git a/apps/pwa/src/components/periodic-table-test/PeriodicTableTest.tsx b/apps/pwa/src/components/periodic-table-test/PeriodicTableTest.tsx
@@ -17,6 +17,7 @@ import { usePeriodicTableTestSettings } from "./hooks/usePeriodicTableTestSettin
 import "./PeriodicTableTest.scss";
 import { useAddRecent } from "@/hooks/useRecent";
 import { useConfirm } from "@/components/shared/confirm";
+import { usePreventDocumentOverscroll } from "@/hooks/usePreventDocumentOverscroll";
 
 interface PeriodicTableTestQuestion {
   element: Element;
@@ -29,6 +30,7 @@ function PeriodicTableTest() {
   const { confirmAction } = useConfirm();
 
   useAddRecent("periodic-table-quiz");
+  usePreventDocumentOverscroll();
 
   const {
     settings,

diff --git a/apps/pwa/src/components/periodic-table-test/settings/PeriodicTableTestSettings.scss b/apps/pwa/src/components/periodic-table-test/settings/PeriodicTableTestSettings.scss
@@ -7,6 +7,9 @@
   height: 100%;
 
   &__content {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+
     @include themify($themes) {
       background-color: themed("cardBackgroundColor");
       color: themed("contentTextColor");

diff --git a/apps/pwa/src/components/periodic-table/PeriodicTable.scss b/apps/pwa/src/components/periodic-table/PeriodicTable.scss
@@ -8,6 +8,8 @@
   width: 100%;
   height: 100%;
 
+  padding-left: env(safe-area-inset-left);
+
   @include themify($themes) {
     color: themed("contentTextColor");
     background-color: themed("cardBackgroundColor");

diff --git a/apps/pwa/src/components/search-view/SearchView.module.scss b/apps/pwa/src/components/search-view/SearchView.module.scss
@@ -13,6 +13,11 @@
   overflow-y: auto;
   animation: slideIn 180ms ease-in forwards;
 
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+
   @media (prefers-reduced-motion) {
     animation: none;
   }

diff --git a/apps/pwa/src/components/shared/navbar/Navbar.scss b/apps/pwa/src/components/shared/navbar/Navbar.scss
@@ -8,7 +8,13 @@
   display: flex;
   align-items: center;
 
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+  padding-top: env(safe-area-inset-top);
+
   @include themify($themes) {
+    @include overscroll-top($color: themed("primary"));
+
     background-color: themed("primary");
     color: themed("textColorPrimary");
     fill: themed("textColorPrimary");

diff --git a/apps/pwa/src/components/test-selection/TestSelection.scss b/apps/pwa/src/components/test-selection/TestSelection.scss
@@ -3,7 +3,11 @@
 @import "../../scss/helpers.scss";
 
 .test-selection {
-  @extend %page;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 100%;
+  background-color: var(--backgroundColor);
 
   @include themify($themes) {
     color: themed("contentTextColor");
@@ -12,4 +16,13 @@
   &__navbar {
     @include box-shadow($level: 1);
   }
+
+  &__entries {
+    max-width: 1024px;
+    margin: 0 auto;
+
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
 }
diff --git a/apps/pwa/src/components/valences-test/ValencesTest.scss b/apps/pwa/src/components/valences-test/ValencesTest.scss
@@ -2,7 +2,9 @@
 @import "../../scss/theming.scss";
 
 .valences-test {
-  @extend %page;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 
   @include themify($themes) {
     background-color: themed("primary");

diff --git a/apps/pwa/src/components/valences-test/ValencesTest.tsx b/apps/pwa/src/components/valences-test/ValencesTest.tsx
@@ -16,6 +16,7 @@ import { useValencesTestSettings } from "./hooks/useValencesTestSettings";
 import "./ValencesTest.scss";
 import { useAddRecent } from "@/hooks/useRecent";
 import { useConfirm } from "@/components/shared/confirm";
+import { usePreventDocumentOverscroll } from "@/hooks/usePreventDocumentOverscroll";
 
 interface ValencesTestQuestion extends Question {
   data: Element;
@@ -57,6 +58,7 @@ function ValencesTest() {
   const { confirmAction } = useConfirm();
 
   useAddRecent("valency-quiz");
+  usePreventDocumentOverscroll();
 
   function createTestQuestions(settings: ElementsSettings) {
     if (!settings.elements) {