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

Fix popup height due to align-items

Browse Source
This commit is contained in:
morethanwords 2020-08-19 12:40:43 +03:00
parent be15db0a5c
commit 3fd8d4262c
6 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/popupDatePicker.ts
View File

@ -58,6 +58,11 @@ export default class PopupDatePicker extends PopupElement {
popupBody.append(this.controlsDiv, this.monthsContainer); popupBody.append(this.controlsDiv, this.monthsContainer);
this.container.append(popupBody); this.container.append(popupBody);
const popupCenterer = document.createElement('div');
popupCenterer.classList.add('popup-centerer');
popupCenterer.append(this.container);
this.element.append(popupCenterer);
//const passed = (initDate.getTime() - (initDate.getTimezoneOffset() * 60000)) % 86400000; //const passed = (initDate.getTime() - (initDate.getTimezoneOffset() * 60000)) % 86400000;
//this.selectedDate = this.maxDate = new Date(initDate.getTime() - passed); //this.selectedDate = this.maxDate = new Date(initDate.getTime() - passed);
initDate.setHours(0, 0, 0, 0); initDate.setHours(0, 0, 0, 0);

12
src/index.hbs
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="no-js" lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@ -29,7 +29,7 @@
<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"> <div class="page-sign scrollable scrollable-y">
<div class="container center-align"> <div class="container center-align">
<div class="auth-image"> <div class="auth-image">
<svg class="sign-logo" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"> <svg class="sign-logo" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
@ -57,7 +57,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="page-signQR"> <div class="page-signQR scrollable scrollable-y">
<div class="container center-align"> <div class="container center-align">
<div class="auth-image"> <div class="auth-image">
<canvas id="qr-code"></canvas> <canvas id="qr-code"></canvas>
@ -67,7 +67,7 @@
<div class="qr"><a href="#" class="a-qr">Or log in using your phone number</a></div> <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"> <div class="page-authCode scrollable scrollable-y">
<div class="container center-align"> <div class="container center-align">
<div class="auth-image"></div> <div class="auth-image"></div>
<div class="phone-wrapper"> <div class="phone-wrapper">
@ -83,7 +83,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="page-password"> <div class="page-password scrollable scrollable-y">
<div class="container center-align"> <div class="container center-align">
<div class="auth-image"></div> <div class="auth-image"></div>
<h4 class="phone">Enter a password</h4> <h4 class="phone">Enter a password</h4>
@ -98,7 +98,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="page-signUp"> <div class="page-signUp scrollable scrollable-y">
<div class="container center-align"> <div class="container center-align">
<div class="auth-image avatar-edit"> <div class="auth-image avatar-edit">
<canvas class="avatar-edit-canvas" id="canvas-avatar"></canvas> <canvas class="avatar-edit-canvas" id="canvas-avatar"></canvas>

3
src/lib/appManagers/appMediaViewer.ts
View File

@ -160,8 +160,9 @@ export class AppMediaViewer {
}); });
this.onClickBinded = (e: MouseEvent) => { this.onClickBinded = (e: MouseEvent) => {
cancelEvent(e);
let target = e.target as HTMLElement; let target = e.target as HTMLElement;
if(target.tagName == 'A') return;
cancelEvent(e);
let mover: HTMLDivElement = null; let mover: HTMLDivElement = null;
['media-viewer-mover', 'media-viewer-buttons', 'media-viewer-author'].find(s => { ['media-viewer-mover', 'media-viewer-buttons', 'media-viewer-author'].find(s => {

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

@ -58,13 +58,13 @@
} }
} }
@media (max-height: 858px) { // @media (max-height: 858px) {
height: auto; // height: auto;
/* .tabs-container > div > div { // /* .tabs-container > div > div {
height: auto; // height: auto;
} */ // } */
} // }
.page-password { .page-password {
.input-wrapper { .input-wrapper {

10
src/scss/partials/popups/_datePicker.scss
View File

@ -6,7 +6,15 @@
// max-width: 300px; // max-width: 300px;
// max-height: 424px; // max-height: 424px;
min-width: 300px; min-width: 300px;
padding: 12px 14px; width: 300px;
padding: 12px 14px;
@media (min-height: 470px) {
&.is-max-lines {
top: 19px;
//left: 8px;
}
}
} }
&-header { &-header {

14
src/scss/partials/popups/_popup.scss
View File

@ -16,8 +16,8 @@
overflow: auto; overflow: auto;
/* text-align: center; */ /* text-align: center; */
display: flex; display: flex;
align-items: center; /* align-items: center;
justify-content: center; justify-content: center; */
&.active { &.active {
opacity: 1; opacity: 1;
@ -27,12 +27,7 @@
.popup-container { .popup-container {
transform: translateY(0); transform: translateY(0);
&.is-max-lines {
margin-top: 38px;
}
} }
} }
&-container { &-container {
@ -48,6 +43,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
margin: auto;
}
&-centerer {
margin: auto;
} }
&-close { &-close {