Hook design in progress
This commit is contained in:
parent
7c0295f33b
commit
fb368e423c
10 changed files with 249 additions and 193 deletions
|
@ -1,37 +1,38 @@
|
|||
<template>
|
||||
<div id="hook">
|
||||
<div id="hook-navigation">
|
||||
<div class="step">
|
||||
<a href="#" v-on:click="activeStep = 1" v-bind:class="{active: (activeStep==1)}">
|
||||
<div class="hook" id="hook">
|
||||
<nav class="hook__navigation" id="hook-navigation">
|
||||
<div class="inner-wrap">
|
||||
<a href="#" v-on:click.prevent="activeStep = 1" class="hook__navigation__step" v-bind:class="{active: (activeStep==1)}">
|
||||
<span class="number">1</span>
|
||||
Resolve a claim
|
||||
</a>
|
||||
</div>
|
||||
<div class="step">
|
||||
<a href="#" v-on:click="activeStep = 2" v-bind:class="{active: (activeStep==2)}">
|
||||
|
||||
<a href="#" v-on:click.prevent="activeStep = 2" class="hook__navigation__step" v-bind:class="{active: (activeStep==2)}">
|
||||
<span class="number">2</span>
|
||||
Publish content
|
||||
</a>
|
||||
</div>
|
||||
<div class="step">
|
||||
<a href="#" v-on:click="activeStep = 3" v-bind:class="{active: (activeStep==3)}">
|
||||
|
||||
<a href="#" v-on:click.prevent="activeStep = 3" class="hook__navigation__step" v-bind:class="{active: (activeStep==3)}">
|
||||
<span class="number">3</span>
|
||||
Support with LBC
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<Step1 v-if="activeStep == 1"></Step1>
|
||||
<Step2 v-if="activeStep == 2"></Step2>
|
||||
<Step3 v-if="activeStep == 3"></Step3>
|
||||
|
||||
<div class="modal" v-model="uploadDialog" v-if="uploadDialog != false">
|
||||
<template v-if="confirmed">
|
||||
<h3>Your image has been published!</h3>
|
||||
<p><a v-bind:href="'https://explorer.lbry.io/tx/' + txhash" target="_blank">Check out your content on the LBRY blockchain explorer</a></p>
|
||||
<a href="#" class="__button-black" v-on:click="uploadDialog = false">Dismiss this dialog</a>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<h3><div class="loader small"></div> Waiting for confirmations...</h3>
|
||||
<p>Your image was uploaded to the LBRY network but we are currently waiting for the first confirmation. This should take just a few minutes. In the mean time, go ahead and try the other steps!</p>
|
||||
<h3><div class="loader small"></div> Waiting for confirmation...</h3>
|
||||
<p>Your image was uploaded to the LBRY network but we are currently waiting for the first confirmation. This should take just a few minutes. In the meantime, go ahead and try the other steps!</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -81,109 +82,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import '../scss/variables';
|
||||
|
||||
@import '../../node_modules/highlight.js/styles/monokai-sublime';
|
||||
|
||||
.dialog__content {
|
||||
align-items: flex-end !important;
|
||||
justify-content: right !important;
|
||||
}
|
||||
|
||||
#hook {
|
||||
background: url(https://lbry.io/img/youtube/hero@2x.jpg) no-repeat center center;
|
||||
background-size: cover;
|
||||
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;
|
||||
&.small {
|
||||
border: 4px solid #f3f3f3; /* Light grey */
|
||||
border-top: 4px solid #3498db; /* Blue */
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
.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%;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
h4, .account {
|
||||
text-align: left;
|
||||
color: black;
|
||||
padding: 0.5rem 0.5rem;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
.modal {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 25rem;
|
||||
background: white;
|
||||
text-align: left;
|
||||
padding: 1rem;
|
||||
h3, p, p > a {
|
||||
color: black;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#hook-navigation {
|
||||
.step {
|
||||
width: 30%;
|
||||
float: left;
|
||||
margin: 0 1.5%;
|
||||
background: black;
|
||||
padding: 0.5rem 0;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@import "../../node_modules/highlight.js/styles/monokai-sublime";
|
||||
@import "../scss/init/colors";
|
||||
@import "../scss/init/extends";
|
||||
@import "../scss/init/mixins";
|
||||
@import "../scss/pages/page";
|
||||
@import "../scss/pages/hook";
|
||||
</style>
|
||||
|
|
|
@ -1,60 +1,77 @@
|
|||
<template>
|
||||
<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">
|
||||
lbry://<input type="text" v-model="address" />
|
||||
</div>
|
||||
<div class="xs12 sm2">
|
||||
<a href="#" class="__button-black" v-on:click="fetchMetadata">Execute</a>
|
||||
</div>
|
||||
<section class="hook__page" id="step1-page">
|
||||
|
||||
<header class="hook__page__hero">
|
||||
<div class="inner-wrap">
|
||||
<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 class="hook__page__hero__claim">
|
||||
<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" 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 for <strong>lbry://{{ address }}</strong>:</p>
|
||||
<pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
|
||||
<a href="#" class="__button-black" v-on:click="goTo(2)">Go to next step</a>
|
||||
</div>
|
||||
|
||||
<template v-if="!isLoading && !jsonData">
|
||||
<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>
|
||||
<aside class="hook__page__content">
|
||||
<div class="inner-wrap">
|
||||
<p style="text-align: center;">…or select a live example from below</p>
|
||||
|
||||
<div class="hook__page__content__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>
|
||||
<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('unbubbled1-1')">
|
||||
|
||||
<div v-on:click="chooseClaim('unbubbled1-1')">
|
||||
<h4>Unbubbled with Jamie King, Ep1.1 — 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('fortnite-top-stream-moments-nickatnyte')">
|
||||
|
||||
<div v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
|
||||
<h4>FORTNITE TOP STREAM MOMENTS — Nickatnyte & 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('six')">
|
||||
|
||||
<div v-on:click="chooseClaim('six')">
|
||||
<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('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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -63,7 +80,7 @@ import EventBus from '../event-bus';
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
address: 'Claim URI goes here',
|
||||
address: '',
|
||||
jsonData: '',
|
||||
isLoading: false,
|
||||
exampleCode: ''
|
||||
|
@ -94,29 +111,5 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import '../scss/variables';
|
||||
|
||||
#step1-page {
|
||||
.card {
|
||||
.card__title {
|
||||
height: 9rem;
|
||||
h4 {
|
||||
text-align: left;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.account {
|
||||
color: $primary-color;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
background-color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@import '../scss/variables';
|
||||
</style>
|
||||
|
|
|
@ -98,6 +98,7 @@ iframe {
|
|||
img {
|
||||
font-size: 0;
|
||||
max-width: 100%;
|
||||
|
||||
&::after {
|
||||
width: 100%; height: 100%;
|
||||
top: -100%; left: 0;
|
||||
|
|
|
@ -5,7 +5,7 @@ $gray: #a3b7ad;
|
|||
$yellow: #dbdb3e;
|
||||
$lime: #8ddb3e;
|
||||
$green: #3edb3e;
|
||||
$teal: #3edb8d;
|
||||
$teal: mix($black, #3edb8d, 15%); // #3edb8d
|
||||
$cyan: #3edbdb;
|
||||
$blue: #3e8cdb;
|
||||
$indigo: #3e3edb;
|
||||
|
|
156
.vuepress/scss/pages/_hook.scss
Normal file
156
.vuepress/scss/pages/_hook.scss
Normal file
|
@ -0,0 +1,156 @@
|
|||
.hook {
|
||||
.loader {
|
||||
width: 4rem; height: 4rem;
|
||||
|
||||
animation: spin 2s linear infinite;
|
||||
border: 6px solid;
|
||||
border-radius: 50%;
|
||||
border-top-color: $teal;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
to { transform: rotate(1turn); }
|
||||
}
|
||||
|
||||
.hook__navigation {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hook__navigation__step {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
&:not(.active) {
|
||||
span {
|
||||
border-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $teal;
|
||||
|
||||
span {
|
||||
border-color: rgba($teal, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 3rem; height: 3rem;
|
||||
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
line-height: 3rem;
|
||||
margin: 0 auto 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__page {
|
||||
@extend .page__content;
|
||||
}
|
||||
|
||||
.hook__page__hero {
|
||||
margin-bottom: 2rem; padding-bottom: 3rem;
|
||||
border-bottom: 1px solid rgba($black, 0.05);
|
||||
|
||||
h1, p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__hero__claim {
|
||||
background-color: $white;
|
||||
border: 1px solid rgba($gray, 0.7);
|
||||
font-size: 1rem;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: 1rem;
|
||||
width: 80%;
|
||||
|
||||
&::after {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
input, a {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: rgba($black, 0.3);
|
||||
}
|
||||
|
||||
input {
|
||||
width: calc(100% - 10rem);
|
||||
}
|
||||
|
||||
a {
|
||||
border-left: 1px solid rgba($gray, 0.7);
|
||||
color: $white;
|
||||
float: right;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
width: 6rem;
|
||||
|
||||
&::after {
|
||||
width: calc(100% + 2px); height: calc(100% + 2px);
|
||||
top: -1px; left: -1px;
|
||||
|
||||
border: 1px solid;
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: $black;
|
||||
|
||||
&::after {
|
||||
border-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $teal;
|
||||
|
||||
&::after {
|
||||
border-color: $teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__page__content {
|
||||
&::after {
|
||||
@include clearfix;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__card {
|
||||
margin-bottom: 1rem; padding: 1rem;
|
||||
|
||||
img {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
|
@ -113,8 +113,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: mix($black, $teal, 15%);
|
||||
a:not(.button) {
|
||||
color: $teal;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
|
|
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: mix($black, $teal, 15%);
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -73,7 +73,7 @@
|
|||
&::after {
|
||||
width: 100%; height: 3px;
|
||||
|
||||
background-color: mix($black, $teal, 15%);
|
||||
background-color: $teal;
|
||||
content: "";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
<li class="home__feature">
|
||||
<p class="home__feature__title"><strong>New to LBRY?</strong></p>
|
||||
<p class="home__feature__description">Learn how LBRY works in 3 easy steps</p>
|
||||
<a class="home__feature__cta" href="">Check it out</a>
|
||||
<a class="home__feature__cta" href="/hook.html">Check it out</a>
|
||||
</li>
|
||||
|
||||
<li class="home__feature">
|
||||
|
@ -97,6 +97,10 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="$page.path == '/hook.html'">
|
||||
<Content></Content>
|
||||
</template>
|
||||
|
||||
<template v-else-if="$page.path == '/whitepaper.html'">
|
||||
<Content custom></Content>
|
||||
</template>
|
||||
|
|
Loading…
Reference in a new issue