Skip to content

Commit

Permalink
modals work again
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephaniehobson
stephaniehobson committed May 22, 2024
1 parent a565297 commit e80f8a5
Show file tree
Hide file tree
Showing 10 changed files with 255 additions and 92 deletions.
35 changes: 3 additions & 32 deletions bedrock/firefox/templates/firefox/all/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@
#}
{% extends "firefox/base/base-protocol.html" %}

{% set android_url = play_store_url('firefox', 'firefox-all') %}
{% set ios_url = app_store_url('firefox', 'firefox-all') %}

{%- block page_title -%}
{{ ftl('firefox-all-download-the-firefox') }}
{%- endblock -%}
Expand Down Expand Up @@ -53,34 +50,8 @@ <h1 class="c-intro-heading">{{ ftl('firefox-all-choose-which-firefox') }}</h1>
</div>
</div>
</main>
{% endblock %}


<div id="installer-help" class="c-help mzp-u-modal-content">
<ul>
<li>
<h2 class="c-help-title">{{ ftl('firefox-all-64-bit-installers') }}</h2>
<p class="c-help-desc">
{{ ftl('firefox-all-choose-a-64-bit-installer') }}
</p>
</li>
<li>
<h2 class="c-help-title">{{ ftl('firefox-all-32-bit-installers') }}</h2>
<p class="c-help-desc">
{{ ftl('firefox-all-choose-a-32-bit-installer', url='https://support.mozilla.org/kb/choosing-firefox-cpu-architecture-windows-os') }}
</p>
</li>
<li>
<h2 class="c-help-title">{{ ftl('firefox-all-msi-installers') }}</h2>
<p class="c-help-desc">
{{ ftl('firefox-all-windows-installers-for') }}
</p>
</li>
<li>
<h2 class="c-help-title">{{ ftl('firefox-all-arm64-installers') }}</h2>
<p class="c-help-desc">
{{ ftl('firefox-all-arm64-installers-optimized') }}
</p>
</li>
</ul>
</div>
{% block js %}
{{ js_bundle('firefox_all_drill') }}
{% endblock %}
5 changes: 1 addition & 4 deletions bedrock/firefox/templates/firefox/all/download.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@
{% from "macros.html" import google_play_button, apple_app_store_button with context %}



{# Show download #}

<h2 class="c-step-name">
<h2 class="c-step-name{% if not (product and platform and locale) %} t-step-disabled{% endif %}">
4. Download
{% if product and platform and locale %}
<img alt="TKTK" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
Expand All @@ -19,8 +18,6 @@ <h2 class="c-step-name">
{% endif %}
</h2>



{% if product and platform and locale %}
<div class="c-step-contents">
{% if product.slug.startswith("desktop") %}
Expand Down
3 changes: 1 addition & 2 deletions bedrock/firefox/templates/firefox/all/lang.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
#}

{# Choose language #}

<h2 class="c-step-name">
<h2 class="c-step-name {% if not (product and platform) %} t-step-disabled{% endif %}">
3. {{ ftl('firefox-all-language') }}
{% if product and platform and locale %}
<span class="c-step-choice">{{ locale_name }}</span> <a href="TKTK" class="c-step-icon"><img alt="TKTK" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
Expand Down
12 changes: 8 additions & 4 deletions bedrock/firefox/templates/firefox/all/mobile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}


{% set android_url = play_store_url('firefox', 'firefox-all') %}
{% set android_beta_url = play_store_url('firefox_beta', 'firefox-all') %}
{% set android_nightly_url = play_store_url('firefox_nightly', 'firefox-all') %}
{% set ios_url = app_store_url('firefox', 'firefox-all') %}

{% if product.slug == 'android-beta' %}
{% set qr_url = android_beta_url %}
Expand All @@ -24,19 +27,20 @@
</figure>

<ul class="c-store-badges">
{% if product.slug.startswith('android') %}
{% if product.slug.startswith(('mobile', 'android')) %}
<li class="c-store-badge-google">
{{ google_play_button(href=android_url, id='playStoreLink') }}
</li>
{% endif %}
{% if product.slug.startswith('mobile') %}
{% if product.slug.startswith(('mobile', 'ios')) %}
<li class="c-store-badge-apple">
{{ apple_app_store_button(href=ios_url, id='appStoreLink') }}
</li>
{% endif %}
</ul>


{% if product.slug.startswith('mobile') %}
<p><a href="{{ url('firefox.browsers.mobile.get-app') }}" class="c-get-app" data-cta-type="link" data-cta-text="Send a link">{{ ftl('firefox-all-product-send-link') }}</a></p>
{% endif %}

</div>
56 changes: 43 additions & 13 deletions bedrock/firefox/templates/firefox/all/platform.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

{# Choose platform #}

<h2 class="c-step-name">
<h2 class="c-step-name{% if not product %} t-step-disabled{% endif %}">
2. {{ ftl('firefox-all-platform') }}
{% if product and platform %}
<span class="c-step-choice">{{ platform_name }}</span> <a href="TKTK" class="c-step-icon"><img alt="TKTK" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
Expand All @@ -16,19 +16,49 @@ <h2 class="c-step-name">
{% else %}
<img alt="TKTK" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-left.svg') }}" width="30" height="30">
{% endif %}

{% if product and not platform %}
<a href="#installer-help" class="c-button-help icon-installer-help" title="{{ ftl('firefox-all-learn-about-installers')}}">
{{ ftl('firefox-all-get-help') }}
</a>
{% endif %}
</h2>

{% if product and not platform %}
<div class="c-step-contents">
<h3 class="c-step-prompt">{{ ftl('firefox-all-select-your-preferred-installer') }}
<a href="#installer-help" class="c-button-help icon-installer-help" title="{{ ftl('firefox-all-learn-about-installers')}}">
{{ ftl('firefox-all-get-help') }}
</a>
</h3>
<ul class="c-platform-list">
{% for platform, name in platforms %}
<li><a href="{{ url('firefox.drilldown_platform', product_slug=product.slug, platform=platform) }}">{{ name }}</a></li>
{% endfor %}
</ul>
</div>
<div class="c-step-contents">
<ul class="c-platform-list">
{% for platform, name in platforms %}
<li><a href="{{ url('firefox.drilldown_platform', product_slug=product.slug, platform=platform) }}">{{ name }}</a></li>
{% endfor %}
</ul>
</div>
<div id="installer-help" class="c-help mzp-u-modal-content">
<h3>{{ ftl('firefox-all-learn-about-installers')}}</h3>
<ul>
<li>
<h4 class="c-help-title">{{ ftl('firefox-all-64-bit-installers') }}</h4>
<p class="c-help-desc">
{{ ftl('firefox-all-choose-a-64-bit-installer') }}
</p>
</li>
<li>
<h4 class="c-help-title">{{ ftl('firefox-all-32-bit-installers') }}</h4>
<p class="c-help-desc">
{{ ftl('firefox-all-choose-a-32-bit-installer', url='https://support.mozilla.org/kb/choosing-firefox-cpu-architecture-windows-os') }}
</p>
</li>
<li>
<h4 class="c-help-title">{{ ftl('firefox-all-msi-installers') }}</h4>
<p class="c-help-desc">
{{ ftl('firefox-all-windows-installers-for') }}
</p>
</li>
<li>
<h4 class="c-help-title">{{ ftl('firefox-all-arm64-installers') }}</h4>
<p class="c-help-desc">
{{ ftl('firefox-all-arm64-installers-optimized') }}
</p>
</li>
</ul>
</div>
{% endif %}
42 changes: 37 additions & 5 deletions bedrock/firefox/templates/firefox/all/product.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,19 @@ <h2 class="c-step-name">
{% else %}
<img alt="TKTK" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
{% endif %}

{% if not product %}
<a id="icon-browser-help" href="#browser-help" class="c-button-help" title="{{ ftl('firefox-all-learn-about-firefox') }}">
{{ ftl('firefox-all-get-help') }}
</a>
{% endif %}


</h2>

{% if not product %}
<div class="c-step-contents">
<h3 class="c-step-prompt">{{ ftl('firefox-all-choose-which-firefox') }}</h3>

<h4 class="c-product-title"><img src="{{ static('protocol/img/icons/desktop.svg') }}"> Desktop</h4>
<h3 class="c-product-title"><img src="{{ static('protocol/img/icons/desktop.svg') }}"> Desktop</h3>
<ul class="c-product-list">
<li class="release"><a href="{{ url('firefox.drilldown_product', product_slug='desktop-release') }}">Firefox</a> <strong>(Recommended)</strong></li>
{% for p in products %}
Expand All @@ -29,7 +35,7 @@ <h4 class="c-product-title"><img src="{{ static('protocol/img/icons/desktop.svg'
{% endfor %}
</ul>

<h4 class="c-product-title"><img src="{{ static('protocol/img/icons/mobile.svg') }}"> Mobile</h4>
<h3 class="c-product-title"><img src="{{ static('protocol/img/icons/mobile.svg') }}"> Mobile</h3>

<ul class="c-product-list">
<li class="release"><a href="{{ url('firefox.drilldown_product', product_slug='mobile-release') }}">Firefox</a> <strong>(Recommended)</strong></li>
Expand All @@ -38,7 +44,33 @@ <h4 class="c-product-title"><img src="{{ static('protocol/img/icons/mobile.svg')
<li class="{{ p.slug }}"><a href="{{ url('firefox.drilldown_product', product_slug=p.slug) }}">{{ p.name }}</a></li>
{% endif %}
{% endfor %}
<li class=""><a href="{{ url('firefox.ios.testflight') }}">Firefox iOS TestFlight</a></li>
<li class="ios-testflight"><a href="{{ url('firefox.ios.testflight') }}">Firefox iOS TestFlight</a></li>
</ul>
</div>

<div id="browser-help" class="c-help mzp-u-modal-content">
<h3>{{ ftl('firefox-all-learn-about-firefox') }}</h3>
<ul>
<li>
<h4 class="c-help-title"><a href="{{ url('firefox.new') }}">Firefox</a></h4>
<p class="c-help-desc">{{ ftl('firefox-all-the-standard-firefox') }}</p>
</li>
<li>
<h4 class="c-help-title"><a href="{{ url('firefox.channel.desktop') }}#beta">Firefox <span>Beta</span></a></h4>
<p class="c-help-desc">{{ ftl('firefox-all-get-a-sneak-peek-at') }}</p>
</li>
<li>
<h4 class="c-help-title"><a href="{{ url('firefox.developer.index') }}">Firefox <span>Developer Edition</span></a></h4>
<p class="c-help-desc">{{ ftl('firefox-all-test-your-sites-against') }}</p>
</li>
<li>
<h4 class="c-help-title"><a href="{{ url('firefox.channel.desktop') }}#nightly">Firefox <span>Nightly</span></a></h4>
<p class="c-help-desc">{{ ftl('firefox-all-the-pre-alpha-version') }}</p>
</li>
<li>
<h4 class="c-help-title"><a href="{{ url('firefox.enterprise.index') }}">Firefox <span>Extended Support Release</span></a></h4>
<p class="c-help-desc">{{ ftl('firefox-all-count-on-stability-and') }}</p>
</li>
</ul>
</div>

Expand Down
84 changes: 52 additions & 32 deletions media/css/firefox/all/all-unified.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@ $image-path: '/media/protocol/img';
&:first-child {
margin-top: 0;
}

&.t-step-disabled {
opacity: 0.4;
}
}

.c-step-icon {
Expand All @@ -97,18 +101,6 @@ $image-path: '/media/protocol/img';
display: none;
}

.c-button-help {
@include at2x('/media/img/firefox/all/icon-question.png', 21px, 21px);
@include image-replaced;
background-position: top left;
background-repeat: no-repeat;
display: inline-block;
height: 21px;
padding-bottom: $spacing-sm;
vertical-align: middle;
width: 21px;
}

.c-product-title {
img {
vertical-align: top;
Expand Down Expand Up @@ -144,13 +136,20 @@ $image-path: '/media/protocol/img';
.android-nightly {
background-image: url('#{$image-path}/logos/firefox/browser/nightly/logo.svg');
}

.ios-testflight {
background-image: url('/media/img/logos/testflight/testflight.svg');
}
}

.c-platform-list,
.c-lang-list {
margin-bottom: $spacing-xl;
}


// mobile downloads

.c-mobile {
width: fit-content;
}
Expand All @@ -164,6 +163,11 @@ $image-path: '/media/protocol/img';
max-width: 220px;
padding: $spacing-lg;

svg {
height: auto;
max-width: 100%;
}

figcaption {
color: $color-black;
font-weight: bold;
Expand All @@ -189,27 +193,18 @@ $image-path: '/media/protocol/img';
padding-right: 20px;
}

// Custom narrow modal style.
// These should be standardized into a narrow theme.
// https://github.com/mozilla/protocol/issues/358



.mzp-c-modal.help-modal {
.mzp-c-modal-window > .mzp-c-modal-inner {
background: transparent;
max-width: 600px;
padding: $spacing-xl 0 0;

header {
// Hide header visually and add top padding to compensate
@include visually-hidden;
}
}
// help buttons & modals

.mzp-c-modal-close {
@include bidi(((right, 0, left, auto),));
}
.c-button-help {
@include at2x('/media/img/firefox/all/icon-question.png', 21px, 21px);
@include image-replaced;
background-position: top left;
background-repeat: no-repeat;
display: inline-block;
height: 21px;
padding-bottom: $spacing-sm;
vertical-align: middle;
width: 21px;
}

.c-help {
Expand Down Expand Up @@ -242,3 +237,28 @@ $image-path: '/media/protocol/img';
@include text-body-sm;
}
}

// Custom narrow modal style.
// These should be standardized into a narrow theme.
// https://github.com/mozilla/protocol/issues/358

.mzp-c-modal.help-modal {
h3 {
color: $color-white;
}

.mzp-c-modal-window > .mzp-c-modal-inner {
background: transparent;
max-width: 600px;
padding: $spacing-xl 0 0;

header {
// Hide header visually and add top padding to compensate
@include visually-hidden;
}
}

.mzp-c-modal-close {
@include bidi(((right, 0, left, auto),));
}
}
12 changes: 12 additions & 0 deletions media/img/logos/testflight/testflight.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit e80f8a5

Please sign in to comment.