moved promo controls to match mocks (bug 659083)

apps/addons/templates/addons/impala/home.html

@@ -27,16 +27,18 @@
 </section>
 
 <section class="primary" id="homepage">
-  <div id="promos" class="island" data-promo-url="{{ url('addons.homepage_promos') }}">
-    <ul class="slider">
-      <li class="panel">
-        <div id="starter" class="promo feature collection">
-          <h2>What are Add-ons?</h2>
-          <p>lorem ipsum foo bar baz educational content goes here</p>
-        </div>
-      </li>
-    </ul>
-  </div>
+  <section class="island" id="promos" data-promo-url="{{ url('addons.homepage_promos') }}">
+    <div>
+      <ul class="slider">
+        <li class="panel">
+          <div id="starter" class="promo feature collection">
+            <h2>What are Add-ons?</h2>
+            <p>lorem ipsum foo bar baz educational content goes here</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </section>
   <section class="secondary">
     <h2>{{ _('Most Popular') }}
       <a class="seeall" href="{{ url('browse.extensions')|urlparams(sort='popular') }}">{{ _('All »') }}</a>

media/css/impala/promos.less

@@ -7,7 +7,9 @@
     padding: 0;
     width: 100%;
     position: relative;
-    overflow: hidden;
+    div {
+        overflow: hidden;
+    }
 
     .control {
         position: absolute;
@@ -24,8 +26,8 @@
     &:hover .control {
         opacity: 1;
     }
-    .prev { left: 10px; }
-    .next { right: 10px; }
+    .prev { left: -30px; }
+    .next { right: -30px; }
     .control:after {
         background: #fff;
         position: absolute;
@@ -51,11 +53,11 @@
     }
     .prev:after {
         content: '\00ab';
-        left: 0;
+        left: 10px;
     }
     .next:after {
         content: '\00bb';
-        right: 0;
+        right: 10px;
     }
 
     .feature {

media/js/impala/homepage.js

@@ -4,8 +4,8 @@ $(function () {
     $.get(promos_url, function(resp) {
         $('#promos ul').append($(resp));
         $('#promos').append('<a href="#" class="control prev">&laquo;</a>\
-                             <a href="#" class="control next">&raquo;</a>');
-        var $q = $('#promos').zCarousel({
+                                      <a href="#" class="control next">&raquo;</a>');
+        var $q = $('#promos div').zCarousel({
             circular: true,
             btnPrev: $('#promos .prev'),
             btnNext: $('#promos .next')