Initial commit
This commit is contained in:
zhongjin
+48
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="datasetcard u-width--100">
|
||||
<div class="u-flex u-flex__align--center">
|
||||
<div class="datasetcard-icon"></div>
|
||||
<div class="title-container">
|
||||
<h3 class="text is-caption is-txtGrey u-ellipsis" title="Populated places simple">{{content.title}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-flex u-flex__align--center">
|
||||
<span class="text is-small is-txtSoftGrey u-mr--24" :title="content.rows">{{content.rows}}</span>
|
||||
<span class="text is-small is-txtSoftGrey u-mr--48">{{content.size}}</span>
|
||||
<a download :href="content.link" class="button button--ghost button--outline">{{content.button}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'DatasetCard_21',
|
||||
props: {
|
||||
content: Object
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.datasetcard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 0 16px;
|
||||
background-color: $white;
|
||||
|
||||
.datasetcard-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 16px;
|
||||
border-radius: 2px;
|
||||
background-color: #F2F6F9;
|
||||
background-image: url(../../../../assets/icons/datasets/data-types/dots.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.step1.title`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<img class="u-width--100" src="../../../../assets/images/onboarding/builder_step1@2x.png"/>
|
||||
<p v-html="$t(`Wizards.builder.step1.text1`)" class="text is-body u-mb--16 u-mt--24"></p>
|
||||
<p v-html="$t(`Wizards.builder.step1.text2`)" class="text is-body u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step1',
|
||||
stepName: 'Intro',
|
||||
components: {
|
||||
StepTitle
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step2.summary.text`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step2.howto.instruction1`)" class="text is-caption u-mb--16 u-inlineflex"></p>
|
||||
<DatasetCard :content="$t(`Wizards.builder.step2.cards.dataset1`)"></DatasetCard>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step2.howto.instruction2`)" class="text is-caption u-mt--24 u-mb--24 u-inlineflex"></p>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step2.howto.instruction3`)" class="text is-caption u-mb--16 u-inlineflex"></p>
|
||||
<img class="u-width--100" src="../../../../assets/images/onboarding/builder_step2@2x.png" alt="Screenshot connect dataset modal in builder">
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step2.extras.resource1`)" class="text is-caption u-mb--16 u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import DatasetCard from './DatasetCard_21.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step2',
|
||||
stepName: 'Import your data',
|
||||
components: {
|
||||
StepTitle,
|
||||
DatasetCard
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step3.summary.text`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step3.howto.instruction1`)" class="text is-caption u-mt--24 u-inline"></p>
|
||||
<img class="u-width--100 u-mt--16" src="../../../../assets/images/onboarding/builder_step3@2x.png" alt="Screenshot dataset preview in builder">
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step3.howto.instruction2`)" class="text is-caption u-mb--24 u-mt--24 u-inlineflex"></p>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step3.howto.instruction3`)" class="text is-caption u-mb--24 u-inlineflex"></p>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step3.howto.instruction4`)" class="text is-caption u-inlineflex"></p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="'Extras'" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step3.extras.resource1`)" class="text is-caption u-mb--16 u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step3',
|
||||
stepName: 'Explore the dataset',
|
||||
components: {
|
||||
StepTitle
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step4.summary.text`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li class="u-mt--24">
|
||||
<p v-html="$t(`Wizards.builder.step4.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mt--24">
|
||||
<p v-html="$t(`Wizards.builder.step4.howto.instruction2`)" class="text is-caption u-inline"></p>
|
||||
<img class="u-width--100 u-mt--16" src="../../../../assets/images/onboarding/builder_step4@2x.png" alt="Screenshot map in builder">
|
||||
</li>
|
||||
<li class="u-mt--24">
|
||||
<p v-html="$t(`Wizards.builder.step4.howto.instruction3`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mt--24">
|
||||
<p v-html="$t(`Wizards.builder.step4.howto.instruction4`)" class="text is-caption u-inline"></p>
|
||||
<img class="u-width--100 u-mt--16" src="../../../../assets/images/onboarding/builder_step4b@2x.png" alt="Screenshot styled map in builder">
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step4.extras.resource1`)" class="text is-caption"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step4',
|
||||
stepName: 'Create a map',
|
||||
components: {
|
||||
StepTitle
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step5.summary.text`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li class="u-mb--24">
|
||||
<p v-html="$t(`Wizards.builder.step5.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mb--24">
|
||||
<p v-html="$t(`Wizards.builder.step5.howto.instruction2`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mb--24">
|
||||
<p v-html="$t(`Wizards.builder.step5.howto.instruction3`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mb--24">
|
||||
<p v-html="$t(`Wizards.builder.step5.howto.instruction4`)" class="text is-caption u-inline"></p>
|
||||
<img class="u-width--100 u-mt--16" src="../../../../assets/images/onboarding/builder_step5@2x.png" alt="Screenshot publish map page in builder">
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step5.extras.resource1`)" class="text is-caption"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step5',
|
||||
stepName: 'Publish your map',
|
||||
components: {
|
||||
StepTitle
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="congrats">
|
||||
<div class="congrats__hero">
|
||||
<Confetti></Confetti>
|
||||
<div class="congrats__hero-content">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/congrats.svg" alt="">
|
||||
<h2 class="title is-body u-mb--16 u-mt--24 ">{{ $t(`Wizards.builder.step6.congrats.title`) }}</h2>
|
||||
<p v-html="$t(`Wizards.builder.step6.congrats.message1`)" class="text is-caption"></p>
|
||||
<p v-html="$t(`Wizards.builder.step6.congrats.message2`, { url: downloadUrl })" class="text is-caption"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container u-mt--64 u-pb--80">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.learnmore`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/learn.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step6.extras.resource1`)" class="text is-caption u-mt--16 u-mb--24"></p>
|
||||
<TutorialCard :content="$t(`Wizards.builder.step6.cards.card1`)" class="u-mb--16">
|
||||
<img src="../../../../assets/images/onboarding/builder_card1.png" width="240" height="130" alt="Style features by category sample image"/>
|
||||
</TutorialCard>
|
||||
<TutorialCard :content="$t(`Wizards.builder.step6.cards.card2`)" class="u-mb--16">
|
||||
<img src="../../../../assets/images/onboarding/builder_card2.png" width="240" height="130" alt="Add hover popups sample image"/>
|
||||
</TutorialCard>
|
||||
<TutorialCard :content="$t(`Wizards.builder.step6.cards.card3`)">
|
||||
<img src="../../../../assets/images/onboarding/builder_card3.png" width="240" height="130" alt="Animate the features sample image"/>
|
||||
</TutorialCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import TutorialCard from 'new-dashboard/components/Onboarding/components/TutorialCard.vue';
|
||||
import Confetti from 'new-dashboard/components/Onboarding/components/Confetti.vue';
|
||||
import { getAssetsBaseUrl } from 'new-dashboard/utils/assets-version';
|
||||
|
||||
export default {
|
||||
name: 'Step6',
|
||||
stepName: 'Download',
|
||||
components: {
|
||||
StepTitle,
|
||||
TutorialCard,
|
||||
Confetti
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
downloadUrl: getAssetsBaseUrl() + 'unversioned/onboarding/Myfirstmap.carto'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.congrats {
|
||||
background-color: $white;
|
||||
|
||||
&__hero {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $onboarding-congrats__height;
|
||||
background-color: $onboarding-congrats__bg-color;
|
||||
}
|
||||
|
||||
&__hero-content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
import { importFilesFrom } from 'new-dashboard/utils/dynamic-import';
|
||||
|
||||
const folderContext = require.context('./', true, /Step.*\.vue$/);
|
||||
|
||||
const wizardName = 'wizardBuilder';
|
||||
const steps = importFilesFrom(folderContext, /^\.\/(.*)\.vue$/);
|
||||
|
||||
export default { steps, wizardName };
|
||||
Reference in New Issue
Block a user