Fix popup height due to align-items

4 years ago · 3fd8d4262c
6 changed files with 35 additions and 21 deletions
--- a/src/components/popupDatePicker.ts
+++ b/src/components/popupDatePicker.ts
@ -58,6 +58,11 @@ export default class PopupDatePicker extends PopupElement {
				@@ -58,6 +58,11 @@ export default class PopupDatePicker extends PopupElement {
    popupBody.append(this.controlsDiv, this.monthsContainer);
    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;
    //this.selectedDate = this.maxDate = new Date(initDate.getTime() - passed);
    initDate.setHours(0, 0, 0, 0);
--- a/src/index.hbs
+++ b/src/index.hbs
@ -1,5 +1,5 @@
				@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="no-js" lang="en">
+<html lang="en">

 <head>
  <meta charset="utf-8">
@ -29,7 +29,7 @@
				@@ -29,7 +29,7 @@
  
  <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="page-sign scrollable scrollable-y">
        <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">
@ -57,7 +57,7 @@
				@@ -57,7 +57,7 @@
          </div>
        </div>
      </div>
-      <div class="page-signQR">
+      <div class="page-signQR scrollable scrollable-y">
        <div class="container center-align">
          <div class="auth-image">
            <canvas id="qr-code"></canvas>
@ -67,7 +67,7 @@
				@@ -67,7 +67,7 @@
          <div class="qr"><a href="#" class="a-qr">Or log in using your phone number</a></div>
        </div>
      </div>
-      <div class="page-authCode">
+      <div class="page-authCode scrollable scrollable-y">
        <div class="container center-align">
          <div class="auth-image"></div>
          <div class="phone-wrapper">
@ -83,7 +83,7 @@
				@@ -83,7 +83,7 @@
          </div>
        </div>
      </div>
-      <div class="page-password">
+      <div class="page-password scrollable scrollable-y">
        <div class="container center-align">
          <div class="auth-image"></div>
          <h4 class="phone">Enter a password</h4>
@ -98,7 +98,7 @@
				@@ -98,7 +98,7 @@
          </div>
        </div>
      </div>
-      <div class="page-signUp">
+      <div class="page-signUp scrollable scrollable-y">
        <div class="container center-align">
          <div class="auth-image avatar-edit">
            <canvas class="avatar-edit-canvas" id="canvas-avatar"></canvas>
--- a/src/lib/appManagers/appMediaViewer.ts
+++ b/src/lib/appManagers/appMediaViewer.ts
@ -160,8 +160,9 @@ export class AppMediaViewer {
				@@ -160,8 +160,9 @@ export class AppMediaViewer {
    });

    this.onClickBinded = (e: MouseEvent) => {
-      cancelEvent(e);
      let target = e.target as HTMLElement;
+      if(target.tagName == 'A') return;
+      cancelEvent(e);

      let mover: HTMLDivElement = null;
      ['media-viewer-mover', 'media-viewer-buttons', 'media-viewer-author'].find(s => {
--- a/src/scss/partials/pages/_pages.scss
+++ b/src/scss/partials/pages/_pages.scss
@ -58,13 +58,13 @@
				@@ -58,13 +58,13 @@
    }
  }

-  @media (max-height: 858px) {
-    height: auto;
+  // @media (max-height: 858px) {
+  //   height: auto;

-    /* .tabs-container > div > div {
-      height: auto;
-    } */
-  }
+  //   /* .tabs-container > div > div {
+  //     height: auto;
+  //   } */
+  // }

  .page-password {
    .input-wrapper {
--- a/src/scss/partials/popups/_datePicker.scss
+++ b/src/scss/partials/popups/_datePicker.scss
@ -6,7 +6,15 @@
				@@ -6,7 +6,15 @@
      // max-width: 300px;
      // max-height: 424px;
      min-width: 300px;
-      padding: 12px 14px;  
+      width: 300px;
+      padding: 12px 14px;
+
+      @media (min-height: 470px) {
+        &.is-max-lines {
+          top: 19px;
+          //left: 8px;
+        }
+      }
    }

    &-header {
--- a/src/scss/partials/popups/_popup.scss
+++ b/src/scss/partials/popups/_popup.scss
@ -16,8 +16,8 @@
				@@ -16,8 +16,8 @@
  overflow: auto;
  /* text-align: center; */
  display: flex;
-  align-items: center;
-  justify-content: center;
+  /* align-items: center;
+  justify-content: center; */

  &.active {
    opacity: 1;
@ -27,12 +27,7 @@
				@@ -27,12 +27,7 @@

    .popup-container {
      transform: translateY(0);
-
-      &.is-max-lines {
-        margin-top: 38px;
-      }
    }
-    
  }

  &-container {
@ -48,6 +43,11 @@
				@@ -48,6 +43,11 @@
    display: flex;
    flex-direction: column;
    overflow: hidden;
+    margin: auto;
+  }
+
+  &-centerer {
+    margin: auto;
  }

  &-close {