From cff0edb35230668c4262411a9d81412ace82a007 Mon Sep 17 00:00:00 2001
From: Joseph Yeh <jyeh@mozilla.com>
Date: Mon, 15 Feb 2016 14:05:46 +0800
Subject: [PATCH] Bug 1248333 - Update visual with flexible layout

---
 src/media/css/app-list.styl    |  2 +-
 src/media/css/app-preview.styl | 18 ++++++++++++------
 src/media/css/lib/index.styl   |  1 -
 src/media/css/lib/layout.styl  |  1 -
 src/media/css/offline.styl     | 10 ++++++++--
 src/media/css/tutorial.styl    | 15 +++++++++------
 6 files changed, 30 insertions(+), 17 deletions(-)
 delete mode 100644 src/media/css/lib/layout.styl

diff --git a/src/media/css/app-list.styl b/src/media/css/app-list.styl
index e4806d0..5a998f6 100644
--- a/src/media/css/app-list.styl
+++ b/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;
diff --git a/src/media/css/app-preview.styl b/src/media/css/app-preview.styl
index 953f8bc..14e4f6d 100644
--- a/src/media/css/app-preview.styl
+++ b/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;
 
diff --git a/src/media/css/lib/index.styl b/src/media/css/lib/index.styl
index c3d27af..343193e 100644
--- a/src/media/css/lib/index.styl
+++ b/src/media/css/lib/index.styl
@@ -1,4 +1,3 @@
 @import 'colors';
-@import 'layout';
 @import 'typography';
 @import 'mixins';
diff --git a/src/media/css/lib/layout.styl b/src/media/css/lib/layout.styl
deleted file mode 100644
index b1516f8..0000000
--- a/src/media/css/lib/layout.styl
+++ /dev/null
@@ -1 +0,0 @@
-$app-preview-height = 46.6rem;
diff --git a/src/media/css/offline.styl b/src/media/css/offline.styl
index 6d9db96..332056e 100644
--- a/src/media/css/offline.styl
+++ b/src/media/css/offline.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 {
diff --git a/src/media/css/tutorial.styl b/src/media/css/tutorial.styl
index 740646c..4b85ee5 100644
--- a/src/media/css/tutorial.styl
+++ b/src/media/css/tutorial.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) {