fix Learn More button on discopane details pages (bug 712878)

apps/discovery/templates/discovery/pane.html

@@ -77,8 +77,8 @@ data-upandcoming-url="{{ services_url('discovery.pane.more_addons', 'up-and-comi
       </div>
     </section>
 
-    <div class="watch-video">
-        <a href="{{ url('home') }}" class="video button">{{ _('Learn More About Add-ons') }}</a>
+    <div id="watch-video">
+      <a href="{{ url('home') }}" class="video button">{{ _('Learn More About Add-ons') }}</a>
     </div>
   </section>
 

media/css/zamboni/discovery-pane.css

@@ -1616,21 +1616,18 @@ body.eula #main {
 
 /* Add-on Video */
 #intro #learn-more.video,
-#main .watch-video a {
-    background-color: #FFFFFF;
-    background-image: url("../../img/zamboni/discovery_pane/video.png");
-    background-position: 6px center;
-    background-repeat: no-repeat;
-    box-shadow: 0 -2px rgba(0, 0, 0, 0.1) inset;
+#main #watch-video a {
+    background: #fff url(../../img/zamboni/discovery_pane/video.png) 6px 50% no-repeat;
+    box-shadow: 0 -2px rgba(0,0,0,0.1) inset;
     padding-left: 47px;
 }
-.watch-video {
+#watch-video {
     display: none;
     margin-bottom: 8px;
     padding: 10px;
     text-align: center;
 }
-.watch-video a {
+#watch-video a {
     padding: 8px 10px 8px 50px;
 }
 #main #promos.js.show-video {
@@ -1653,9 +1650,7 @@ body.eula #main {
 }
 
 #video-details {
-    background-image: url("../../img/illustrations/hug.png");
-    background-position: center 12px;
-    background-repeat: no-repeat;
+    background: url(../../img/illustrations/hug.png) 50% 12px no-repeat;
     color: #666;
     line-height: 1.6em;
     padding: 115px 1em 1em;

media/js/zamboni/discovery_pane.js

@@ -253,8 +253,8 @@ function initRecs() {
 $(function() {
     if(!location.href.match(/en-US/)) return; // US only!
 
-    var $learn = $('#learn-more'),
-        $watch = $('.watch-video'),
+    var $learn = $('#intro #learn-more'),
+        $watch = $('#watch-video'),
         $watch_link = $watch.find('a');
 
     // Make the video clean up after itself.
@@ -263,7 +263,7 @@ $(function() {
         $learn.text($learn.attr('data-oldtext'));
         $watch_link.text($watch_link.attr('data-oldtext'));
         if ($('#intro').is(':hidden')) {
-            $('.watch-video').show();
+            $watch.show();
         }
         $('#sub > section').show();
         $('#promo-video-addons').hide();
@@ -292,7 +292,7 @@ $(function() {
         $watch.show();
     }
 
-    $('#learn-more, .watch-video:visible a').show().addClass('video').click(_pd(function() {
+    $('#intro #learn-more, #watch-video:visible a').show().addClass('video').click(_pd(function() {
         if ($('#main .promo-video:visible').length) {
             cleanupVideo();
             return;
@@ -473,7 +473,7 @@ $(function() {
         }
     }));
 
-    $('.watch-video').click(_pd(function(){
+    $watch.click(_pd(function(){
         $('body, html').animate({'scrollTop': 0});
     }));
 });