From b40db683fc53195c14a0563c32badcd221185032 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: Fri, 11 May 2018 14:49:04 -0500
Subject: [PATCH] Last page of hook made responsive, with some work on second
 hook

---
 .vuepress/components/Step2.vue  |  19 +++--
 .vuepress/components/Step3.vue  | 118 ++++++++++++++++++++------------
 .vuepress/scss/pages/_hook.scss |  55 +++++++++++----
 3 files changed, 130 insertions(+), 62 deletions(-)

diff --git a/.vuepress/components/Step2.vue b/.vuepress/components/Step2.vue
index 8108183..1c08eb6 100644
--- a/.vuepress/components/Step2.vue
+++ b/.vuepress/components/Step2.vue
@@ -1,10 +1,14 @@
 <template>
-  <div id="step2-page">
+  <section class="hook__page" id="step2-page">
+
     <div v-images-loaded="imagesLoaded">
-      <div class="xs12">
-        <h1>Publish your content on the blockchain</h1>
-        <p>Upload an image to the blockchain and you are able to view it on the <a href='http://explorer.lbry.io' target='_blank'>LBRY Blockchain Explorer</a>.</p>
-      </div>
+      <header class="hook__page__hero">
+        <div class="inner-wrap">
+          <h1>Publish your content on the blockchain</h1>
+          <p>Upload an image to the blockchain and you are able to view it on the <a href="http://explorer.lbry.io" title="LBRY Blockchain Explorer" target="_blank">LBRY Blockchain Explorer</a>.</p>
+        </div>
+      </header>
+
       <div class="xs12 sm8">
         <img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image">
         <canvas id="meme-canvas" width="400" height="300">
@@ -40,12 +44,13 @@
           </form>
         </div>
       </div>
-      <div class="clear"></div>
+
       <div class="xs12" v-if="isLoading">
         <div class="loader"></div>
       </div>
     </div>
-  </div>
+
+  </section>
 </template>
 
 <script>
diff --git a/.vuepress/components/Step3.vue b/.vuepress/components/Step3.vue
index 7fe0197..4b3b837 100644
--- a/.vuepress/components/Step3.vue
+++ b/.vuepress/components/Step3.vue
@@ -1,65 +1,97 @@
 <template>
-  <div id="step3-page">
-    <div class="xs12">
-      <h1>Support your favorite content creators with LBRY</h1>
-      <p>Send LBRY coins to claim addresses and the owner will receive it in their wallet.</p>
-      <p>To send LBC to someone, you need either their wallet address or claim ID.<br/>
-      You can get claim ID's by using resolve method in <a href="#" v-on:click.stop="goTo(1)">the first step</a><br/>
-      Or you can use the examples below.</p>
-    </div>
+  <section class="hook__page" id="step3-page">
+
+    <header class="hook__page__hero">
+      <div class="inner-wrap">
+        <h1>Support your favorite content creators with LBRY</h1>
+        <p>Send LBRY coins to claim addresses and the owner will receive it in their wallet.</p>
+        <p>To send LBC to someone, you need either their wallet address or claim ID. You can get claim IDs by using the resolve method in <a href="#" v-on:click.prevent.stop="goTo(1)">the first step</a>, or you can use the examples below.</p>
+
+        <div class="hook__page__hero__support">
+          <input type="text" v-model="claimId" placeholder="Claim ID goes here"/>
+          <input type="number" v-model="amount" disabled title="You can set this value to any amount of LBC in your wallet, but for demonstration purposes we have hardcoded it to 0.01"><span>LBC</span>
+          <a href="#" v-on:click="send" class="button">Execute</a>
+
+          <!--/
+          <span>lbry://</span><input type="text" v-model="address" placeholder=" Claim URI goes here"/>
+          <a href="#" v-on:click="fetchMetadata" class="button">Execute</a>
+          /-->
+        </div>
+      </div>
+    </header>
+
+    <!--/
     <div class="xs12 sm10">
-      <input type="text" v-model="claimId" />
+      <input type="text" v-model="claimId"/>
     </div>
+
     <div class="xs12 sm2">
-      <input type="text" v-model="amount" disabled title="You can set this value to any amount of LBC in your wallet, but for demonstration purposes we have hardcoded it to 0.01">LBC
+      <input type="number" v-model="amount" disabled title="You can set this value to any amount of LBC in your wallet, but for demonstration purposes we have hardcoded it to 0.01">LBC
     </div>
+
     <div class="xs12 sm2">
-      <a href="#" class="__button-black" v-on:click="send">Execute</a>
+      <a href="#" class="button" v-on:click="send">Execute</a>
     </div>
+    /-->
+
     <div class="xs12" v-if="exampleCode != ''">
       <pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
     </div>
+
     <div class="xs12" v-if="isLoading">
       <div class="loader"></div>
     </div>
+
     <div class="xs12" v-if="jsonData">
       <p>Success! Here is the response:</p>
       <pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
     </div>
+
     <template v-if="!isLoading && !jsonData">
-      <div class="xs12">
-        <p>Click on below claims to support them!</p>
-      </div>
-      <div class="card">
-        <img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
-        <div v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
-          <h4>It's a Disaster</h4>
-          <div class="account">Anonymous</div>
+      <aside class="hook__page__content">
+        <div class="inner-wrap">
+          <p style="text-align: center;">Click on below claims to support them!</p>
+
+          <div class="hook__page__content__card">
+            <img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
+
+            <div v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
+              <h4>It's a Disaster</h4>
+              <p class="account">Anonymous</p>
+            </div>
+          </div>
+
+          <div class="hook__page__content__card">
+            <img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
+
+            <div v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
+              <h4>Unbubbled with Jamie King, Ep1.1 &mdash; Bitcoin, Boom or Bust</h4>
+              <p class="account">@Unbubbled</p>
+            </div>
+          </div>
+
+          <div class="hook__page__content__card">
+            <img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
+
+            <div v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
+              <h4>FORTNITE TOP STREAM MOMENTS &mdash; Nickatnyte &amp; GamingwithMolt</h4>
+              <p class="account">@nickatnyte</p>
+            </div>
+          </div>
+
+          <div class="hook__page__content__card">
+            <img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
+
+            <div v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
+              <h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
+              <p class="account">Anonymous</p>
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="card">
-        <img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
-        <div v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
-          <h4>Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
-          <div class="account">@Unbubbled</div>
-        </div>
-      </div>
-      <div class="card">
-        <img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
-        <div v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
-          <h4>FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
-          <div class="account">@nickatnyte</div>
-        </div>
-      </div>
-      <div class="card">
-        <img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
-        <div v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
-          <h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
-          <div class="account">Anonymous</div>
-        </div>
-      </div>
+      </aside>
     </template>
-  </div>
+
+  </section>
 </template>
 
 <script>
@@ -68,7 +100,7 @@ import EventBus from '../event-bus';
 export default {
   data () {
     return {
-      claimId: 'Claim ID goes here',
+      claimId: '',
       amount: 0.01,
       exampleCode: '',
       isLoading: false,
diff --git a/.vuepress/scss/pages/_hook.scss b/.vuepress/scss/pages/_hook.scss
index e6a266c..8e9a2e9 100644
--- a/.vuepress/scss/pages/_hook.scss
+++ b/.vuepress/scss/pages/_hook.scss
@@ -1,13 +1,22 @@
 .hook {
   .loader {
-    width: 4rem; height: 4rem;
-
     animation: spin 2s linear infinite;
-    border: 6px solid;
     border-radius: 50%;
+    border-style: solid;
     border-top-color: $teal;
-    margin-right: auto;
-    margin-left: auto;
+
+    &:not(.small) {
+      width: 4rem; height: 4rem;
+
+      border-width: 6px;
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    &.small {
+      width: 2rem; height: 2rem;
+      border-width: 3px;
+    }
   }
 }
 
@@ -82,7 +91,7 @@
 }
 
 .hook__page__hero {
-  margin-bottom: 2rem; padding-bottom: 3rem;
+  margin-bottom: 2rem;
   border-bottom: 1px solid rgba($black, 0.05);
 
   h1, p {
@@ -90,11 +99,13 @@
   }
 }
 
-.hook__page__hero__claim {
+.hook__page__hero__claim,
+.hook__page__hero__support {
+  margin-bottom: 3rem; padding-left: 1rem;
+
   background-color: $white;
   border: 1px solid rgba($gray, 0.7);
   font-size: 1rem;
-  padding-left: 1rem;
 
   @media (min-width: 501px) {
     margin-right: auto;
@@ -114,10 +125,6 @@
     color: rgba($black, 0.3);
   }
 
-  input {
-    width: calc(100% - 10rem);
-  }
-
   a {
     border-left: 1px solid rgba($gray, 0.7);
     color: $white;
@@ -155,6 +162,30 @@
   }
 }
 
+.hook__page__hero__claim {
+  input {
+    width: calc(100% - 10rem);
+  }
+}
+
+.hook__page__hero__support {
+  input[type=number] {
+    width: 3rem;
+  }
+
+  input[type=text] {
+    width: calc(100% - 11.5rem);
+  }
+
+  span {
+    line-height: 3rem;
+  }
+
+  a {
+    margin-left: 0.5rem;
+  }
+}
+
 
 
 .hook__page__content {