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