Fixup CTD landing & update promo link (#14965)

* Fix ctd-promo-de * Fixup and simplify CTD landing * Fix repeated ids * Fix missing fr v6 * Fix mobile escaping * Add a Protocol override note
mozilla · Nov 18, 2024 · b502710 · b502710
1 parent 0f4d04e
commit b502710
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 178 deletions.
diff --git a/bedrock/firefox/templates/firefox/challenge-the-default/includes/toggles.html b/bedrock/firefox/templates/firefox/challenge-the-default/includes/toggles.html
@@ -8,54 +8,54 @@
   <div class="mzp-l-content mzp-l-content mzp-t-content-xl">
     <div class="toggle-grid small">
         {% for element in range(4) %}
-          <label class="toggle" for="toggle-top-{{ loop.index }}">
-            <input type="checkbox" name="toggle" id="toggle-top-{{ loop.index }}" class="toggle-input" tabindex="-1" />
+          <label class="toggle" for="toggle-top-s{{ loop.index }}">
+            <input type="checkbox" name="toggle" id="toggle-top-s{{ loop.index }}" class="toggle-input" tabindex="-1" />
             <span class="toggle-display"></span>
           </label>
         {% endfor %}
-        <label class="toggle middle" for="toggle-middle">
-          <input type="checkbox" name="toggle" id="toggle-middle" class="toggle-input" />
+        <label class="toggle middle" for="toggle-middle-s">
+          <input type="checkbox" name="toggle" id="toggle-middle-s" class="toggle-input" />
           <span class="toggle-display"></span>
         </label>
         {% for element in range(4) %}
-          <label class="toggle" for="toggle-bottom-{{ loop.index }}">
-            <input type="checkbox" name="toggle" id="toggle-bottom-{{ loop.index }}" class="toggle-input" tabindex="-1" />
+          <label class="toggle" for="toggle-bottom-s{{ loop.index }}">
+            <input type="checkbox" name="toggle" id="toggle-bottom-s{{ loop.index }}" class="toggle-input" tabindex="-1" />
             <span class="toggle-display"></span>
           </label>
         {% endfor %}
     </div>
     <div class="toggle-grid medium">
       {% for element in range(7) %}
-      <label class="toggle" for="toggle-top-{{ loop.index }}">
-        <input type="checkbox" name="toggle" id="toggle-top-{{ loop.index }}" class="toggle-input" tabindex="-1" />
+      <label class="toggle" for="toggle-top-m{{ loop.index }}">
+        <input type="checkbox" name="toggle" id="toggle-top-m{{ loop.index }}" class="toggle-input" tabindex="-1" />
         <span class="toggle-display"></span>
       </label>
       {% endfor %}
-      <label class="toggle middle" for="toggle-middle">
-        <input type="checkbox" name="toggle" id="toggle-middle" class="toggle-input" tabindex="-1" />
+      <label class="toggle middle" for="toggle-middle-m">
+        <input type="checkbox" name="toggle" id="toggle-middle-m" class="toggle-input" tabindex="-1" />
         <span class="toggle-display"></span>
       </label>
       {% for element in range(7) %}
-      <label class="toggle" for="toggle-bottom-{{ loop.index }}">
-        <input type="checkbox" name="toggle" id="toggle-bottom-{{ loop.index }}" class="toggle-input" tabindex="-1" />
+      <label class="toggle" for="toggle-bottom-m{{ loop.index }}">
+        <input type="checkbox" name="toggle" id="toggle-bottom-m{{ loop.index }}" class="toggle-input" tabindex="-1" />
         <span class="toggle-display"></span>
       </label>
       {% endfor %}
     </div>
     <div class="toggle-grid large">
       {% for element in range(10) %}
-      <label class="toggle" for="toggle-top-{{ loop.index }}">
-        <input type="checkbox" name="toggle" id="toggle-top-{{ loop.index }}" class="toggle-input" tabindex="-1" />
+      <label class="toggle" for="toggle-top-l{{ loop.index }}">
+        <input type="checkbox" name="toggle" id="toggle-top-l{{ loop.index }}" class="toggle-input" tabindex="-1" />
         <span class="toggle-display"></span>
       </label>
       {% endfor %}
-      <label class="toggle middle" for="toggle-middle">
-        <input type="checkbox" name="toggle-middle" id="toggle-middle" class="toggle-input" tabindex="-1" />
+      <label class="toggle middle" for="toggle-middle-l">
+        <input type="checkbox" name="toggle-middle" id="toggle-middle-l" class="toggle-input" tabindex="-1" />
         <span class="toggle-display"></span>
       </label>
       {% for element in range(10) %}
-      <label class="toggle" for="toggle-bottom-{{ loop.index }}">
-        <input type="checkbox" name="toggle" id="toggle-bottom-{{ loop.index }}" class="toggle-input" tabindex="-1" />
+      <label class="toggle" for="toggle-bottom-l{{ loop.index }}">
+        <input type="checkbox" name="toggle" id="toggle-bottom-l{{ loop.index }}" class="toggle-input" tabindex="-1" />
         <span class="toggle-display"></span>
       </label>
       {% endfor %}

diff --git a/bedrock/firefox/templates/firefox/challenge-the-default/landing-base.html b/bedrock/firefox/templates/firefox/challenge-the-default/landing-base.html
@@ -4,37 +4,19 @@
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-{% extends "base-protocol.html" %}
+{% extends "firefox/base/base-protocol.html" %}
 
 {% from "macros-protocol.html" import picto with context %}
 
 {% block page_title %}{{ ftl('firefox-home-firefox-protect-your') }}{% endblock %}
-
-{% block page_title_suffix %}{{ ftl('firefox-home-mozilla') }}{% endblock %}
-
-{% block page_desc %}
-  {{ seo_desc }}
-{% endblock %}
-{% block page_image %}
-  {% if LANG == "fr" %}
-    {{ static('img/firefox/challenge-the-default/ctd-share-fr.png') }}
-  {% else %}
-    {{ static('img/firefox/challenge-the-default/ctd-share.png') }}
-  {% endif %}
-{% endblock %}
-{% block page_favicon %}{{ static('img/favicons/firefox/favicon.ico') }}{% endblock %}
-{% block page_favicon_large %}{{ static('img/favicons/firefox/favicon-196x196.png') }}{% endblock %}
-{% block page_ios_icon %}{{ static('img/favicons/firefox/apple-touch-icon.png') }}{% endblock %}
+{% block page_title_suffix %} — {{ ftl('firefox-home-mozilla') }}{% endblock %}
+{% block page_desc %}{{ seo_desc }}{% endblock %}
 
 {% block page_css %}
   {{ css_bundle('protocol-picto') }}
   {{ css_bundle('challenge-the-default') }}
 {% endblock %}
 
-
-{% block sub_navigation %}
-{% endblock %}
-
 {% macro cta_group(position) -%}
   <a href="{{ url('firefox.set-as-default.thanks')}}" class="is-not-default mzp-c-button mzp-t-lg" data-cta-text="Set as default" data-cta-position="{{ position }}">{{ cta_default }}</a>
   <a href="{{ url('firefox.browsers.mobile.index') }}" class="is-default mzp-c-button mzp-t-lg" data-cta-text="Firefox for Mobile" data-cta-position="{{ position }}">{{ cta_mobile }}</a>
@@ -46,7 +28,7 @@
   {% if variation not in ["2", "3", "4", "5", "6"] %}
   <div class="ctd-mobile-banner">
     {{ resp_img(
-        url='img/firefox/challenge-the-default/logo-firefox.svg',
+        url='protocol/img/logos/firefox/browser/logo.svg',
         optional_attributes={
           'loading': 'eager',
           'height': '24',
@@ -141,7 +123,7 @@
           <div class="c-hero-top-images">
             {% if variation not in ["2", "3", "4", "5", "6"] %}
               {{ resp_img(
-                url='img/firefox/challenge-the-default/logo-firefox.svg',
+                url='protocol/img/logos/firefox/browser/logo.svg',
                 optional_attributes={
                   'loading': 'eager',
                   'alt': hero_alt,
@@ -213,7 +195,6 @@ <h2>{{ features_head|safe }}</h2>
         )%}
           <p>{{ features_power_body }}</p>
           <small>{{ features_power_small }}</small>
-          </p>
         {% endcall %}
         {% call picto(
           base_el='li',
@@ -261,56 +242,56 @@ <h2>{{ compare_title|safe }}</h2>
           <tbody>
             <tr>
               <th scope="row">{{ compare_passwords }}</th>
-              <td class="firefox" aria-label="checkmark">&#x2713;</td>
-              <td class="safari" aria-label="checkmark">&#x2713;</td>
-              <td class="chrome" aria-label="checkmark">&#x2713;</td>
-              <td class="edge" aria-label="checkmark">&#x2713;</td>
+              <td class="firefox" aria-label="checkmark">✓</td>
+              <td class="safari" aria-label="checkmark">✓</td>
+              <td class="chrome" aria-label="checkmark">✓</td>
+              <td class="edge" aria-label="checkmark">✓</td>
             </tr>
             <tr>
               <th scope="row" class="break-word">{{ compare_search }}</th>
-              <td class="firefox" aria-label="checkmark">&#x2713;</td>
-              <td class="safari" aria-label="checkmark">&#x2713;</td>
-              <td class="chrome" aria-label="checkmark">&#x2713;</td>
-              <td class="edge" aria-label="checkmark">&#x2713;</td>
+              <td class="firefox" aria-label="checkmark">✓</td>
+              <td class="safari" aria-label="checkmark">✓</td>
+              <td class="chrome" aria-label="checkmark">✓</td>
+              <td class="edge" aria-label="checkmark">✓</td>
             </tr>
             <tr>
               <th scope="row">{{ compare_sync }}</th>
-              <td class="firefox" aria-label="checkmark">&#x2713;</td>
-              <td class="safari" aria-label="checkmark">&#x2713;</td>
-              <td class="chrome" aria-label="checkmark">&#x2713;</td>
-              <td class="edge" aria-label="checkmark">&#x2713;</td>
+              <td class="firefox" aria-label="checkmark">✓</td>
+              <td class="safari" aria-label="checkmark">✓</td>
+              <td class="chrome" aria-label="checkmark">✓</td>
+              <td class="edge" aria-label="checkmark">✓</td>
             </tr>
             <tr>
               <th scope="row">{{ compare_block }}</th>
-              <td class="firefox" aria-label="checkmark">&#x2713;</td>
-              <td class="safari" aria-label="checkmark">&#x2713;</td>
+              <td class="firefox" aria-label="checkmark">✓</td>
+              <td class="safari" aria-label="checkmark">✓</td>
               <td class="chrome"></td>
-              <td class="edge" aria-label="checkmark">&#x2713;</td>
+              <td class="edge" aria-label="checkmark">✓</td>
             </tr>
             <tr>
               <th scope="row">{{ compare_profit }}</th>
-              <td class="firefox" aria-label="checkmark">&#x2713;</td>
+              <td class="firefox" aria-label="checkmark">✓</td>
               <td class="safari"></td>
               <td class="chrome"></td>
               <td class="edge"></td>
             </tr>
             <tr>
               <th scope="row">{{ compare_privacy }}</th>
-              <td class="firefox" aria-label="checkmark">&#x2713;</td>
+              <td class="firefox" aria-label="checkmark">✓</td>
               <td class="safari"></td>
               <td class="chrome"></td>
               <td class="edge"></td>
             </tr>
             <tr>
               <th scope="row">{{ compare_shareholders }}</th>
-              <td class="firefox" aria-label="checkmark">&#x2713;</td>
+              <td class="firefox" aria-label="checkmark">✓</td>
               <td class="safari"></td>
               <td class="chrome"></td>
               <td class="edge"></td>
             </tr>
             <tr>
               <th scope="row">{{ compare_logo }}</th>
-              <td class="firefox" aria-label="checkmark">&#x2713;</td>
+              <td class="firefox" aria-label="checkmark">✓</td>
               <td class="safari"></td>
               <td class="chrome"></td>
               <td class="edge"></td>
@@ -392,7 +373,7 @@ <h3>{{ cred_community_title }}</h3>
     <h3>{{ footer_title }}</h3>
     <p>{{ footer_body|format('href="https://community.mozilla.org/" target="_blank" rel="noopener noreferrer" data-cta-text="Community"')|safe }}</p>
     {{ cta_group('footer') }}
-    <p class="text-bottom mobile">{{ footer_mobile }}</p>
+    <p class="text-bottom mobile">{{ footer_mobile|safe }}</p>
     <p class="text-bottom desktop">{{ footer_desktop }}</p>
   </section>
 {% endblock %}

diff --git a/bedrock/firefox/templates/firefox/challenge-the-default/langs/landing.fr.html b/bedrock/firefox/templates/firefox/challenge-the-default/langs/landing.fr.html
@@ -63,3 +63,4 @@
 {% set hero_head_safari = hero_head_control %}
 {% set hero_head_new = 'Nouvel appareil<br> Nouveau navigateur<br> Nouveau <span class="icon-firefox"></span> standard' %}
 {% set hero_head_standard = 'Vous seul décidez de ce qu’est <span class="icon-firefox"></span> la norme' %}
+{% set hero_head_choice = hero_head_control %}
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/ctd-promo-de.html b/bedrock/mozorg/templates/mozorg/home/includes/ctd-promo-de.html
@@ -35,7 +35,7 @@ <h2>Dein Browser ist soooooo Standard</h2>
     </p>
     <p><small>(Wir haben auch ein paar wirklich gute Argumente.)</small></p>
 
-    <a href="{{ url('firefox') }}" class="mzp-c-button mzp-t-product" data-cta-text="Ich schau mir Firefox mal an" data-cta-position="banner">Ich schau mir Firefox mal an</a>
+    <a href="/de/firefox/challenge-the-default/" class="mzp-c-button mzp-t-product" data-cta-text="Ich schau mir Firefox mal an" data-cta-position="banner">Ich schau mir Firefox mal an</a>
     {% endcall %}
     </div>
 
@@ -70,10 +70,8 @@ <h2>Und was machen wir jetzt?</h2>
     </p>
 
     <a href="{{ url('firefox.browsers.mobile.index') }}" class="mzp-c-button mzp-t-product" data-cta-text="Zeigt mir den Mobile Browser" data-cta-position="banner">Zeigt mir den Mobile Browser</a>
+    {% endcall %}
     </div>
 
-  {% endcall %}
-
   </section>
-
 {% endblock %}
diff --git a/media/css/firefox/challenge-the-default/_animations.scss b/media/css/firefox/challenge-the-default/_animations.scss
@@ -2,11 +2,6 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$campaign-red: #ff6a75;
-$campaign-pink: #ffbdc5;
-$campaign-mint: #d1ffee;
-$campaign-green: #2ac3a2;
-
 .js {
     @media (prefers-reduced-motion: no-preference) {
         @keyframes pop-in {

diff --git a/media/css/firefox/challenge-the-default/_compare-table.scss b/media/css/firefox/challenge-the-default/_compare-table.scss
@@ -2,7 +2,6 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-
 .c-ctd-comparison {
     .mzp-l-content {
         padding-left: $spacing-sm;
@@ -14,7 +13,6 @@
         padding-left: $spacing-md;
         padding-right: $spacing-md;
 
-
         h2 {
             @include font-size(40px);
             font-weight: 800;
@@ -30,16 +28,12 @@
             width: 60%;
             min-width: 550px;
 
-
             h2 {
                 @include font-size(60px);
             }
-
-
         }
     }
 
-
     .mzp-u-data-table.comparison-table {
         width: 100%;
         max-width: 100%;
@@ -132,7 +126,6 @@
             height: 100%;
         }
 
-
         @media #{$mq-md} {
             .safari,
             .edge,

diff --git a/media/css/firefox/challenge-the-default/_hero.scss b/media/css/firefox/challenge-the-default/_hero.scss
@@ -2,9 +2,6 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-
-$campaign-red: #ff6a75;
-
 .ctd-hero-wrapper {
     background: $campaign-red;
     display: flex;

diff --git a/media/css/firefox/challenge-the-default/_toggle.scss b/media/css/firefox/challenge-the-default/_toggle.scss
@@ -2,8 +2,6 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-
 .toggle {
     display: inline-flex;
     align-items: center;
@@ -17,8 +15,6 @@
     }
 }
 
-
-
 @keyframes animate-toggle {
     0% {
         transform: rotate(0);
@@ -44,7 +40,6 @@
 @keyframes animate-toggle-rotate {
     0% {
         transform: translate(0, -50%) rotate(0deg);
-
     }
 
     25% {
@@ -143,7 +138,6 @@
     outline: 0;
 }
 
-
 .toggle-input:checked+.toggle-display {
     background-color: $color-white;
     border: none;