Skip to content

Commit

Permalink
Migrate footer styles into partial, rename classes/attrs to match Pro…
Browse files Browse the repository at this point in the history
…tocol, localize alt tags
  • Loading branch information
maxxcrawford committed Aug 12, 2021
1 parent 812d8b4 commit 037091b
Show file tree
Hide file tree
Showing 6 changed files with 87 additions and 71 deletions.
2 changes: 2 additions & 0 deletions privaterelay/locales/en-US/app.ftl
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ nav-profile-image-alt = { -brand-name-firefox-account(capitalization: "uppercase
nav-footer-privacy = Privacy
nav-footer-relay-terms = { -brand-name-relay } Terms
nav-footer-legal = Legal
logo-mozilla-alt = { -brand-name-mozilla }
logo-github-alt = GitHub logo
## Bento Menu

Expand Down
18 changes: 9 additions & 9 deletions privaterelay/templates/includes/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
{% load ftl %}
{% ftlconf bundle='privaterelay.ftl_bundles.main' %}

<footer class="flx flx-row spc-btwn row-full-width txt-white">
<a class="footer-link moz-logo-link" href="https://www.mozilla.org" class="inline-block" target="_blank" rel="noopener">
<img alt="Mozilla" class="block w-24" src="{% static 'images/mozilla.svg' %}"/>
<footer>
<a class="c-footer-link t-logo-mozilla" href="https://www.mozilla.org" class="inline-block" target="_blank" rel="noopener">
<img alt="{% ftlmsg 'logo-mozilla-alt' %}" src="{% static 'images/mozilla.svg' %}"/>
</a>
<nav class="flx flx-wrap al-cntr">
<a class="footer-link" href="https://www.mozilla.org/privacy/firefox-relay/" target="_blank" rel="noopener noreferrer">{% ftlmsg 'nav-footer-privacy' %}</a>
<a class="footer-link" href="https://www.mozilla.org/about/legal/terms/firefox-relay/" target="_blank" rel="noopener noreferrer">{% ftlmsg 'nav-footer-relay-terms' %}</a>
<a class="footer-link" href="https://www.mozilla.org/about/legal/" target="_blank" rel="noopener noreferrer">{% ftlmsg 'nav-footer-legal' %}</a>
<a class="footer-link" href="https://github.com/mozilla/fx-private-relay" rel="noopener noreferrer" target="_blank">
<img class="GitHub-logo" alt="GitHub logo" src="{% static 'images/GitHub.svg' %}" />
<nav>
<a class="c-footer-link" href="https://www.mozilla.org/privacy/firefox-relay/" target="_blank" rel="noopener noreferrer">{% ftlmsg 'nav-footer-privacy' %}</a>
<a class="c-footer-link" href="https://www.mozilla.org/about/legal/terms/firefox-relay/" target="_blank" rel="noopener noreferrer">{% ftlmsg 'nav-footer-relay-terms' %}</a>
<a class="c-footer-link" href="https://www.mozilla.org/about/legal/" target="_blank" rel="noopener noreferrer">{% ftlmsg 'nav-footer-legal' %}</a>
<a class="c-footer-link t-logo-github" href="https://github.com/mozilla/fx-private-relay" rel="noopener noreferrer" target="_blank">
<img class="logo-github" alt="{% ftlmsg 'logo-github-alt' %}" src="{% static 'images/GitHub.svg' %}" />
</a>
</nav>
</footer>
1 change: 1 addition & 0 deletions static/scss/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
// Previous Styles
@import "partials/main";
@import "partials/header";
@import "partials/footer";
@import "partials/banners";
@import "partials/dashboard";
@import "partials/onboarding.scss";
Expand Down
4 changes: 4 additions & 0 deletions static/scss/partials/banners.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
text-align: center;
position: relative;
padding: $spacing-md;

ul {
list-style-type: none;
}
}

.micro-survey-banner {
Expand Down
71 changes: 71 additions & 0 deletions static/scss/partials/footer.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
footer {
position: relative;
margin: auto 0 0 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: $spacing-lg $spacing-xl;
color: $color-white;

nav {
display: flex;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
}

@media #{$mq-md} {
flex-direction: row;

nav {
flex-direction: row;
}
}

}



.c-footer-link {
text-align: center;
margin: auto;
width: 100%;
padding: $spacing-md $spacing-xs;
border-radius: $border-radius-sm;
text-decoration: none;
color: $color-white;
font-family: $font-metropolis;

@media #{$mq-md} {
width: auto;
padding: $spacing-xs;
margin: auto $spacing-md auto auto;
}

&.t-logo-mozilla {
margin: auto auto $spacing-md auto;
max-width: 140px;

@media #{$mq-md} {
min-width: 7rem;
margin: auto 0;
}
}

&.t-logo-github {
img {
min-width: 24px;
max-width: 28px;
}
}

&:hover, &:focus {
opacity: .9;
background-color: rgba(0, 0, 0, .2);
}

&:active {
background-color: rgba(0, 0, 0, .25);
opacity: .8;
}
}
62 changes: 0 additions & 62 deletions static/scss/partials/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -332,45 +332,6 @@ button:active {
padding-right: $spacing-md;
}

footer {
position: relative;
margin: auto 0 0 0;
}

.footer-link.moz-logo-link {
min-width: 7em;
margin: auto 0;
}

.GitHub-logo {
min-width: 24px;
max-width: 28px;
}

ul {
list-style-type: none;
}

.footer-link {
padding: 4px;
border-radius: 4px;
text-decoration: none;
color: $color-white;
font-family: $font-metropolis;
margin: auto 2em auto auto;
}

.footer-link:hover,
.footer-link:focus {
opacity: .9;
background-color: rgba(0, 0, 0, .2);
}

.footer-link:active {
background-color: rgba(0, 0, 0, .25);
opacity: .8;
}

.dashboard-container {
height: 100%;
background-color: $color-mpp-background;
Expand Down Expand Up @@ -1673,10 +1634,6 @@ input:focus::placeholder {
top: 30px;
}

.footer-link {
margin: auto 1em auto auto;
}

.banner-logo {
position: absolute;
margin: 0;
Expand All @@ -1700,25 +1657,6 @@ input:focus::placeholder {
--rowFullWidthHPadding: 1.5em;
}

footer,
footer nav {
flex-direction: column !important;
width: 100%;
}

.footer-link.moz-logo-link {
margin: auto auto 1em auto;
max-width: 140px;
}

.footer-link {
text-align: center;
margin: auto;
width: 100%;
padding-top: 1em;
padding-bottom: 1em;
}

.relay-email {
--hPadding: 1.5em;
}
Expand Down

0 comments on commit 037091b

Please sign in to comment.