use background contain for feedapp previews (bug 1029765)

mozilla · Jun 25, 2014 · 5c95057 · cvan · Jun 25, 2014 · cvan
1 parent fd1a874
commit 5c95057
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 12 deletions.
diff --git a/hearth/media/css/feed.styl b/hearth/media/css/feed.styl
@@ -111,22 +111,13 @@ $vertical-tile-margin = 10px;
         .desc {
             margin: -20px 0 0;
             padding: 15px 0 0;
-
-            + img {
-                margin-top: 10px;
-            }
         }
         .feed-app-preview-container {
             border-radius: 0 0 5px 5px;
             overflow: hidden;
             margin: 15px 0 -16px -10px;
             height: 150px;
             width: $mobile-tile-width;
-
-            .feed-app-preview {
-                width: 100%;
-                height: auto;
-            }
         }
     }
     .tile-footer {

diff --git a/hearth/templates/_macros/market_tile.html b/hearth/templates/_macros/market_tile.html
@@ -116,9 +116,12 @@ <h3 class="elliflow" itemprop="name">{{ app.name|translate(app) }}</h3>
       {% if feed_app.description %}
         <p class="desc">{{ feed_app.description }}</p>
       {% endif %}
-      <div class="feed-app-preview-container">
-        <img class="feed-app-preview" src="{{ feed_app.preview.image_url }}">
-      </div>
+      <div class="feed-app-preview-container"
+           style="background-color: {{ feed_app.background_color }};
+                  background-image: url({{ feed_app.preview.image_url }});
+                  background-position: center center;
+                  background-repeat: no-repeat;
+                  background-size: contain;"></div>
     {% endif %}
   </div>
 {% endmacro %}