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,15 +4,18 @@
 
 .step {
   margin: 1.25rem 0;
-  background: #1F1F1F;
+  background-color: #151515;
   border-radius: 6px;
-  padding: 1.25rem;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
 
-  @include mobile {
-    flex-wrap: wrap;
+  .step-container {
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    background: #1F1F1F;
+
+    @include mobile {
+      flex-wrap: wrap;
+    }
   }
 
   &:first-child {
@@ -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,72 +1,85 @@
 <template>
   <div class="step">
-    <diamond
-      :active="!!data.deployerAddress"
-      :waiting="!canDeploy(data.domain)"
-    />
-    <div class="step-body">
-      <h4>{{ data.title }}</h4>
-      <h5 v-if="data.domain" class="deployed">
-        ENS:
-        <a :href="domainUrl(data.expectedAddress)" target="_blank">{{
-          data.domain
-        }}</a>
-      </h5>
-      <i18n
-        v-if="data.deployerAddress"
-        class="deployed"
-        tag="h6"
-        path="deployedBy"
-      >
-        <template v-slot:link>
-          <a :href="txHash(data.deployTransaction)" target="_blank">{{
-            data.deployerAddress
+    <div class="step-container">
+      <diamond
+        :active="!!data.deployerAddress"
+        :waiting="!canDeploy(data.domain)"
+      />
+      <div class="step-body">
+        <h4>{{ data.title }}</h4>
+        <h5 v-if="data.domain" class="deployed">
+          ENS:
+          <a :href="domainUrl(data.expectedAddress)" target="_blank">{{
+            data.domain
           }}</a>
-        </template>
-      </i18n>
-    </div>
-    <div class="step-tail">
-      <div v-if="data.deployerAddress" class="completed">
-        <b-icon icon="check" />
-        <span>{{ $t('completed') }}</span>
-      </div>
-      <b-tooltip
-        v-else
-        :label="
-          isNotLoggedIn
-            ? $t('pleaseConnectWallet')
-            : !canDeploy(data.domain)
-            ? $t('dependsOnEns', { ens: data.dependsOn.join(', ') })
-            : ''
-        "
-        position="is-top"
-        multilined
-        :size="isNotLoggedIn ? 'is-small' : 'is-large'"
-        :active="isNotLoggedIn || !canDeploy(data.domain)"
-        append-to-body
-      >
-        <b-button
-          type="is-primary"
-          outlined
-          icon-left="tool"
-          :disabled="isNotLoggedIn || !canDeploy(data.domain)"
-          @mousedown="(e) => e.preventDefault()"
-          @click="onDeploy"
+        </h5>
+        <i18n
+          v-if="data.deployerAddress"
+          class="deployed"
+          tag="h6"
+          path="deployedBy"
         >
-          {{ $t('deploy') }}
-        </b-button>
-      </b-tooltip>
+          <template v-slot:link>
+            <a :href="txHash(data.deployTransaction)" target="_blank">{{
+              data.deployerAddress
+            }}</a>
+          </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" />
+          <span>{{ $t('completed') }}</span>
+        </div>
+        <b-tooltip
+          v-else
+          :label="
+            isNotLoggedIn
+              ? $t('pleaseConnectWallet')
+              : !canDeploy(data.domain)
+              ? $t('dependsOnEns', { ens: data.dependsOn.join(', ') })
+              : ''
+          "
+          position="is-top"
+          multilined
+          :size="isNotLoggedIn ? 'is-small' : 'is-large'"
+          :active="isNotLoggedIn || !canDeploy(data.domain)"
+        >
+          <b-button
+            type="is-primary"
+            outlined
+            icon-left="tool"
+            :disabled="isNotLoggedIn || !canDeploy(data.domain)"
+            @mousedown="(e) => e.preventDefault()"
+            @click="onDeploy"
+          >
+            {{ $t('deploy') }}
+          </b-button>
+        </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>