Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixup CTD landing & update promo link #14965

Merged
merged 7 commits into from
Nov 18, 2024
Merged

Fixup CTD landing & update promo link #14965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a062e37
Fix ctd-promo-de
janbrasna Aug 5, 2024
863fecd
Fixup and simplify CTD landing
janbrasna Aug 9, 2024
68ae3ef
Fix repeated ids
janbrasna Aug 9, 2024
b38a940
Fix missing fr v6
janbrasna Aug 9, 2024
ce7fde8
Fix mobile escaping
janbrasna Aug 10, 2024
76004b9
Add a Protocol override note
janbrasna Sep 19, 2024
7dfe742
Merge branch 'main' into fix/ctd-woes
janbrasna Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions bedrock/firefox/templates/firefox/challenge-the-default/includes/toggles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
69 changes: 25 additions & 44 deletions bedrock/firefox/templates/firefox/challenge-the-default/landing-base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should bring the page_image over for CTD social share images.

Changing the template did make the favicon updates unnecessary though 🙂

Suggested change
{% block page_desc %}{{ seo_desc }}{% 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 %}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh no worries, it started out as a simple a11y +runaway tag fix, but while testing it and after validating further it turned out there's more to tackle — maybe if I submitted the individual issues separately, It would have been easier to review in smaller focused chunks, instead of this seemingly unrelated lump of tiny changes…

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stephaniehobson So this poster image thing is actually sorted out, just elsewhere:

bedrock/bedrock/firefox/templates/firefox/challenge-the-default/langs/landing.fr.html

Lines 7 to 9 in 7dfe742

{% extends "firefox/challenge-the-default/landing-base.html" %}
{% block page_image %}{{ static('img/firefox/challenge-the-default/ctd-share-fr.png') }}{% endblock %}

Every language sets it. It only needed removing this hardcoded logic in base to start working for all;)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All the three links I've chosen for testing above (de, pl, fr) should each render its own poster, as was originally intended in #14306/files additions.

NB: DE uses English branding, other languages have logos and such localized.


{% 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>
Expand All @@ -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',
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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>
janbrasna marked this conversation as resolved.
Show resolved Hide resolved
<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>
Expand Down Expand Up @@ -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 %}
Expand Down
1 change: 1 addition & 0 deletions bedrock/firefox/templates/firefox/challenge-the-default/langs/landing.fr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
6 changes: 2 additions & 4 deletions bedrock/mozorg/templates/mozorg/home/includes/ctd-promo-de.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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 %}
5 changes: 0 additions & 5 deletions media/css/firefox/challenge-the-default/_animations.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
7 changes: 0 additions & 7 deletions media/css/firefox/challenge-the-default/_compare-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -14,7 +13,6 @@
padding-left: $spacing-md;
padding-right: $spacing-md;


h2 {
@include font-size(40px);
font-weight: 800;
Expand All @@ -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%;
Expand Down Expand Up @@ -132,7 +126,6 @@
height: 100%;
}


@media #{$mq-md} {
.safari,
.edge,
Expand Down
3 changes: 0 additions & 3 deletions media/css/firefox/challenge-the-default/_hero.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 0 additions & 6 deletions media/css/firefox/challenge-the-default/_toggle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -17,8 +15,6 @@
}
}



@keyframes animate-toggle {
0% {
transform: rotate(0);
Expand All @@ -44,7 +40,6 @@
@keyframes animate-toggle-rotate {
0% {
transform: translate(0, -50%) rotate(0deg);

}

25% {
Expand Down Expand Up @@ -143,7 +138,6 @@
outline: 0;
}


.toggle-input:checked+.toggle-display {
background-color: $color-white;
border: none;
Expand Down
Loading