Skip to content

Commit

Permalink
Merge pull request #13825 from mtruj013/footer-refresh
Browse files Browse the repository at this point in the history 
Footer refresh
  • Loading branch information
@akbarkz
akbarkz committed May 10, 2024
2 parents 34c80d0 + 211a1d9 commit d47b57a
Show file tree
Hide file tree
Showing 5 changed files with 357 additions and 431 deletions.
105 changes: 0 additions & 105 deletions static/sass/_pattern_footer.scss
View file
Expand Up @@ -14,50 +14,6 @@
}

@mixin ubuntu-p-footer {
$color-shadow: rgba(0, 0, 0, 0.3);

.p-footer {
@include vf-highlight-bar($color-brand);

background-color: $color-x-light;
margin-bottom: 0;
padding: 0 0 $sp-xx-large 0;

@media only screen and (min-width: $breakpoint-small) {
padding: $sp-xx-large 0;
}

@media only screen and (max-width: $breakpoint-small - 1) {
&__nav-col {
width: 100%;
}
}
}

.p-footer__nav {
border-bottom: 1px solid $color-mid-light;

@media only screen and (max-width: $breakpoint-small - 1) {
margin-top: 0 !important;
}

@media only screen and (min-width: $breakpoint-small) {
border: 0;
}

&.u-clearfix {
@media only screen and (max-width: $breakpoint-small - 1) {
padding-bottom: 0;
}
}

&-col.col-2 {
@media only screen and (max-width: $breakpoint-small - 1) {
margin-top: 0;
}
}
}

.p-footer__divider {
@include full-width-breakout;

Expand Down Expand Up @@ -92,67 +48,6 @@
}
}

.p-footer__title {
@include footer-title;

background-image: url("#{$assets-path}7bd1bd7b-arrow_down_9fa097.svg");
background-position: calc(100% - 10px) 50%;
background-repeat: no-repeat;
background-size: 13px 13px;
border-top: 1px solid $color-mid-light;
color: $color-dark;
font-size: 1rem;
font-weight: 400;
margin-top: 0;
max-width: inherit;

@media only screen and (min-width: $breakpoint-small) {
background: none;
border: 0;
font-size: 0.8125rem;
padding: 0 0 $sp-x-small;
}

@media only screen and (min-width: $breakpoint-large) {
font-size: 0.8125rem;
}

a,
span {
display: block;
padding: $sp-medium;

@media only screen and (min-width: $breakpoint-small) {
padding: 0 0 $sp-x-small;
}
}

a {
&:hover {
text-decoration: none;

@media only screen and (min-width: $breakpoint-small) {
text-decoration: underline;
}
}

&:link,
&:visited {
color: $color-dark;

@media only screen and (min-width: $breakpoint-small) {
font-weight: normal;
}
}

&::after {
content: ""; // hide the default > */
}

/// open and close the primary/secondary navs
}
}

.p-footer__title + .second-level-nav {
display: none;

Expand Down
11 changes: 0 additions & 11 deletions static/sass/styles.scss
View file
Expand Up @@ -1655,14 +1655,3 @@ ol.p-list--divided .p-list__item::before {
.u-aspect-ratio--16-9 {
aspect-ratio: 16/9;
}

// .u-has-icon {
// padding-left: $sp-x-large;
// position: relative;

// &::before {
// left: 0;
// position: absolute;
// width: $sp-medium;
// }
// }
49 changes: 29 additions & 20 deletions templates/templates/_footer-copyright-and-legal.html
View file
@@ -1,20 +1,29 @@
<p class="p-footer--secondary__content"><small>&copy; {{ current_year() }} Canonical Ltd. Ubuntu and Canonical are
registered trademarks of Canonical Ltd.</small></p>
<nav class="p-footer--secondary__nav">
<ul class="p-inline-list--middot u-no-margin--bottom">
<li class="p-inline-list__item">
<a class="p-link--soft" accesskey="8" href="/legal"><small>Legal information</small></a>
</li>
<li class="p-inline-list__item">
<a class="p-link--soft" accesskey="9" href="/legal/data-privacy"><small>Data privacy</small></a>
</li>
<li class="p-inline-list__item">
<a href="" class="p-link--soft js-revoke-cookie-manager"><small>Manage your tracker settings</small></a>
</li>
<li class="p-inline-list__item">
<a class="p-link--soft" href="https://github.com/canonical/ubuntu.com/issues/new" id="report-a-bug">
<small>Report a bug on this site</small>
</a>
</li>
</ul>
</nav>
<div class="row">
<hr class="p-rule is-muted" />
<div class="col-3 col-medium-2">
<p class="p-footer--secondary__content">&copy; {{ current_year() }} Canonical Ltd. </p>
</div>
<div class="col-9 col-medium-4">
<p>Ubuntu and Canonical are registered trademarks of Canonical Ltd.</p>
<hr class="p-rule is-muted" />
<nav class="p-footer--secondary__nav">
<ul class="p-inline-list--inline u-responsive-realign u-no-margin--left u-no-padding--left">
<li class="p-inline-list__item">
<a accesskey="8" href="/legal">Legal information</a>
</li>
<li class="p-inline-list__item">
<a accesskey="9" href="/legal/data-privacy">Data privacy</a>
</li>
<li class="p-inline-list__item">
<a href="" class="js-revoke-cookie-manager">Manage your tracker settings</a>
</li>
<li class="p-inline-list__item">
<a href="https://github.com/canonical/ubuntu.com/issues/new" id="report-a-bug">
Report a bug on this site
</a>
</li>
</ul>
</nav>
</div>
</div>

28 changes: 16 additions & 12 deletions templates/templates/_footer_item.html
View file
@@ -1,16 +1,20 @@
<li class="p-footer__item">
<h2 class="p-footer__title">
<a class="p-link--soft u-hide--small" href="{{ section.path }}">{{ section.title }}</a>
<a class="p-link--soft u-hide--medium u-hide--large js-footer-accordion-cta" href="#" aria-controls="{{ section.path }}-footer-nav">{{ section.title }}</a>
</h2>

<ul class="second-level-nav" id="{{ section.path }}-footer-nav">
{% for child in section.children %}
<div class="row">
<hr class="p-rule is-muted" />
<div class="col-3 col-medium-2">
<h2 class="p-heading--5">
<a class="u-hide--small" href="{{ section.path }}">{{ section.title }}</a>
<a class="u-hide--medium u-hide--large js-footer-accordion-cta" href="#" aria-controls="{{ section.path }}-footer-nav">{{ section.title }}</a>
</h2>
</div>
<div class="col-9 col-medium-4 u-hide--small">
<ul class="p-inline-list" id="{{ section.path }}-footer-nav">
{% for child in section.children %}
{% if child.title != 'Overview' %}
{% if not child.hidden %}
<li><a href="{{ child.path }}">{{ child.title }}</a></li>
<li class="p-inline-list__item"><a href="{{ child.path }}">{{ child.title }}</a></li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>
</div>

0 comments on commit d47b57a

Please sign in to comment.