feat: add welcome banner

Author: alexandrdrvn

view/javascript/assets/img/Bottom_image.svg

@@ -89,6 +89,7 @@
         border: 0;
         outline: 0;
         box-shadow: none;
+        background-color: transparent;
         &:focus, &:active {
           border: 0;
           outline: 0;

view/javascript/assets/img/Top_image.svg

@@ -40,10 +40,10 @@
     font-weight: 600;
     font-stretch: normal;
     font-style: normal;
-    line-height: 0.8;
+    line-height: 1.5;
     letter-spacing: 0.4px;
     text-align: left;
-    color: #1a1a1a;
+    color: #1a1a1a!important;
     margin-bottom: 20px;
   }
   &__description {

view/javascript/assets/scss/main.scss

@@ -7,9 +7,11 @@
       <div class="development__wrapper_title">
         {{ $t('textCmsConnect') }}
       </div>
-      <div class="development__cms_connect">
-        {{ information.cmsConnect }}
-      </div>
+      <input
+        type="text"
+        class="development__cms_connect"
+        :value="information.cmsConnect"
+      >
       <div class="development__wrapper_text">
         {{ $t('descriptionCmsConnect') }}
       </div>
@@ -76,9 +78,9 @@ export default {
   .development {
     &__cms_connect {
       height: 54px;
-      background-color: #efeff1;
-      padding: 12px 24px;
-      line-height: 30px;
+      background-color: #efeff1!important;
+      padding: 12px 24px!important;
+      line-height: 30px!important;
       font-family: 'Open Sans', sans-serif;
       font-size: 24px;
       font-weight: 600;
@@ -88,6 +90,8 @@ export default {
       text-align: left;
       color: $black;
       margin-bottom: 20px;
+      border: none!important;
+      width: 100%;
     }
     &__wrapper_text {
       font-family: 'Open Sans', sans-serif;

view/javascript/components/banner.vue

@@ -4,8 +4,9 @@
       <div class="vf-header__wrapper">
         <header-logo />
         <b-navbar-nav class="align-items-center vf-header__right_nav">
-          <header-activation />
+          <header-activation v-if="cms.builds.length > 0" />
           <b-button
+            v-if="cms.builds.length > 0"
             :disabled="cms.generating || loading"
             variant="success"
             class="vf-header__button_rebuild"

view/javascript/components/development.vue

@@ -101,6 +101,7 @@ export default {
 
     .dropdown {
       margin: 0;
+      list-style: none;
       &:hover {
         > .dropdown-menu {
           display: block;

view/javascript/components/header.vue

@@ -96,6 +96,7 @@ export default {
         letter-spacing: 0.16px;
         text-align: right;
         color: $black;
+        word-break: break-all;
       }
     }
   }

view/javascript/components/header/Account.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="vf-welcome">
+    <img
+      :src="require('~/assets/img/Top_image.svg')"
+      alt=""
+      class="vf-welcome__top_img"
+    >
+    <div class="vf-welcome__title">
+      {{ $t('textTitle') }}
+    </div>
+    <div class="vf-welcome__description">
+      {{ $t('textDescription') }}
+    </div>
+    <div class="text-center">
+      <b-button
+        :disabled="cms.generating || loading"
+        variant="success"
+        class="vf-welcome__button_rebuild"
+        @click="handleGenerate"
+      >
+        <b-spinner
+          v-if="cms.generating || loading"
+          type="grow"
+        />
+        {{ $t('buttonRebuild') }}
+      </b-button>
+    </div>
+    <img
+      :src="require('~/assets/img/Bottom_image.svg')"
+      alt=""
+      class="vf-welcome__bottom_img"
+    >
+  </div>
+</template>
+<script>
+import {mapGetters} from 'vuex'
+export default {
+    data() {
+    return {
+      loading: false
+    }
+  },
+  computed: {
+    ...mapGetters({
+      cms: 'cms/get'
+    })
+  },
+  mounted() {
+    if(this.cms.generating) {
+      const interval = setInterval(async () => {
+        await this.$store.dispatch('cms/load', {id: this.cms.id})
+        this.$apolloClient.defaultClient.clearStore()
+        if(!this.cms.generating) {
+          clearInterval(interval)
+        }
+      }, 3000)
+    }
+  },
+  methods: {
+    async handleGenerate() {
+      this.loading = true
+      await this.$store.dispatch('cms/generate', {id: this.cms.id})
+      const interval = setInterval(async () => {
+        await this.$store.dispatch('cms/load', {id: this.cms.id})
+        this.$apolloClient.defaultClient.clearStore()
+        if(!this.cms.generating) {
+          this.loading = false
+          clearInterval(interval)
+        }
+      }, 3000)
+    }
+  }
+}
+</script>
+<i18n locale="en">
+{
+  "textTitle": "All set. Let's build your website.",
+  "textDescription": "You are now ready to turn your old-fashioned website into a Progressive Web App and a Single Page Application in less then a minute. Ready, Set, Build!",
+  "buttonRebuild": "ReBuild"
+}
+</i18n>
+<style lang="scss">
+  .vf-welcome {
+    border-radius: 3px;
+    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
+    padding: 85px 100px 50px;
+    position: relative;
+    margin-bottom: 60px;
+    z-index: 3;
+    &__top_img {
+      position: absolute;
+      top: 0;
+      left: 60px;
+      width: calc(100% - 120px);
+      height: auto;
+      z-index: -1;
+    }
+    &__bottom_img {
+      position: absolute;
+      bottom: 0;
+      left: 60px;
+      width: calc(100% - 120px);
+      height: auto;
+      z-index: -1;
+    }
+    &__title {
+      font-family: 'Open Sans', sans-serif;
+      font-size: 40px;
+      font-weight: 600;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: 1.25;
+      letter-spacing: 0.4px;
+      text-align: center;
+      color: $black;
+      margin-bottom: 10px;
+      z-index: 1;
+    }
+    &__description {
+      font-family: 'Open Sans', sans-serif;
+      font-size: 18px;
+      font-weight: normal;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: 1.56;
+      letter-spacing: 0.18px;
+      text-align: center;
+      color: $warm-grey-two;
+      margin-bottom: 30px;
+      z-index: 1;
+    }
+    &__button_rebuild {
+      z-index: 1;
+    }
+  }
+</style>