LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Last page of hook made responsive, with some work on second hook

Browse source
This commit is contained in:
ポール ウェッブ 2018-05-11 14:49:04 -05:00
parent fa043f0c84
commit b40db683fc
3 changed files with 130 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
.vuepress/components/Step2.vue
View file

@ -1,10 +1,14 @@
<template> <template>
<div id="step2-page"> <section class="hook__page" id="step2-page">
<div v-images-loaded="imagesLoaded"> <div v-images-loaded="imagesLoaded">
<div class="xs12"> <header class="hook__page__hero">
<h1>Publish your content on the blockchain</h1> <div class="inner-wrap">
<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> <h1>Publish your content on the blockchain</h1>
</div> <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"> <div class="xs12 sm8">
<img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image"> <img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image">
<canvas id="meme-canvas" width="400" height="300"> <canvas id="meme-canvas" width="400" height="300">
@ -40,12 +44,13 @@
</form> </form>
</div> </div>
</div> </div>
<div class="clear"></div>
<div class="xs12" v-if="isLoading"> <div class="xs12" v-if="isLoading">
<div class="loader"></div> <div class="loader"></div>
</div> </div>
</div> </div>
</div>
</section>
</template> </template>
<script> <script>

118
.vuepress/components/Step3.vue
View file

@ -1,65 +1,97 @@
<template> <template>
<div id="step3-page"> <section class="hook__page" id="step3-page">
<div class="xs12">
<h1>Support your favorite content creators with LBRY</h1> <header class="hook__page__hero">
<p>Send LBRY coins to claim addresses and the owner will receive it in their wallet.</p> <div class="inner-wrap">
<p>To send LBC to someone, you need either their wallet address or claim ID.<br/> <h1>Support your favorite content creators with LBRY</h1>
You can get claim ID's by using resolve method in <a href="#" v-on:click.stop="goTo(1)">the first step</a><br/> <p>Send LBRY coins to claim addresses and the owner will receive it in their wallet.</p>
Or you can use the examples below.</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>
<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"> <div class="xs12 sm10">
<input type="text" v-model="claimId" /> <input type="text" v-model="claimId"/>
</div> </div>
<div class="xs12 sm2"> <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>
<div class="xs12 sm2"> <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>
/-->
<div class="xs12" v-if="exampleCode != ''"> <div class="xs12" v-if="exampleCode != ''">
<pre v-highlightjs="exampleCode"><code class="bash"></code></pre> <pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
</div> </div>
<div class="xs12" v-if="isLoading"> <div class="xs12" v-if="isLoading">
<div class="loader"></div> <div class="loader"></div>
</div> </div>
<div class="xs12" v-if="jsonData"> <div class="xs12" v-if="jsonData">
<p>Success! Here is the response:</p> <p>Success! Here is the response:</p>
<pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre> <pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
</div> </div>
<template v-if="!isLoading && !jsonData"> <template v-if="!isLoading && !jsonData">
<div class="xs12"> <aside class="hook__page__content">
<p>Click on below claims to support them!</p> <div class="inner-wrap">
</div> <p style="text-align: center;">Click on below claims to support them!</p>
<div class="card">
<img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')"> <div class="hook__page__content__card">
<div v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')"> <img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
<h4>It's a Disaster</h4>
<div class="account">Anonymous</div> <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> </aside>
<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>
</template> </template>
</div>
</section>
</template> </template>
<script> <script>
@ -68,7 +100,7 @@ import EventBus from '../event-bus';
export default { export default {
data () { data () {
return { return {
claimId: 'Claim ID goes here', claimId: '',
amount: 0.01, amount: 0.01,
exampleCode: '', exampleCode: '',
isLoading: false, isLoading: false,

55
.vuepress/scss/pages/_hook.scss
View file

@ -1,13 +1,22 @@
.hook { .hook {
.loader { .loader {
width: 4rem; height: 4rem;
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
border: 6px solid;
border-radius: 50%; border-radius: 50%;
border-style: solid;
border-top-color: $teal; 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 { .hook__page__hero {
margin-bottom: 2rem; padding-bottom: 3rem; margin-bottom: 2rem;
border-bottom: 1px solid rgba($black, 0.05); border-bottom: 1px solid rgba($black, 0.05);
h1, p { 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; background-color: $white;
border: 1px solid rgba($gray, 0.7); border: 1px solid rgba($gray, 0.7);
font-size: 1rem; font-size: 1rem;
padding-left: 1rem;
@media (min-width: 501px) { @media (min-width: 501px) {
margin-right: auto; margin-right: auto;
@ -114,10 +125,6 @@
color: rgba($black, 0.3); color: rgba($black, 0.3);
} }
input {
width: calc(100% - 10rem);
}
a { a {
border-left: 1px solid rgba($gray, 0.7); border-left: 1px solid rgba($gray, 0.7);
color: $white; 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 { .hook__page__content {