Merge pull request #54 from jostw/josyeh/Marketplace/master/Bug1250053

Bug 1250053 - [TV][Marketplace] Revise Marketplace FTE

gulpfile.js

@@ -27,7 +27,7 @@ var packageFilesWhitelist = [
     'src/index.html',
     'src/app-icons/*.png',
     'src/media/css/include.css',
-    'src/media/fonts/FiraSans/firasansot-regular-webfont.*',
+    'src/media/fonts/FiraSans/*',
     'src/tutorial/*',
     'src/tutorial/css/*',
     'src/tutorial/img/*',

locale/en_US/LC_MESSAGES/messages.po

@@ -26,6 +26,10 @@ msgstr "by {author}"
 msgid "URL"
 msgstr "URL"
 
+#: /templates/tutorial.html
+msgid "Learn how to use"
+msgstr "Learn how to use"
+
 #: /templates/tutorial.html
 msgid "Press <b>OK</b> to open and use an app"
 msgstr "Press <b>OK</b> to open and use an app"

src/media/css/lib/typography.styl

@@ -1,2 +1,3 @@
 // Font Stacks
 $primary-font-family = "Fira Sans OT", "Fira Sans", FiraSansWeb, sans-serif;
+$light-font-family = "Fira Sans OT Light", "Fira Sans Light", FiraSansLightWeb, sans-serif;

src/media/css/tutorial.styl

@@ -61,7 +61,7 @@
     height: 200px;
     margin: -100px 0 0 -100px;
 
-    background-image: url('../img/pinner_sprite.png');
+    background-image: url('../img/spinner_sprite.png');
 
     animation: spinner 1.133s steps(33) infinite;
 }
@@ -75,28 +75,38 @@
 }
 
 .slide-section-top {
-    top: 8%;
-
     width: 150rem;
-    height: 8rem;
-    margin-top: -5rem;
 
-    font-size: 3.8rem;
     font-style: italic;
-    line-height: 8rem;
     text-align: center;
     text-shadow: 0 0 5px rgba(0, 0, 0, .5);
 
     color: $greyscale-white;
 
+    .title {
+        height: 5.5rem;
+        margin: 7.5rem 0 6.5rem;
+
+        font-family: $light-font-family;
+        font-size: 5.5rem;
+        line-height: 5.5rem;
+    }
+
+    .description {
+        height: 8rem;
+
+        font-size: 3.8rem;
+        line-height: 8rem;
+    }
+
     b {
         display: inline-block;
         margin: 0 .5rem;
         padding: 0 4rem;
         border-radius: 4rem;
         box-shadow: 0 0 5px rgba(0, 0, 0, .5);
 
-        font-size: 4.5rem;
+        font-size: 3.8rem;
         font-weight: normal;
         text-indent: -.8rem;
         text-align: center;
@@ -111,55 +121,38 @@
 
     .circle {
         position: absolute;
-        top: 50%;
+        top: (53.1 / 108) * 100%;
         left: 50%;
 
-        width: 21.8rem;
-        height: 21.8rem;
-        margin: -10.9rem 0 0 -10.9rem;
-        padding: 4.5rem 0;
+        width: 17.5rem;
+        height: 17.5rem;
+        margin-left: -8.75rem;
         border-radius: 50%;
 
-        font-size: 1.9rem;
+        font-size: 1.5rem;
         font-style: italic;
-        line-height: 2.5rem;
+        line-height: 1.5rem;
         text-align: center;
 
-        color: $greyscale-black;
+        color: $greyscale-white;
         background-color: $greyscale-white;
 
         &::before {
             content: '';
 
             display: block;
-            width: 9rem;
-            height: 9rem;
-            margin: 0 auto 1.3rem;
+            width: 7.2rem;
+            height: 7.2rem;
+            margin: 5.15rem auto 6.65rem;
 
             background-image: url('../img/tutorial_install.png');
+            background-size: 100% 100%;
         }
     }
-
-    .text {
-        position: absolute;
-        top: 2.5%;
-        left: 50%;
-
-        width: 50rem;
-        margin: 16.875rem 0 0 -25rem;
-
-        font-size: 4.2rem;
-        font-style: italic;
-        line-height: 4.2rem;
-        text-align: center;
-
-        color: $greyscale-white;
-    }
 }
 
 .slide-section-bottom {
-    bottom: 7.5%;
-    margin-bottom: -2.625rem;
+    bottom: 6rem;;
 }
 
 .slide-image {

src/media/css/typography.styl

@@ -9,3 +9,15 @@
     font-family: FiraSansWeb;
     font-weight: 400;
 }
+
+@font-face {
+    src: local('FiraSansOTLight'),
+         local('FiraSansLight'),
+         local('Fira Sans OT Light'),
+         local('Fira Sans Light'),
+         url('../fonts/FiraSans/firasansot-light-webfont.woff') format('woff'),
+         url('../fonts/FiraSans/firasansot-light-webfont.ttf') format('truetype'),
+         url('../fonts/FiraSans/firasansot-light-webfont.svg#fira_sans_otlight') format('svg');
+    font-family: FiraSansLightWeb;
+    font-weight: 300;
+}

src/templates/tutorial.html

@@ -2,12 +2,13 @@
   {% for i in range(1, 4) %}
     <div class="slide {% if i > 1 %} hidden {% else %} invisible {% endif %}">
       <div class="slide-section-top">
+        <div class="title">{{ _('Learn how to use') }}</div>
         {% if i == 1 %}
-          <span>{{ _('Press <b>OK</b> to open and use an app') }}</span>
+          <div class="description">{{ _('Press <b>OK</b> to open and use an app') }}</div>
         {% elif i == 2 %}
-          <span>{{ _('Press <b>OPTION</b> to add an app to the Apps folder') }}</span>
+          <div class="description">{{ _('Press <b>OPTION</b> to add an app to the Apps folder') }}</div>
         {% elif i == 3 %}
-          <span>{{ _('Press <b>APPS</b> to see apps added to the Apps folder') }}</span>
+          <div class="description">{{ _('Press <b>APPS</b> to see apps added to the Apps folder') }}</div>
         {% endif %}
       </div>
 
@@ -17,8 +18,6 @@
           <div class="circle">
             <span>{{ _('Add to Apps') }}</span>
           </div>
-        {% elif i == 3 %}
-          <span class="text">{{ _('Apps') }}</span>
         {% endif %}
       </div>