From 770ef1de30adfa1b40457dcd76e75afe428cc82c Mon Sep 17 00:00:00 2001
From: morethanwords <thanwords24@gmail.com>
Date: Sat, 10 Oct 2020 23:04:58 +0300
Subject: [PATCH] Fix layout for iOS Safari on auth pages

---
 src/index.hbs                          | 148 +++++++++++++------------
 src/pages/pagePassword.ts              |  12 +-
 src/scss/partials/pages/_pages.scss    |  39 +++++--
 src/scss/partials/pages/_password.scss |   5 +
 4 files changed, 121 insertions(+), 83 deletions(-)

diff --git a/src/index.hbs b/src/index.hbs
index bde84ff1..c4a00ba9 100644
--- a/src/index.hbs
+++ b/src/index.hbs
@@ -29,93 +29,103 @@
   
   <div class="whole" id="auth-pages" style="display: none;">
     <div class="tabs-container auth-pages__container" data-slider="tabs">
-      <div class="page-sign scrollable scrollable-y">
+      <div class="page-sign">
         <div class="container center-align">
-          <div class="auth-image">
-            <svg class="sign-logo" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
-              <use href="#logo" />
-            </svg>
-          </div>
-          <h4>Sign in to Telegram</h4>
-          <p class="subtitle">Please confirm your country and<br> enter your phone number.</p>
-          <div class="input-wrapper">
-            <div class="input-field input-select">
-              <input type="text" name="countryCode" id="countryCode" autocomplete="rrRandomRR" required />
-              <label for="countryCode">Country</label>
-              <span class="arrow arrow-down"></span>
-            </div>
-            <div class="input-field">
-              <input type="tel" name="phone" id="phone" autocomplete="rr55RandomRR55" required />
-              <label for="phone">Phone Number</label>
-            </div>
-            <label class="checkbox-field">
-              <input type="checkbox" id="keepSigned" checked="checked">
-              <span>Keep me signed in</span>
-            </label>
-            <button class="btn-primary rp" style="visibility: hidden;">NEXT</button>
-            <div class="qr"><a href="#" class="a-qr">Quick log in using QR code</a></div>
+          <div class="scrollable scrollable-y">
+            <div class="auth-image">
+              <svg class="sign-logo" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
+                <use href="#logo" />
+              </svg>
+            </div>
+            <h4>Sign in to Telegram</h4>
+            <p class="subtitle">Please confirm your country and<br> enter your phone number.</p>
+            <div class="input-wrapper">
+              <div class="input-field input-select">
+                <input type="text" name="countryCode" id="countryCode" autocomplete="rrRandomRR" required />
+                <label for="countryCode">Country</label>
+                <span class="arrow arrow-down"></span>
+              </div>
+              <div class="input-field">
+                <input type="tel" name="phone" id="phone" autocomplete="rr55RandomRR55" required />
+                <label for="phone">Phone Number</label>
+              </div>
+              <label class="checkbox-field">
+                <input type="checkbox" id="keepSigned" checked="checked">
+                <span>Keep me signed in</span>
+              </label>
+              <button class="btn-primary rp" style="visibility: hidden;">NEXT</button>
+              <div class="qr"><a href="#" class="a-qr">Quick log in using QR code</a></div>
+            </div>
           </div>
         </div>
       </div>
-      <div class="page-signQR scrollable scrollable-y">
+      <div class="page-signQR">
         <div class="container center-align">
-          <div class="auth-image">
-            <canvas id="qr-code"></canvas>
+          <div class="scrollable scrollable-y">
+            <div class="auth-image">
+              <canvas id="qr-code"></canvas>
+            </div>
+            <h4>Scan from mobile Telegram</h4>
+            <p class="qr-description">1. Open Telegram on your phone<br>2. Go to settings > Devices > Scan QR<br>3. Scan this image to Log in</p>
+            <div class="qr"><a href="#" class="a-qr">Or log in using your phone number</a></div>
           </div>
-          <h4>Scan from mobile Telegram</h4>
-          <p class="qr-description">1. Open Telegram on your phone<br>2. Go to settings > Devices > Scan QR<br>3. Scan this image to Log in</p>
-          <div class="qr"><a href="#" class="a-qr">Or log in using your phone number</a></div>
         </div>
       </div>
-      <div class="page-authCode scrollable scrollable-y">
+      <div class="page-authCode">
         <div class="container center-align">
-          <div class="auth-image"></div>
-          <div class="phone-wrapper">
-            <h4 class="phone"></h4>
-            <span class="phone-edit tgico-edit"></span>
-          </div>
-          <p class="subtitle sent-type"></p>
-          <div class="input-wrapper">
-            <div class="input-field">
-              <input type="tel" name="code" id="code" autocomplete="off" required />
-              <label for="code">Code</label>
+          <div class="scrollable scrollable-y">
+            <div class="auth-image"></div>
+            <div class="phone-wrapper">
+              <h4 class="phone"></h4>
+              <span class="phone-edit tgico-edit"></span>
+            </div>
+            <p class="subtitle sent-type"></p>
+            <div class="input-wrapper">
+              <div class="input-field">
+                <input type="tel" name="code" id="code" autocomplete="off" required />
+                <label for="code">Code</label>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="page-password scrollable scrollable-y">
+      <div class="page-password">
         <div class="container center-align">
-          <div class="auth-image"></div>
-          <h4 class="phone">Enter a password</h4>
-          <p class="subtitle">Your account is protected with<br>an additional password</p>
-          <div class="input-wrapper">
-            <div class="input-field">
-              <input type="password" name="password" id="password" autocomplete="off" required />
-              <label for="password">Password</label>
-              <span class="toggle-visible tgico-eye1"></span>
-            </div>
-            <button class="btn-primary rp">NEXT</button>
+          <div class="scrollable scrollable-y">
+            <div class="auth-image"></div>
+            <h4 class="phone">Enter a password</h4>
+            <p class="subtitle">Your account is protected with<br>an additional password</p>
+            <div class="input-wrapper">
+              <div class="input-field">
+                <input type="password" name="password" id="password" autocomplete="off" required />
+                <label for="password">Password</label>
+                <span class="toggle-visible tgico-eye1"></span>
+              </div>
+              <button class="btn-primary rp">NEXT</button>
+            </div>
           </div>
         </div>
       </div>
-      <div class="page-signUp scrollable scrollable-y">
+      <div class="page-signUp">
         <div class="container center-align">
-          <div class="auth-image avatar-edit">
-            <canvas class="avatar-edit-canvas" id="canvas-avatar"></canvas>
-            <span class="tgico tgico-cameraadd"></span>
-          </div>
-          <h4 class="fullName">Your Name</h4>
-          <p class="subtitle">Enter your name and add<br>a profile picture</p>
-          <div class="input-wrapper">
-            <div class="input-field">
-              <input type="text" name="name" id="name" autocomplete="off" required />
-              <label for="name">Name</label>
-            </div>
-            <div class="input-field">
-              <input type="text" name="lastName" id="lastName" autocomplete="off" required />
-              <label for="lastName">Last Name (optional)</label>
-            </div>
-            <button class="btn-primary rp" id="signUp">START MESSAGING</button>
+          <div class="scrollable scrollable-y">
+            <div class="auth-image avatar-edit">
+              <canvas class="avatar-edit-canvas" id="canvas-avatar"></canvas>
+              <span class="tgico tgico-cameraadd"></span>
+            </div>
+            <h4 class="fullName">Your Name</h4>
+            <p class="subtitle">Enter your name and add<br>a profile picture</p>
+            <div class="input-wrapper">
+              <div class="input-field">
+                <input type="text" name="name" id="name" autocomplete="off" required />
+                <label for="name">Name</label>
+              </div>
+              <div class="input-field">
+                <input type="text" name="lastName" id="lastName" autocomplete="off" required />
+                <label for="lastName">Last Name (optional)</label>
+              </div>
+              <button class="btn-primary rp" id="signUp">START MESSAGING</button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/pages/pagePassword.ts b/src/pages/pagePassword.ts
index f302bb83..20b744b4 100644
--- a/src/pages/pagePassword.ts
+++ b/src/pages/pagePassword.ts
@@ -1,16 +1,16 @@
-import pageIm from './pageIm';
 //import CryptoWorker from '../lib/crypto/cryptoworker';
 //import apiManager from '../lib/mtproto/apiManager';
 import { putPreloader } from '../components/misc';
-
+import mediaSizes from '../helpers/mediaSizes';
+import { AccountPassword } from '../layer';
 import LottieLoader, { RLottiePlayer } from '../lib/lottieLoader';
 //import passwordManager from '../lib/mtproto/passwordManager';
 import apiManager from '../lib/mtproto/mtprotoworker';
-import Page from './page';
 import passwordManager from '../lib/mtproto/passwordManager';
 import { cancelEvent } from '../lib/utils';
-import { AccountPassword } from '../layer';
-import mediaSizes from '../helpers/mediaSizes';
+import Page from './page';
+import pageIm from './pageIm';
+
 
 let passwordInput: HTMLInputElement;
 
@@ -82,7 +82,7 @@ let onFirstMount = (): Promise<any> => {
     this.textContent = 'PLEASE WAIT...';
     putPreloader(this);
 
-    passwordManager.check(value, state).then((response: any) => {
+    passwordManager.check(value, state).then((response) => {
       //console.log('passwordManager response:', response);
         
       switch(response._) {
diff --git a/src/scss/partials/pages/_pages.scss b/src/scss/partials/pages/_pages.scss
index 3e8ce51e..3dab3816 100644
--- a/src/scss/partials/pages/_pages.scss
+++ b/src/scss/partials/pages/_pages.scss
@@ -10,6 +10,7 @@
 
   .subtitle {
     margin: 0;
+
     @include respond-to(handhelds) {
       font-size: 14px;
     }
@@ -25,6 +26,10 @@
     }
   }
 
+  .auth-image, .subtitle, .input-wrapper {
+    flex: 0 0 auto;
+  }
+
   .tabs-container {
     height: 100%;
     width: 100%;
@@ -35,14 +40,6 @@
         flex-direction: row;
       } */
 
-      &:before, &:after {
-        content: " ";
-        flex: 1;
-        min-height: 3rem;
-        /* height: 105px; */
-        width: 100%;
-      }
-
       > div {
         height: 810px;
         padding: 0;
@@ -51,6 +48,19 @@
         flex-direction: column;
       }
     }
+
+    .container > .scrollable {
+      display: flex;
+      flex-direction: column;
+
+      &:before, &:after {
+        content: " ";
+        flex: 1;
+        min-height: 3rem;
+        /* height: 105px; */
+        width: 100%;
+      }
+    }
   }
 
   // @media (max-height: 858px) {
@@ -88,6 +98,12 @@
   }
 }
 
+.page-authCode {
+  .phone-wrapper {
+    flex: 0 0 auto;
+  }
+}
+
 .sign-logo {
   max-width: 100%;
   max-height: 100%;
@@ -114,6 +130,10 @@
       height: 166px;
     }
   }
+
+  h4, .qr-description, .qr {
+    flex: 0 0 auto;
+  }
 }
 
 /* .page-signQR {
@@ -141,7 +161,10 @@
     @include respond-to(handhelds) {
       margin-bottom: 24px;
     }
+  }
 
+  .fullName  {
+    flex: 0 0 auto;
   }
 
   #signUp {
diff --git a/src/scss/partials/pages/_password.scss b/src/scss/partials/pages/_password.scss
index 4ce003d4..7a76fb08 100644
--- a/src/scss/partials/pages/_password.scss
+++ b/src/scss/partials/pages/_password.scss
@@ -5,6 +5,11 @@
     &[type="password"] {
       font-size: 2.25rem;
       padding-left: 10px;
+
+      html.is-ios & {
+        font-size: .75rem;
+        letter-spacing: .125rem;
+      }
     }
   }