Onboarding guide and initial achievements refactoring (#11536)

* add achievements to user * add placeholder strings * add to achievements to common script * add onboarding achievements category * add notifications * more notifications * award achievements * wip notification panel * add achievements icons and copy * do not count onboarding tasks for the created task achievement * add notes * sprites, fixes and completion status and reward * add onboarding panel * add toggle * fix toggle size * fix tests * fix typo * add notification * start adding modal * fix remove button positionin, timeout, progress bar * modal + fixes * disable broken social links from level up modal * change toggle icon color on hover * add border bottom to onboarding guide panel * add collapse animation * expanded onboarding on first open * onboarding: flip toggle colors * onboarding: show progress bar all the time * onboarding: fix panel closing on click * onboarding modal: add close icon and fix padding * wip: add migration for existing users * fix titles in guide * fix achievements copy * do not award completed task achievement when direction is down * start implementing new achievements * start migrating client * remove social links from achievements modals * prevent skipping tutorial + fix achievement notification * sync fixes * start redesign achievement modal * misc fixes to achievements, polish generic achievement modal and hatched pet modal * add special badge for onboarding * fix badge condition * modals fixes * hatched pet modal: add close icon * fix badge typo * fix justin button * new scrolling behavior for dropdowns * fix strings capitalization * add common tests * add api unit tests * add date check * achievements modal polishing * typos * add toggle for achievements categories * typo * fix test * fix edit avatar modal cannot be closed * finish migration and correct launch date * fix migration * migration fixes * fix tests
2025-12-15 21:57:22 +01:00 · 2019-12-16 17:20:47 +01:00
parent a00a8cced8
commit 8f5a0cfe79
108 changed files with 18515 additions and 17229 deletions
--- a/website/client/src/components/achievements/onboardingComplete.vue
+++ b/website/client/src/components/achievements/onboardingComplete.vue
@@ -0,0 +1,106 @@
+<template>
+  <b-modal
+    id="onboarding-complete"
+    size="sm"
+    :hide-footer="true"
+    :hide-header="true"
+  >
+    <div class="content text-center">
+      <span
+        class="close-icon svg-icon inline icon-10"
+        @click="close()"
+        v-html="icons.close"
+      ></span>
+      <h2>{{ $t('congratulations') }}</h2>
+      <img
+        class="onboarding-complete-banner d-block"
+        src="~@/assets/images/onboarding-complete-banner@2x.png"
+      >
+      <p
+        class="onboarding-complete-text"
+        v-html="$t('onboardingCompleteDesc')"
+      ></p>
+      <button
+        class="btn btn-primary"
+        @click="closeWithAction()"
+      >
+        {{ $t('viewAchievements') }}
+      </button>
+    </div>
+  </b-modal>
+</template>
+
+<style lang="scss">
+#onboarding-complete {
+  .modal-content {
+    min-width: 330px;
+  }
+
+  .modal-body {
+    padding-top: 1em;
+    padding-bottom: 0;
+  }
+
+  .modal-footer {
+    margin-top: 0;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+h2 {
+  color: $purple-200;
+  margin-bottom: 24px;
+  margin-top: 2px;
+}
+
+.content {
+  padding: 0 8px;
+  margin-top: 18px;
+}
+
+.onboarding-complete-banner {
+  width: 282px;
+  margin: 0 auto;
+  margin-bottom: 24px;
+}
+
+.onboarding-complete-text {
+  margin-bottom: 24px;
+}
+
+.onboarding-complete-text ::v-deep .gold-amount {
+  color: $yellow-5;
+}
+
+button {
+  margin-bottom: 24px;
+}
+</style>
+
+<script>
+import svgClose from '@/assets/svg/close.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close: svgClose,
+      }),
+    };
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'onboarding-complete');
+    },
+    closeWithAction () {
+      this.close();
+      setTimeout(() => {
+        this.$router.push({ name: 'achievements' });
+      }, 200);
+    },
+  },
+};
+</script>