Merge pull request #2983 from schalkneethling/bug1164572-update-logo-…

…and-header-wom

Fix Bug 1164572, add higher res hero image and SVG logo with fallback

bedrock/mozorg/templates/mozorg/contribute/friends.html

@@ -20,7 +20,7 @@
 {% block contrib_page_title %}{{ _('Join Firefox Friends today!') }}{% endblock %}
 
 {% block alt_header %}
-<img src="{{ static('img/contribute/friends/firefox-friends-logo.png') }}" width="186" class="ff-logo" alt="{{_('Firefox Friends logo')}}" />
+<img src="{{ static('img/contribute/friends/firefox-friends-logo.svg') }}" width="186" class="ff-logo" data-png="{{ static('img/contribute/friends/firefox-friends-logo.png') }}" data-fallback="true" alt="{{_('Firefox Friends logo')}}" />
 <div class="ff-header-content">
   <h1>{{_('Join Firefox Friends today!')}}</h1>
   <p>{{_('Step to the frontline to help us tell the world how awesome Firefox is and about all the important work Mozilla does every day.')}}</p>
@@ -52,3 +52,7 @@ <h3 class="rewarded">{{_('Get rewarded')}}</h3>
 {% endblock contrib_content %}
 
 {% block contrib_footer %}{% endblock contrib_footer %}
+
+{% block site_js %}
+  {% javascript 'contribute-friends' %}
+{% endblock %}

bedrock/settings/static_media.py

@@ -970,6 +970,13 @@
         ),
         'output_filename': 'js/contribute-form-bundle.js',
     },
+    'contribute-friends': {
+        'source_filenames': (
+            'js/libs/jquery-1.11.0.min.js',
+            'js/mozorg/contribute/friends.js',
+        ),
+        'output_filename': 'js/contribute-friends-bundle.js'
+    },
     'contribute-studentambassadors-landing': {
         'source_filenames': (
             'js/base/social-widgets.js',

media/css/mozorg/contribute/friends.less

@@ -10,7 +10,7 @@
         width: 100%;
     }
     #masthead {
-        background: #373737 url(/media/img/contribute/friends/header-img-wide.jpg) 50% 0 no-repeat;
+        background: #373737 url(/media/img/contribute/friends/hero-image-home.jpg) 50% 0 no-repeat;
         padding: 0 180px;
         width: 100%;
         .border-box();
@@ -24,6 +24,7 @@
         }
 
         @media only screen and (max-width: @breakMobileLandscape) {
+            background-image: url(/media/img/contribute/friends/hero-image-home-mobile.jpg);
             padding: 0 20px;
         }
     }

media/js/mozorg/contribute/friends.js

@@ -0,0 +1,13 @@
+$(function() {
+
+    function supportsSVG() {
+        return document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1');
+    }
+
+    // fallback to .png for browsers that don't support .svg as an image.
+    if (!supportsSVG()) {
+        $('img[src*="svg"][data-fallback="true"]').attr('src', function() {
+            return $(this).attr('data-png');
+        });
+    }
+});