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
Unified 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 @@
<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> </div>
<p class="subtitle">Please confirm your country and<br> enter your phone number.</p> <h4>Sign in to Telegram</h4>
<div class="input-wrapper"> <p class="subtitle">Please confirm your country and<br> enter your phone number.</p>
<div class="input-field input-select"> <div class="input-wrapper">
<input type="text" name="countryCode" id="countryCode" autocomplete="rrRandomRR" required /> <div class="input-field input-select">
<label for="countryCode">Country</label> <input type="text" name="countryCode" id="countryCode" autocomplete="rrRandomRR" required />
<span class="arrow arrow-down"></span> <label for="countryCode">Country</label>
</div> <span class="arrow arrow-down"></span>
<div class="input-field"> </div>
<input type="tel" name="phone" id="phone" autocomplete="rr55RandomRR55" required /> <div class="input-field">
<label for="phone">Phone Number</label> <input type="tel" name="phone" id="phone" autocomplete="rr55RandomRR55" required />
</div> <label for="phone">Phone Number</label>
<label class="checkbox-field"> </div>
<input type="checkbox" id="keepSigned" checked="checked"> <label class="checkbox-field">
<span>Keep me signed in</span> <input type="checkbox" id="keepSigned" checked="checked">
</label> <span>Keep me signed in</span>
<button class="btn-primary rp" style="visibility: hidden;">NEXT</button> </label>
<div class="qr"><a href="#" class="a-qr">Quick log in using QR code</a></div> <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>
</div> </div>
<div class="page-signQR scrollable scrollable-y"> <div class="page-signQR">
<div class="container center-align"> <div class="container center-align">
<div class="auth-image"> <div class="scrollable scrollable-y">
<canvas id="qr-code"></canvas> <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> </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> </div>
<div class="page-authCode scrollable scrollable-y"> <div class="page-authCode">
<div class="container center-align"> <div class="container center-align">
<div class="auth-image"></div> <div class="scrollable scrollable-y">
<div class="phone-wrapper"> <div class="auth-image"></div>
<h4 class="phone"></h4> <div class="phone-wrapper">
<span class="phone-edit tgico-edit"></span> <h4 class="phone"></h4>
</div> <span class="phone-edit tgico-edit"></span>
<p class="subtitle sent-type"></p> </div>
<div class="input-wrapper"> <p class="subtitle sent-type"></p>
<div class="input-field"> <div class="input-wrapper">
<input type="tel" name="code" id="code" autocomplete="off" required /> <div class="input-field">
<label for="code">Code</label> <input type="tel" name="code" id="code" autocomplete="off" required />
<label for="code">Code</label>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="page-password scrollable scrollable-y"> <div class="page-password">
<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"></div>
<p class="subtitle">Your account is protected with<br>an additional password</p> <h4 class="phone">Enter a password</h4>
<div class="input-wrapper"> <p class="subtitle">Your account is protected with<br>an additional password</p>
<div class="input-field"> <div class="input-wrapper">
<input type="password" name="password" id="password" autocomplete="off" required /> <div class="input-field">
<label for="password">Password</label> <input type="password" name="password" id="password" autocomplete="off" required />
<span class="toggle-visible tgico-eye1"></span> <label for="password">Password</label>
</div> <span class="toggle-visible tgico-eye1"></span>
<button class="btn-primary rp">NEXT</button> </div>
<button class="btn-primary rp">NEXT</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="page-signUp scrollable scrollable-y"> <div class="page-signUp">
<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 avatar-edit">
<span class="tgico tgico-cameraadd"></span> <canvas class="avatar-edit-canvas" id="canvas-avatar"></canvas>
</div> <span class="tgico tgico-cameraadd"></span>
<h4 class="fullName">Your Name</h4> </div>
<p class="subtitle">Enter your name and add<br>a profile picture</p> <h4 class="fullName">Your Name</h4>
<div class="input-wrapper"> <p class="subtitle">Enter your name and add<br>a profile picture</p>
<div class="input-field"> <div class="input-wrapper">
<input type="text" name="name" id="name" autocomplete="off" required /> <div class="input-field">
<label for="name">Name</label> <input type="text" name="name" id="name" autocomplete="off" required />
</div> <label for="name">Name</label>
<div class="input-field"> </div>
<input type="text" name="lastName" id="lastName" autocomplete="off" required /> <div class="input-field">
<label for="lastName">Last Name (optional)</label> <input type="text" name="lastName" id="lastName" autocomplete="off" required />
</div> <label for="lastName">Last Name (optional)</label>
<button class="btn-primary rp" id="signUp">START MESSAGING</button> </div>
<button class="btn-primary rp" id="signUp">START MESSAGING</button>
</div>
</div> </div>
</div> </div>
</div> </div>

12
src/pages/pagePassword.ts
Unescape View File

@ -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._) {

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

@ -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
src/scss/partials/pages/_password.scss
Unescape View File

@ -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;
}
} }
} }

Write Preview
Loading…
Cancel
Save