r4sas
/
tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fix layout for iOS Safari on auth pages

master
morethanwords 4 years ago
parent
6d8193671a
commit
770ef1de30
4 changed files with 121 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 148
      src/index.hbs
  2. 12
      src/pages/pagePassword.ts
  3. 39
      src/scss/partials/pages/_pages.scss
  4. 5
      src/scss/partials/pages/_password.scss

148
src/index.hbs
Unescape View File

@ -29,93 +29,103 @@ @@ -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>

12
src/pages/pagePassword.ts
Unescape View File

@ -1,16 +1,16 @@ @@ -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> => { @@ -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._) {

39
src/scss/partials/pages/_pages.scss
Unescape View File

@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
.subtitle {
margin: 0;
@include respond-to(handhelds) {
font-size: 14px;
}
@ -25,6 +26,10 @@ @@ -25,6 +26,10 @@
}
}
.auth-image, .subtitle, .input-wrapper {
flex: 0 0 auto;
}
.tabs-container {
height: 100%;
width: 100%;
@ -35,14 +40,6 @@ @@ -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 @@ @@ -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 @@ @@ -88,6 +98,12 @@
}
}
.page-authCode {
.phone-wrapper {
flex: 0 0 auto;
}
}
.sign-logo {
max-width: 100%;
max-height: 100%;
@ -114,6 +130,10 @@ @@ -114,6 +130,10 @@
height: 166px;
}
}
h4, .qr-description, .qr {
flex: 0 0 auto;
}
}
/* .page-signQR {
@ -141,7 +161,10 @@ @@ -141,7 +161,10 @@
@include respond-to(handhelds) {
margin-bottom: 24px;
}
}
.fullName {
flex: 0 0 auto;
}
#signUp {

5
src/scss/partials/pages/_password.scss
Unescape View File

@ -5,6 +5,11 @@ @@ -5,6 +5,11 @@
&[type="password"] {
font-size: 2.25rem;
padding-left: 10px;
html.is-ios & {
font-size: .75rem;
letter-spacing: .125rem;
}
}
}

Write Preview
Loading…
Cancel
Save