Merge pull request #1539 from jpetto/bug-941185-replace-vtcs-with-fxo…

…s-promo

Replace VTCS home promo with Fx OS promo. Bug 941185.

bedrock/mozorg/templates/mozorg/home.html

@@ -120,31 +120,6 @@ <h3>{{ _('Our principles guide us') }}</h3>
       </li>
     {% endif %}
 
-    {% if l10n_has_tag('promo_surfing') or settings.DEV %}
-      <li id="panel-vans" class="panel" tabindex="0">
-        {# L10n: The active word should be wrapped in <i></i> tags, though it may appear at a different position in the translated title. #}
-        <h2 class="panel-title">{{ _('<i>Stream</i> the surf') }}</h2>
-        <div class="panel-inner">
-          <div class="panel-content">
-            {% if request.locale in ['pt-BR'] %}
-            <a href="https://blog.mozilla.org/press-br/2013/11/12/viva-o-que-voce-ama-mozilla-firefox-e-vans-triple-crown-of-surfing/" hreflang="pt-BR">
-            {% elif request.locale in ['es-AR', 'es-CL', 'es-ES', 'es-MX'] %}
-            <a href="https://blog.mozilla.org/press-latam/2013/11/12/vive-lo-que-usted-ama-mozilla-firefox-y-el-vans-triple-crown-de-surfing/" hreflang="es-ES">
-            {% else %}
-            <a href="https://blog.mozilla.org/blog/2013/11/12/live-what-you-love-mozilla-firefox-the-vans-triple-crown-of-surfing" hreflang="en-US">
-            {% endif %}
-              <div class="angle">
-                <div class="content">
-                  <h3>{{ _('Stream the surf') }}</h3>
-                  <p>{{ _('Firefox connects you to the Vans Triple Crown of Surfing and all the things you love. Don‘t miss a second of the action from Hawaii, Nov. 12—Dec. 20.') }}</p>
-                  <p class="go">{{ _('Learn more') }}</p>
-                </div>
-              </div>
-            </a>
-          </div>
-        </div>
-      </li>
-    {% else %}
       <li id="panel-fxos" class="panel" tabindex="0">
         {# L10n: The active word should be wrapped in <i></i> tags, though it may appear at a different position in the translated title. #}
         <h2 class="panel-title">{{ _('<i>Look</i> ahead') }}</h2>
@@ -158,7 +133,6 @@ <h3>{{ _('Look ahead') }}</h3>
           </div>
         </div>
       </li>
-    {% endif %}
 
     {#
       Restricted to DEV for localization. Another PR will be issued to
@@ -252,7 +226,7 @@ <h3>{{ _('<i>Support</i> Mozilla')|striptags }}</h3>
           </div>
         </div>
       </li>
-    {% elif l10n_has_tag('promo_surfing') or settings.DEV %}
+    {% elif l10n_has_tag('promo_webmaker') or settings.DEV %}
       <li id="panel-webmaker" class="panel" tabindex="0">
         {# L10n: The active word should be wrapped in <i></i> tags, though it may appear at a different position in the translated title. #}
         <h2 class="panel-title">{{ _('<i>Learn</i> the Web') }}</h2>

media/css/mozorg/home-ie.less

@@ -62,14 +62,6 @@
     }
 }
 
-// make sure .angle div doesn't expand outside of the .panel
-#panel-vans {
-    .angle {
-        width: auto;
-        height: auto;
-    }
-}
-
 .panel-content,
 .js .panel-content {
     position: relative;

media/css/mozorg/home-promo.less

@@ -83,60 +83,6 @@
     background:         linear-gradient(bottom, rgba(0, 84, 160, .8) 65%, rgba(0, 84, 160, 0) 100%);
 }
 
-
-
-/****************************************************************************/
-// Vans Triple Crown Surfing
-#panel-vans {
-    background: #159391 url(/media/img/home/panel/vans/bg-vtcs-en.jpg) -35px 0 no-repeat;
-
-    // These are presentational wrappers
-    .angle {
-        background: #159391;
-        height: 100%;
-        margin: -50% -50% -50% -25px;
-        padding: 50% 50% 50% 25px;
-        width: 100%;
-        .transform(rotate(5deg));
-
-        .content {
-            .transform(rotate(-5deg));
-        }
-    }
-
-    &.expanded {
-        background-position: -20px 0;
-    }
-
-    &.compressed {
-        background-position: -50px 0;
-    }
-}
-
-.wide #panel-vans .panel-title {
-    background: #159391;
-    background: rgba(21, 147, 145, .8);
-    background: -webkit-linear-gradient(bottom, rgba(21, 147, 145, .8) 65%, rgba(21, 147, 145, 0) 100%);
-    background:    -moz-linear-gradient(bottom, rgba(21, 147, 145, .8) 65%, rgba(21, 147, 145, 0) 100%);
-    background:      -o-linear-gradient(bottom, rgba(21, 147, 145, .8) 65%, rgba(21, 147, 145, 0) 100%);
-    background:         linear-gradient(bottom, rgba(21, 147, 145, .8) 65%, rgba(21, 147, 145, 0) 100%);
-}
-
-// A different image for Brazilian Portuguese
-.lang-pt-BR #panel-vans {
-    background-image: url(/media/img/home/panel/vans/bg-vtcs-pt.jpg);
-}
-
-// A different image for Spanish
-.lang-es-AR #panel-vans,
-.lang-es-CL #panel-vans,
-.lang-es-ES #panel-vans,
-.lang-es-MX #panel-vans {
-    background-image: url(/media/img/home/panel/vans/bg-vtcs-es.jpg);
-}
-
-
-
 /****************************************************************************/
 // MDN
 #panel-mdn {
@@ -473,33 +419,6 @@
         }
     }
 
-    // Vans Triple Crown
-    #panel-vans {
-        background-image: url(/media/img/home/panel/vans/bg-vtcs-en-md.jpg);
-        background-position: -30px 0;
-
-        &.expanded {
-            background-position: -20px 0;
-        }
-
-        &.compressed {
-            background-position: -35px 0;
-        }
-    }
-
-    // A different image for Brazilian Portuguese
-    .lang-pt-BR #panel-vans {
-        background-image: url(/media/img/home/panel/vans/bg-vtcs-pt-md.jpg);
-    }
-
-    // A different image for Spanish
-    .lang-es-AR #panel-vans,
-    .lang-es-CL #panel-vans,
-    .lang-es-ES #panel-vans,
-    .lang-es-MX #panel-vans {
-        background-image: url(/media/img/home/panel/vans/bg-vtcs-es-md.jpg);
-    }
-
     // MDN
     #panel-mdn {
         background-position: -100px -5px;
@@ -660,36 +579,6 @@
         }
     }
 
-
-    // Vans Triple Crown Surfing
-    .accordion #panel-vans {  // higher specificity to override locale
-        background-image: url(/media/img/home/panel/vans/bg-vtcs-sm.png);
-        background-position: -50px -145px;
-
-        .angle {
-            background: transparent;
-            margin: 0;
-            padding: 0;
-            width: auto;
-            height: auto;
-            .transform(none);
-
-            .content {
-                .transform(none);
-            }
-        }
-
-        &.expanded {
-            background-position: -50px -60px;
-        }
-
-        &.compressed {
-            background-position: -50px -160px;
-        }
-
-    }
-
-
     // MDN
     #panel-mdn {
         background-image: url(/media/img/home/panel/mdn/bg-logo-mdn-sm.png);
@@ -890,21 +779,6 @@
         }
     }
 
-
-    // Vans Triple Crown Surfing
-    .accordion #panel-vans { // higher specificity to override locale
-        background-position: -15px -140px;
-
-        &.expanded {
-            background-position: -15px -70px;
-        }
-
-        &.compressed {
-            background-position: -15px -160px;
-        }
-
-    }
-
     //MDN
     #panel-mdn {
         background-position: 10px -20px;