fix ugly video preview on detail page (bug 761275)

mozilla · Jun 5, 2012 · 7798569 · 7798569
1 parent 8db4ccb
commit 7798569
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/media/css/mkt/detail.less b/media/css/mkt/detail.less
@@ -223,16 +223,25 @@ h1 .num {
         padding: 0;
         a {
             .border-box;
+            background: @black;
             display: block;
             .border-radius(3px);
-            .box-shadow(0 1px 2px #000);
-            width: 216px;
+            .box-shadow(0 1px 2px @black);
             height: 166px;
-            background: white;
             padding: 8px;
+            position: relative;
             margin: 0 16px;
-            img {
+            width: 216px;
+            .img {
+                background-position: 50% 50%;
+                background-repeat: no-repeat;
+                background-size: contain;
                 display: block;
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
                 margin: auto;
                 max-height: 150px;
                 text-align: center;

diff --git a/mkt/detail/templates/detail/app.html b/mkt/detail/templates/detail/app.html
@@ -171,7 +171,7 @@ <h3>{{ _('Developer Comments') }}</h3>
             <li>
               <a class="screenshot thumbnail{{ ' video' if preview.filetype == 'video/webm' }}"
                  href="{{ preview.image_url }}" title="{{ preview.caption }}">
-                <img src="{{ preview.thumbnail_url }}">
+                <div class="img" style="background-image:url({{ preview.thumbnail_url }})"></div>
               </a>
             </li>
           {%- endfor -%}