Merge pull request #2101 from craigcook/bug-1014845-net-neutrality-home-promo

Fix bug 1014845 - Net neutrality home page promo

bedrock/mozorg/templates/mozorg/home.html

@@ -60,7 +60,20 @@
     <ul class="accordion">
 
 {# Position 1: "Shape Environments" #}
-    {% if l10n_has_tag('promo_webwewant') or settings.DEV %}
+    {% if request.locale == 'en-US' or settings.DEV %}
+      <li id="panel-netneutrality" class="panel" tabindex="0">
+        <h2 class="panel-title">{{ _('Protect net neutrality') }}</h2>
+        <div class="panel-inner">
+          <div class="panel-content">
+            <a href="https://sendto.mozilla.org/page/s/protect-net-neutrality" rel="external">
+              <h3>{{ _('Stand with Mozilla') }}</h3>
+              <p>{{ _('Tell U.S. Congress to protect a level playing field on the open Web, now and forever.') }}</p>
+              <p class="go">{{ _('Write to your legislator') }}</p>
+            </a>
+          </div>
+        </div>
+      </li>
+    {% elif l10n_has_tag('promo_webwewant') or settings.DEV %}
       <li id="panel-webwewant" class="panel" tabindex="0">
         <h2 class="panel-title">{{ _('The Web needs you') }}</h2>
         <div class="aurora"></div>

media/css/mozorg/home-ie.less

@@ -114,6 +114,10 @@
     }
 }
 
+#panel-netneutrality {
+    background-position: 0 -30px;
+}
+
 #firefox-promo {
     .container {
         overflow: hidden;

media/css/mozorg/home-ie8.less

@@ -139,4 +139,9 @@
     #panel-worldcup2014 .panel-title {
         background: #2c4721;
     }
+
+    #panel-netneutrality .panel-title {
+        background: #444;
+    }
+
 }

media/css/mozorg/home-ie9.less

@@ -90,6 +90,11 @@
         }
     }
 
+    #panel-netneutrality.expanded,
+    #panel-netneutrality.compressed {
+        background-position: 50px 60px, -660px 0, 0 0;
+    }
+
 }
 
 // @Tablet Layout: 760px
@@ -150,6 +155,11 @@
             }
         }
 
+        #panel-netneutrality.expanded,
+        #panel-netneutrality.compressed {
+            background-position: 20px 60px, -690px 0, 0 0;
+        }
+
     }
 
 }
@@ -234,6 +244,12 @@
         }
     }
 
+    #panel-netneutrality,
+    #panel-netneutrality.expanded,
+    #panel-netneutrality.compressed {
+        background-position: 12px 20px, -640px 0, 0 0;
+    }
+
 }
 
 // @Wide @mobile layout: 480px
@@ -312,5 +328,11 @@
         }
     }
 
+    #panel-netneutrality,
+    #panel-netneutrality.expanded,
+    #panel-netneutrality.compressed {
+        background-position: 15px 20px, -640px 0, 0 0;
+    }
+
 }
 

media/css/mozorg/home-promo.less

@@ -341,6 +341,35 @@
 
 
 
+/****************************************************************************/
+// Net Neutrality
+#panel-netneutrality {
+    background: #666 url(/media/img/home/panel/netneutrality/bg-flat.jpg) no-repeat;
+    background: url(/media/img/home/panel/netneutrality/protect-net-neutrality.png) 50px 60px no-repeat,
+                url(/media/img/home/panel/netneutrality/bg-lanes.png) -660px 0 no-repeat,
+                #666 url(/media/img/home/panel/netneutrality/bg-gradient.png) repeat-x;
+
+    &.expanded {
+        background-position: 0 0;
+        background-position: 80px 60px, -540px 0, 0 0;
+    }
+
+    &.compressed {
+        background-position: 0 0;
+        background-position: 10px 60px, -700px 0, 0 0;
+    }
+
+}
+
+.wide #panel-netneutrality .panel-title {
+    background: #444;
+    background: rgba(0, 0, 0, .8);
+    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .8) 65%, rgba(0, 0, 0, 0) 100%);
+    background:         linear-gradient(to top, rgba(0, 0, 0, .8) 65%, rgba(0, 0, 0, 0) 100%);
+}
+
+
+
 /****************************************************************************/
 // @High resolution images for @retina-type displays
 // Desktop
@@ -377,6 +406,13 @@
         background-size: 360px 360px, auto auto;
     }
 
+    #panel-netneutrality {
+        background-image: url(/media/img/home/panel/netneutrality/protect-net-neutrality-hires.png),
+                          url(/media/img/home/panel/netneutrality/bg-lanes.png),
+                          url(/media/img/home/panel/netneutrality/bg-gradient.png);
+        background-size: 140px 190px, auto auto, auto auto;
+    }
+
 }
 
 
@@ -533,6 +569,22 @@
         }
     }
 
+    // Net Neutrality
+    #panel-netneutrality {
+        background-position: 0 0;
+        background-position: 20px 60px, -690px 0, 0 0;
+
+        &.expanded {
+            background-position: 0 0;
+            background-position: 40px 60px, -580px 0, 0 0;
+        }
+
+        &.compressed {
+            background-position: 0 0;
+            background-position: -10px 60px, -700px 0, 0 0;
+        }
+    }
+
 }
 
 /****************************************************************************/
@@ -756,6 +808,23 @@
         }
     }
 
+    // Net Neutrality
+    #panel-netneutrality {
+        background-position: 0 0;
+        background-position: 12px -40px, -640px -40px, 0 0;
+        background-size: 90px 122px, auto auto, auto auto;
+
+        &.expanded {
+            background-position: 0 0;
+            background-position: 12px 20px, -640px 0, 0 0;
+        }
+
+        &.compressed {
+            background-position: 0 0;
+            background-position: 12px -50px, -640px -80px, 0 0;
+        }
+    }
+
 }
 
 
@@ -932,6 +1001,23 @@
         }
     }
 
+    // Net Neutrality
+    #panel-netneutrality {
+        background-position: 0 0;
+        background-position: 15px -100px, -640px -40px, 0 0;
+        background-size: auto auto;
+
+        &.expanded {
+            background-position: 0 0;
+            background-position: 15px 20px, -640px 0, 0 0;
+        }
+
+        &.compressed {
+            background-position: 0 0;
+            background-position: 15px -120px, -640px -80px, 0 0;
+        }
+    }
+
 }
 
 /****************************************************************************/
@@ -984,4 +1070,9 @@
         background-size: 180px 185px, auto auto;
     }
 
+    #panel-netneutrality {
+        background-size: auto auto;
+        background-size: 140px 190px, auto auto, auto auto;
+    }
+
 }

media/css/mozorg/home.less

@@ -19,9 +19,8 @@
 }
 
 // Add a double-arrow after 'go' links
-.go:after {
-    content: ' »';
-    white-space: nowrap;
+.go {
+    .trailing-arrow();
 }
 
 // A few styles for non-JS browsers
@@ -184,15 +183,12 @@
     bottom: 0;
     left: -5px;
     z-index: 6;
+    .trailing-arrow();
 
     i {
         font-style: normal;
     }
 
-    &:after {
-        content: ' »';
-        white-space: nowrap;
-    }
 }
 
 // An inner wrapper mostly useful as an overlay for background effects.

media/css/sandstone/lib.less

@@ -319,7 +319,7 @@
 
 .trailing-arrow() {
     &:after {
-        content: " »"; /* nbsp raquo */
+        content: "\00A0\00BB"; /* nbsp raquo */
         white-space: nowrap;
     }
 }