argoproj#44 Adjust boxes to small screens

wokeGit · Aug 30, 2017 · 9378894 · 9378894
1 parent ea5327d
commit 9378894
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 11 deletions.
diff --git a/saas/axops/src/ui/src/app/views/forgot-password/forgot-confirmation/forgot-confirmation.html b/saas/axops/src/ui/src/app/views/forgot-password/forgot-confirmation/forgot-confirmation.html
@@ -4,7 +4,7 @@
         <div class="logo"></div>
     </div>
 
-    <div class="setup__box">
+    <div class="setup__box setup__box--forgot-password-confirm">
         <div class="setup__header">
             <h1>{{ 'Password Reset Email Sent' | translate }}</h1>
         </div>

diff --git a/saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html b/saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html
@@ -4,7 +4,7 @@
         <div class="logo"></div>
     </div>
 
-    <div class="setup__box">
+    <div class="setup__box setup__box--forgot-password">
         <div class="setup__header">
             <h1>{{ 'Forgot Password' | translate }}?</h1>
         </div>

diff --git a/saas/axops/src/ui/src/app/views/reset-password/reset-confirmation/reset-confirmation.html b/saas/axops/src/ui/src/app/views/reset-password/reset-confirmation/reset-confirmation.html
@@ -4,7 +4,7 @@
         <div class="logo"></div>
     </div>
 
-    <div class="setup__box">
+    <div class="setup__box setup__box--reset-password-confirm">
         <div class="setup__header">
             <h1>{{ 'Password Reset Complete' | translate }}</h1>
         </div>

diff --git a/saas/axops/src/ui/src/app/views/reset-password/reset-password.html b/saas/axops/src/ui/src/app/views/reset-password/reset-password.html
@@ -4,7 +4,7 @@
         <div class="logo"></div>
     </div>
 
-    <div class="setup__box">
+    <div class="setup__box setup__box--reset-password">
         <div class="setup__header">
             <h1>{{ 'Reset Your Password' | translate }}</h1>
         </div>

diff --git a/saas/axops/src/ui/src/app/views/setup/email-confirmation/email-confirmation.html b/saas/axops/src/ui/src/app/views/setup/email-confirmation/email-confirmation.html
@@ -4,7 +4,7 @@
         <div class="logo"></div>
     </div>
 
-    <div class="setup__box">
+    <div class="setup__box setup__box--setup-confirm">
         <div class="setup__header">
             <h1>{{ 'Thanks for joining Argo!' | translate }}</h1>
         </div>

diff --git a/saas/axops/src/ui/src/app/views/setup/setup.scss b/saas/axops/src/ui/src/app/views/setup/setup.scss
@@ -25,7 +25,6 @@ $setup-box-content-shadow: 3px 3px 20px black;
         width: 150px;
         position: absolute;
         left: 47px;
-        z-index: -1;
     }
 
     &__shortcut {
@@ -53,19 +52,27 @@ $setup-box-content-shadow: 3px 3px 20px black;
     }
 
     &__box {
-        position: fixed;
-        top: 40%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+        margin: auto auto 50px auto;
+
+        &--welcome {
+            margin-top: 50px;
+        }
+
+        &--forgot-password, &--reset-password, &--setup-confirm, &--forgot-password-confirm, &--reset-password-confirm {
+            margin-top: 130px;
+        }
     }
 
     &__header {
+        position: relative;
+
         h1 {
             line-height: 80px;
             font-size: 35px;
             font-weight: 300;
             color: white;
             text-align: center;
+            margin-bottom: 0;
         }
     }
 
@@ -76,6 +83,8 @@ $setup-box-content-shadow: 3px 3px 20px black;
         padding: 50px 60px;
         border: 1px solid black;
         box-shadow: $setup-box-content-shadow;
+        z-index: 1;
+        position: relative;
 
         p {
             font-size: 15px;

diff --git a/saas/axops/src/ui/src/app/views/setup/sign-up/sign-up.html b/saas/axops/src/ui/src/app/views/setup/sign-up/sign-up.html
@@ -4,7 +4,7 @@
         <div class="logo"></div>
     </div>
 
-    <div class="setup__box">
+    <div class="setup__box setup__box--welcome">
         <div class="setup__header">
             <div class="setup__logo"></div>
             <div class="setup__welcome-text">