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

Fix scroll position on auth pages

Browse Source 
Fix scroll on auth pages for iOS
This commit is contained in:
morethanwords 2020-10-30 18:29:03 +02:00
parent c835cee624
commit 1d47a4eedd
3 changed files with 32 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/index.hbs
View File

@ -28,10 +28,10 @@
<![endif]-->
<div class="whole" id="auth-pages" style="display: none;">
<div class="tabs-container auth-pages__container" data-slider="tabs">
<div class="page-sign">
<div class="container center-align">
<div class="scrollable scrollable-y">
<div class="scrollable scrollable-y">
<div class="tabs-container auth-pages__container" data-slider="tabs">
<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" />
@ -58,10 +58,8 @@
</div>
</div>
</div>
</div>
<div class="page-signQR">
<div class="container center-align">
<div class="scrollable scrollable-y">
<div class="page-signQR">
<div class="container center-align">
<div class="auth-image">
<canvas id="qr-code"></canvas>
</div>
@ -70,10 +68,8 @@
<div class="qr"><a href="#" class="a-qr">Or log in using your phone number</a></div>
</div>
</div>
</div>
<div class="page-authCode">
<div class="container center-align">
<div class="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>
@ -88,10 +84,8 @@
</div>
</div>
</div>
</div>
<div class="page-password">
<div class="container center-align">
<div class="scrollable scrollable-y">
<div class="page-password">
<div class="container center-align">
<div class="auth-image"></div>
<h4 class="phone">Enter Your Password</h4>
<p class="subtitle">Your account is protected with<br>an additional password</p>
@ -105,10 +99,8 @@
</div>
</div>
</div>
</div>
<div class="page-signUp">
<div class="container center-align">
<div class="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>

2
src/pages/pagesManager.ts
View File

@ -13,7 +13,7 @@ class PagesManager {
constructor() {
this.pagesDiv = document.getElementById('auth-pages') as HTMLDivElement;
this.selectTab = horizontalMenu(null, this.pagesDiv.firstElementChild as HTMLDivElement, null, () => {
this.selectTab = horizontalMenu(null, this.pagesDiv.firstElementChild.firstElementChild as HTMLDivElement, null, () => {
if(this.page.onShown) {
this.page.onShown();
}

34
src/scss/partials/pages/_pages.scss
View File

@ -30,9 +30,26 @@
flex: 0 0 auto;
}
> .scrollable {
display: flex;
flex-direction: column;
&:before, &:after {
content: " ";
flex: 1;
min-height: 3rem;
/* height: 105px; */
width: 100%;
}
}
.tabs-container {
height: 100%;
width: 100%;
max-width: 720px;
min-width: auto;
margin: 0 auto;
overflow-x: hidden;
/* height: 100%;
width: 100%; */
> div {
/* justify-content: center; */
@ -48,19 +65,6 @@
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) {