Start of rebuild

This commit is contained in:
Kristian Polso 2018-05-09 22:13:03 +03:00
parent ce97f9df47
commit 0d1f576cdb
4 changed files with 117 additions and 96 deletions

View file

@ -1,25 +1,25 @@
<template> <template>
<v-container fluid grid-list-md text-xs-center id="hook"> <div id="hook">
<v-layout row wrap id="hook-navigation"> <div id="hook-navigation">
<v-flex xs4> <div class="step">
<a href="#" v-on:click="activeStep = 1" v-bind:class="{active: (activeStep==1)}"> <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 Resolve a claim
</a> </a>
</v-flex> </div>
<v-flex xs4> <div class="step">
<a href="#" v-on:click="activeStep = 2" v-bind:class="{active: (activeStep==2)}"> <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 Publish content
</a> </a>
</v-flex> </div>
<v-flex xs4> <div class="step">
<a href="#" v-on:click="activeStep = 3" v-bind:class="{active: (activeStep==3)}"> <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 Support with LBC
</a> </a>
</v-flex> </div>
</v-layout> </div>
<Step1 v-if="activeStep == 1"></Step1> <Step1 v-if="activeStep == 1"></Step1>
<Step2 v-if="activeStep == 2"></Step2> <Step2 v-if="activeStep == 2"></Step2>
<Step3 v-if="activeStep == 3"></Step3> <Step3 v-if="activeStep == 3"></Step3>
@ -38,7 +38,7 @@
</template> </template>
</v-card> </v-card>
</v-dialog> </v-dialog>
</v-container> </div>
</template> </template>
<script> <script>
@ -81,7 +81,7 @@ export default {
}); });
}, },
name: 'Hook' name: 'Hook'
} };
</script> </script>
<style lang="scss"> <style lang="scss">
@ -99,17 +99,50 @@ export default {
background: url(https://lbry.io/img/youtube/hero@2x.jpg) no-repeat center center; background: url(https://lbry.io/img/youtube/hero@2x.jpg) no-repeat center center;
background-size: cover; background-size: cover;
color: $text-color; color: $text-color;
.display-2, text-align: center;
.subheading { h1,
h2,
h3,
h4,
h5,
p {
color: white; color: white;
text-shadow: 0px 0px 1rem rgba(0,0,0,0.5); text-shadow: 0px 0px 1rem rgba(0,0,0,0.5);
a { a {
color: white; color: white;
} }
} }
input[type='text'] {
background: white;
padding: 0.5rem 0.5rem;
}
pre {
text-align: left;
}
.flex { .flex {
margin-bottom: 2rem; 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 { #hook-navigation {
@ -127,4 +160,9 @@ export default {
} }
} }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style> </style>

View file

@ -1,82 +1,60 @@
<template> <template>
<v-container fluid id="step1-page"> <div id="step1-page">
<v-layout row wrap> <div class="xs12">
<v-flex xs12> <h1>Learn the LBRY protocol by examples</h1>
<h1 class="display-2">Learn the LBRY protocol by examples</h1> <p>Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
<p class="subheading">Let's start by getting the associated metadata for <a href="#">a claim</a>.</p> </div>
</v-flex> <div class="xs12 sm10">
<v-flex xs12 sm10> <input type="text" v-model="address" prefix="lbry://" />
<v-text-field v-model="address" solo dark prefix="lbry://"></v-text-field> </div>
</v-flex> <div class="xs12 sm2">
<v-flex xs12 sm2> <a href="#" class="__button-black" v-on:click="fetchMetadata">Execute</a>
<v-btn large v-on:click="fetchMetadata" class="mt-0">Execute</v-btn> </div>
</v-flex> <div class="xs12" v-if="exampleCode != ''">
<v-flex xs12 v-if="exampleCode != ''">
<pre v-highlightjs="exampleCode"><code class="bash"></code></pre> <pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
</v-flex> </div>
<v-flex xs12 v-if="isLoading"> <div class="xs12" v-if="isLoading">
<v-progress-circular indeterminate color="white"></v-progress-circular> <div class="loader"></div>
</v-flex> </div>
<v-flex xs12 v-if="jsonData"> <div class="xs12" v-if="jsonData">
<p class="subheading">Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p> <p>Success! Here is the response for <strong>lbry://{{ address }}</strong>:</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>
<v-btn large v-on:click="goTo(2)" class="mt-3">Go to next step</v-btn> <a href="#" class="__button-black" v-on:click="goTo(2)">Go to next step</a>
</v-flex> </div>
<template v-if="!isLoading && !jsonData"> <template v-if="!isLoading && !jsonData">
<v-flex xs12> <div class="xs12">
<p class="subheading">... or select a live example from below</p> <p>... or select a live example from below</p>
</v-flex> </div>
<v-flex xs12 sm3> <div class="card">
<v-card hover> <img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('itsadisaster')">
<v-card-media src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" height="200px" v-on:click="chooseClaim('itsadisaster')"> <div v-on:click="chooseClaim('itsadisaster')">
</v-card-media> <h4>It's a Disaster</h4>
<v-card-title v-on:click="chooseClaim('itsadisaster')">
<div>
<h4 class="mb-0">It's a Disaster</h4>
<div class="account">Anonymous</div> <div class="account">Anonymous</div>
</div> </div>
</v-card-title> </div>
</v-card> <div class="card">
</v-flex> <img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('unbubbled1-1')">
<v-flex xs12 sm3> <div v-on:click="chooseClaim('unbubbled1-1')">
<v-card hover> <h4>Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
<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 class="account">@Unbubbled</div> <div class="account">@Unbubbled</div>
</div> </div>
</v-card-title> </div>
</v-card> <div class="card">
</v-flex> <img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
<v-flex xs12 sm3> <div v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
<v-card hover> <h4>FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
<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 class="account">@nickatnyte</div> <div class="account">@nickatnyte</div>
</div> </div>
</v-card-title> </div>
</v-card> <div class="card">
</v-flex> <img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('six')">
<v-flex xs12 sm3> <div v-on:click="chooseClaim('six')">
<v-card hover> <h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
<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 class="account">Anonymous</div> <div class="account">Anonymous</div>
</div> </div>
</v-card-title> </div>
</v-card>
</v-flex>
</template> </template>
</v-layout> </div>
</v-container>
</template> </template>
<script> <script>
@ -112,7 +90,7 @@ export default {
} }
}, },
name: 'Step1' name: 'Step1'
} };
</script> </script>
<style lang="scss"> <style lang="scss">

View file

@ -97,7 +97,7 @@ iframe {
img { img {
font-size: 0; font-size: 0;
max-width: 100%;
&::after { &::after {
width: 100%; height: 100%; width: 100%; height: 100%;
top: -100%; left: 0; top: -100%; left: 0;

5
hook.md Normal file
View file

@ -0,0 +1,5 @@
---
title: Hook Demo
---
<Hook></Hook>