Start of rebuild
This commit is contained in:
Kristian Polso
parent
ce97f9df47
commit
0d1f576cdb
4 changed files with 117 additions and 96 deletions
|
|
@ -1,25 +1,25 @@
|
|||
<template>
|
||||
<v-container fluid grid-list-md text-xs-center id="hook">
|
||||
<v-layout row wrap id="hook-navigation">
|
||||
<v-flex xs4>
|
||||
<div id="hook">
|
||||
<div id="hook-navigation">
|
||||
<div class="step">
|
||||
<a href="#" v-on:click="activeStep = 1" v-bind:class="{active: (activeStep==1)}">
|
||||
<v-btn color="grey lighten-1" fab>1</v-btn>
|
||||
<span class="number">1</span>
|
||||
Resolve a claim
|
||||
</a>
|
||||
</v-flex>
|
||||
<v-flex xs4>
|
||||
</div>
|
||||
<div class="step">
|
||||
<a href="#" v-on:click="activeStep = 2" v-bind:class="{active: (activeStep==2)}">
|
||||
<v-btn color="grey lighten-1" fab>2</v-btn>
|
||||
<span class="number">2</span>
|
||||
Publish content
|
||||
</a>
|
||||
</v-flex>
|
||||
<v-flex xs4>
|
||||
</div>
|
||||
<div class="step">
|
||||
<a href="#" v-on:click="activeStep = 3" v-bind:class="{active: (activeStep==3)}">
|
||||
<v-btn color="grey lighten-1" fab>3</v-btn>
|
||||
<span class="number">3</span>
|
||||
Support with LBC
|
||||
</a>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</div>
|
||||
</div>
|
||||
<Step1 v-if="activeStep == 1"></Step1>
|
||||
<Step2 v-if="activeStep == 2"></Step2>
|
||||
<Step3 v-if="activeStep == 3"></Step3>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</template>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -81,7 +81,7 @@ export default {
|
|||
});
|
||||
},
|
||||
name: 'Hook'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -99,17 +99,50 @@ export default {
|
|||
background: url(https://lbry.io/img/youtube/hero@2x.jpg) no-repeat center center;
|
||||
background-size: cover;
|
||||
color: $text-color;
|
||||
.display-2,
|
||||
.subheading {
|
||||
text-align: center;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p {
|
||||
color: white;
|
||||
text-shadow: 0px 0px 1rem rgba(0,0,0,0.5);
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
input[type='text'] {
|
||||
background: white;
|
||||
padding: 0.5rem 0.5rem;
|
||||
}
|
||||
pre {
|
||||
text-align: left;
|
||||
}
|
||||
.flex {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.loader {
|
||||
border: 16px solid #f3f3f3; /* Light grey */
|
||||
border-top: 16px solid #3498db; /* Blue */
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
.card {
|
||||
width: 20%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background: white;
|
||||
box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
|
||||
margin: 0 2.5%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#hook-navigation {
|
||||
|
|
@ -127,4 +160,9 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,82 +1,60 @@
|
|||
<template>
|
||||
<v-container fluid id="step1-page">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<h1 class="display-2">Learn the LBRY protocol by examples</h1>
|
||||
<p class="subheading">Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm10>
|
||||
<v-text-field v-model="address" solo dark prefix="lbry://"></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm2>
|
||||
<v-btn large v-on:click="fetchMetadata" class="mt-0">Execute</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12 v-if="exampleCode != ''">
|
||||
<div id="step1-page">
|
||||
<div class="xs12">
|
||||
<h1>Learn the LBRY protocol by examples</h1>
|
||||
<p>Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
|
||||
</div>
|
||||
<div class="xs12 sm10">
|
||||
<input type="text" v-model="address" prefix="lbry://" />
|
||||
</div>
|
||||
<div class="xs12 sm2">
|
||||
<a href="#" class="__button-black" v-on:click="fetchMetadata">Execute</a>
|
||||
</div>
|
||||
<div class="xs12" v-if="exampleCode != ''">
|
||||
<pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
|
||||
</v-flex>
|
||||
<v-flex xs12 v-if="isLoading">
|
||||
<v-progress-circular indeterminate color="white"></v-progress-circular>
|
||||
</v-flex>
|
||||
<v-flex xs12 v-if="jsonData">
|
||||
<p class="subheading">Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
|
||||
</div>
|
||||
<div class="xs12" v-if="isLoading">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<div class="xs12" v-if="jsonData">
|
||||
<p>Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
|
||||
<pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
|
||||
<v-btn large v-on:click="goTo(2)" class="mt-3">Go to next step</v-btn>
|
||||
</v-flex>
|
||||
<a href="#" class="__button-black" v-on:click="goTo(2)">Go to next step</a>
|
||||
</div>
|
||||
<template v-if="!isLoading && !jsonData">
|
||||
<v-flex xs12>
|
||||
<p class="subheading">... or select a live example from below</p>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm3>
|
||||
<v-card hover>
|
||||
<v-card-media src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" height="200px" v-on:click="chooseClaim('itsadisaster')">
|
||||
</v-card-media>
|
||||
<v-card-title v-on:click="chooseClaim('itsadisaster')">
|
||||
<div>
|
||||
<h4 class="mb-0">It's a Disaster</h4>
|
||||
<div class="xs12">
|
||||
<p>... or select a live example from below</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('itsadisaster')">
|
||||
<div v-on:click="chooseClaim('itsadisaster')">
|
||||
<h4>It's a Disaster</h4>
|
||||
<div class="account">Anonymous</div>
|
||||
</div>
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm3>
|
||||
<v-card hover>
|
||||
<v-card-media src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" height="200px" v-on:click="chooseClaim('unbubbled1-1')">
|
||||
</v-card-media>
|
||||
<v-card-title v-on:click="chooseClaim('unbubbled1-1')">
|
||||
<div>
|
||||
<h4 class="mb-0">Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('unbubbled1-1')">
|
||||
<div v-on:click="chooseClaim('unbubbled1-1')">
|
||||
<h4>Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
|
||||
<div class="account">@Unbubbled</div>
|
||||
</div>
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm3>
|
||||
<v-card hover>
|
||||
<v-card-media src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" height="200px" v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
|
||||
</v-card-media>
|
||||
<v-card-title v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
|
||||
<div>
|
||||
<h4 class="mb-0">FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
|
||||
<div v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
|
||||
<h4>FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
|
||||
<div class="account">@nickatnyte</div>
|
||||
</div>
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm3>
|
||||
<v-card hover>
|
||||
<v-card-media src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" height="200px" v-on:click="chooseClaim('six')">
|
||||
</v-card-media>
|
||||
<v-card-title v-on:click="chooseClaim('six')">
|
||||
<div>
|
||||
<h4 class="mb-0">LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('six')">
|
||||
<div v-on:click="chooseClaim('six')">
|
||||
<h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
|
||||
<div class="account">Anonymous</div>
|
||||
</div>
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</div>
|
||||
</template>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -112,7 +90,7 @@ export default {
|
|||
}
|
||||
},
|
||||
name: 'Step1'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ iframe {
|
|||
|
||||
img {
|
||||
font-size: 0;
|
||||
|
||||
max-width: 100%;
|
||||
&::after {
|
||||
width: 100%; height: 100%;
|
||||
top: -100%; left: 0;
|
||||
|
|
|
|||
5
hook.md
Normal file
5
hook.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Hook Demo
|
||||
---
|
||||
|
||||
<Hook></Hook>
|
||||
Loading…
Reference in a new issue