add description

assets/images/tab-corner.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.28 41"><path d="M0,0A10,10,0,0,1,7.07,2.93L41.21,37.07A10,10,0,0,0,48.28,40" transform="translate(0 0.5)" style="fill:none;stroke:#2a2a2a"/></svg>

assets/styles/app.scss

@@ -39,6 +39,10 @@
   background-image: url('../images/discoverer.svg');
   background-size: contain;
   background-repeat: no-repeat;
+
+  @include mobile {
+    margin-top: -1.5rem;
+  }
 }
 
 .delete {

assets/styles/components/_step.scss

@@ -4,16 +4,19 @@
 
 .step {
   margin: 1.25rem 0;
-  background: #1F1F1F;
+  background-color: #151515;
   border-radius: 6px;
-  padding: 1.25rem;
+
+  .step-container {
     display: flex;
     align-items: center;
-  overflow: hidden;
+    border-radius: 6px;
+    background: #1F1F1F;
 
     @include mobile {
       flex-wrap: wrap;
     }
+  }
 
   &:first-child {
     margin-top: 0;
@@ -21,18 +24,26 @@
 
 
   .diamond {
-    margin-right: 1.25rem;
+    margin: 1.25rem 0 1.25rem 1.25rem;
 
     @include mobile {
-      align-self: flex-start;
+      flex: none;
+      width: 100%;
+      margin-left: 0;
+      margin-right: 0;
+      margin-bottom: 0;
     }
   }
 
   &-body {
+    padding: 1.25rem;
     flex-grow: 1;
 
     @include mobile {
-      width: calc(100% - 60px - 1.25rem);
+      flex: none;
+      width: 100%;
+      text-align: center;
+      padding-bottom: 0;
     }
 
     h4 {
@@ -51,23 +62,49 @@
       color: #6B6B6B;
       text-overflow: ellipsis;
       overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  &-more-button {
+    padding: 1.25rem;
+
+    @include mobile {
+      flex: none;
+      width: 100%;
+      text-align: center;
+      padding: .75rem 1.25rem;
+    }
+
+    .button {
+      padding: 0;
+      background-color: transparent;
+      border: 0;
+      color: $primary;
+      font-size: 0.875rem;
+
+      &:focus:not(:active), &.is-focused:not(:active) {
+        box-shadow: none;
+      }
     }
   }
 
   &-tail {
     background-color: #191919;
     align-self: stretch;
-    margin: -1.25rem;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 1.25rem;
     width: 148px;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
 
     @include mobile {
-      margin-top: 1.25rem;
-      flex-basis: 100%;
-      flex-grow: 1;
+      flex: none;
+      width: 100%;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 6px;
     }
 
     .completed {
@@ -82,4 +119,12 @@
       }
     }
   }
+
+  &-more {
+    font-size: 0.813rem;
+
+    p {
+      padding: 1.25rem;
+    }
+  }
 }

components/Step.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="step">
+    <div class="step-container">
       <diamond
         :active="!!data.deployerAddress"
         :waiting="!canDeploy(data.domain)"
@@ -25,6 +26,11 @@
           </template>
         </i18n>
       </div>
+      <div class="step-more-button">
+        <b-button size="is-small" @click="isExpanded = !isExpanded">{{
+          isExpanded ? 'Less' : 'More'
+        }}</b-button>
+      </div>
       <div class="step-tail">
         <div v-if="data.deployerAddress" class="completed">
           <b-icon icon="check" />
@@ -43,7 +49,6 @@
           multilined
           :size="isNotLoggedIn ? 'is-small' : 'is-large'"
           :active="isNotLoggedIn || !canDeploy(data.domain)"
-        append-to-body
         >
           <b-button
             type="is-primary"
@@ -58,15 +63,23 @@
         </b-tooltip>
       </div>
     </div>
+    <transition-expand>
+      <div v-show="isExpanded" class="step-more">
+        <p>{{ data.description }}</p>
+      </div>
+    </transition-expand>
+  </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import Diamond from '@/components/Diamond'
+import TransitionExpand from '@/components/TransitionExpand'
 
 export default {
   components: {
     Diamond,
+    TransitionExpand,
   },
   props: {
     data: {
@@ -74,6 +87,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      isExpanded: false,
+    }
+  },
   computed: {
     ...mapGetters('provider', ['getProviderName']),
     ...mapGetters('steps', ['canDeploy']),

components/TransitionExpand.vue

@@ -0,0 +1,71 @@
+<script>
+export default {
+  name: 'TransitionExpand',
+  functional: true,
+  render(createElement, context) {
+    const data = {
+      props: {
+        name: 'expand',
+      },
+      on: {
+        afterEnter(element) {
+          element.style.height = 'auto'
+        },
+        enter(element) {
+          const { width } = getComputedStyle(element)
+          element.style.width = width
+          element.style.position = 'absolute'
+          element.style.visibility = 'hidden'
+          element.style.height = 'auto'
+          const { height } = getComputedStyle(element)
+          element.style.width = null
+          element.style.position = null
+          element.style.visibility = null
+          element.style.height = 0
+          // Force repaint to make sure the
+          // animation is triggered correctly.
+          // eslint-disable-next-line no-unused-expressions
+          getComputedStyle(element).height
+          requestAnimationFrame(() => {
+            element.style.height = height
+          })
+        },
+        leave(element) {
+          const { height } = getComputedStyle(element)
+          element.style.height = height
+          // Force repaint to make sure the
+          // animation is triggered correctly.
+          // eslint-disable-next-line no-unused-expressions
+          getComputedStyle(element).height
+          requestAnimationFrame(() => {
+            element.style.height = 0
+          })
+        },
+      },
+    }
+    return createElement('transition', data, context.children)
+  },
+}
+</script>
+
+<style scoped>
+* {
+  will-change: height;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+</style>
+
+<style>
+.expand-enter-active,
+.expand-leave-active {
+  transition: height 0.2s ease-in-out, opacity 0.2s;
+  overflow: hidden;
+}
+.expand-enter,
+.expand-leave-to {
+  height: 0;
+  opacity: 0;
+}
+</style>