Skip to content

Commit

Permalink
fix: Standard footer design (#465)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jer3k
jer3k authored May 8, 2024
1 parent 09d6237 commit 79bce71
Showing 1 changed file with 90 additions and 135 deletions.
225 changes: 90 additions & 135 deletions frontend/src/components/Footer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,54 @@
<template>
<v-footer color="#fff" dark absolute class="margin-top" app>
<div class="first-nation-acknowledgement">
<div>
The B.C. Public Service acknowledges the territories of First Nations
around B.C. and is grateful to carry out our work on these lands. We
acknowledge the rights, interests, priorities, and concerns of all
Indigenous Peoples - First Nations, Métis, and Inuit - respecting and
acknowledging their distinct cultures, histories, rights, laws, and
governments.
</div>
</div>
<v-row class="bottom-padding">
<v-col class="justify-left" style="text-align: left">
<v-container>
<v-row>
<v-col class="justify-left" style="text-align: left">
<v-col>
The B.C. Public Service acknowledges the territories of First
Nations around B.C. and is grateful to carry out our work on these
lands. We acknowledge the rights, interests, priorities, and
concerns of all Indigenous Peoples - First Nations, Métis, and Inuit
- respecting and acknowledging their distinct cultures, histories,
rights, laws, and governments.
</v-col>
</v-row>
</v-container>
</div>
<v-container>
<v-row>
<v-col class="d-sm-flex justify-space-between">
<div class="contact">
<img
tabindex="-1"
src="../assets/images/bc-gov-logo-light.png"
width="155"
class="logo"
alt="B.C. Government Logo"
/>
</v-col>
</v-row>
<v-row>
<v-col
class="justify-center"
style="text-align: left"
data-testid="footer-message"
>
For questions or assistance with creating a report please contact
the Pay Transparency Unit -
<a class="contact-email" href="mailto:paytransparency@gov.bc.ca">
PayTransparency@gov.bc.ca
</a>
</v-col>
</v-row>
</v-col>
<v-col
id="more-info"
class="justify-right"
aria-label="More information links"
sm="6"
cols="12"
>
<p class="more-info-title">MORE INFO</p>
<v-row aria-labelledby="more-info">
<v-col class="links" style="text-align: left">
<v-list>
<v-list-item
v-for="link in settings.links.left"
:key="link.id"
class="footer-btn pl-1 pr-1"
:href="sanitizeUrl(link.to)"
:data-testid="link.id"
:aria-label="link.label"
>
<v-list-item-title>{{ link.label }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
<v-col class="links" style="text-align: left">
<v-list>
<v-list-item
v-for="link in settings.links.right"
<p class="mt-4" data-testid="footer-message">
For questions or assistance with creating a report please contact
the Pay Transparency Unit -
<a class="contact-email" href="mailto:paytransparency@gov.bc.ca">
PayTransparency@gov.bc.ca
</a>
</p>
</div>
<div class="more-info">
<p class="font-weight-bold mb-4 mt-6 mt-sm-4">MORE INFO</p>
<ul>
<li
v-for="link in settings.links"
:key="link.id"
class="footer-btn pl-1 pr-1"
:href="sanitizeUrl(link.to)"
:aria-label="link.label"
:data-testid="link.id"
>
<v-list-item-title>{{ link.label }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-col>
</v-row>
<a :href="sanitizeUrl(link.to)" :data-testid="link.id">
{{ link.label }}
</a>
</li>
</ul>
</div>
</v-col>
</v-row>
</v-container>
</v-footer>
</template>

Expand All @@ -86,50 +58,43 @@ import { sanitizeUrl } from '@braintree/sanitize-url';
type Link = { label: string; to: string; id: string };
type FooterSettings = {
links: {
left: Link[];
right: Link[];
};
links: Link[];
};
const settings: FooterSettings = {
links: {
left: [
{ id: 'footer-link-home', label: 'Home', to: 'https://www.gov.bc.ca/' },
{
id: 'footer-link-about',
label: 'About gov.bc.ca',
to: 'https://www2.gov.bc.ca/gov/content/about-gov-bc-ca',
},
{
id: 'footer-link-disclaimer',
label: 'Disclaimer',
to: 'https://www.gov.bc.ca/disclaimer',
},
{
id: 'footer-link-privacy',
label: 'Privacy',
to: 'https://www.gov.bc.ca/privacy',
},
],
right: [
{
id: 'footer-link-accessibility',
label: 'Accessibility',
to: 'https://www.gov.bc.ca/webaccessibility',
},
{
id: 'footer-link-copyright',
label: 'Copyright',
to: 'https://www.gov.bc.ca/copyright',
},
{
id: 'footer-link-contact-us',
label: 'Contact Us',
to: 'https://www2.gov.bc.ca/gov/content/home/contact-us',
},
],
},
links: [
{ id: 'footer-link-home', label: 'Home', to: 'https://www.gov.bc.ca/' },
{
id: 'footer-link-about',
label: 'About gov.bc.ca',
to: 'https://www2.gov.bc.ca/gov/content/about-gov-bc-ca',
},
{
id: 'footer-link-disclaimer',
label: 'Disclaimer',
to: 'https://www.gov.bc.ca/disclaimer',
},
{
id: 'footer-link-privacy',
label: 'Privacy',
to: 'https://www.gov.bc.ca/privacy',
},
{
id: 'footer-link-accessibility',
label: 'Accessibility',
to: 'https://www.gov.bc.ca/webaccessibility',
},
{
id: 'footer-link-copyright',
label: 'Copyright',
to: 'https://www.gov.bc.ca/copyright',
},
{
id: 'footer-link-contact-us',
label: 'Contact Us',
to: 'https://www2.gov.bc.ca/gov/content/home/contact-us',
},
],
};
</script>

Expand All @@ -143,10 +108,6 @@ a {
text-decoration: underline !important;
}
p {
line-height: 21px;
}
.v-footer {
flex-direction: column;
min-width: 100%;
Expand All @@ -160,43 +121,37 @@ p {
flex-direction: row;
align-items: center;
justify-content: center;
padding: 32px;
padding: 16px 0;
color: #fff;
font-size: 14px;
line-height: 21px;
transition: none !important;
width: 100%;
margin-bottom: 50px;
margin-bottom: 16px;
border-top: 4px solid $border-color !important;
border-bottom: 4px solid $border-color !important;
overflow: hidden;
div {
max-width: 1120px;
margin: auto;
}
}
}
.bottom-padding {
padding-left: 32px;
padding-right: 32px;
}
.v-list-item-title {
color: $text-color;
font-size: $font-size !important;
&:hover {
text-decoration: underline;
.more-info {
flex: 0 0 auto;
ul {
list-style-type: none;
columns: 2;
margin: 0px 0px 16px;
gap: 48px;
li {
margin-bottom: 16px;
width: 160px;
@media (max-width: 1280px) {
width: unset;
}
}
}
}
.more-info-title {
font-weight: 700;
}
.links {
display: flex;
flex-direction: column;
.contact {
flex: 0 0 50%;
}
</style>

0 comments on commit 79bce71

Please sign in to comment.