Add confetti! 🎉

6 years ago · c78eabf81a
parent 7449ab51bb
commit c78eabf81a
5 changed files with 170 additions and 38 deletions
--- a/lib/assets/javascripts/new-dashboard/components/Wizard/CARTOVL/Step6.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Wizard/CARTOVL/Step6.vue
@ -1,10 +1,13 @@
 <template>
 <div class="congrats">
  <div class="congrats__hero">
-    <img svg-inline src="../../../assets/icons/wizard/congrats.svg" alt="">
-    <h2 class="title is-body u-mb--16 u-mt--24 ">{{ $t(`Wizards.cartovl.step6.congrats.title`) }}</h2>
-    <p v-html="$t(`Wizards.cartovl.step6.congrats.message1`)" class="text is-caption"></p>
-    <p v-html="$t(`Wizards.cartovl.step6.congrats.message2`)" class="text is-caption"></p>
+    <Confetti></Confetti>
+    <div class="congrats__hero-content">
+      <img svg-inline src="../../../assets/icons/wizard/congrats.svg" alt="">
+      <h2 class="title is-body u-mb--16 u-mt--24 ">{{ $t(`Wizards.cartovl.step6.congrats.title`) }}</h2>
+      <p v-html="$t(`Wizards.cartovl.step6.congrats.message1`)" class="text is-caption"></p>
+      <p v-html="$t(`Wizards.cartovl.step6.congrats.message2`)" class="text is-caption"></p>
+    </div>
  </div>
  <div class="container u-mt--64 u-pb--80">
    <StepTitle :title="$t(`Wizards.cartovl.sections.learnmore`)">
@ -28,12 +31,14 @@
 <script>
 import StepTitle from 'new-dashboard/components/Wizard/StepTitle.vue';
 import TutorialCard from 'new-dashboard/components/Wizard/TutorialCard.vue';
+import Confetti from 'new-dashboard/components/Wizard/Confetti.vue';

 export default {
  name: 'Step6',
  components: {
    StepTitle,
-    TutorialCard
+    TutorialCard,
+    Confetti
  }
 };
 </script>
@ -45,14 +50,21 @@ export default {

  &__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;
-    height: 445px;
-    background-color: #CBE4FF;
-    background-image: url(../../../assets/icons/wizard/confetti.svg);
-    background-repeat: repeat no-repeat;
-    background-position: center -145px;
  }
 }
 </style>
--- a/lib/assets/javascripts/new-dashboard/components/Wizard/Confetti.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Wizard/Confetti.vue
@ -0,0 +1,69 @@
+<template>
+  <canvas id="congrats-confetti"></canvas>
+</template>
+
+<script>
+import 'confetti-js';
+
+let confetti;
+
+export default {
+  name: 'Step6',
+  mounted (){
+    const confettiSettings = {
+      target: "congrats-confetti",
+      max: 450,
+      size: 0.4,
+      animate: true,
+      props:["square"],
+      colors:[
+        [41, 106, 166],
+        [140, 193, 64],
+        [219, 44, 111],
+        [88, 178, 85],
+        [56, 78, 144],
+        [84, 189, 199],
+        [59, 82, 147],
+        [134, 191, 65],
+        [89, 177, 70],
+        [127, 72, 139],
+        [241, 170, 73],
+        [142, 194, 64],
+        [63, 92, 154],
+        [241, 170, 73],
+        [90, 72, 139],
+        [210, 34, 126],
+        [209, 36, 42],
+        [66, 187, 206],
+        [211, 32, 122],
+        [201, 215, 56],
+        [212, 22, 124],
+        [125, 42, 121],
+        [252, 236, 38],
+        [152, 122, 169]
+        ],
+      clock: 35,
+      rotate: true,
+      width: 1280,
+      height: 445
+    };
+    confetti = new ConfettiGenerator(confettiSettings);
+    confetti.render();
+  },
+  beforeDestroy (){
+    confetti.clear();
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import 'new-dashboard/styles/variables';
+
+#congrats-confetti {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: $onboarding-congrats__height;
+}
+</style>
--- a/lib/assets/javascripts/new-dashboard/styles/variables.scss
+++ b/lib/assets/javascripts/new-dashboard/styles/variables.scss
@ -39,3 +39,5 @@ $card__shadow: 0 8px 20px 0 $card__shadow-color;

 $onboarding__bg-color: #F9F9F9;
 $onboarding-tags__border-color: #34444C;
+$onboarding-congrats__height: 445px;
+$onboarding-congrats__bg-color: rgba(203, 228, 255, 0.3);
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "cartodb-ui",
-  "version": "1.0.0-assets.78",
+  "version": "1.0.0-assets.do-cartovl5",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -1275,13 +1275,13 @@
        "big.js": {
          "version": "5.2.2",
          "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-          "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+          "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
          "dev": true
        },
        "json5": {
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
          "dev": true,
          "requires": {
            "minimist": "^1.2.0"
@ -1290,7 +1290,7 @@
        "loader-utils": {
          "version": "1.2.3",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "integrity": "sha1-H/XcaRHJ8KBiUxpMBLYJQGEIwsc=",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
@ -3545,6 +3545,11 @@
        }
      }
    },
+    "confetti-js": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/confetti-js/-/confetti-js-0.0.14.tgz",
+      "integrity": "sha512-akIrsrXYQ2i7DkrzM92ftFLe012vZLByVau75N8kGhbjQIWyUicU311ttfvwOoMGdoN4wtWdLi6cU6WJkuWXIw=="
+    },
    "config-chain": {
      "version": "1.1.12",
      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
@ -3911,13 +3916,13 @@
        "big.js": {
          "version": "5.2.2",
          "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-          "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+          "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
          "dev": true
        },
        "json5": {
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
          "dev": true,
          "requires": {
            "minimist": "^1.2.0"
@ -3926,7 +3931,7 @@
        "loader-utils": {
          "version": "1.2.3",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "integrity": "sha1-H/XcaRHJ8KBiUxpMBLYJQGEIwsc=",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
@ -5612,13 +5617,13 @@
        "big.js": {
          "version": "5.2.2",
          "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-          "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+          "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
          "dev": true
        },
        "json5": {
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
          "dev": true,
          "requires": {
            "minimist": "^1.2.0"
@ -5627,7 +5632,7 @@
        "loader-utils": {
          "version": "1.2.3",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "integrity": "sha1-H/XcaRHJ8KBiUxpMBLYJQGEIwsc=",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
@ -6137,13 +6142,13 @@
        "big.js": {
          "version": "5.2.2",
          "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-          "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+          "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
          "dev": true
        },
        "json5": {
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
          "dev": true,
          "requires": {
            "minimist": "^1.2.0"
@ -6152,7 +6157,7 @@
        "loader-utils": {
          "version": "1.2.3",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "integrity": "sha1-H/XcaRHJ8KBiUxpMBLYJQGEIwsc=",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
@ -8595,19 +8600,52 @@
        "backbone": "1.2.3",
        "backbone-poller": "^1.1.3",
        "camshaft-reference": "0.34.0",
-        "carto": "github:cartodb/carto#85881d99dd7fcf2c4e16478b04db67108d27a50c",
        "clip-path-polygon": "0.1.12",
        "d3-array": "1.2.1",
        "d3-format": "1.2.0",
        "d3-time-format": "2.1.0",
        "jquery": "2.1.4",
        "mustache": "1.1.0",
-        "perfect-scrollbar": "git://github.com/CartoDB/perfect-scrollbar.git#f2b66c76ad3718d3c704bd7e1693ea382e44e64d",
        "postcss": "5.0.19",
        "promise-polyfill": "^6.1.0",
-        "torque.js": "github:CartoDB/torque#23101417f2774217b42ac4088119ccb80798b088",
        "underscore": "1.8.3",
        "whatwg-fetch": "^2.0.3"
+      },
+      "dependencies": {
+        "carto": {
+          "version": "github:cartodb/carto#85881d99dd7fcf2c4e16478b04db67108d27a50c",
+          "from": "github:cartodb/carto#85881d99dd7fcf2c4e16478b04db67108d27a50c",
+          "requires": {
+            "mapnik-reference": "~6.0.2",
+            "optimist": "~0.6.0",
+            "underscore": "1.8.3"
+          }
+        },
+        "perfect-scrollbar": {
+          "version": "git://github.com/CartoDB/perfect-scrollbar.git#f2b66c76ad3718d3c704bd7e1693ea382e44e64d",
+          "from": "git://github.com/CartoDB/perfect-scrollbar.git#f2b66c76ad3718d3c704bd7e1693ea382e44e64d"
+        },
+        "torque.js": {
+          "version": "github:CartoDB/torque#23101417f2774217b42ac4088119ccb80798b088",
+          "from": "github:CartoDB/torque#23101417f2774217b42ac4088119ccb80798b088",
+          "requires": {
+            "carto": "github:cartodb/carto#85881d99dd7fcf2c4e16478b04db67108d27a50c",
+            "d3": "3.5.17",
+            "turbo-carto": "^0.21.1",
+            "turf-jenks": "~1.0.1"
+          },
+          "dependencies": {
+            "carto": {
+              "version": "github:cartodb/carto#85881d99dd7fcf2c4e16478b04db67108d27a50c",
+              "from": "github:cartodb/carto#master",
+              "requires": {
+                "mapnik-reference": "~6.0.2",
+                "optimist": "~0.6.0",
+                "underscore": "1.8.3"
+              }
+            }
+          }
+        }
      }
    },
    "interpret": {
@ -11384,7 +11422,7 @@
    },
    "loader-utils": {
      "version": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
-      "integrity": "sha512-tiv66G0SmiOx+pLWMtGEkfSEejxvb6N6uRrQjfWJIT79W9GMpgKeCAmm9aVBKtd4WEgntciI8CsGqjpDoCWJug==",
+      "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
      "requires": {
        "big.js": "^3.1.3",
        "emojis-list": "^2.0.0",
@ -15334,13 +15372,13 @@
        "big.js": {
          "version": "5.2.2",
          "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-          "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+          "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
          "dev": true
        },
        "json5": {
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
          "dev": true,
          "requires": {
            "minimist": "^1.2.0"
@ -15349,7 +15387,7 @@
        "loader-utils": {
          "version": "1.2.3",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "integrity": "sha1-H/XcaRHJ8KBiUxpMBLYJQGEIwsc=",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
@ -17582,10 +17620,20 @@
      "version": "github:CartoDB/torque#23101417f2774217b42ac4088119ccb80798b088",
      "from": "github:CartoDB/torque#master",
      "requires": {
-        "carto": "github:cartodb/carto#85881d99dd7fcf2c4e16478b04db67108d27a50c",
        "d3": "3.5.17",
        "turbo-carto": "^0.21.1",
        "turf-jenks": "~1.0.1"
+      },
+      "dependencies": {
+        "carto": {
+          "version": "github:cartodb/carto#85881d99dd7fcf2c4e16478b04db67108d27a50c",
+          "from": "github:cartodb/carto#85881d99dd7fcf2c4e16478b04db67108d27a50c",
+          "requires": {
+            "mapnik-reference": "~6.0.2",
+            "optimist": "~0.6.0",
+            "underscore": "1.8.3"
+          }
+        }
      }
    },
    "tough-cookie": {
@ -17654,7 +17702,7 @@
    "trackjs": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/trackjs/-/trackjs-3.1.2.tgz",
-      "integrity": "sha512-GpdO+XUOwspTfUYgNI8K+eMAGtLSepva0K94Y12uYYs1EonVvfmETjrLiIZ3/xF4Idmvj99kZXBU+wzhAwtSAA=="
+      "integrity": "sha1-g8B3GI+UjTrxs16eWQtesWoJ69s="
    },
    "transformify": {
      "version": "0.1.2",
@ -17986,13 +18034,13 @@
        "big.js": {
          "version": "5.2.2",
          "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-          "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+          "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
          "dev": true
        },
        "json5": {
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
          "dev": true,
          "requires": {
            "minimist": "^1.2.0"
@ -18001,7 +18049,7 @@
        "loader-utils": {
          "version": "1.2.3",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "integrity": "sha1-H/XcaRHJ8KBiUxpMBLYJQGEIwsc=",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
@ -18548,13 +18596,13 @@
        "big.js": {
          "version": "5.2.2",
          "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-          "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+          "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
          "dev": true
        },
        "json5": {
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
          "dev": true,
          "requires": {
            "minimist": "^1.2.0"
@ -18563,7 +18611,7 @@
        "loader-utils": {
          "version": "1.2.3",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "integrity": "sha1-H/XcaRHJ8KBiUxpMBLYJQGEIwsc=",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
--- a/package.json
+++ b/package.json
@ -30,6 +30,7 @@
    "cartodb-pecan": "0.2.x",
    "clipboard": "1.6.1",
    "codemirror": "5.14.2",
+    "confetti-js": "0.0.14",
    "d3-interpolate": "^1.1.6",
    "d3-queue": "^3.0.7",
    "date-fns": "^1.29.0",