Feature/-iPhone X/Xs/X-Max/XR support (#96)

* Added media queries for landscape

* Fixed iphone X pages

* Cleaned styles

* More cleanup

Author: ErnestoR

src/components/HashProtectedModal.vue

@@ -1,6 +1,6 @@
 <template>
   <modal>
-    <div class="content">
+    <div>
       <h1 class="hash-protected">
         <img class="hash-protected-img" src="../images/Icon-Hash-Protected.svg" alt="Hash protected"/>
         <span>Hash Protected</span>
@@ -27,10 +27,6 @@ export default {
 </script>
 
 <style scoped>
-.content {
-  padding: 5vh 20px;
-}
-
 p {
   color: var(--beep-light-dark);
   font-size: 14px;

src/components/HowDoesItWorkModal.vue

@@ -1,6 +1,6 @@
 <template>
   <modal>
-    <div class="content">
+    <div>
       <p>
         Every day, over 4 million online data records are stolen or lost.
         Beep tells you if your online accounts have been stolen in any of these data breaches.
@@ -49,10 +49,6 @@ export default {
 </script>
 
 <style scoped>
-.content {
-  padding: 5vh 20px;
-}
-
 .bee {
   width: 100%;
 }

src/components/Modal.vue

@@ -15,10 +15,10 @@
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
-    <ion-content
-      class="content"
-      padding>
-      <slot/>
+    <ion-content padding>
+      <div class="modal-content">
+        <slot/>
+      </div>
     </ion-content>
   </div>
 </template>
@@ -38,6 +38,19 @@ export default {
 </script>
 
 <style scoped>
+.modal-content {
+  padding: 5vh 20px;
+}
+
+/* iPhone X, Xs, X-MAX, XR */
+@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape),
+  only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
+  .modal-content {
+    padding-right: env(safe-area-inset-right);
+    padding-left: env(safe-area-inset-left);
+  }
+}
+
 ion-toolbar {
   --ion-color-base: var(--beep-light);
 }

src/components/WhatShouldYouDoModal.vue

@@ -1,6 +1,6 @@
 <template>
   <modal>
-    <div class="content">
+    <div>
       <h1>What Should You Do?</h1>
       <p>
         We recommend changing your password on any sites where you used the password you entered.
@@ -36,10 +36,6 @@ export default {
 </script>
 
 <style scoped>
-.content {
-  padding: 5vh 20px;
-}
-
 p,
 ul {
   color: var(--beep-light-dark);

src/theme/common.css

@@ -11,11 +11,11 @@
   --ion-padding: 0;
 }
 
-:root[mode=md] {
+:root[mode='md'] {
   --ion-font-family: Arial, sans-serif;
 }
 
-:root[mode=ios] {
+:root[mode='ios'] {
   --ion-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', sans-serif;
 }
 
@@ -46,7 +46,7 @@ input:invalid {
 }
 
 #lottie {
-  position:relative;
+  position: relative;
   width: 100%;
   height: 300px;
 }
@@ -60,13 +60,16 @@ div[style].cloned-input {
   width: 1.25rem;
 }
 
-body, html {
+body,
+html {
   height: 100vh;
 }
 
-/* Iphone X */
-@media screen and (min-height : 800px) and (max-height : 820px) {
-  html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
-    --ion-statusbar-padding: 30px;
+/* Iphone X, Xs, X-MAX, XR */
+@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3),
+  only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-min-device-pixel-ratio: 3) {
+  html.plt-ios.plt-hybrid,
+  html.plt-ios.plt-pwa {
+    --ion-statusbar-padding: env(safe-area-inset-top);
   }
 }

src/views/Breach.vue

@@ -7,9 +7,7 @@
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
-    <ion-content
-      padding
-      class="content">
+    <ion-content padding>
       <ion-list>
         <ion-item>
           <ion-avatar slot="start">
@@ -202,4 +200,16 @@ h2 {
 .info-date {
   color: var(--beep-light-dark);
 }
+
+/* iPhone X, Xs, X-MAX and XR*/
+@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape),
+  only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
+  ion-list {
+    padding-right: env(safe-area-inset-right);
+    padding-left: env(safe-area-inset-left);
+  }
+  .information-content {
+    padding: 20px env(safe-area-inset-right) 20px env(safe-area-inset-left);
+  }
+}
 </style>

src/views/Breaches.vue

@@ -12,9 +12,7 @@
         type="email"
         @ionChange="filterChanged"/>
     </ion-header>
-    <ion-content
-      padding
-      class="content">
+    <ion-content padding>
       <div class="counter">{{ breaches.length }} results found</div>
       <ion-list>
         <breach-item
@@ -112,4 +110,17 @@ ion-back-button {
   line-height: 17px;
   padding: 7px 10px;
 }
+
+/* iPhone X, Xs, X-MAX and XR*/
+@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape),
+  only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
+  ion-list,
+  ion-searchbar {
+    padding-right: env(safe-area-inset-right);
+    padding-left: env(safe-area-inset-left);
+  }
+  .counter {
+    padding: 7px env(safe-area-inset-right) 7px env(safe-area-inset-left);
+  }
+}
 </style>