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>
<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>

118
.vuepress/components/Step3.vue
View file

@ -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,

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

@ -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 {