From f880e5fd94c9556cfea260cc3eb01ac3906b9816 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Tue, 29 May 2018 23:44:44 -0500
Subject: [PATCH] More work on ecosystem overview

---
 .vuepress/components/Ecosystem.vue | 110 ++++++++++++++++++++++++-----
 1 file changed, 94 insertions(+), 16 deletions(-)

diff --git a/.vuepress/components/Ecosystem.vue b/.vuepress/components/Ecosystem.vue
index 026bef0..fad869e 100644
--- a/.vuepress/components/Ecosystem.vue
+++ b/.vuepress/components/Ecosystem.vue
@@ -12,13 +12,16 @@
     </aside>
 
     <section class="ecosystem__modules">
-      <div class="ecosystem__module lbrycard">
+      <div class="ecosystem__module lbrycrd">
         <h2 class="__title">
-          <span v-on:click="open('lbrycard')">lbrycard</span>
+          <span v-on:click="open('lbrycrd')">
+            Blockchain
+            <em>The blockchain is "lbrycrd"</em>
+          </span>
 
           <div>
-            <span v-on:click="open('lbry')">lbry</span>
-            <span v-on:click="open('applications')">applications</span>
+            <span v-on:click="open('applications')">Applications</span>
+            <span v-on:click="open('lbry')">Data Network</span>
           </div>
         </h2>
 
@@ -27,15 +30,20 @@
 
           <p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
         </div>
+
+        <span class="__close" v-on:click="close()">&times;</span>
       </div>
 
       <div class="ecosystem__module lbry">
         <h2 class="__title">
-          <span v-on:click="open('lbry')">lbry</span>
+          <span v-on:click="open('lbry')">
+            Data Network
+            <em>The data network is "lbry"</em>
+          </span>
 
           <div>
-            <span v-on:click="open('lbrycard')">lbrycard</span>
-            <span v-on:click="open('applications')">applications</span>
+            <span v-on:click="open('applications')">Applications</span>
+            <span v-on:click="open('lbrycrd')">Blockchain</span>
           </div>
         </h2>
 
@@ -68,15 +76,20 @@
             </li>
           </ul>
         </div>
+
+        <span class="__close" v-on:click="close()">&times;</span>
       </div>
 
       <div class="ecosystem__module applications">
         <h2 class="__title">
-          <span v-on:click="open('applications')">Applications</span>
+          <span v-on:click="open('applications')">
+            Applications
+            <em>LBRY has a lot of applications</em>
+          </span>
 
           <div>
-            <span v-on:click="open('lbry')">lbry</span>
-            <span v-on:click="open('lbrycard')">lbrycard</span>
+            <span v-on:click="open('lbrycrd')">Blockchain</span>
+            <span v-on:click="open('lbry')">Data Network</span>
           </div>
         </h2>
 
@@ -108,6 +121,8 @@
             </li>
           </ul>
         </div>
+
+        <span class="__close" v-on:click="close()">&times;</span>
       </div>
     </section>
 
@@ -138,7 +153,7 @@
         document.getElementsByClassName(ecosystemComponentClassName)[0].classList.add("active");
 
         switch (true) {
-          case (ecosystemComponentClassName === "lbrycard"):
+          case (ecosystemComponentClassName === "lbrycrd"):
             document.getElementsByClassName("chainquery")[0].classList.add("active");
             document.getElementsByClassName("lighthouse")[0].classList.add("active");
             document.getElementsByClassName("wallet")[0].classList.add("active");
@@ -157,6 +172,29 @@
           default:
             break;
         }
+      },
+      close () {
+        document.querySelectorAll(".ecosystem__module").forEach(n => n.classList.remove("active"));
+        document.querySelectorAll(".ecosystem__submodule").forEach(n => n.classList.remove("active"));
+
+        /*
+        switch (true) {
+          case (ecosystemComponentClassName === "lbrycrd"):
+            document.getElementsByClassName(ecosystemComponentClassName)[0].classList.remove("active");
+            break;
+
+          case (ecosystemComponentClassName === "lbry"):
+            document.getElementsByClassName(ecosystemComponentClassName)[0].classList.remove("active");
+            break;
+
+          case (ecosystemComponentClassName === "applications"):
+            document.getElementsByClassName(ecosystemComponentClassName)[0].classList.remove("active");
+            break;
+
+          default:
+            break;
+        }
+        */
       }
     }
   }
@@ -181,7 +219,7 @@
   }
 
   .ecosystem__module {
-    padding: 1.9rem 2rem;
+    // padding: 1.9rem 2rem;
     position: relative;
     width: 100%;
 
@@ -197,12 +235,13 @@
         float: right;
         font-size: 1rem;
         padding-top: 1.95rem;
+        padding-right: 3rem;
         position: relative;
         text-align: right;
 
         &::before {
           @include font-serif;
-          top: 1rem; left: 0;
+          top: 0.9rem; right: 3rem;
 
           content: "explore";
           font-size: 80%;
@@ -252,6 +291,14 @@
 
         > span {
           cursor: pointer;
+          display: block;
+          padding: 1.9rem 2rem;
+
+          em {
+            display: block;
+            font-size: 70%;
+            font-weight: normal;
+          }
         }
 
         > div {
@@ -262,26 +309,42 @@
       .ecosystem__module__details {
         display: none;
       }
+
+      .__close {
+        top: 2rem;
+        transform: rotate(45deg);
+        z-index: 0;
+      }
     }
 
     &.active {
+      padding: 1.9rem 2rem;
+
       h2 {
         font-size: 3rem;
         margin-bottom: 1rem;
 
         > span {
           cursor: default;
+
+          em {
+            display: none;
+          }
         }
       }
 
       &::before {
         background-color: $white;
       }
+
+      .__close {
+        top: 2.35rem;
+      }
     }
 
 
 
-    &.lbrycard {
+    &.lbrycrd {
       margin-bottom: 1rem;
 
       &:not(.active) {
@@ -297,6 +360,10 @@
       }
     }
 
+    &.lbry,
+    &.applications {
+    }
+
     &.lbry {
       margin-bottom: 1rem;
 
@@ -309,13 +376,14 @@
           margin-bottom: 0.5rem;
 
           &::after {
-            bottom: -1rem; left: 0;
+            bottom: 1rem; left: 0;
 
             content: "◼︎◼︎";
             font-size: 0.5rem;
             letter-spacing: 0.1rem;
             position: absolute;
             width: 100%;
+            z-index: -1;
           }
         }
       }
@@ -337,7 +405,7 @@
           margin-bottom: 0.5rem;
 
           &::after {
-            bottom: -1rem; left: 0;
+            bottom: 1rem; left: 0;
 
             content: "◼︎◼︎◼︎◼︎◼︎";
             font-size: 0.5rem;
@@ -391,4 +459,14 @@
       color: rgba($gray, 0.3);
     }
   }
+
+
+
+  .__close {
+    cursor: pointer;
+    font-size: 2rem;
+    position: absolute;
+    right: 2rem;
+    transition: all 0.2s;
+  }
 </style>