Merge pull request #64 from ducktordanny/fix/safe-area-view-support

Fix: Support safe area view on rotated screen
ducktordanny · Sep 3, 2022 · b66c359 · b66c359
2 parents ca9b9f6 + d171b8a
commit b66c359
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 17 deletions.
diff --git a/apps/frontend/src/app/components/layout/layout.style.scss b/apps/frontend/src/app/components/layout/layout.style.scss
@@ -10,6 +10,8 @@
  right: 0;
 
  mat-toolbar {
+ padding-left: calc(env(safe-area-inset-left) + 16px);
+ padding-right: calc(env(safe-area-inset-right) + 16px);
  z-index: 9;
 
  .logo {
@@ -25,12 +27,17 @@
  mat-sidenav-container {
  flex: 1;
 
+ mat-nav-list a {
+ padding-left: env(safe-area-inset-left);
+ }
+
  .selected-nav-list-element {
  color: $primary-variant;
  background-color: $shade;
  }
 
  .main-content {
+ padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
  box-sizing: border-box;
  }

diff --git a/apps/frontend/src/app/pages/api-docs/api-docs.style.scss b/apps/frontend/src/app/pages/api-docs/api-docs.style.scss
@@ -1,3 +1,3 @@
 .wrapper {
- padding: 16px;
+ padding: 16px env(safe-area-inset-right) 16px 16px;
 }
diff --git a/apps/frontend/src/app/pages/assignment-problem/assignment-problem.style.scss b/apps/frontend/src/app/pages/assignment-problem/assignment-problem.style.scss
@@ -1,7 +1,7 @@
 @import '../../styles/variables/colors';
 
 form {
- padding: 8px;
+ padding: 16px env(safe-area-inset-right) 16px 16px;
 
  mat-hint {
  display: block;
@@ -20,7 +20,7 @@ form {
 }
 
 button[type='submit'] {
- margin: 8px 8px 0 0;
+ margin: 8px 16px 0 0;
 }
 
 .wrapper {

diff --git a/apps/frontend/src/app/pages/home/home.style.scss b/apps/frontend/src/app/pages/home/home.style.scss
@@ -88,7 +88,7 @@ main {
  }
 }
 
-footer {
+.footer-content {
  background-color: $background-accent;
  margin: 0 8px 8px;
  padding: 24px 0;

diff --git a/apps/frontend/src/app/pages/home/home.template.html b/apps/frontend/src/app/pages/home/home.template.html
@@ -1,4 +1,4 @@
-<header>
+<header class="safe-area-horizontally">
  <img
  src="../../../assets/animated-vectors/home.background.svg"
  alt="Background"
@@ -20,7 +20,7 @@ <h1>{{'HOME.HEADER_TITLE' | translate}}</h1>
  </mat-card>
 </header>
 
-<main #descriptions>
+<main #descriptions class="safe-area-horizontally">
  <h1>{{'HOME.SUGGESTION' | translate}}</h1>
 
  <h2>{{'HOME.HELPERS_LIST.TRANSPORTATION_PR.TITLE' | translate}}</h2>
@@ -96,12 +96,15 @@ <h3>{{'HOME.FEATURE_LIST.THEMES' | translate}}</h3>
  </info-card>
 </main>
 
-<footer class="mat-elevation-z4">
- <p>
- Copyright © 2022 Daniel Lazar.
- <a target="_blank" href="https://github.com/ducktordanny/opres">Github</a>
- </p>
- <p>
- Free SVG Background by <a target="_blank" href="https://bgjar.com">BGJar</a>
- </p>
+<footer class="safe-area-horizontally">
+ <div class="mat-elevation-z4 footer-content">
+ <p>
+ Copyright © 2022 Daniel Lazar.
+ <a target="_blank" href="https://github.com/ducktordanny/opres">Github</a>
+ </p>
+ <p>
+ Free SVG Background by
+ <a target="_blank" href="https://bgjar.com">BGJar</a>
+ </p>
+ </div>
 </footer>
diff --git a/apps/frontend/src/app/pages/transport-problem/transport-problem.page.ts b/apps/frontend/src/app/pages/transport-problem/transport-problem.page.ts
@@ -14,7 +14,7 @@ export interface Tab {
  styles: [
  `
  .tab-content-wrapper {
- padding: 8px;
+ padding: 8px calc(env(safe-area-inset-right) + 8px) 8px 8px;
  }
  `,
  ],

diff --git a/apps/frontend/src/app/pages/transport-problem/transport-problem.template.html b/apps/frontend/src/app/pages/transport-problem/transport-problem.template.html
@@ -1,4 +1,4 @@
-<nav mat-tab-nav-bar mat-stretch-tabs>
+<nav mat-tab-nav-bar mat-stretch-tabs class="safe-area-right">
  <a
  mat-tab-link
  routerLinkActive

diff --git a/apps/frontend/src/index.html b/apps/frontend/src/index.html
@@ -4,7 +4,10 @@
  <meta charset="utf-8" />
  <title>Opres</title>
  <base href="/" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1, viewport-fit=cover"
+ />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link

diff --git a/apps/frontend/src/styles.scss b/apps/frontend/src/styles.scss
@@ -89,3 +89,12 @@ a {
 * {
  -webkit-tap-highlight-color: transparent;
 }
+
+.safe-area-horizontally {
+ padding-right: env(safe-area-inset-right);
+ padding-left: env(safe-area-inset-left);
+}
+
+.safe-area-right {
+ padding-right: env(safe-area-inset-right);
+}