Merge pull request #67 from jostw/josyeh/Marketplace/master/Bug1265664

Bug 1265664 - Move app name outside of app button
mozilla-b2g · May 6, 2016 · 3644011 · 3644011
2 parents 0d71167 + 60c32b9
commit 3644011
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 47 deletions.
diff --git a/src/media/css/app-list.styl b/src/media/css/app-list.styl
@@ -18,11 +18,11 @@
     ul {
         display: flex;
         flex-wrap: wrap;
-        padding: rem(3.1) rem(11.6);
+        padding: rem(12 - (3 + 2)) rem(11.6) rem(3 + 2);
     }
 
     li {
-        margin: rem(2.9) rem(2.6);
+        margin: rem(3 + 2) rem(2.6) rem(12 - (3 + 2));
 
         list-style: none;
 
@@ -38,6 +38,8 @@
     }
 
     .app-button {
+        position: relative;
+
         width: auto;
         height: @width;
 
@@ -50,12 +52,38 @@
         &.focused {
             transform: scale(1.2);
             cursor: pointer;
+
+            .name {
+                bottom: - rem(.8 + 2 + 2);
+            }
         }
 
         &.pressed {
             transform: scale(1);
+
+            .name {
+                bottom: - rem(1 + 2 + 2);
+            }
         }
     }
+
+    .name {
+        position: absolute;
+        bottom: - rem(3 + 2);
+
+        width: 100%;
+        overflow: hidden;
+
+        font-size: rem(1.8);
+        line-height: rem(2);
+        text-align: center;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        color: $main-font-color;
+
+        cubic-bezier-transition();
+    }
 }
 
 .app-list-app {
@@ -96,27 +124,6 @@
         background-color: $greyscale-light-grey;
         background-size: cover;
         background-position: center center;
-
-        &::after {
-            content: attr(data-name);
-            box-sizing: border-box;
-
-            display: block;
-            width: 100%;
-            height: rem(6);
-            margin-top: rem(12.9);
-            padding: rem(1) rem(3) 0;
-            overflow: hidden;
-
-            font-size: rem(1.6);
-            line-height: rem(2.2);
-            text-align: center;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-
-            color: $greyscale-white;
-            background-color: rgba(0, 0, 0, .4);
-        }
     }
 
     .star {
@@ -157,7 +164,7 @@
     @supports (-webkit-appearance:none) {
         +rtl() {
             .star::before {
-                text-indent: rem(-46.75);
+                text-indent: - rem(46.75);
             }
         }
     }

diff --git a/src/media/css/app-preview.styl b/src/media/css/app-preview.styl
@@ -74,7 +74,7 @@ $app-preview-background-color = #72C9B0;
         }
 
         .flag {
-            right: rem(-4);
+            right: - rem(4);
         }
     }
 
@@ -93,7 +93,7 @@ $app-preview-background-color = #72C9B0;
         }
 
         .flag {
-            left: rem(-4);
+            left: - rem(4);
 
             transform: scaleX(-1);
         }
@@ -103,7 +103,7 @@ $app-preview-background-color = #72C9B0;
     @supports (-webkit-appearance:none) {
         +rtl() {
             &::before {
-                text-indent: rem(-43.625);
+                text-indent: - rem(43.625);
             }
         }
     }
@@ -145,7 +145,7 @@ $app-preview-background-color = #72C9B0;
     }
 
     .description {
-        height: rem(3.1) * 6;
+        height: rem(3.1 * 6);
         overflow: hidden;
 
         font-size: rem(2.6);

diff --git a/src/media/css/lib/colors.styl b/src/media/css/lib/colors.styl
@@ -11,6 +11,7 @@ $greyscale-white = #FFF;
 
 // Main.
 $main-background-color = #CBCDCD;
+$main-font-color = #4D4D4D;
 
 // Suggested.
 $suggested-star-color = #E22860;

diff --git a/src/media/css/privacy.styl b/src/media/css/privacy.styl
@@ -6,7 +6,6 @@
 
 $privacy-content-height = rem(70);
 $privacy-background-color = #E0E2E4;
-$privacy-font-color = #4D4D4D;
 $privacy-scrollbar-color = #CACCCE;
 
 .privacy-container {
@@ -20,7 +19,7 @@ $privacy-scrollbar-color = #CACCCE;
 
     width: (161 / 192) * 100%;
 
-    color: $privacy-font-color;
+    color: $main-font-color;
 }
 
 .privacy-content {
@@ -60,7 +59,7 @@ $privacy-scrollbar-color = #CACCCE;
 
         font-weight: bold;
 
-        color: $privacy-font-color;
+        color: $main-font-color;
 
         cubic-bezier-transition();
 
@@ -72,7 +71,7 @@ $privacy-scrollbar-color = #CACCCE;
     .scrollbar {
         position: absolute;
         top: 0;
-        right: rem(-3);
+        right: - rem(3);
 
         width: rem(2);
         height: $privacy-content-height;

diff --git a/src/media/css/tutorial.styl b/src/media/css/tutorial.styl
@@ -4,7 +4,7 @@
 
 @import 'lib';
 
-$shadow = 0 0 5px rgba(0, 0, 0, .5);
+$shadow = 0 0 5px rgba($greyscale-black, .5);
 
 .tutorial-container {
     full-screen();
@@ -80,7 +80,7 @@ $shadow = 0 0 5px rgba(0, 0, 0, .5);
 
     +ltr() {
         b {
-            text-indent: rem(-.8);
+            text-indent: - rem(.8);
         }
     }
 

diff --git a/src/media/js/routes.js b/src/media/js/routes.js
@@ -11,9 +11,14 @@ define('routes',
         {pattern: '^/tv/?$', view_name: 'homepage'}
     ]);
 
+    if (location.origin.match(/github/)) {
+        router.addRoutes([
+            {pattern: '^/marketplace-tv-front-end/?$', view_name: 'homepage'}
+        ]);
+    }
+
     router.api.addRoutes({
-        // TODO: Update API url after backend is ready.
-        'apps': '/api/v2/tv/multi-search/',
+        'apps': '/api/v2/tv/multi-search/'
     });
 
     // Processors to set query arguments on API requests.

diff --git a/src/media/js/views/homepage.js b/src/media/js/views/homepage.js
@@ -16,19 +16,26 @@ define('views/homepage',
 
         var top = this.offsetTop;
         var height = this.offsetHeight;
-        var margin = 5.8 * 10;
 
-        var appTop = top - margin;
-        var appBottom = top + height + margin * 2/3 - appListHeight;
-        var appHeight = height + margin * 2;
+        var computedStyle = getComputedStyle(this);
+
+        var marginTop = parseInt(computedStyle.marginTop, 10);
+        var marginBottom = parseInt(computedStyle.marginBottom, 10);
+
+        var appTop = top - marginTop;
+        var appBottom = top + height + marginBottom * 1.5 - appListHeight;
+        var appHeight = height + marginTop + marginBottom;
 
         var newPosition;
 
-        if (appListHeight < appHeight) {
+        if (appListScrollTop === 0) {
+            newPosition = appTop;
+        } else if (appListHeight < appHeight) {
             // Current scope height is too narrow.
             // Scroll to the center of the app.
-            newPosition = appTop + (appHeight - appListHeight) / 2;
-        } else if (appListScrollTop >= appTop) {
+            newPosition = top - (marginTop + marginBottom) / 2 +
+                          (appHeight - appListHeight) / 2;
+        } else if (appListScrollTop > appTop) {
             // App is above current scope.
             newPosition = appTop;
         } else if (appListScrollTop < appBottom) {

diff --git a/src/templates/homepage.html b/src/templates/homepage.html
@@ -7,17 +7,16 @@
         <li class="smart-button app-button focusable" data-id="{{ app.id }}">
           <div class="app-list-app">
             {% if app.icons['336'] %}
-              <div class="icon" data-name="{{ app.name }}"
-                   style="background-image: url('{{ app.icons['336'] }}');"></div>
+              <div class="icon" style="background-image: url('{{ app.icons['336'] }}');"></div>
             {% elif app.icons['128'] %}
-              <div class="icon" data-name="{{ app.name }}"
-                   style="background-image: url('{{ app.icons['128'] }}');"></div>
+              <div class="icon" style="background-image: url('{{ app.icons['128'] }}');"></div>
             {% endif %}
 
             {% if app.tv_featured %}
               <span class="star" data-icon="bookmark-on"></span>
             {% endif %}
           </div>
+          <span class="name">{{ app.name }}</span>
         </li>
       {% endfor %}
     </ul>