Skip to content
This repository was archived by the owner on Feb 24, 2020. It is now read-only.

Commit 93653e1

Browse files
delapuentedelapuente
authored
Redesign and Qiskit.org integration (#67)
--- New software version notes: This commit updates to Nuxt 2.9.2. The new version has some implications when coming from 2.8.X version using Typescript: https://typescript.nuxtjs.org/migration.html Due to this bug: markmarkoh/datamaps#500 A custom version of datamaps is used for rendering the Advocate Map: https://github.com/delapuente/datamaps/tree/fix-types --- The new theme makes extensive use of dark and electric colors with a vibrant header, combining different styles of sections with ad-hoc widgets to showcase the capabilities of the design. Affected pages are `/education` and `/advocates`. The new design integrates with qiskit.org by faking the top menu and adding an internal community sub-menu. It also adds a footer with Qiskit elements, community sub-sections and social media. This commit adds a new component structure aimed at creating a collection of highly composable units. These units use BEM for internal styling. It is recommended not to style the components outside their physical boundaries to give the page freedom to integrates. However, the CSS framework (which is now SCSS) provide a collection of mixin for standarizing the layout. The point of entry for the community is redirecting to the education micro-site on purpose. This commit intentionally breaks the separation between design and presentation. A better approach is needed to allow content documents to be able of providing several HTML sections instead of only one. A summary of the problem can be found at: https://michaelnthiessen.com/advanced-vue-controlling-parent-slots The most semantic solution, [portals](https://github.com/LinusBorg/portal-vue), don't work in server-side rendering mode and so, the portals are not populated with content in a static-site configuration. We are exploring embedding multiple front-matter documents at: https://github.com/delapuente/frontmatter-markdown-loader/tree/multiple The other solutions also rely on client reactivity which is not the desired behaviour. The new design also intentionally avoids the use of the `<nuxt-link>` component. Due to unknown reasons, DOM differentiation does not work correctly and the navigation is ultimately broken. Follow-ups for solving the navigation issues, improve reactivity in secondary content and recover the separation between design and content are filled in the project repository.
1 parent 2acb8b8 commit 93653e1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+3893
-974
lines changed

‎assets/scss/layout.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
-webkit-overflow-scrolling: touch;
5+
}
6+
7+
html,
8+
body,
9+
#__nuxt,
10+
#__layout {
11+
height: 100%;
12+
min-height: 100%;
13+
}
14+
15+
.content-root * {
16+
box-sizing: border-box;
17+
}
18+
19+
.content-root {
20+
display: flex;
21+
flex-direction: column;
22+
height: 100%;
23+
min-height: 100%;
24+
overflow-x: hidden;
25+
}
26+
27+
.content-root > main {
28+
flex-grow: 1;
29+
}

‎assets/scss/mixins.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@mixin framed() {
2+
max-width: 1100px;
3+
margin-left: auto;
4+
margin-right: auto;
5+
padding: 0 2rem;
6+
}
7+
8+
@mixin elegant-title() {
9+
text-align: center;
10+
text-transform: uppercase;
11+
font-weight: 200;
12+
letter-spacing: 0.3em;
13+
}

‎assets/scss/theme.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
:root {
2+
--ibm-blue: #0a1d8f;
3+
--primary-color: #242a2e;
4+
--primary-color-dark: #161f25;
5+
--primary-color-darkmost: #0d1a22;
6+
--primary-color-light: #424c53;
7+
--primary-color-lightmost: #5d6870;
8+
--secondary-color: #893ffc;
9+
--secondary-color-light: #a167fc;
10+
--secondary-color-lightmost: #bc93fc;
11+
--secondary-color-dark: #6f16fa;
12+
--secondary-color-darkmost: #6105f2;
13+
--body-color-light: #e0e0e0;
14+
--body-color-dark: #333333;
15+
}
16+
17+
h1 {
18+
font-size: 2.5rem;
19+
}
20+
21+
h2 {
22+
font-size: 2rem;
23+
}
24+
25+
p {
26+
margin-top: 1.5rem;
27+
}

‎components/advocates/MapSection.vue

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<template>
2+
<article class="map-section">
3+
<div class="map-section__map-container" />
4+
<div class="map-section__content">
5+
<slot />
6+
</div>
7+
</article>
8+
</template>
9+
10+
<script lang="ts">
11+
import Vue from 'vue'
12+
import { Component, Prop } from 'vue-property-decorator'
13+
14+
@Component({
15+
mounted() {
16+
require('d3')
17+
require('topojson')
18+
const Datamap = require('datamaps')
19+
const map = new Datamap({
20+
element: this.$el.querySelector('.map-section__map-container'),
21+
responsive: true,
22+
projection: 'mercator',
23+
geographyConfig: {
24+
highlightOnHover: false,
25+
popupOnHover: false,
26+
borderColor: 'var(--primary-color-lightmost)'
27+
},
28+
fills: {
29+
defaultFill: '#0000',
30+
city: 'var(--secondary-color)'
31+
},
32+
bubblesConfig: {
33+
borderWidth: 0,
34+
highlightBorderWidth: 0,
35+
highlightFillColor: 'var(--secondary-color-light)',
36+
popupTemplate(_, data) {
37+
return `<div class="map-tip">${data.name}</div>`
38+
}
39+
},
40+
done() {
41+
// fix cutting the bottom of the map.
42+
this.element.style.paddingBottom = '60%'
43+
}
44+
})
45+
const advocateLocations = this.$props.points.map((location) => {
46+
return { ...location, fillKey: 'city', radius: 5 }
47+
})
48+
map.bubbles(advocateLocations)
49+
window.onresize = () => {
50+
requestAnimationFrame(() => {
51+
map.resize()
52+
})
53+
}
54+
}
55+
})
56+
export default class extends Vue {
57+
@Prop({ type: String, default: 'end' }) extraPosition
58+
@Prop(Array) points
59+
}
60+
</script>
61+
62+
<style lang="scss" scoped>
63+
.map-section {
64+
position: relative;
65+
66+
&__content {
67+
position: absolute;
68+
top: 0; right: 0; bottom: 0; left: 0;
69+
padding-top: 4rem;
70+
width: 100%;
71+
height: 100%;
72+
z-index: 1;
73+
pointer-events: none;
74+
75+
& * {
76+
pointer-events: initial;
77+
}
78+
}
79+
}
80+
</style>
81+
82+
<style lang="scss">
83+
.map-tip {
84+
position: relative;
85+
font-size: 0.8rem;
86+
font-weight: 200;
87+
color: white;
88+
background-color: var(--secondary-color-light);
89+
padding: 0.2rem 0.6rem;
90+
transform: translateX(-50%);
91+
92+
&::before {
93+
content: "";
94+
display: inline-block;
95+
position: absolute;
96+
bottom: 100%;
97+
left: 50%;
98+
width: 0;
99+
height: 0;
100+
font-size: 0;
101+
border: 8px solid transparent;
102+
border-bottom: 8px solid var(--secondary-color-light);
103+
transform: translate(-50%);
104+
}
105+
}
106+
</style>

‎components/cards/AdvocateCard.vue

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<article class="advocate-card">
3+
<div
4+
class="advocate-card__picture"
5+
:style="`background-image: ${decorate(image)};`"
6+
/>
7+
<div class="advocate-card__copy">
8+
<h3>
9+
{{ name }}
10+
</h3>
11+
<p>
12+
{{ location }}
13+
</p>
14+
<h3>
15+
Focus areas
16+
</h3>
17+
<p>
18+
{{ areas }}
19+
</p>
20+
</div>
21+
</article>
22+
</template>
23+
24+
<script lang="ts">
25+
import Vue from 'vue'
26+
import { Component, Prop } from 'vue-property-decorator'
27+
28+
@Component
29+
export default class extends Vue {
30+
@Prop(String) name
31+
@Prop(String) image
32+
@Prop(String) location
33+
@Prop(String) areas
34+
35+
decorate(image) {
36+
const bgEffects = [
37+
'linear-gradient(170deg, #0000 0%, #0000 90%, var(--primary-color) 90.3%)',
38+
'linear-gradient(-170deg, #0000 0%, #0000 90%, var(--primary-color) 90.3%)',
39+
`url(${image})`
40+
]
41+
return bgEffects.join(', ')
42+
}
43+
}
44+
</script>
45+
46+
<style lang="scss" scoped>
47+
.advocate-card {
48+
font-size: 0.9rem;
49+
text-align: center;
50+
background-color: var(--primary-color);
51+
52+
p {
53+
margin-top: 0;
54+
}
55+
56+
h3 {
57+
margin-top: 1.5rem;
58+
59+
&:first-child {
60+
margin-top: 0;
61+
}
62+
}
63+
64+
&__picture {
65+
height: 350px;
66+
background-repeat: no-repeat;
67+
background-size: cover, cover, cover;
68+
background-position: top center;
69+
}
70+
71+
&__copy {
72+
margin: 0.5rem 2rem 1em;
73+
}
74+
}
75+
</style>

‎components/ctas/Cta.vue

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<a class="button" :href="to">
3+
<slot />
4+
</a>
5+
</template>
6+
7+
<script lang="ts">
8+
import Vue from 'vue'
9+
import { Component, Prop } from 'vue-property-decorator'
10+
11+
@Component
12+
export default class extends Vue {
13+
@Prop(String) to
14+
15+
isExternal(url: string): boolean {
16+
return url.startsWith('http')
17+
}
18+
19+
created() {
20+
const targetUrl = this.$props.to
21+
if (targetUrl && this.isExternal(targetUrl)) {
22+
this.$attrs.target = '_blank'
23+
this.$attrs.rel = 'noopener'
24+
}
25+
}
26+
}
27+
</script>
28+
29+
<style lang="scss" scoped>
30+
.button {
31+
padding: 0.66rem 1rem;
32+
background-color: var(--primary-color);
33+
border: 2px solid var(--secondary-color);
34+
font-size: 0.75em;
35+
font-weight: 100;
36+
color: white;
37+
text-transform: uppercase;
38+
text-decoration: none;
39+
box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
40+
white-space: nowrap;
41+
line-height: 4rem;
42+
}
43+
</style>

0 commit comments

Comments
 (0)