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.

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

Update universal CSS for legacy IE browsers (Fixes #7390) #7502

Merged
merged 2 commits into from
Aug 2, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

{% from "macros.html" import fxa_link_fragment with context %}

<div class="mzp-c-navigation">
<div class="mzp-c-navigation top-header-navigation">
<div class="mzp-c-navigation-l-content">
<div class="mzp-c-navigation-container">
<button class="mzp-c-navigation-menu-button" type="button" aria-controls="mzp-c-navigation-items">{{ _('Menu') }}</button>
Expand Down
2 changes: 1 addition & 1 deletion bedrock/base/templates/includes/sub-nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}

{# hidden for screens smaller than 880px wide #}
<nav class="moz-sub-nav {% block sub_nav_class %}{% endblock %}" role="navigation">
<nav class="moz-sub-nav {% block sub_nav_class %}{% endblock %} is-js-dependent" role="navigation">
<div class="nav-horizontal-menu-container">
<div class="nav-horizontal-menu">
<div class="sub-nav-primary-links-container">
Expand Down
2 changes: 1 addition & 1 deletion bedrock/firefox/templates/firefox/accounts-2019.html
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ <h1 class="c-accounts-hero-title">{{ _('There is a way to protect your privacy.
</div>

{% if has_signed_in_copy %}
<div class="c-accounts-hero-body c-accounts-hero-body-signed-in">
<div class="c-accounts-hero-body c-accounts-hero-body-signed-in is-js-dependent">
Copy link
Contributor

Choose a reason for hiding this comment

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

This only displays to signed in Firefox users so I'm not sure we need to hide it explicitly from IE.

Copy link
Member Author

Choose a reason for hiding this comment

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

Old IE doesn’t load the CSS or JS that gets used to hide/show this piece of content, hence why the class here is needed.

{# L10n: the span here is to display the phrase "Now try Firefox Monitor." in a different color. Line breaks are for visual formatting. #}
<h2 class="c-accounts-hero-title">{{ _('You’re signed <br>in to Firefox. <br><span>Now try Firefox Monitor.</span>') }}</h2>

Expand Down
4 changes: 2 additions & 2 deletions bedrock/mozorg/templates/mozorg/home/home-en.html
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
{% block content %}
{% block main %}
<main>
<header class="main-page-heading">
<header class="main-page-heading visually-hidden">
{# Main page h1 is hidden from view and exists mainly for SEO purposes #}
<h1>{{ self.page_title() }}</h1>
</header>
Expand Down Expand Up @@ -197,7 +197,7 @@ <h3 class="section-heading">{{ _('What we’re reading:') }}</h3>
{% call call_out_compact(
title=_('The account that protects you rather than profits off you.'),
desc=None,
class='fxaccount-secondary-cta mzp-t-product-firefox mzp-t-firefox mzp-t-dark',
class='fxaccount-secondary-cta mzp-t-product-firefox mzp-t-firefox mzp-t-dark is-js-dependent',
heading_level=2
) %}
<a href="{{ url('firefox.accounts') }}" class="mzp-c-button mzp-t-secondary mzp-t-dark" id="fxa-learn-secondary">{{ _('Learn More') }}</a>
Expand Down
6 changes: 3 additions & 3 deletions bedrock/mozorg/templates/mozorg/home/includes/macros.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h3 class="c-primary-cta-title-sub">{{ sub_title }}</h3>
{%- endmacro %}

{% macro download_banner_sticky(title, sub_title, desc) -%}
<section id="download-firefox-sticky-cta" class="c-sticky-cta download-firefox-sticky-cta mzp-t-firefox">
<section id="download-firefox-sticky-cta" class="c-sticky-cta download-firefox-sticky-cta mzp-t-firefox is-js-dependent">
<div class="mzp-l-content">
<div class="c-sticky-cta-wrapper">
<h2 class="c-sticky-cta-title">{{ title }}</h2>
Expand Down Expand Up @@ -50,7 +50,7 @@ <h2 class="c-secondary-cta-title">{{ title }}</h2>
{%- endmacro %}

{% macro fxa_banner(logo_title, title, sub_title, link_cta) -%}
<section id="fxaccount-primary-cta" class="c-primary-cta fxaccount-primary-cta mzp-t-firefox">
<section id="fxaccount-primary-cta" class="c-primary-cta fxaccount-primary-cta mzp-t-firefox is-js-dependent">
<div class="mzp-l-content">
<div class="c-primary-cta-wrapper">
<h2 class="c-primary-cta-logo">{{ logo_title }}</h2>
Expand All @@ -67,7 +67,7 @@ <h4 class="c-primary-cta-title-sub">{{ sub_title }}</h4>
{%- endmacro %}

{% macro fxa_banner_sticky(title, sub_title, link_cta) -%}
<section id="fxaccount-sticky-cta" class="c-sticky-cta fxaccount-sticky-cta mzp-t-firefox">
<section id="fxaccount-sticky-cta" class="c-sticky-cta fxaccount-sticky-cta mzp-t-firefox is-js-dependent">
<div class="mzp-l-content">
<div class="c-sticky-cta-wrapper">
<h2 class="c-sticky-cta-title">{{ title }}</h2>
Expand Down
64 changes: 46 additions & 18 deletions media/css/pebbles/base/oldIE.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,21 @@
// This style sheet is served exclusively to Internet Explorer 8 and older.
// Old versions get this minimal style while IE9 and up recieve more advanced styling.

@import
'../includes/lib',
'elements',
'../components/buttons',
'../components/buttons-download';
@import '../includes/lib';
@import 'elements';
@import '../components/buttons';
@import '../components/buttons-download';
@import '../../protocol/components/navigation-ie';
@import '../../protocol/components/navigation';
@import '../../../protocol/css/base/elements/sections';

.content {
@include border-box;
margin: 0 auto;
padding: 20px 0;
min-width: $width-phone;
max-width: $width-desktop-wide;
}

// An arbitrary container for translatable strings to use in scripts
#strings {
Expand All @@ -32,25 +42,43 @@ label {
display: block;
}

.masthead .toggle {
display: none; /* oldIE never gets a mobile menu. */
.visually-hidden {
@include visually-hidden;
}

/* oldIE never gets slide out drawer */
.moz-global-nav {
.nav-button-menu {
display: none;
}
.hidden {
@include hidden;
}

.moz-global-nav-drawer {
.is-js-dependent {
display: none;
}

.visually-hidden {
@include visually-hidden;
}
/**
* Pebbles specific overrides for download button in main navigation.
*/
.mzp-c-navigation-download {
.download-button {
.download-link {
background-color: transparent;
background-image: none;
border-radius: 2px;
color: #12bc00;
border: 2px solid #12bc00;
box-shadow: none;
line-height: 1.125;
padding: $spacing-sm $spacing-md;

.hidden {
@include hidden;
&:hover,
&:focus {
background-color: #12bc00;
border-color: #12bc00;
color: $color-white;
}
}

.fx-privacy-link {
display: none;
}
}
}
154 changes: 154 additions & 0 deletions media/css/protocol/components/_navigation-ie.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

$font-path: '/media/fonts';
$image-path: '/media/protocol/img';

@import '../../../protocol/css/includes/lib';

/* -------------------------------------------------------------------------- */
// Navigation styles

.top-header-navigation {
background: $color-white;
color: $color-black;
margin-bottom: $layout-lg;

.mzp-c-navigation-l-content {
padding: $layout-xs;
}

.mzp-c-navigation-container {
@include clearfix;
margin: 0 auto;
max-width: $content-max;
position: relative;
}

// Mozilla Logo
.mzp-c-navigation-logo {
left: 0;
position: absolute;
top: 0;
width: 112px;

a {
@include image-replaced;
background-image: url('/media/img/nav/logo-black.png');
background-repeat: no-repeat;
display: block;
height: 32px;
margin: 0 auto;
width: 112px;
}
}

// Download button
.mzp-c-navigation-download {
display: inline-block;
*display: inline;
margin: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
zoom: 1;

.mzp-c-button-download-container {
display: inline-block;
*display: inline;
margin-bottom: 0;
zoom: 1;

// hide privacy link
.mzp-c-button-download-privacy-link {
display: none;
}
}

// hide FxA button
.c-navigation-fxa-cta-container {
display: none;
}
}

// Nav buttom
.mzp-c-navigation-menu-button {
@include image-replaced;
background-color: transparent;
background-image: url('/media/img/nav/menu.png');
background-position-x: center;
background-position-y: center;
background-repeat: no-repeat;
border-radius: 4px;
border: none;
display: none;
height: 32px;
left: 120px;
padding: 1px 2px;
position: absolute;
top: 0;
width: 28px;

&:hover,
&:active,
&:focus,
&.mzp-is-active {
background-color: $color-gray-20;
}
}

.mzp-c-navigation-items {
margin-top: $layout-xs;
}

// hide panel close buttons
.mzp-c-menu-button-close {
display: none;
}

.mzp-c-menu-title {
display: inline-block;
*display: inline;
font-weight: bold;
margin-bottom: $spacing-xl;
zoom: 1;
}

.mzp-c-menu-category {
margin-bottom: $spacing-2xl;
}

// hide cards
.mzp-c-menu-panel-card {
display: none;
}

.mzp-c-navigation-menu {
display: none;
position: relative;
top: $layout-lg;

ul {
list-style-type: none;
margin: 0 0 $spacing-lg;
padding: 0;

li {
margin: 0;
padding: 0;
}
}

.mzp-c-menu-panel {
padding-left: $spacing-xl;
}
}
}

.js .top-header-navigation {
.mzp-c-navigation-menu-button {
display: block;
}
}
30 changes: 14 additions & 16 deletions media/css/protocol/oldIE.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,15 @@
// This style sheet is served exclusively to Internet Explorer 8 and older.
// Old versions get this minimal style while IE9 and up recieve more advanced styling.

$font-path: '/media/fonts';
$image-path: '/media/protocol/img';

@import '../../protocol/css/includes/lib';
@import '../../protocol/css/base/elements';
@import '../../protocol/css/components/button';

@import 'components/navigation-ie';
@import 'components/navigation';
@import 'components/download-button';

// An arbitrary container for translatable strings to use in scripts
Expand All @@ -32,21 +37,6 @@ label {
display: block;
}

.masthead .toggle {
display: none; /* oldIE never gets a mobile menu. */
}

/* oldIE never gets slide out drawer */
.moz-global-nav {
Copy link
Contributor

Choose a reason for hiding this comment

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

There's a few old CSS files we can remove this class from. I am writing this comment to remind myself to open an issue.

.nav-button-menu {
display: none;
}
}

.moz-global-nav-drawer {
display: none;
}

.visually-hidden {
@include visually-hidden;
}
Expand All @@ -55,8 +45,16 @@ label {
@include hidden;
}

// Make sure form details are visible
.is-js-dependent {
display: none;
Copy link
Contributor

Choose a reason for hiding this comment

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

🔥

}

/* Make sure form details are visible */
/* stylelint-disable declaration-no-important */
.js .mzp-c-newsletter-details {
display: block !important;
}

.mzp-c-newsletter-thanks {
display: none;
}
Loading