Work on Tour, step 2
This commit is contained in:
parent
e228862a3b
commit
433bc4a27d
11 changed files with 189 additions and 112 deletions
|
@ -4,7 +4,7 @@
|
|||
|
||||
// P R O G R A M
|
||||
|
||||
const relativeDate = (function (undefined) {
|
||||
const relativeDate = (undefined => {
|
||||
const SECOND = 1000;
|
||||
const MINUTE = 60 * SECOND;
|
||||
const HOUR = 60 * MINUTE;
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -104,7 +104,7 @@ img {
|
|||
top: -100%; left: 0;
|
||||
|
||||
background-color: $white;
|
||||
background-image: url("../media/images/missing.png");
|
||||
background-image: url("/assets/media/images/missing.png");
|
||||
background-size: cover;
|
||||
box-shadow: 0 0 1px 0 rgba($black, 0.3);
|
||||
content: "";
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
.hero {
|
||||
align-items: center;
|
||||
background-color: $black;
|
||||
background-image: url("../media/svg/text-logo--white.svg");
|
||||
background-image: url("/assets/media/svg/text-logo--white.svg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
|
@ -55,10 +55,6 @@
|
|||
@media (max-width: 850px) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
// font-size: 3rem;
|
||||
// margin-bottom: 1rem;
|
||||
// text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -300,23 +296,23 @@
|
|||
}
|
||||
|
||||
&:nth-child(1) a::before {
|
||||
background-image: url("../media/svg/flag.svg");
|
||||
background-image: url("/assets/media/svg/flag.svg");
|
||||
}
|
||||
|
||||
&:nth-child(2) a::before {
|
||||
background-image: url("../media/svg/keyboard.svg");
|
||||
background-image: url("/assets/media/svg/keyboard.svg");
|
||||
}
|
||||
|
||||
&:nth-child(3) a::before {
|
||||
background-image: url("../media/svg/anchor.svg");
|
||||
background-image: url("/assets/media/svg/anchor.svg");
|
||||
}
|
||||
|
||||
&:nth-child(4) a::before {
|
||||
background-image: url("../media/svg/chat.svg");
|
||||
background-image: url("/assets/media/svg/chat.svg");
|
||||
}
|
||||
|
||||
&:nth-child(5) a::before {
|
||||
background-image: url("../media/svg/monitor.svg");
|
||||
background-image: url("/assets/media/svg/monitor.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -353,15 +349,15 @@
|
|||
}
|
||||
|
||||
&:nth-child(1) a::before {
|
||||
background-image: url("../media/svg/discord.svg");
|
||||
background-image: url("/assets/media/svg/discord.svg");
|
||||
}
|
||||
|
||||
&:nth-child(2) a::before {
|
||||
background-image: url("../media/svg/reddit.svg");
|
||||
background-image: url("/assets/media/svg/reddit.svg");
|
||||
}
|
||||
|
||||
&:nth-child(3) a::before {
|
||||
background-image: url("../media/svg/slack.svg");
|
||||
background-image: url("/assets/media/svg/slack.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -345,9 +345,9 @@
|
|||
|
||||
|
||||
.page__header {
|
||||
background-image: url("../media/images/background-a.jpg");
|
||||
background-image: url("/assets/media/images/background-a.jpg");
|
||||
}
|
||||
|
||||
.page__content {
|
||||
background-image: url("../media/images/grid.png");
|
||||
background-image: url("/assets/media/images/grid.png");
|
||||
}
|
||||
|
|
|
@ -331,10 +331,11 @@
|
|||
}
|
||||
|
||||
select {
|
||||
background-image: url("../../media/svg/down.svg");
|
||||
background-image: url("/assets/media/svg/down.svg");
|
||||
background-position: 99% center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
|
@ -56,7 +56,7 @@
|
|||
@include hide-text;
|
||||
width: 10rem; height: 3rem;
|
||||
|
||||
background-image: url("../media/svg/logo.svg");
|
||||
background-image: url("/assets/media/svg/logo.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
flex: 1;
|
||||
|
|
1
views/pages/_api.js
Normal file
1
views/pages/_api.js
Normal file
|
@ -0,0 +1 @@
|
|||
// https://www.npmjs.com/package/make-fetch-happen
|
|
@ -16,17 +16,17 @@ module.exports = exports = () => async () => html`
|
|||
<div class="hook" id="hook">
|
||||
<nav class="hook__navigation" id="hook-navigation">
|
||||
<div class="inner-wrap"> <!--/ TODO: Save tutorial position to localStorage /-->
|
||||
<a href="#" class="hook__navigation__step" data-action="go to step 1">
|
||||
<a href="#" class="hook__navigation__step" data-action="tour, step one">
|
||||
<span class="number">1</span>
|
||||
Resolve a claim
|
||||
</a>
|
||||
|
||||
<a href="#" class="hook__navigation__step" data-action="go to step 2">
|
||||
<a href="#" class="hook__navigation__step" data-action="tour, step two">
|
||||
<span class="number">2</span>
|
||||
Publish content
|
||||
</a>
|
||||
|
||||
<a href="#" class="hook__navigation__step" data-action="go to step 3">
|
||||
<a href="#" class="hook__navigation__step" data-action="tour, step three">
|
||||
<span class="number">3</span>
|
||||
Support with LBC
|
||||
</a>
|
||||
|
@ -126,24 +126,66 @@ function step1() {
|
|||
function step2() {
|
||||
/**
|
||||
Step 2 loading steps:
|
||||
...
|
||||
- exampleCode !== ''
|
||||
<pre style="clear: both;"><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
|
||||
|
||||
- isLoading
|
||||
<div class="loader"></div>
|
||||
|
||||
- jsonData
|
||||
<p style="text-align: center;">Success!<br/>
|
||||
<a class="__button-black" v-bind:href="'http://explorer.lbry.io/tx/'+txid">See the transaction on explorer.lbry.io</a>
|
||||
</p>
|
||||
|
||||
<p style="text-align: center;">Here is the raw response:</p>
|
||||
<pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
|
||||
|
||||
Process after submitting meme:
|
||||
- isLoading appears
|
||||
- exampleCode and jsonData replace `#step2-placeholder` contents
|
||||
- next button should exist
|
||||
|
||||
Issues:
|
||||
- image isn't uploaded to spee.ch
|
||||
- response is blank
|
||||
- response should have link to upload on Blockchain Explorer
|
||||
- NSFW flag should work
|
||||
*/
|
||||
|
||||
const images = [
|
||||
{
|
||||
src: "../carlsagan2.jpg",
|
||||
src: "/assets/media/images/carlsagan2.jpg",
|
||||
alt: "Carl Sagan"
|
||||
},
|
||||
{
|
||||
src: "../doge-meme.jpg",
|
||||
src: "/assets/media/images/doge-meme.jpg",
|
||||
alt: "Doge"
|
||||
},
|
||||
{
|
||||
src: "../lbry-green.png",
|
||||
src: "/assets/media/images/lbry-green.png",
|
||||
alt: "LBRY Logo With Green Background"
|
||||
}
|
||||
];
|
||||
|
||||
const memePlaceholderData = {
|
||||
bottomLine: {
|
||||
placeholder: "Top line",
|
||||
value: "that I made"
|
||||
},
|
||||
description: {
|
||||
placeholder: "Description",
|
||||
value: "Check out this image I published to LBRY via lbry.tech"
|
||||
},
|
||||
topLine: {
|
||||
placeholder: "Top line",
|
||||
value: "This is an example meme"
|
||||
},
|
||||
title: {
|
||||
placeholder: "Title",
|
||||
value: "Dank Meme Supreme da Cheese"
|
||||
}
|
||||
};
|
||||
|
||||
const renderedImages = [];
|
||||
|
||||
for (const image of images) {
|
||||
|
@ -160,10 +202,9 @@ function step2() {
|
|||
</header>
|
||||
|
||||
<div class="hook__page__content inner-wrap">
|
||||
<template v-if="!isLoading">
|
||||
<div class="hook__page__content__meme left">
|
||||
<img v-bind:src="backgroundImage" id="base-image" style="height: 0; visibility: hidden;" alt="Base image for LBRY meme creator"/>
|
||||
<canvas id="meme-canvas" width="400" height="300">Sorry, canvas is not supported</canvas>
|
||||
<canvas id="meme-canvas" width="400" height="300">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
|
||||
|
||||
<!--/ <img v-for="image in images" v-bind:src="image.src" v-on:click="chooseImage(image.src)" class="hook__page__content__meme__thumbnail" v-bind:class="{'selected': backgroundImage === image.src}" v-bind:alt="image.alt"/> /-->
|
||||
${renderedImages}
|
||||
|
@ -174,29 +215,29 @@ function step2() {
|
|||
|
||||
<fieldset>
|
||||
<label for="meme-top-line">Top line</label>
|
||||
<input name="meme-top-line" id="meme-top-line" type="text" placeholder="Top line" required/> <!--/ v-model="topLine" /-->
|
||||
<input name="meme-top-line" id="meme-top-line" type="text" placeholder="${memePlaceholderData.topLine.placeholder}" spellcheck="false" value="${memePlaceholderData.topLine.value}" required/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-bottom-line">Bottom line</label>
|
||||
<input name="meme-bottom-line" id="meme-bottom-line" type="text" placeholder="Bottom line" required/> <!--/ v-model="bottomLine" /-->
|
||||
<input name="meme-bottom-line" id="meme-bottom-line" type="text" placeholder="${memePlaceholderData.bottomLine.placeholder}" spellcheck="false" value="${memePlaceholderData.bottomLine.value}" required/>
|
||||
</fieldset>
|
||||
|
||||
<h2 class="__metadata">Metadata</h2>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-title">Title</label>
|
||||
<input name="meme-title" id="meme-title" type="text" placeholder="Title" required/> <!--/ v-model="title" /-->
|
||||
<input name="meme-title" id="meme-title" type="text" placeholder="${memePlaceholderData.title.placeholder}" spellcheck="false" value="${memePlaceholderData.title.value}" required/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-description">Description</label>
|
||||
<textarea name="meme-description" id="meme-description" type="text" placeholder="Description" spellcheck="false" required>{{ description }}</textarea> <!--/ v-model="description" /-->
|
||||
<textarea name="meme-description" id="meme-description" type="text" placeholder="${memePlaceholderData.description.placeholder}" spellcheck="false" required>${memePlaceholderData.description.value}</textarea>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-language">Language</label>
|
||||
<select name="meme-language" id="meme-language"> <!--/ v-model="language" /-->
|
||||
<select name="meme-language" id="meme-language">
|
||||
<option value="ar">Arabic</option>
|
||||
<option value="zh">Chinese (Mandarin)</option>
|
||||
<option value="en">English</option>
|
||||
|
@ -212,7 +253,7 @@ function step2() {
|
|||
|
||||
<fieldset>
|
||||
<label for="meme-license">License</label>
|
||||
<select name="meme-license" id="meme-license" required> <!--/ v-model="license" /-->
|
||||
<select name="meme-license" id="meme-license" required>
|
||||
<option value="Public Domain">Public Domain</option>
|
||||
<option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
|
||||
<option value="Creative Commons Attribution-ShareAlike 4.0 International">Creative Commons Attribution-ShareAlike 4.0 International</option>
|
||||
|
@ -225,27 +266,16 @@ function step2() {
|
|||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label><input type="checkbox" name="nsfw"/>NSFW</label> <!--/ v-model="nsfw" /-->
|
||||
<label><input type="checkbox" name="nsfw"/>NSFW</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<input type="submit" class="__button-black" value="Submit"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<pre v-if="exampleCode !== ''" style="clear: both;"><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
|
||||
|
||||
<div class="loader" v-if="isLoading"></div>
|
||||
|
||||
<div v-if="jsonData">
|
||||
<p style="text-align: center;">Success!<br/>
|
||||
<a class="__button-black" v-bind:href="'http://explorer.lbry.io/tx/'+txid">See the transaction on explorer.lbry.io</a>
|
||||
</p>
|
||||
<p style="text-align: center;">Here is the raw response:</p>
|
||||
<pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hook__page__content inner-wrap" id="step2-placeholder"></div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
|
|
@ -3,10 +3,11 @@
|
|||
|
||||
|
||||
$("#fetch-claim-uri").val(""); // reset
|
||||
detectLanguageAndUpdate();
|
||||
|
||||
|
||||
|
||||
$("[data-action]").on("click", event => {
|
||||
$("body").on("click", "[data-action]", event => {
|
||||
event.preventDefault();
|
||||
const data = event.currentTarget.dataset;
|
||||
|
||||
|
@ -20,6 +21,33 @@ $("[data-action]").on("click", event => {
|
|||
fetchMetadata(data.claimId);
|
||||
break;
|
||||
|
||||
case "tour, step one":
|
||||
$(".hook__navigation__step").removeClass("active");
|
||||
$(".hook__navigation__step:nth-child(1)").addClass("active");
|
||||
|
||||
$("#step1-page").show();
|
||||
$("#step2-page").hide();
|
||||
$("#step3-page").hide();
|
||||
break;
|
||||
|
||||
case "tour, step two":
|
||||
$(".hook__navigation__step").removeClass("active");
|
||||
$(".hook__navigation__step:nth-child(2)").addClass("active");
|
||||
|
||||
$("#step1-page").hide();
|
||||
$("#step2-page").show();
|
||||
$("#step3-page").hide();
|
||||
break;
|
||||
|
||||
case "tour, step three":
|
||||
$(".hook__navigation__step").removeClass("active");
|
||||
$(".hook__navigation__step:nth-child(3)").addClass("active");
|
||||
|
||||
$("#step1-page").hide();
|
||||
$("#step2-page").hide();
|
||||
$("#step3-page").show();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
@ -27,6 +55,27 @@ $("[data-action]").on("click", event => {
|
|||
|
||||
|
||||
|
||||
// H E L P E R S
|
||||
|
||||
function detectLanguageAndUpdate() {
|
||||
const compare = (array1, array2) => array2.filter(value => array2.indexOf(value)); // compare two arrays and get match(es)
|
||||
const memeLocaleObject = $("#meme-language").children();
|
||||
const memeLocales = [];
|
||||
const userLocales = [];
|
||||
|
||||
for (const language of navigator.languages) userLocales.push(language);
|
||||
|
||||
for (const key in memeLocaleObject) {
|
||||
if (memeLocaleObject[key] && memeLocaleObject[key].value) memeLocales.push(memeLocaleObject[key].value);
|
||||
}
|
||||
|
||||
if (
|
||||
memeLocales.length &&
|
||||
userLocales.length &&
|
||||
compare(memeLocales, userLocales).length
|
||||
) $("#meme-language").children(`option[value="${compare(memeLocales, userLocales)[0]}"]`).attr("selected", true);
|
||||
}
|
||||
|
||||
function fetchMetadata(metadataId) {
|
||||
send(JSON.stringify({
|
||||
"claim": metadataId,
|
||||
|
|
Loading…
Reference in a new issue