GAQs content added

MyEtherWallet · Aug 17, 2018 · a3c882d · a3c882d · mew-bot · Aug 17, 2018
1 parent d0995b0
commit a3c882d
Show file tree

Hide file tree

Showing 3 changed files with 200 additions and 39 deletions.
diff --git a/src/containers/FaqsContainer/FaqsContainer.scss b/src/containers/FaqsContainer/FaqsContainer.scss
@@ -6,57 +6,59 @@
   @media all and (max-width: $tablet-width){
     padding: 50px 0;
   }
+}// .wrap
+
+
+.top-title {
+  @media all and (max-width: $tablet-width){
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .title {
+    h5 {
+      line-height: 19px;
+    }
 
-  .top-title {
     @media all and (max-width: $tablet-width){
-      align-items: flex-start;
-      flex-direction: column;
+      margin-bottom: 30px;
     }
+  }
 
-    .title {
-      h5 {
-        line-height: 19px;
-      }
+  .support {
+    margin-left: auto;
 
-      @media all and (max-width: $tablet-width){
-        margin-bottom: 30px;
-      }
+    @media all and (max-width: $tablet-width){
+      margin-bottom: 20px;
+      margin-left: 0;
     }
 
-    .support {
-      margin-left: auto;
+    a {
+      align-items: center;
+      display: flex;
 
-      @media all and (max-width: $tablet-width){
-        margin-bottom: 20px;
-        margin-left: 0;
+      img {
+        margin-right: 7px;
+        width: 29px;
       }
 
-      a {
-        align-items: center;
-        display: flex;
-
-        img {
-          margin-right: 7px;
-          width: 29px;
-        }
-
-        h5 {
-          color: $text--link-color;
-        }
+      h5 {
+        color: $text--link-color;
       }
-    } // .support
-  } // .top-title
+    }
+  } // .support
+} // .top-title
 
-  .qa-cards {
-    grid-column-gap: 20px;
-    grid-row-gap: 20px;
-    margin-top: 30px;
+.qa-cards {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  margin-top: 30px;
+
+  @media all and (max-width: $tablet-width){
+    grid-template-columns: 1fr;
+  }
+}// .qa-cards
 
-    @media all and (max-width: $tablet-width){
-      grid-template-columns: 1fr;
-    }
-  }// .qa-cards
-}// .wrap
 
 
 

diff --git a/src/layouts/HelpCenterLayout/components/FAQs/FAQs.scss b/src/layouts/HelpCenterLayout/components/FAQs/FAQs.scss
@@ -4,3 +4,62 @@
 
 }
 
+
+
+.qa-cards {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  margin-top: 30px;
+
+  @media all and (max-width: $tablet-width){
+    grid-template-columns: 1fr;
+  }
+}// .qa-cards
+
+
+
+.qa__contents {
+  border-top: 1px solid #e8e8e8;
+
+  li {
+    border-bottom: 1px solid #e8e8e8;
+    padding: 30px 10px;
+  }
+
+  .qa__contents--title {
+    display: flex;
+    cursor: pointer;
+    // user-select: none;
+
+    h3 {
+      font-size: 18px;
+    }
+
+    .show-more-buttons {
+      margin-left: auto;
+      position: relative;
+      span {
+        position: absolute;
+        font-size: 50px;
+        font-weight: 400;
+      }
+
+      .show-more {
+        top: -27px;
+        right: 0;
+      }
+
+      .show-less {
+        top: -31px;
+        right: 6px;
+      }
+    } // .show-more-buttons
+
+  }
+
+
+  .qa__contents--content {
+    margin-top: 20px;
+  } // .qa__contents--content
+
+}
diff --git a/src/layouts/HelpCenterLayout/components/FAQs/FAQs.vue b/src/layouts/HelpCenterLayout/components/FAQs/FAQs.vue
@@ -1,15 +1,115 @@
 <template>
   <div class="faqs">
     <div class="wrap">
-     faqs
+
+      <div class="qa-cards">
+        <ul class="qa__contents">
+          <li>
+            <div v-on:click="openFAQ('faq1')" class="qa__contents--title">
+              <h3>Balances not loading or showing on MyEtherWallet</h3>
+              <div class="show-more-buttons">
+                <span v-if="showFAQs.faq1 == false" class="show-more">+</span>
+                <span v-if="showFAQs.faq1 == true" class="show-less">-</span>
+              </div>
+            </div>
+            <div v-if="showFAQs.faq1" class="qa__contents--content">
+              <faq-balances-not-loading/>
+            </div>
+          </li>
+          <li>
+            <div v-on:click="openFAQ('faq2')" class="qa__contents--title">
+              <h3>Does MyEtherWallet support Bitcoin or other coins (LTC STEEM ZEC)?</h3>
+              <div class="show-more-buttons">
+                <span v-if="showFAQs.faq2 == false" class="show-more">+</span>
+                <span v-if="showFAQs.faq2 == true" class="show-less">-</span>
+              </div>
+            </div>
+            <div v-if="showFAQs.faq2" class="qa__contents--content">
+              <faq-does-myetherwallet-support-bitcoin/>
+            </div>
+          </li>
+          <li>
+            <div v-on:click="openFAQ('faq3')" class="qa__contents--title">
+              <h3>ETH or Tokens sent to or from exchange haven't shown up</h3>
+              <div class="show-more-buttons">
+                <span v-if="showFAQs.faq3 == false" class="show-more">+</span>
+                <span v-if="showFAQs.faq3 == true" class="show-less">-</span>
+              </div>
+            </div>
+            <div v-if="showFAQs.faq3" class="qa__contents--content">
+              <faq-eth-or-tokens-sent-to/>
+            </div>
+          </li>
+          <li>
+            <div v-on:click="openFAQ('faq4')" class="qa__contents--title">
+              <h3>Where Can I Buy / Sell / Trade / Exchange my ETH or Tokens?</h3>
+              <div class="show-more-buttons">
+                <span v-if="showFAQs.faq4 == false" class="show-more">+</span>
+                <span v-if="showFAQs.faq4 == true" class="show-less">-</span>
+              </div>
+            </div>
+            <div v-if="showFAQs.faq4" class="qa__contents--content">
+              <faq-where-can-i-buy-sell/>
+            </div>
+          </li>
+          <li>
+            <div v-on:click="openFAQ('faq5')" class="qa__contents--title">
+              <h3>What Is An ICO?</h3>
+              <div class="show-more-buttons">
+                <span v-if="showFAQs.faq5 == false" class="show-more">+</span>
+                <span v-if="showFAQs.faq5 == true" class="show-less">-</span>
+              </div>
+            </div>
+            <div v-if="showFAQs.faq5" class="qa__contents--content">
+              <faq-what-is-an-ico/>
+            </div>
+          </li>
+        </ul>
+      </div>
+
     </div>
   </div>
 </template>
 
 <script>
+import {
+  BalancesNotLoadingOrShowingOnMyEtherWallet,
+  EthOrTokensSentToOrFromExchangeHaventShownUp,
+  DoesMyEtherWalletSupportBitcoinOrOtherCoins,
+  WhereCanIBuySellTradeExchangeMyEthOrTokens,
+  WhatIsAnIco
+} from '@/components/FaqContents'
+
 export default {
+  components: {
+    'faq-balances-not-loading': BalancesNotLoadingOrShowingOnMyEtherWallet,
+    'faq-eth-or-tokens-sent-to': EthOrTokensSentToOrFromExchangeHaventShownUp,
+    'faq-does-myetherwallet-support-bitcoin': DoesMyEtherWalletSupportBitcoinOrOtherCoins,
+    'faq-where-can-i-buy-sell': WhereCanIBuySellTradeExchangeMyEthOrTokens,
+    'faq-what-is-an-ico': WhatIsAnIco
+  },
+  methods: {
+    openFAQ: function (faqToOpen) {
+      var currentState = this.showFAQs[faqToOpen]
+      /*
+      this.showFAQs.faq1 = false
+      this.showFAQs.faq2 = false
+      this.showFAQs.faq3 = false
+      this.showFAQs.faq4 = false
+      this.showFAQs.faq5 = false
+      */
+      this.showFAQs[faqToOpen] = !currentState
+    }
+  },
   data () {
     return {
+      showFAQs: {
+        faq1: false,
+        faq2: false,
+        faq3: false,
+        faq4: false,
+        faq5: false
+      }
     }
   }
 }