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

Hook design in progress

Browse source
This commit is contained in:
ポール ウェッブ 2018-05-11 13:01:39 -05:00
parent 7c0295f33b
commit fb368e423c
10 changed files with 249 additions and 193 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
.vuepress/components/Hook.vue
View file

@ -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>&nbsp;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>&nbsp;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>

129
.vuepress/components/Step1.vue
View file

@ -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;">&hellip;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 &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('fortnite-top-stream-moments-nickatnyte')">
<div v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
<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('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>

1
.vuepress/scss/init/_base.scss
View file

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

2
.vuepress/scss/init/_colors.scss
View file

@ -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
View 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%;
}

4
.vuepress/scss/pages/_page.scss
View file

@ -113,8 +113,8 @@
}
}
a {
color: mix($black, $teal, 15%);
a:not(.button) {
color: $teal;
position: relative;
&::after {

2
.vuepress/scss/partials/_footer.scss
View file

@ -58,7 +58,7 @@
}
&:hover {
color: mix($black, $teal, 15%);
color: $teal;
}
}
}

2
.vuepress/scss/partials/_navigation.scss
View file

@ -73,7 +73,7 @@
&::after {
width: 100%; height: 3px;
background-color: mix($black, $teal, 15%);
background-color: $teal;
content: "";
left: 0;
position: absolute;

6
.vuepress/theme/Layout.vue
View file

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