Skip to content

Commit

Permalink
Merge pull request #732 from chillkang/landing-page-redesign
Browse files Browse the repository at this point in the history
Landing page redesign
  • Loading branch information
chillkang authored Oct 16, 2023
2 parents 3494825 + 1a412ec commit 58f72e1
Show file tree
Hide file tree
Showing 14 changed files with 846 additions and 764 deletions.
4 changes: 2 additions & 2 deletions .stylelintrc
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"rules": {
"order/properties-alphabetical-order": true,
"at-rule-no-unknown": [ true, {
"ignoreAtRules": ["extend", "include"]
} ],
"ignoreAtRules": ["extend", "include", "mixin"]
} ]
}
}
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"@babel/core": "7.20.12",
"@babel/preset-env": "7.20.2",
"@canonical/cookie-policy": "3.4.0",
"@canonical/global-nav": "2.7.0",
"@canonical/global-nav": "3.6.0",
"@canonical/latest-news": "1.4.1",
"@sentry/browser": "5.30.0",
"autoprefixer": "10.4.13",
Expand All @@ -40,11 +40,11 @@
"postcss": "8.4.21",
"postcss-cli": "8.3.1",
"sass": "1.57.1",
"vanilla-framework": "2.37.1",
"terser-webpack-plugin": "5.3.6",
"vanilla-framework": "^4.3.0",
"watch-cli": "0.2.3",
"webpack": "5.75.0",
"webpack-cli": "4.10.0",
"terser-webpack-plugin": "5.3.6"
"webpack-cli": "4.10.0"
},
"devDependencies": {
"eslint": "7.32.0",
Expand Down
50 changes: 50 additions & 0 deletions static/js/navigation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
function toggleDropdown(toggle, open) {
const parentElement = toggle.parentNode;
const dropdown = document.getElementById(
toggle.getAttribute("aria-controls")
);
dropdown.setAttribute("aria-hidden", !open);

if (open) {
parentElement.classList.add("is-active", "is-selected");
} else {
parentElement.classList.remove("is-active", "is-selected");
}
}

function closeAllDropdowns(toggles) {
toggles.forEach((toggle) => {
toggleDropdown(toggle, false);
});
}

function handleClickOutside(toggles, containerClass) {
document.addEventListener("click", (event) => {
const {target} = event;

if (target.closest) {
if (!target.closest(containerClass)) {
closeAllDropdowns(toggles);
}
}
});
}

function initNavDropdowns(containerClass) {
const toggles = [].slice.call(
document.querySelectorAll(`${containerClass } [aria-controls]`)
);

handleClickOutside(toggles, containerClass);

toggles.forEach((toggle) => {
toggle.addEventListener("click", (e) => {
e.preventDefault();

const isOpen = e.target.parentNode.classList.contains("is-active");

closeAllDropdowns(toggles);
toggleDropdown(toggle, !isOpen);
});
});
}
12 changes: 12 additions & 0 deletions static/sass/_patterns_p-suru.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@mixin p-suru {
.p-suru--bottom-right {
background-image: url("#{$assets-path}a6474c5b-Suru%20top%20%20right%20angle.png");
background-position: bottom right;
background-repeat: no-repeat;
background-size: 200px 149px;

@media only screen and (min-width: $breakpoint-large) {
background-size: contain;
}
}
}
2 changes: 1 addition & 1 deletion static/sass/custom/_entities.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

.entity {
&__header {
@media (max-width: $breakpoint-medium) {
@media (max-width: $breakpoint-large - 1) {
.series-tags {
margin-bottom: 1rem;
}
Expand Down
2 changes: 1 addition & 1 deletion static/sass/custom/_header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ $breakpoint-navigation: 980px;
order: 2;
}

@media (min-width: $breakpoint-medium) and (max-width: $breakpoint-navigation) {
@media (min-width: 768px) and (max-width: $breakpoint-navigation) {
.is-secondary-link {
display: none !important;
}
Expand Down
2 changes: 1 addition & 1 deletion static/sass/custom/_homepage-hero-promo.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Homepage promo takeover

.homepage-hero-promos {
@media (max-width: $breakpoint-medium) {
@media (max-width: $breakpoint-large - 1) {
margin-top: 25vw;
}

Expand Down
4 changes: 2 additions & 2 deletions static/sass/custom/_patterns_strips.scss
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@
background-repeat: no-repeat;
background-size: 50% 100%, 20% 100%, 100% 100%, cover;

@media (max-width: $breakpoint-medium) {
@media (max-width: $breakpoint-large - 1) {
background: #f0f5f7;
}
}
Expand Down Expand Up @@ -192,7 +192,7 @@
background-repeat: no-repeat;
background-size: 40% 100%, 80% 60%, 100% 100%;

@media (max-width: $breakpoint-medium) {
@media (max-width: $breakpoint-large - 1) {
background: rgb(240, 245, 247);
}
}
Expand Down
48 changes: 37 additions & 11 deletions static/sass/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,11 @@ $breakpoint-navigation-threshold: $breakpoint-large;
@import 'custom/linkable-heading';
@import 'custom/case_studies';
@import 'custom/patterns_hero-tab';
@import "patterns_p-suru";

@include jaas-hero-tab;
@include jaas-p-strips;
@include p-suru;

// Homepage Card footer margin
.p-card.is-flex {
Expand All @@ -64,15 +66,6 @@ $breakpoint-navigation-threshold: $breakpoint-large;
}
}

.p-card__footer {
margin-top: 1rem;

&-link {
display: block;
margin: 0.5rem 0;
}
}

.play-video-cta {
display: inline-block;
position: relative;
Expand All @@ -92,6 +85,39 @@ $breakpoint-navigation-threshold: $breakpoint-large;
}
}

.footer {
background-color: #222;

a {
color: #69c;

&:visited {
color: #a679d2;
}
}
}

.homepage-tabs {
@media only screen and (min-width: $breakpoint-large) {
margin-top: 88px;
}
}

.homepage-tabs-content {
display: flex;
flex-direction: column;
height: 100%;
}

.tabs-content-wrapper {
flex: 1;
}

.p-icon--github-white {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9Ijk5OSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNTEyIDBDMjI5LjI1IDAgMCAyMjkuMjUgMCA1MTJjMCAyMjYuMjUgMTQ2LjY5IDQxOC4xMiAzNTAuMTYgNDg1LjgxIDI1LjU5IDQuNjkgMzQuOTMtMTEuMTIgMzQuOTMtMjQuNjIgMC0xMi4xOS0uNDctNTIuNTctLjcxLTk1LjMxQzI0MiA5MDguODEgMjExLjkxIDgxNy41IDIxMS45MSA4MTcuNWMtMjMuMzItNTkuMTItNTYuODUtNzQuODgtNTYuODUtNzQuODgtNDYuNTMtMzEuNzQgMy41My0zMS4xMiAzLjUzLTMxLjEyIDUxLjQxIDMuNTYgNzguNDcgNTIuNzUgNzguNDcgNTIuNzUgNDUuNjkgNzguMjUgMTE5Ljg4IDU1LjYzIDE0OSA0Mi41IDQuNjYtMzMgMTcuOTEtNTUuNjMgMzIuNS02OC4zNy0xMTMuNjUtMTIuOTQtMjMzLjIyLTU2Ljg4LTIzMy4yMi0yNTMuMDcgMC01NS45NCAxOS45Ny0xMDEuNTYgNTIuNjYtMTM3LjQtNS4yMi0xMy0yMi44NC02NS4xIDUuMDYtMTM1LjU3IDAgMCA0Mi45NC0xMy43NSAxNDAuODEgNTIuNSA0MC44Mi0xMS40IDg0LjYtMTcuMDMgMTI4LjEzLTE3LjIyIDQzLjUuMTkgODcuMzEgNS44OCAxMjguMTkgMTcuMjkgOTcuNjktNjYuMzIgMTQwLjY5LTUyLjUgMTQwLjY5LTUyLjUgMjggNzAuNTMgMTAuMzcgMTIyLjU2IDUuMTIgMTM1LjUgMzIuODEgMzUuODQgNTIuNjIgODEuNDcgNTIuNjIgMTM3LjQgMCAxOTYuNjktMTE5Ljc0IDI0MC0yMzMuODEgMjUyLjY5IDE4LjQ0IDE1Ljg4IDM0Ljc1IDQ3IDM0Ljc1IDk0Ljc1IDAgNjguNDQtLjY4IDEyMy42My0uNjggMTQwLjUgMCAxMy42MyA5LjMxIDI5LjU1IDM1LjI0IDI0LjU2Qzg3Ny40NCA5MzAgMTAyNCA3MzguMTIgMTAyNCA1MTIgMTAyNCAyMjkuMjUgNzk0Ljc1IDAgNTEyIDB6Ii8+PC9zdmc+Cg==");
}


// experts expert-cards
$color-experts-highlight: #e95420;

Expand Down Expand Up @@ -182,7 +208,7 @@ $color-experts-highlight: #e95420;

// p-strip with bg image
.has-image-bg {
@media (max-width: $breakpoint-medium) {
@media (max-width: $breakpoint-large - 1) {
background: none !important;
}
}
Expand Down Expand Up @@ -259,7 +285,7 @@ div .p-accordion__tab[aria-expanded] {
}

// Modelling steps on the homepage.
@media (min-width: $breakpoint-small) and (max-width: $breakpoint-medium) {
@media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
.step-block {
display: flex;

Expand Down
66 changes: 9 additions & 57 deletions templates/_layout.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
{% endblock %}
</head>

<body>
<body class="is-paper">
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-K9KCMZ"
height="0" width="0"
Expand All @@ -46,10 +46,18 @@

{% include 'shared/header.html' %}

<script src="{{ versioned_static('js/navigation.js') }}"></script>
<script src="/static/js/src/libs/global-nav/global-nav.js"></script>
<script>
initNavDropdowns(".p-navigation__item--dropdown-toggle");
</script>

<main id="main-content">
{% block content %}{% endblock content %}
</main>

{% include "footer.html" %}

<script type="text/template" id="cookie-warning-template">
<div class="cookie-policy" style="position: fixed; bottom: 0; width: 100%;">
<div class="row">
Expand All @@ -69,62 +77,6 @@
</div>
</script>

<footer class="p-strip--suru-top has-accent is-dark" style="background-image: url('https://assets.ubuntu.com/v1/8951dc67-suru-left.svg'), linear-gradient(266deg, #044f66, #022935);background-size: auto 100%, cover;">
<div class="row">
<div class="col-8">
<p class="u-no-max-width">&copy; {{ current_year }} Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.</p>
<ul class="p-inline-list--middot is-dark">
<li class="p-inline-list__item">
<a class="p-link--inverted p-link--external" href="https://www.ubuntu.com/legal">Legal Information</a>
</li>
<li class="p-inline-list__item">
<a href="" class="p-link--inverted js-revoke-cookie-manager">Manage your tracker settings</a>
</li>
<li class="p-inline-list__item">
<a class="p-link--inverted" href="{{ external_urls.issues }}">Report a bug on this site</a>
</li>
</ul>
<nav>
<ul class="p-inline-list--middot is-dark">
<li class="p-inline-list__item">
<a class="p-link--inverted p-link--external" href="{{ external_urls.docs }}">Docs</a>
</li>
<li class="p-inline-list__item">
<a class="p-link--inverted" href="{{ url_for('jaasai.community') }}">Community</a>
</li>
<li class="p-inline-list__item">
<a class="p-link--inverted p-link--external" href="{{ external_urls.blog }}">Blog</a>
</li>
<li class="p-inline-list__item">
<a class="p-link--inverted p-link--external" href="{{ external_urls.docs }}/installing">Install Juju</a>
</li>
</ul>
<span class="u-off-screen">
<a href="#">Go to the top of the page</a>
</span>
</nav>
</div>
<div class="col-4 u-align--right">
<ul class="p-inline-list">
<li class="p-inline-list__item">
<a class="p-icon--facebook" href="http://www.facebook.com/ubuntucloud" target="_blank" rel="noopener noreferrer">
Facebook
</a>
</li>
<li class="p-inline-list__item">
<a class="p-icon--twitter" href="http://www.twitter.com/juju_devops" target="_blank" rel="noopener noreferrer">
Twitter
</a>
</li>
<li class="p-inline-list__item">
<a class="p-icon--youtube" href="http://youtube.com/jujucharms" target="_blank" rel="noopener noreferrer">
Youtube
</a>
</li>
</ul>
</div>
</div>
</footer>
<!-- begin usabilla live embed code -->
<script type="text/javascript">/*{literal}<![CDATA[*/window.lightningjs||function(c){function g(b,d){d&&(d+=(/\?/.test(d)?"&":"?")+"lv=1");c[b]||function(){var i=window,h=document,j=b,g=h.location.protocol,l="load",k=0;(function(){function b(){a.P(l);a.w=1;c[j]("_load")}c[j]=function(){function m(){m.id=e;return c[j].apply(m,arguments)}var b,e=++k;b=this&&this!=i?this.id||0:0;(a.s=a.s||[]).push([e,b,arguments]);m.then=function(b,c,h){var d=a.fh[e]=a.fh[e]||[],j=a.eh[e]=a.eh[e]||[],f=a.ph[e]=a.ph[e]||[];b&&d.push(b);c&&j.push(c);h&&f.push(h);return m};return m};var a=c[j]._={};a.fh={};a.eh={};a.ph={};a.l=d?d.replace(/^\/\//,(g=="https:"?g:"http:")+"//"):d;a.p={0:+new Date};a.P=function(b){a.p[b]=new Date-a.p[0]};a.w&&b();i.addEventListener?i.addEventListener(l,b,!1):i.attachEvent("on"+l,b);var q=function(){function b(){return["<head></head><",c,' onload="var d=',n,";d.getElementsByTagName('head')[0].",d,"(d.",g,"('script')).",i,"='",a.l,"'\"></",c,">"].join("")}var c="body",e=h[c];if(!e)return setTimeout(q,100);a.P(1);var d="appendChild",g="createElement",i="src",k=h[g]("div"),l=k[d](h[g]("div")),f=h[g]("iframe"),n="document",p;k.style.display="none";e.insertBefore(k,e.firstChild).id=o+"-"+j;f.frameBorder="0";f.id=o+"-frame-"+j;/MSIE[ ]+6/.test(navigator.userAgent)&&(f[i]="javascript:false");f.allowTransparency="true";l[d](f);try{f.contentWindow[n].open()}catch(s){a.domain=h.domain,p="javascript:var d="+n+".open();d.domain='"+h.domain+"';",f[i]=p+"void(0);"}try{var r=f.contentWindow[n];r.write(b());r.close()}catch(t){f[i]=p+'d.write("'+b().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};a.l&&setTimeout(q,0)})()}();c[b].lv="1";return c[b]}var o="lightningjs",k=window[o]=g(o);k.require=g;k.modules=c}({});
window.usabilla_live = lightningjs.require("usabilla_live", "//w.usabilla.com/3dcbd8f54975.js");
Expand Down
Loading

0 comments on commit 58f72e1

Please sign in to comment.