Merge pull request #241 from plondon/security-translations-ui

Security translations ui
blockchain · Jan 15, 2016 · fb907e9 · fb907e9
2 parents ff8661e + 45dae88
commit fb907e9
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 23 deletions.
diff --git a/app/partials/security-center.jade b/app/partials/security-center.jade
@@ -6,8 +6,8 @@
     ul.flex.flex-start.pln.mbn
       li.level-header.bg-light-blue.flex-center.flex-justify
         img(src="img/security-icon-1.png")
-      li.level-badge(ng-class="{'badge-active': user.isEmailVerified}")
-        a(ng-click="user.isEmailVerified || toggle('email')", ng-class="{'active' : display.action == 'email' }")
+      li.level-badge(ng-click="user.isEmailVerified || toggle('email')", ng-class="{'active' : display.action == 'email', 'badge-active': user.isEmailVerified}")
+        a
           .level-incomplete-container(ng-hide="user.isEmailVerified")
             .flex-center.flex-column
               img(src="img/badge-verifyemail.png")
@@ -18,8 +18,8 @@
                 i.ti-check.bright-green
             p.bright-green.em-300(translate="NICELY_DONE")
           completed-level(ng-show="user.isEmailVerified" placement="bottom" content="EMAIL_ADDRESS_TOOLTIP" img="img/badge-verifyemail.png" message="EMAIL_VERIFIED")
-      li.level-badge(ng-class="{'badge-active': status.didConfirmRecoveryPhrase}")
-        a(ng-click="status.didConfirmRecoveryPhrase || toggle('securityphrase')", ng-class="{'active' : display.action == 'securityphrase' }")
+      li.level-badge(ng-click="status.didConfirmRecoveryPhrase || toggle('securityphrase')", ng-class="{'active' : display.action == 'securityphrase', 'badge-active': status.didConfirmRecoveryPhrase }")
+        a
           .level-incomplete-container(ng-hide="status.didConfirmRecoveryPhrase")
             .flex-center.flex-column
               img(src="img/badge-securityphrase.png")
@@ -30,8 +30,8 @@
                 i.ti-check.bright-green
             p.bright-green.em-300(translate="NICELY_DONE")
           completed-level(ng-show="status.didConfirmRecoveryPhrase" placement="bottom" content="RECOVERY_PHRASE_TOOLTIP" img="img/badge-securityphrase.png" message="PHRASE_BACKED")
-      li.level-badge(ng-class="{'badge-active': user.passwordHint}")
-        a(ng-click="user.passwordHint || toggle('passwordhint')", ng-class="{'active' : display.action == 'passwordhint' }")
+      li.level-badge(ng-click="user.passwordHint || toggle('passwordhint')", ng-class="{'active' : display.action == 'passwordhint', 'badge-active': user.passwordHint }")
+        a
           .level-incomplete-container(ng-hide="user.passwordHint")
             .flex-center.flex-column
               img(src="img/badge-passwordhint.png")
@@ -82,8 +82,8 @@
     ul.flex.flex-start.pln.mbn
       li.level-header.bg-light-blue.flex-center.flex-justify
         img(src="img/security-icon-2.png")
-      li.level-badge(ng-class="{'badge-active': user.isMobileVerified}")
-        a(ng-click="user.isMobileVerified || toggle('mobilenumber')", ng-class="{'active' : display.action == 'mobilenumber' }")
+      li.level-badge(ng-click="user.isMobileVerified || toggle('mobilenumber')", ng-class="{'active' : display.action == 'mobilenumber', 'badge-active': user.isMobileVerified }")
+        a
           .level-incomplete-container(ng-hide="user.isMobileVerified")
             .flex-center.flex-column
               img(src="img/badge-addmobile.png")
@@ -94,8 +94,8 @@
                 i.ti-check.bright-green
             p.bright-green.em-300(translate="NICELY_DONE")
           completed-level(ng-show="user.isMobileVerified" content="MOBILE_NUMBER_TOOLTIP" img="img/badge-addmobile.png" message="MOBILE_LINKED")
-      li.level-badge(ng-class="{'badge-active': settings.needs2FA}")
-        a(ng-click="settings.needs2FA || toggle('twofactor')", ng-class="{'active' : display.action == 'twofactor' }")
+      li.level-badge(ng-click="settings.needs2FA || toggle('twofactor')", ng-class="{'active' : display.action == 'twofactor', 'badge-active': settings.needs2FA }")
+        a
           .level-incomplete-container(ng-hide="settings.needs2FA")
             .flex-column.flex-center
               img(src="img/badge-add2FA.png")
@@ -125,8 +125,8 @@
     ul.flex.flex-start.pln.mbn
       li.level-header.bg-light-blue.flex-center.flex-justify
         img(src="img/security-icon-3.png")
-      li.level-badge(ng-class="{'badge-active': settings.blockTOR}")
-        a(ng-click="settings.blockTOR || toggle('blocktor')", ng-class="{'active' : display.action == 'blocktor' }")
+      li.level-badge(ng-click="settings.blockTOR || toggle('blocktor')", ng-class="{'active' : display.action == 'blocktor', 'badge-active': settings.blockTOR }")
+        a
           .level-incomplete-container(ng-hide="settings.blockTOR")
             .flex-column.flex-center
               img(src="img/badge-blockTOR.png")

diff --git a/assets/css/modules/_security-center.scss b/assets/css/modules/_security-center.scss
@@ -55,6 +55,21 @@
   }
   section.level {
     margin-bottom: 30px;
+    @media (min-width: 769px) {
+      .level-badge {
+        height: auto;
+      }
+      &.level_one {
+        .level-badge {
+          width: 33.333%;
+          &:last-child {
+            &.active {
+              border-right: 0px;
+            }
+          }
+        }
+      }
+    }
   }
   header {
     margin-bottom: 20px;
@@ -63,11 +78,35 @@
     background-color: #fdfdfd;
     border: 1px solid #eaeaea;
     list-style: none;
-    height: 160px;
   }
   .level-badge {
     width: 22%;
+    position: relative;
+    padding-bottom: 20px;
     transition: all .3s ease-in-out;
+    &.active {
+      background-color: white;
+      border-bottom: none;
+      font-weight: bold;
+      border-top: none;
+      box-shadow: 0px 0px 8px 4px rgba(243, 243, 243, 1) inset;
+      @media (min-width: 769px) {
+        border-right: 1px solid rgb(234, 234, 234);
+        border-left: 1px solid rgb(234, 234, 234);
+        box-shadow: 0px 4px 8px -1px rgba(243, 243, 243, 1) inset;
+        &:nth-child(2) {
+          border-left: 0px;
+        }
+      }
+      &:after {
+        content: '';
+        width: 100%;
+        height: 1px;
+        bottom: -1px;
+        position: absolute;
+        background-color: #fff;
+      }
+    }
     img {
       opacity: .3;
       -webkit-filter: grayscale(100%);
@@ -77,8 +116,9 @@
       display: block;
       text-align: center;
       width: 100%;
-      height: 160px;
       padding: 20px 15px 30px 15px;
+      padding-bottom: 200px;
+      margin-bottom: -200px;
       cursor: pointer;
       img {
         width: 75px;
@@ -88,15 +128,6 @@
         color: rgba(0, 0, 0, 0.5);
       }
     }
-    a.active {
-      background-color: white;
-      border-bottom: none;
-      font-weight: bold;
-      box-shadow: 0px 4px 8px -1px rgba(243, 243, 243, 1) inset;
-      border-top: none;
-      border-right: 1px solid rgb(234, 234, 234);
-      border-left: 1px solid rgb(234, 234, 234);
-    }
   }
   .badge-active {
     img {
@@ -111,6 +142,7 @@
   .level-header {
     border-right: 1px solid #ebebeb;
     padding: 30px 35px;
+    height: auto;
     img {
       width: 85px;
     }