Merge pull request #49 from jostw/josyeh/Marketplace/master/Bug1248333

Bug 1248333 - Update visual with flexible layout

Author: josyeh

src/media/css/app-list.styl

@@ -8,11 +8,11 @@ $app-list-background-color = #CBCDCD;
 
 .app-list {
     position: absolute;
-    top: $app-preview-height;
     bottom: 0;
     left: 0;
 
     width: 100%;
+    height: (61.4 / 108) * 100%;
     overflow: hidden;
 
     background-color: $app-list-background-color;

src/media/css/app-preview.styl

@@ -12,8 +12,8 @@ $app-preview-background-color = #72C9B0;
     left: 0;
 
     width: 100%;
-    height: $app-preview-height;
-    padding: 7.2rem 18.5rem 6.9rem 15rem;
+    height: (46.6 / 108) * 100%;
+    padding: (7.2 / 192) * 100% 18.5rem (6.9 / 192) * 100% 15rem;
 
     background-color: $app-preview-background-color;
     background-image: url('../img/Pattern_overlay.png');
@@ -56,12 +56,14 @@ $app-preview-background-color = #72C9B0;
 
 .app-preview-image {
     float: right;
-    width: 57.5rem;
+    width: (57.5 / 158.5) * 100%;
     height: 100%;
-
+    min-height: 20rem;
     border-radius: .6rem;
     overflow: hidden;
 
+    text-align: right;
+
     color: transparent;
 
     transition: opacity 1s;
@@ -71,16 +73,20 @@ $app-preview-background-color = #72C9B0;
     }
 
     img {
-        width: 100%;
+        width: auto;
+        height: 100%;
+        border-radius: .6rem;
     }
 }
 
 .app-preview-detail {
     position: relative;
 
-    width: 89rem;
+    width: (89 / 158.5) * 100%;
     height: 100%;
+    min-height: 20rem;
     padding-top: 1rem;
+    overflow: hidden;
 
     color: $greyscale-white;
 

src/media/css/lib/index.styl

@@ -1,4 +1,3 @@
 @import 'colors';
-@import 'layout';
 @import 'typography';
 @import 'mixins';

src/media/css/lib/layout.styl

@@ -5,10 +5,16 @@
 @import 'lib';
 
 .offline-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+
     width: 100%;
     height: 100%;
 
     background-image: url('../img/bg_loading_error.png');
+    background-size: cover;
+    background-position: center;
 }
 
 .offline-description,
@@ -23,7 +29,7 @@
 }
 
 .offline-description {
-    top: 46rem;
+    top: (46 / 108) * 100%
 
     font-style: italic;
 
@@ -48,7 +54,7 @@
 }
 
 .offline-control {
-    top: 70.6rem;
+    top: (70.6 / 108) * 100%;
 }
 
 .offline-button {

src/media/css/offline.styl

@@ -31,8 +31,6 @@
 
         width: 100%;
         height: 100%;
-        min-width: 192rem;
-        min-height: 108rem;
 
         transition: opacity 1s;
 
@@ -77,10 +75,11 @@
 }
 
 .slide-section-top {
-    top: 3.5rem;
+    top: 8%;
 
     width: 150rem;
     height: 8rem;
+    margin-top: -5rem;
 
     font-size: 3.8rem;
     font-style: italic;
@@ -143,11 +142,11 @@
 
     .text {
         position: absolute;
-        top: 19.5rem;
+        top: 2.5%;
         left: 50%;
 
         width: 50rem;
-        margin-left: -25rem;
+        margin: 16.875rem 0 0 -25rem;
 
         font-size: 4.2rem;
         font-style: italic;
@@ -159,12 +158,16 @@
 }
 
 .slide-section-bottom {
-    bottom: 5.5rem;
+    bottom: 7.5%;
+    margin-bottom: -2.625rem;
 }
 
 .slide-image {
     width: 100%;
     height: 100%;
+
+    background-size: cover;
+    background-position: center bottom;
 }
 
 for num in (1..3) {