Merge pull request #5950 from homeopatchy/webview-30-small-devices

Fix styles for old webview (android 4.4.2) and small devices

src/sass/views/amount.scss

@@ -32,6 +32,13 @@
       padding-left: 48px;
     }
   }
+  @media(max-width: 320px) {
+    .bitcoin-address {
+      & > span:last-child {
+        margin-left: -2px;
+      }
+    }
+  }
   .send-gravatar {
     left: 11px;
     position: absolute;
@@ -51,6 +58,9 @@
       @media(max-height: 480px) {
         padding: 0px;
       }
+      @media(max-width: 320px) {
+        padding: 0px;
+      }
       .title {
         float: left;
         padding-top: 10px;
@@ -78,6 +88,16 @@
       @media(max-height: 480px) {
         top: 45px;
       }
+      @media(max-width: 320px) {
+        bottom: 276px;
+        top: 60px;
+        & > div {
+          display: inline-block;
+        }
+        & > div:first-child {
+          display: inherit;
+        }
+      }
     }
   }
   .amount-pane-no-recipient {
@@ -147,6 +167,10 @@
       position: relative;
       top: -3px;
       line-height: 1;
+      @media(max-width: 320px) {
+        line-height: 30px;
+        height: 30px;
+      }
     }
     &__results {
       &--minimize {

src/sass/views/feedback/complete.scss

@@ -56,6 +56,7 @@
     padding: 50px 10px 30px;
     background-color: $v-subtle-gray;
     text-align: center;
+    -webkit-transform: translateY(100%);
     transform: translateY(100%);
     opacity: 0;
     animation-name: slideUpFadeIn;
@@ -76,10 +77,12 @@
 
 @keyframes slideUpFadeIn {
   from {
+    -webkit-transform: translateY(100%);
     transform: translateY(100%);
     opacity: 0;
   }
   to {
+    -webkit-transform: translateY(0);
     transform: translateY(0);
     opacity: 1;
   }

src/sass/views/includes/walletActivity.scss

@@ -8,6 +8,9 @@
   &-amount {
     float: right;
     font-size: 18px;
+    @media(max-width: 320px) {
+      text-align: right;
+    }
   }
 
   &-note {

src/sass/views/onboarding/onboard-disclaimer.scss

@@ -13,6 +13,7 @@
   height: 100%;
   transition: transform 2.5s ease;
   &.shrink{
+    -webkit-transform: scale(.8);
     transform: scale(.8);
   }
   &-container {

src/sass/views/tab-receive.scss

@@ -28,6 +28,9 @@
     @media(max-height: 600px) and (-webkit-device-pixel-ratio: 2) {
       height: 64vh;
     }
+    @media(max-width: 320px) {
+      height: 62vh;
+    }
     &-info {
       height: 100%;
       display: flex;
@@ -35,6 +38,9 @@
       justify-content: center;
       align-items: center;
       width: 100%;
+      @media(max-width: 320px) {
+        height: auto;
+      }
     }
     article {
       flex:1;
@@ -42,11 +48,9 @@
     }
     #bit-address {
       width: 100%;
-      align-self: flex-end;
       margin-top: auto;
-      justify-content: center;
-      align-content: center;
-      position: relative;
+      position: absolute;
+      bottom: 0;
       min-height: 40px;
       #next-address {
         color:$v-light-gray;
@@ -100,6 +104,7 @@
       top:50%;
       &, &.next {
         left:100%;
+        -webkit-transform: translate(100%, -40%);
         transform: translate(100%, -40%);
       }
       &.next, &.prev {
@@ -110,10 +115,12 @@
         left:50%;
       }
       &.current {
+        -webkit-transform: translate(-50%, -40%);
         transform: translate(-50%, -40%);
         z-index: 3;
       }
       &.prev {
+        -webkit-transform: translate(-150%, -40%);
         transform: translate(-150%, -40%);
       }
       .item {
@@ -127,6 +134,12 @@
         @media(min-width:450px) {
           font-size:1rem;
         }
+        &.item-icon-left {
+          @media(max-width: 320px) {
+            padding-left: 48px;
+            text-overflow: initial;
+          }
+        }
         color:$v-light-gray;
       }
     }
@@ -139,6 +152,10 @@
       justify-content: center;
       flex: 1;
       z-index: 1;
+      @media(max-width: 320px) {
+        height: 260px;
+        margin-top: -50px;
+      }
       div {
         transition: all .4s ease;
         &.current,
@@ -152,13 +169,16 @@
           left:50%;
         }
         &.current {
+          -webkit-transform: translate(-50%, -40%);
           transform: translate(-50%, -40%);
         }
         &.prev {
+          -webkit-transform: translate(-150%, -40%);
           transform: translate(-150%, -40%);
         }
         &.next {
           left:100%;
+          -webkit-transform: translate(100%, -40%);
           transform: translate(100%, -40%);
         }
       }
@@ -170,6 +190,7 @@
         button {
           width: 100%;
           top: 50%;
+          -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
         }
       }
@@ -211,9 +232,6 @@
             transform: scale(.7);
           }
         }
-        #bit-address {
-          position: relative;
-        }
       }
     }
   }
@@ -379,6 +397,7 @@
         .bit-address {
           .item{
             top: 40%;
+            -webkit-transform: translateY(-40%);
             transform: translateY(-40%);
             font-size:1rem;
           }
@@ -417,6 +436,7 @@
           position: relative;
           .card {
             opacity: 1;
+            -webkit-transform: scale(1);
             transform: scale(1);
           }
           &:before {
@@ -445,6 +465,7 @@
         margin: 1.5rem auto 0;
         position: relative;
         opacity: .5;
+        -webkit-transform:scale(.85);
         transform:scale(.85);
         transition:transform .2s ease;
         .item {

src/sass/views/walletDetails.scss

@@ -152,6 +152,7 @@
       position: absolute;
       width: 100%;
       height: 500px;
+      -webkit-transform: translateY(-499px);
       transform: translateY(-499px);
 
       &.collapsible {
@@ -161,6 +162,7 @@
         position: absolute;
         width: 100%;
         height: 200px;
+        -webkit-transform: translateY(100px);
         transform: translateY(100px);
       }
     }
@@ -174,12 +176,16 @@
     display: block;
     align-items: center;
     justify-content: center;
+    @media(max-width: 320px) {
+      padding-top: 60px;
+    }
 
     &.collapsible {
       margin-bottom: 10px;
     }
 
     &__balance {
+      -webkit-transform: scale3d(1, 1, 1) translateY(45px);
       transform: scale3d(1, 1, 1) translateY(45px);
     }