Merge pull request #888 from webcompat/contributors-page

Issue #855 - Layout broken on contributors page

Author: Mike Taylor

tests/functional/contributors-non-auth.js

@@ -38,7 +38,7 @@ define([
           assert.notInclude('is-open', className);
         })
         .end()
-        .findByCssSelector('.wc-Hero-img').getAttribute('class')
+        .findByCssSelector('.wc-Hero-SVG').getAttribute('class')
         .then(function(className) {
           assert.notEqual('is-active', className);
         })
@@ -54,7 +54,7 @@ define([
           assert.equal(isDisplayed, true);
         })
         .end()
-        .findByCssSelector('.wc-Hero-img.is-active').isDisplayed()
+        .findByCssSelector('.wc-Hero-SVG.is-active').isDisplayed()
         .then(function(isDisplayed) {
           assert.equal(isDisplayed, true);
         })
@@ -66,7 +66,7 @@ define([
           assert.notInclude('is-open', className);
         })
         .end()
-        .findByCssSelector('.wc-Hero-img').getAttribute('class')
+        .findByCssSelector('.wc-Hero-SVG').getAttribute('class')
         .then(function(className) {
           assert.notInclude('is-active', className);
         });
@@ -76,14 +76,14 @@ define([
       return this.remote
         .setFindTimeout(intern.config.wc.pageLoadTimeout)
         .get(require.toUrl(url('/contributors')))
-        .findByCssSelector('.wc-Hero-img.is-active').isDisplayed()
+        .findByCssSelector('.wc-Hero-SVG.is-active').isDisplayed()
         .then(function(isDisplayed) {
           assert.equal(isDisplayed, true);
         })
         .end()
         .findByCssSelector('.contributors__item__title').click()
         .end()
-        .findByCssSelector('.wc-Hero-img').getAttribute('class')
+        .findByCssSelector('.wc-Hero-SVG').getAttribute('class')
         .then(function(className) {
           assert.notInclude('is-active', className);
         });

webcompat/static/css/development/components/hero.css

@@ -122,12 +122,8 @@
   .wc-Hero--contributors .wc-Hero-light {
     height:15em;
   }
-
-    .wc-Hero--contributors .wc-Hero-lightFilament {
-      fill : #F0F0F0;
-    }
       /* is-active */
-      .wc-Hero-img.is-active .wc-Hero-lightFilament {
+      .wc-Hero-SVG.is-active .wc-Hero-lightFilament {
         fill: #E4BD0C;
       }
   @media (--viewport-600px) {

webcompat/templates/contributors.html

@@ -5,11 +5,15 @@
 <main role="main">
   <div class="wc-Hero wc-Hero--contributors">
     <div class="wc-content">
-      <div class="wc-Hero-section wc-Hero-section--left wc-Hero-section--contributors">
-        <h1 class="wc-Hero-title wc-Title--xl">Welcome aboard!<br/>Get started below...</h1>
-      </div>
-      <div class="wc-Hero-section wc-Hero-section--right">
-        <div class="wc-Hero-img is-active">{% include "shared/LightbulbwithBug.svg" %}</div>
+      <div class="wc-Hero-wrapper">
+        <div class="wc-Hero-section wc-Hero-section--left wc-Hero-section--home ">
+          <h1 class="wc-Hero-title wc-Title--xl">Welcome aboard!<br/>Get started below...</h1>
+        </div>
+        <div class="wc-Hero-section wc-Hero-section--right">
+          <div class="wc-Hero-SVG is-active">
+            {% include "shared/LightbulbwithBug.svg" %}
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -77,7 +81,7 @@ <h2 id="contribute">
 {%- block extrascripts -%}
 <script>
 $(function(){
-  var lightElm     = $('.wc-Hero-img');
+  var lightElm     = $('.wc-Hero-SVG');
   var sections     = $('.contributors__item__content');
   var ACTIVE_CLASS = 'is-active';
   var OPEN_CLASS   = 'is-open';