mirror of https://github.com/Qiskit/qiskit.org.git
Add join section (#1089)
This commit is contained in:
Randy
Salvador de la Puente González
parent
958159aef2
commit
1533db2725
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<section class="join-section">
|
||||
<article class="join-section__feature join-section__feature_intro">
|
||||
<p class="join-section__feature_intro-copy">
|
||||
The Qiskit advocate program is a global program that provides support to the individuals who actively contribute to the Qiskit Community.
|
||||
</p>
|
||||
<AppCtaBtn
|
||||
class="join-section__feature_intro-cta"
|
||||
v-bind="joinAction"
|
||||
/>
|
||||
</article>
|
||||
<CompactFeature
|
||||
v-for="benefit in advocateBenefits"
|
||||
:key="`benefit-${benefit.icon}`"
|
||||
class="join-section__feature"
|
||||
v-bind="benefit"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import { Component } from 'vue-property-decorator'
|
||||
import CompactFeature from '~/components/ui/CompactFeature.vue'
|
||||
import AppCtaBtn from '~/components/metal/AppCtaBtn.vue'
|
||||
|
||||
type Benefit = Pick<CompactFeature, 'icon'|'title'|'description'>
|
||||
|
||||
@Component({ components: { CompactFeature, AppCtaBtn } })
|
||||
export default class extends Vue {
|
||||
advocateBenefits: Array<Benefit> = [
|
||||
{
|
||||
icon: 'high-five.svg',
|
||||
title: 'Network with experts and enthusiasts',
|
||||
description: 'Advocates will be added to a group of quantum experts and will be a part of regular information sharing sessions.'
|
||||
},
|
||||
{
|
||||
icon: 'global-network.svg',
|
||||
title: 'Access to Qiskit core members and projects',
|
||||
description: 'Advocates will receive special access to core members of the Qiskit team for questions and brainstorming ideas.'
|
||||
},
|
||||
{
|
||||
icon: 'location.svg',
|
||||
title: 'Invitation to events',
|
||||
description: 'Active Qiskit Advocates will be invited to attend global events created for the quantum computing community.'
|
||||
}
|
||||
]
|
||||
|
||||
joinAction = {
|
||||
url: '#meet-the-advocates',
|
||||
label: 'Find an advocate'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~carbon-components/scss/globals/scss/typography';
|
||||
.join-section {
|
||||
@include contained();
|
||||
padding: 0 $spacing-05;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@include mq($until: medium) {
|
||||
flex-wrap: initial;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@include mq($until: large) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: initial;
|
||||
padding-left: $spacing-05;
|
||||
}
|
||||
|
||||
&__feature {
|
||||
flex: 1 1 4 * $column-size-large;
|
||||
margin: 0 $spacing-05;
|
||||
padding-bottom: $spacing-09;
|
||||
|
||||
@include mq($until: large) {
|
||||
flex: 1 1 45%;
|
||||
margin: $spacing-05;
|
||||
}
|
||||
|
||||
@include mq($until: medium) {
|
||||
flex: 1 1 auto;
|
||||
margin-left: initial;
|
||||
margin-bottom: $spacing-05;
|
||||
}
|
||||
|
||||
&_intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 0;
|
||||
|
||||
&-copy {
|
||||
@include type-style('body-long-01');
|
||||
color: $white-text-01;
|
||||
|
||||
@include mq($until: medium) {
|
||||
margin-bottom: $spacing-07;
|
||||
}
|
||||
}
|
||||
|
||||
&-cta {
|
||||
min-width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -40,6 +40,10 @@ export default class AppCta extends Vue {
|
|||
return 'arrow-right-16'
|
||||
}
|
||||
}
|
||||
|
||||
get isIdAnchor () {
|
||||
return BasicLink.isIdAnchor(this.$attrs.url)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -169,5 +173,21 @@ export default class AppCta extends Vue {
|
|||
transform: translate(2px, -2px);
|
||||
}
|
||||
}
|
||||
|
||||
&_is-id-anchor {
|
||||
$arrow-path: "path:nth-child(1)";
|
||||
|
||||
#{$arrow-path} {
|
||||
transform: translate(0, 0);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
#{$arrow-path} {
|
||||
transform: translate(0, 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<section class="compact-feature">
|
||||
<article class="compact-feature">
|
||||
<img
|
||||
class="compact-feature__icon"
|
||||
:src="`/images/icons/${icon}`"
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<p class="compact-feature__description">
|
||||
{{ description }}
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
<template>
|
||||
<section>
|
||||
<div class="menu-container">
|
||||
<div class="menu menu--framed">
|
||||
<nav class="navigation-group">
|
||||
<BasicLink
|
||||
v-for="section in sections"
|
||||
:key="section.label"
|
||||
class="navigation-group__item"
|
||||
:url="`#${section.anchor}`"
|
||||
>
|
||||
{{ section.label }}
|
||||
</BasicLink>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import { Component, Prop } from 'vue-property-decorator'
|
||||
import { InnerNavLink } from '~/constants/menuLinks'
|
||||
|
||||
@Component
|
||||
export default class InnerNavigation extends Vue {
|
||||
@Prop({ type: Array, default: [] }) sections!: InnerNavLink[]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~carbon-components/scss/globals/scss/typography';
|
||||
|
||||
.menu-container {
|
||||
background-color: $inverse-02;
|
||||
}
|
||||
|
||||
.menu {
|
||||
$submenu-height: 5rem;
|
||||
|
||||
height: $submenu-height;
|
||||
display: flex;
|
||||
|
||||
& > * {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&--framed {
|
||||
@include framed();
|
||||
}
|
||||
|
||||
@include mq($until: medium) {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-group {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
&__item {
|
||||
@include type-style('productive-heading-03');
|
||||
flex: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $inverse-01;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
border-right: 1px solid $ui-02;
|
||||
text-align: center;
|
||||
padding: $spacing-03;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
@include mq($until: medium) {
|
||||
border: none;
|
||||
border-bottom: 1px solid $ui-02;
|
||||
padding: $spacing-05;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq($until: medium) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 600px) {
|
||||
.inner-navigation {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,28 +1,8 @@
|
|||
<template>
|
||||
<main class="community-page advocates-page">
|
||||
<TheAdvocatesHeader />
|
||||
<AdvocatesJoinSection />
|
||||
<div class="inner-navigation-scope">
|
||||
<InnerNavigation
|
||||
class="inner-navigation"
|
||||
:sections="[
|
||||
{ anchor: 'become-an-advocate', label: 'Become an Advocate' },
|
||||
{ anchor: 'global-community' , label: 'Global Community' },
|
||||
{ anchor: 'meet-the-advocates', label: 'Meet the Advocates' },
|
||||
]"
|
||||
/>
|
||||
<PageSection id="become-an-advocate" framed>
|
||||
<h2 class="community-page__header">
|
||||
Become an Advocate
|
||||
</h2>
|
||||
<ol>
|
||||
<li>Click on the "Apply now" button below.</li>
|
||||
<li>Complete the test in the application with at least a 70%.</li>
|
||||
<li>Provide at least 3 contributions to the Qiskit community and complete application by <strong>August 15, 2020</strong>.</li>
|
||||
</ol>
|
||||
<ul class="actions">
|
||||
Closed
|
||||
</ul>
|
||||
</PageSection>
|
||||
<MapSection
|
||||
id="global-community"
|
||||
:points="cities()"
|
||||
|
|
@ -67,23 +47,6 @@ type Benefit = Pick<CompactFeature, 'icon'|'title'|'description'>
|
|||
})
|
||||
export default class AdvocatesPage extends QiskitPage {
|
||||
routeName: string = 'advocates'
|
||||
advocateBenefits: Array<Benefit> = [
|
||||
{
|
||||
icon: 'high-five.svg',
|
||||
title: 'Network with experts and enthusiasts',
|
||||
description: 'Advocates will be added to a group of quantum experts and will be a part of regular information sharing sessions.'
|
||||
},
|
||||
{
|
||||
icon: 'global-network.svg',
|
||||
title: 'Access to Qiskit core members and projects',
|
||||
description: 'Advocates will receive special access to core members of the Qiskit team for questions and brainstorming ideas.'
|
||||
},
|
||||
{
|
||||
icon: 'location.svg',
|
||||
title: 'Invitation to events',
|
||||
description: 'Active Qiskit Advocates will be invited to attend global events created for the quantum computing community.'
|
||||
}
|
||||
]
|
||||
|
||||
cities () {
|
||||
const cityIndex = this.$data.profiles.reduce((cityIndex: any, card: any) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue