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

fix: Standard footer design #465

Merged
merged 3 commits into from
May 8, 2024
Merged

fix: Standard footer design #465

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a66cb3c
standard footer design
jer3k May 8, 2024
0b1df89
Merge branch 'main' into fix/footer-margins
jer3k May 8, 2024
8f63d71
update spacing of links
jer3k May 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
225 changes: 90 additions & 135 deletions frontend/src/components/Footer.vue
View file
Open in desktop
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:[email protected]">
[email protected]
</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:[email protected]">
[email protected]
</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>