Cleaup of components and styling fixes for hook
This commit is contained in:
ポール ウェッブ
parent
b600665ba0
commit
20be481c1c
17 changed files with 1136 additions and 1026 deletions
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
|
||||
<section class="ecosystem">
|
||||
<aside class="ecosystem__submodules">
|
||||
<div class="ecosystem__submodule chainquery">
|
||||
|
|
@ -224,7 +223,6 @@
|
|||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -3,32 +3,34 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['path'],
|
||||
export default {
|
||||
props: ["path"],
|
||||
|
||||
data () {
|
||||
return {
|
||||
githubUrl: ''
|
||||
githubUrl: ""
|
||||
}
|
||||
},
|
||||
name: 'EditLink',
|
||||
|
||||
methods: {
|
||||
updateUrl () {
|
||||
this.githubUrl = 'https://github.com/'+ this.$site.themeConfig.repo + '/edit/' + this.$site.themeConfig.docsBranch;
|
||||
this.githubUrl = `https://github.com/${this.$site.themeConfig.repo}/edit/${this.$site.themeConfig.docsBranch}`;
|
||||
|
||||
if(this.$page.path == '/') {
|
||||
this.githubUrl = this.githubUrl + '/README.md';
|
||||
} else {
|
||||
this.githubUrl = this.githubUrl + this.$page.path.replace('.html', '.md');
|
||||
}
|
||||
if (this.$page.path === "/") this.githubUrl = `${this.githubUrl}/README.md`;
|
||||
else this.githubUrl = `${this.githubUrl}${this.$page.path.replace(".html", ".md")}`;
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.updateUrl();
|
||||
},
|
||||
|
||||
watch: {
|
||||
path () {
|
||||
this.updateUrl();
|
||||
}
|
||||
},
|
||||
|
||||
name: "EditLink"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,56 @@
|
|||
<template>
|
||||
<div id="email-subscribe" class="newsletter-cta">
|
||||
<h3 class="newsletter-cta__title">Don't Miss A Bit - Subscribe For LBRY Technical Updates</h3>
|
||||
|
||||
<div>
|
||||
<input type="text" class="newsletter-cta__input" v-model="emailAddress" placeholder="you@domain.tld">
|
||||
<a class="newsletter-cta__submit" href="#" v-on:click.prevent="subscribe" title="Subscribe to our technical newsletter">Subscribe</a>
|
||||
</div>
|
||||
|
||||
<p v-if="message" class="newsletter-cta__message">{{ message }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
emailAddress: '',
|
||||
message: ''
|
||||
emailAddress: "",
|
||||
message: ""
|
||||
}
|
||||
},
|
||||
name: 'EmailSubscribe',
|
||||
|
||||
methods: {
|
||||
subscribe () {
|
||||
var component = this;
|
||||
this.message = '';
|
||||
if(!this.validateEmail(this.emailAddress)) {
|
||||
this.message = 'Your email is not valid!';
|
||||
} else {
|
||||
this.$http.post('//api.lbry.io/list/subscribe', {
|
||||
email: this.emailAddress,
|
||||
tag: 'developer'
|
||||
let component = this;
|
||||
component.message = "";
|
||||
|
||||
if (!component.validateEmail(component.emailAddress)) {
|
||||
component.message = "Your email is not valid!";
|
||||
return;
|
||||
}
|
||||
|
||||
component.$http.post("//api.lbry.io/list/subscribe", {
|
||||
email: component.emailAddress,
|
||||
tag: "developer"
|
||||
}, {
|
||||
emulateJSON: true
|
||||
}).then(function(response) {
|
||||
component.email = '';
|
||||
component.message = 'Thank you for subscribing!';
|
||||
}, function(response) {
|
||||
if(response.status == 409) {
|
||||
component.message = 'You have already subscribed to our mailing list!';
|
||||
}
|
||||
}).then(response => {
|
||||
component.email = "";
|
||||
component.message = "Thank you for subscribing!";
|
||||
}, response => {
|
||||
if (response.status === 409) component.message = "You have already subscribed to our mailing list!";
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
validateEmail (email) {
|
||||
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return re.test(String(email).toLowerCase());
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
name: "EmailSubscribe"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,72 +1,104 @@
|
|||
<template>
|
||||
<div id="email-subscribe-large">
|
||||
<input type="text" class="input" v-model="emailAddress" placeholder="your@email.com">
|
||||
<br/>
|
||||
<br/>
|
||||
<a class="__button-black" href="#" v-on:click.prevent="subscribe" title="Subscribe to our technical newsletter">Subscribe</a>
|
||||
<p v-if="message" class="message">{{ message }}</p>
|
||||
<div id="email-subscribe-large" class="newsletter-standalone">
|
||||
<input type="text" class="newsletter-standalone__input" v-model="emailAddress" placeholder="your@domain.tld"/><br/>
|
||||
<a class="newsletter-standalone__submit" href="#" v-on:click.prevent="subscribe" title="Subscribe to our technical newsletter">Subscribe</a><br/>
|
||||
|
||||
<p v-if="message" class="newsletter-standalone__message">{{ message }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
emailAddress: '',
|
||||
message: ''
|
||||
emailAddress: "",
|
||||
message: ""
|
||||
}
|
||||
},
|
||||
name: 'EmailSubscribe',
|
||||
|
||||
methods: {
|
||||
subscribe () {
|
||||
var component = this;
|
||||
this.message = '';
|
||||
if(!this.validateEmail(this.emailAddress)) {
|
||||
this.message = 'Your email is not valid!';
|
||||
} else {
|
||||
this.$http.post('//api.lbry.io/list/subscribe', {
|
||||
email: this.emailAddress,
|
||||
tag: 'developer'
|
||||
let component = this;
|
||||
component.message = "";
|
||||
|
||||
if (!component.validateEmail(component.emailAddress)) {
|
||||
component.message = "Your email is not valid!";
|
||||
return;
|
||||
}
|
||||
|
||||
component.$http.post("//api.lbry.io/list/subscribe", {
|
||||
email: component.emailAddress,
|
||||
tag: "developer"
|
||||
}, {
|
||||
emulateJSON: true
|
||||
}).then(function(response) {
|
||||
component.email = '';
|
||||
component.message = 'Thank you for subscribing!';
|
||||
}, function(response) {
|
||||
if(response.status == 409) {
|
||||
component.message = 'You have already subscribed to our mailing list!';
|
||||
}
|
||||
}).then(response => {
|
||||
component.email = "";
|
||||
component.message = "Thank you for subscribing!";
|
||||
}, response => {
|
||||
if (response.status === 409) component.message = "You have already subscribed to our mailing list!";
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
validateEmail (email) {
|
||||
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return re.test(String(email).toLowerCase());
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
name: "EmailSubscribe"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../scss/init/colors";
|
||||
@import "../scss/init/extends";
|
||||
@import "../scss/init/mixins";
|
||||
|
||||
#email-subscribe-large {
|
||||
.title {
|
||||
margin-bottom: 0.5rem;
|
||||
.newsletter-standalone__input,
|
||||
.newsletter-standalone__submit {
|
||||
@extend .__button-padding-horizontal;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
.input {
|
||||
border: 1px solid black;
|
||||
padding: 0.65rem;
|
||||
background: white;
|
||||
margin-right: 1rem;
|
||||
width: 18rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.__button-black {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.message {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter-standalone__input {
|
||||
background-color: $white;
|
||||
font-size: 1rem;
|
||||
height: 38px;
|
||||
margin-bottom: 0.25rem;
|
||||
transition: border 0.2s;
|
||||
|
||||
@media (min-width: 601px) {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:not(:focus) {
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: mix($black, $teal, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter-standalone__submit {
|
||||
@extend .__button-basic;
|
||||
@extend .__button-padding-vertical;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: $black;
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $teal;
|
||||
border-color: mix($black, $teal, 20%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
|
||||
<ul class="feature-links">
|
||||
<li v-for="featureLink in this.$page.frontmatter.featureLinks" v-on:click="visit(featureLink.href)" class="feature-link">
|
||||
<div>
|
||||
|
|
@ -12,16 +11,14 @@
|
|||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
|
||||
methods: {
|
||||
visit (slug) {
|
||||
window.open(slug, "_blank");
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
events: [],
|
||||
|
|
@ -81,69 +81,72 @@ export default {
|
|||
lastUpdated: new Date()
|
||||
}
|
||||
},
|
||||
name: 'GithubFeed',
|
||||
|
||||
mounted () {
|
||||
|
||||
this.updateFeed();
|
||||
|
||||
this.updateInterval = setInterval(this.updateFeed, 60*1000);
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateFeed () {
|
||||
const component = this;
|
||||
|
||||
var component = this;
|
||||
|
||||
component.$http.get('https://lbry.tech/github-feed').then(function(response) {
|
||||
component.$http.get("https://lbry.tech/github-feed").then(response => {
|
||||
component.events = response.body;
|
||||
}).catch(error => {
|
||||
console.log("Unable to display GitHub feed:\n", error);
|
||||
});
|
||||
|
||||
component.lastUpdated = new Date();
|
||||
|
||||
},
|
||||
|
||||
refToBranch (ref) {
|
||||
|
||||
return ref.replace('refs/heads/','');
|
||||
|
||||
return ref.replace("refs/heads/", "");
|
||||
},
|
||||
|
||||
formatDate (date) {
|
||||
|
||||
return date.toLocaleString('en-US');
|
||||
|
||||
return date.toLocaleString("en-US");
|
||||
},
|
||||
generateGithubUrl (type, event) {
|
||||
|
||||
switch(type) {
|
||||
case 'actor':
|
||||
return 'https://github.com/' + event.actor.display_login;
|
||||
generateGithubUrl (type, event) {
|
||||
switch (type) {
|
||||
case "actor":
|
||||
return `https://github.com/${event.actor.display_login}`;
|
||||
break;
|
||||
case 'comment':
|
||||
|
||||
case "comment":
|
||||
return event.payload.comment.html_url;
|
||||
break;
|
||||
case 'repo':
|
||||
return 'https://github.com/' + event.repo.name;
|
||||
|
||||
case "repo":
|
||||
return `https://github.com/${event.repo.name}`;
|
||||
break;
|
||||
case 'forkee':
|
||||
return 'https://github.com/' + event.payload.forkee.full_name;
|
||||
|
||||
case "forkee":
|
||||
return `https://github.com/${event.payload.forkee.full_name}`;
|
||||
break;
|
||||
case 'issue':
|
||||
|
||||
case "issue":
|
||||
return event.payload.issue.html_url;
|
||||
break;
|
||||
case 'pull_request':
|
||||
|
||||
case "pull_request":
|
||||
return event.payload.pull_request.html_url;
|
||||
break;
|
||||
case 'release':
|
||||
|
||||
case "release":
|
||||
return event.payload.release.html_url;
|
||||
break;
|
||||
case 'push':
|
||||
return 'https://github.com/' + event.repo.name + '/tree/' + event.payload.ref.replace('refs/heads/','');
|
||||
|
||||
case "push":
|
||||
return `https://github.com/${event.repo.name}/tree/${event.payload.ref.replace("refs/heads/", "")}`;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
name: "GithubFeed"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -23,59 +23,64 @@
|
|||
<Step2 v-if="activeStep == 2"></Step2>
|
||||
<Step3 v-if="activeStep == 3"></Step3>
|
||||
|
||||
<div class="modal" v-model="uploadDialog" v-if="uploadDialog != false">
|
||||
<aside class="modal" v-model="uploadDialog" v-if="uploadDialog !== false">
|
||||
<div class="modal-wrap">
|
||||
<template v-if="confirmed">
|
||||
<h3>Your image has been published!</h3>
|
||||
<p><a v-bind:href="'https://explorer.lbry.io/tx/' + txhash" target="_blank" rel="noopener noreferrer">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>
|
||||
<p>Check out your content on <a v-bind:href="`https://explorer.lbry.io/tx/${txhash}`" target="_blank" rel="noopener noreferrer">the LBRY blockchain explorer</a>.</p>
|
||||
<a href="#" class="__button-black" style="display: inline-block;" v-on:click.prevent="uploadDialog = false">Dismiss this dialog</a>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<h3><div class="loader small"></div> Waiting for confirmation...</h3>
|
||||
<h3><span class="loader tiny" style="display: inline-block;"></span> 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>
|
||||
</aside>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EventBus from "../event-bus";
|
||||
import Vue from "vue";
|
||||
|
||||
import Vue from 'vue'
|
||||
|
||||
import EventBus from '../event-bus';
|
||||
|
||||
export default {
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
uploadDialog: false,
|
||||
txhash: '',
|
||||
activeStep: 1,
|
||||
confirmed: false,
|
||||
activeStep: 1
|
||||
txhash: "",
|
||||
uploadDialog: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
uploadDialog: function() {
|
||||
var component = this;
|
||||
if(this.uploadDialog) {
|
||||
// Simulate confirmation
|
||||
setTimeout(function() {
|
||||
component.confirmed = true;
|
||||
}, 10000)
|
||||
uploadDialog: function () {
|
||||
const component = this;
|
||||
|
||||
if (this.uploadDialog) {
|
||||
setTimeout(() => {
|
||||
component.confirmed = true; // Simulate confirmation
|
||||
}, 10000);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
var component = this;
|
||||
EventBus.$on('HookFileUploaded', function(txhash) {
|
||||
const component = this;
|
||||
|
||||
EventBus.$on("HookFileUploaded", txhash => {
|
||||
component.txhash = txhash;
|
||||
component.uploadDialog = true;
|
||||
});
|
||||
EventBus.$on('HookStepUpdate', function(step) {
|
||||
|
||||
EventBus.$on("HookStepUpdate", step => {
|
||||
component.activeStep = step;
|
||||
});
|
||||
},
|
||||
name: 'Hook'
|
||||
};
|
||||
|
||||
name: "Hook"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -84,6 +89,397 @@ export default {
|
|||
@import "../scss/init/extends";
|
||||
@import "../scss/init/mixins";
|
||||
@import "../scss/partials/animation";
|
||||
@import "../scss/partials/modal";
|
||||
@import "../scss/pages/page";
|
||||
@import "../scss/pages/hook";
|
||||
|
||||
.hook {
|
||||
.loader {
|
||||
animation: spin 2s linear infinite;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-top-color: $teal;
|
||||
|
||||
&:not(.small):not(.tiny) {
|
||||
width: 4rem; height: 4rem;
|
||||
|
||||
border-width: 6px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 2rem; height: 2rem;
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
&.tiny {
|
||||
width: 1rem; height: 1rem;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__navigation {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hook__navigation__step {
|
||||
@media (min-width: 501px) {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 3rem; height: 3rem;
|
||||
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
display: block;
|
||||
|
||||
span {
|
||||
width: 1rem; height: 1rem;
|
||||
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
line-height: 0.9rem;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
span {
|
||||
border-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $teal;
|
||||
|
||||
span {
|
||||
border-color: rgba($teal, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__page {
|
||||
@extend .page__content;
|
||||
}
|
||||
|
||||
.hook__page__hero {
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 1px solid rgba($black, 0.05);
|
||||
|
||||
h1, p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__hero__claim,
|
||||
.hook__page__hero__support {
|
||||
margin-bottom: 3rem; padding-left: 1rem;
|
||||
|
||||
background-color: $white;
|
||||
border: 1px solid rgba($gray, 0.7);
|
||||
font-size: 1rem;
|
||||
|
||||
@media (min-width: 501px) {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
input, a {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: rgba($black, 0.3);
|
||||
}
|
||||
|
||||
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__hero__claim input {
|
||||
width: calc(100% - 10rem);
|
||||
}
|
||||
|
||||
.hook__page__hero__support {
|
||||
input[type=number] {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: calc(100% - 11.5rem);
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__page__content::after {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.hook__page__content__card {
|
||||
margin-bottom: 1rem; padding: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 501px) {
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme {
|
||||
margin-bottom: 2rem;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
|
||||
@media (min-width: 701px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%; height: 100%;
|
||||
|
||||
background-color: rgba($teal, 0.3);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h2.__metadata {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: rgba($black, 0.3);
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05rem;
|
||||
margin-bottom: 0.025rem;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="submit"]),
|
||||
select,
|
||||
textarea {
|
||||
@media (min-width: 901px) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
|
||||
border-bottom: 2px solid;
|
||||
padding-bottom: 0.15rem;
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:not([type="file"]):not([type="submit"]) {
|
||||
&:not(:hover):not(:active) {
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: $teal;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="checkbox"] {
|
||||
width: 1.25rem; height: 1.25rem;
|
||||
|
||||
border: 2px solid;
|
||||
margin-right: 0.5rem;
|
||||
position: relative;
|
||||
top: 0.35rem;
|
||||
|
||||
&::after {
|
||||
width: 100%; height: 100%;
|
||||
|
||||
content: "✓";
|
||||
font-size: 1.5rem;
|
||||
line-height: 1rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:not(:checked)::after {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
textarea {
|
||||
border-bottom: 2px solid;
|
||||
width: 100%;
|
||||
|
||||
&:not(:hover):not(:active) {
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: $teal;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: url("../media/svg/down.svg");
|
||||
background-position: 99% center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme__thumbnail {
|
||||
width: 5rem; height: 5rem;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
margin-bottom: 1rem;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&:not(.selected) {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme__uploader {
|
||||
@extend .__button-black;
|
||||
text-align: center;
|
||||
width: 11rem;
|
||||
|
||||
> div:first-of-type {
|
||||
width: 100%; height: 100%;
|
||||
top: 0; left: 0;
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
input {
|
||||
top: 0; left: 0;
|
||||
bottom: 0; right: 0;
|
||||
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
<template>
|
||||
|
||||
<div class="component--mission-statement">
|
||||
<strong class="component--mission-statement__title">Mission Statement</strong>
|
||||
|
||||
To create a market for accessing and publishing information<sup>1</sup> that is global<sup>2</sup>, decentralized<sup>3</sup>, robust<sup>4</sup>, optimal<sup>5</sup> and complete<sup>6</sup>.
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../scss/init/colors";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
<template>
|
||||
<ul id="sitemap">
|
||||
<li v-for="route in routes">
|
||||
<router-link v-bind:to="route.path" :title="'Visit lbry.tech' + route.path">{{ route.path }}</router-link>
|
||||
<router-link v-bind:to="route.path" :title="`Visit lbry.tech${route.path}`">{{ route.path }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function() {
|
||||
var routes = [];
|
||||
this.$router.options.routes.forEach(function(item) {
|
||||
if(item.path != "/" && item.path != "*") {
|
||||
routes.push(item);
|
||||
}
|
||||
export default {
|
||||
data: function () {
|
||||
const routes = [];
|
||||
|
||||
this.$router.options.routes.forEach(item => {
|
||||
if (item.path !== "/" && item.path !== "*") routes.push(item);
|
||||
});
|
||||
|
||||
return {
|
||||
routes: routes
|
||||
}
|
||||
},
|
||||
name: 'Sitemap'
|
||||
};
|
||||
|
||||
name: "Sitemap"
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<template>
|
||||
<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>
|
||||
<p>Let's start by getting the associated metadata for a claim.</p>
|
||||
|
||||
<div class="hook__page__hero__claim">
|
||||
<span>lbry://</span><input type="text" v-model="address" placeholder=" Claim URI goes here"/>
|
||||
|
|
@ -13,23 +12,22 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div class="xs12" v-if="exampleCode != ''">
|
||||
<pre><code class="bash"><span v-html="highlight('bash',exampleCode)"></span></code></pre>
|
||||
<div class="hook__page__content inner-wrap" v-if="exampleCode !== ''">
|
||||
<pre><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
|
||||
</div>
|
||||
|
||||
<div class="xs12" v-if="isLoading">
|
||||
<div class="hook__page__content inner-wrap" 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><code class="json"><span v-html="highlight('json',jsonData)"></span></code></pre>
|
||||
<a href="#" class="__button-black" v-on:click="goTo(2)" title="Proceed to step two">Go to next step</a>
|
||||
<div class="hook__page__content inner-wrap" v-if="jsonData">
|
||||
<p style="text-align: center;">Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
|
||||
<pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
|
||||
<a href="#" class="__button-black" v-on:click.prevent="goTo(2)" title="Proceed to step two">Go to next step</a>
|
||||
</div>
|
||||
|
||||
<template v-if="!isLoading && !jsonData">
|
||||
<aside class="hook__page__content">
|
||||
<div class="inner-wrap">
|
||||
<div class="hook__page__content inner-wrap">
|
||||
<p style="text-align: center;">…or select a live example from below</p>
|
||||
|
||||
<div class="hook__page__content__card">
|
||||
|
|
@ -68,69 +66,75 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EventBus from '../event-bus';
|
||||
import hljs from 'highlight.js';
|
||||
import EventBus from "../event-bus";
|
||||
import hljs from "highlight.js";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
address: '',
|
||||
jsonData: '',
|
||||
address: "",
|
||||
exampleCode: "",
|
||||
isLoading: false,
|
||||
exampleCode: ''
|
||||
jsonData: ""
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
if(typeof this.$route.query.url != 'undefined') {
|
||||
created () {
|
||||
if (typeof this.$route.query.url !== "undefined") {
|
||||
this.address = this.$route.query.url;
|
||||
this.fetchMetadata();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
mounted () {
|
||||
|
||||
hljs.configure({
|
||||
languages: ['bash', 'json']
|
||||
languages: ["bash", "json"]
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchMetadata () {
|
||||
var component = this;
|
||||
component.jsonData = '';
|
||||
let component = this;
|
||||
component.jsonData = "";
|
||||
component.isLoading = true;
|
||||
component.exampleCode = '# Example code using the daemon\ncurl \'http://localhost:5279\' --data \'{"method":"resolve","params":{"uri":"' + this.address + '"}}\'';
|
||||
this.$http.post('https://lbry.tech/forward', {
|
||||
method: 'resolve',
|
||||
component.exampleCode = `
|
||||
# Example code using the daemon
|
||||
curl "http://localhost:5279" --data "{ "method": "resolve", "params": { "uri": "${this.address}" } }"
|
||||
`;
|
||||
|
||||
this.$http.post("https://lbry.tech/forward", {
|
||||
method: "resolve",
|
||||
uri: this.address
|
||||
}).then(function(response) {
|
||||
}).then(response => {
|
||||
component.isLoading = false;
|
||||
component.jsonData = JSON.stringify(response.body, null, ' ');
|
||||
component.jsonData = JSON.stringify(response.body, null, " ");
|
||||
}).catch(error => {
|
||||
component.isLoading = false;
|
||||
component.jsonData = JSON.stringify(error, null, " ");
|
||||
console.log("Error retrieving metadata for a claim:\n", error);
|
||||
});
|
||||
},
|
||||
|
||||
chooseClaim (address) {
|
||||
var component = this;
|
||||
const component = this;
|
||||
component.address = address;
|
||||
component.fetchMetadata();
|
||||
},
|
||||
|
||||
goTo (page) {
|
||||
EventBus.$emit('HookStepUpdate', page);
|
||||
EventBus.$emit("HookStepUpdate", page);
|
||||
},
|
||||
|
||||
highlight (language, text) {
|
||||
return hljs.highlight(language, text).value;
|
||||
}
|
||||
},
|
||||
name: 'Step1'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
name: "Step1"
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<section class="hook__page" id="step2-page">
|
||||
|
||||
<div v-images-loaded="imagesLoaded">
|
||||
<section class="hook__page" id="step2-page" v-images-loaded="imagesLoaded">
|
||||
<header class="hook__page__hero">
|
||||
<div class="inner-wrap">
|
||||
<h1>Publish your content on the blockchain</h1>
|
||||
|
|
@ -9,21 +7,16 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<aside class="hook__page__content">
|
||||
<div class="inner-wrap">
|
||||
|
||||
<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" alt="" />
|
||||
<canvas id="meme-canvas" width="400" height="300">Sorry, canvas not supported</canvas>
|
||||
|
||||
<img v-for="image in images" v-bind:src="image.src" v-on:click="chooseImage(image.src)" class="thumbnail" v-bind:class="{'selected': backgroundImage == image.src}" v-bind:alt="image.alt">
|
||||
<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>
|
||||
|
||||
<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"/>
|
||||
</div>
|
||||
|
||||
<form class="hook__page__content__meme right" v-on:submit.prevent="submit">
|
||||
|
||||
<h2>Image Text</h2>
|
||||
|
||||
<fieldset>
|
||||
|
|
@ -36,7 +29,9 @@
|
|||
<input name="meme-bottom-line" id="meme-bottom-line" type="text" v-model="bottomLine" placeholder="Bottom line" required/>
|
||||
</fieldset>
|
||||
|
||||
<h2 class="metadata">Metadata</h2>
|
||||
|
||||
|
||||
<h2 class="__metadata">Metadata</h2>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-title">Title</label>
|
||||
|
|
@ -45,21 +40,21 @@
|
|||
|
||||
<fieldset>
|
||||
<label for="meme-description">Description</label>
|
||||
<textarea name="meme-description" id="meme-description" type="text" v-model="description" placeholder="Description" required>{{ description}}</textarea>
|
||||
<textarea name="meme-description" id="meme-description" type="text" v-model="description" placeholder="Description" spellcheck="false" required>{{ description }}</textarea>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-language">Language</label>
|
||||
<select name="meme-language" id="meme-language" v-model="language">
|
||||
<option value="AR">Arabic</option>
|
||||
<option value="ZH">Chinese (Mandarin)</option>
|
||||
<option value="EN">English</option>
|
||||
<option value="FR">French</option>
|
||||
<option value="ES">Spanish</option>
|
||||
<option value="DE">German</option>
|
||||
<option value="IT">Italian</option>
|
||||
<option value="ZH">Chinese (Mandarin)</option>
|
||||
<option value="AR">Arabic</option>
|
||||
<option value="RU">Russian</option>
|
||||
<option value="JP">Japanese</option>
|
||||
<option value="RU">Russian</option>
|
||||
<option value="ES">Spanish</option>
|
||||
<option value="">Not specified</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
|
@ -86,165 +81,169 @@
|
|||
<input type="submit" class="__button-black" value="Submit"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</template>
|
||||
|
||||
<div class="xs12" v-if="exampleCode != ''">
|
||||
<pre><code class="bash"><span v-html="highlight('bash',exampleCode)"></span></code></pre>
|
||||
</div>
|
||||
<pre v-if="exampleCode !== ''" style="clear: both;"><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
|
||||
|
||||
<div class="xs12" v-if="isLoading">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<div class="loader" v-if="isLoading"></div>
|
||||
|
||||
<div class="xs12" v-if="jsonData">
|
||||
<p>Success! Here is the response:</p>
|
||||
<pre><code class="json"><span v-html="highlight('json',jsonData)"></span></code></pre>
|
||||
<div v-if="jsonData">
|
||||
<p style="text-align: center;">Success! Here is the response:</p>
|
||||
<pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import imagesLoaded from 'vue-images-loaded'
|
||||
import hljs from 'highlight.js'
|
||||
import EventBus from "../event-bus";
|
||||
import hljs from "highlight.js";
|
||||
import imagesLoaded from "vue-images-loaded";
|
||||
|
||||
import EventBus from '../event-bus';
|
||||
|
||||
export default {
|
||||
export default {
|
||||
directives: {
|
||||
imagesLoaded
|
||||
},
|
||||
|
||||
data () {
|
||||
var images = [
|
||||
const images = [
|
||||
{
|
||||
src: './carlsagan2.jpg',
|
||||
alt: 'Carl Sagan'
|
||||
src: "./carlsagan2.jpg",
|
||||
alt: "Carl Sagan"
|
||||
},
|
||||
{
|
||||
src: './doge-meme.jpg',
|
||||
alt: 'Doge'
|
||||
src: "./doge-meme.jpg",
|
||||
alt: "Doge"
|
||||
},
|
||||
{
|
||||
src: 'lbry-green.png',
|
||||
alt: 'LBRY Logo With Green Background'
|
||||
src: "lbry-green.png",
|
||||
alt: "LBRY Logo With Green Background"
|
||||
}
|
||||
];
|
||||
|
||||
return {
|
||||
valid: false,
|
||||
isLoading: false,
|
||||
exampleCode: '',
|
||||
jsonData: '',
|
||||
loadingMessage: '',
|
||||
topLine: 'This is an example meme',
|
||||
bottomLine: 'that I made',
|
||||
title: '',
|
||||
description: 'Check out this image I published to LBRY via lbry.tech',
|
||||
language: 'EN',
|
||||
license: 'Public Domain',
|
||||
nsfw: false,
|
||||
images: images,
|
||||
backgroundImage: images[0].src,
|
||||
bottomLine: "that I made",
|
||||
description: "Check out this image I published to LBRY via lbry.tech",
|
||||
exampleCode: "",
|
||||
images: images,
|
||||
isLoading: false,
|
||||
jsonData: "",
|
||||
language: "EN",
|
||||
license: "Public Domain",
|
||||
loadingMessage: "",
|
||||
nsfw: false,
|
||||
textFieldRules: [
|
||||
v => !!v || 'Field is required'
|
||||
v => !!v || "Field is required"
|
||||
],
|
||||
title: "",
|
||||
topLine: "This is an example meme",
|
||||
valid: false,
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
|
||||
hljs.configure({
|
||||
languages: ['bash', 'json']
|
||||
languages: ["bash", "json"]
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateCanvas () {
|
||||
var canvasWidth = 400;
|
||||
var canvasHeight = 300;
|
||||
var canvas = document.getElementById('meme-canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
var img = document.getElementById('base-image');
|
||||
const canvas = document.getElementById("meme-canvas");
|
||||
const canvasWidth = 400;
|
||||
const canvasHeight = 300;
|
||||
const ctx = canvas.getContext("2d");
|
||||
const img = document.getElementById("base-image");
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
|
||||
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
|
||||
|
||||
ctx.fillStyle = "white";
|
||||
ctx.font = "bold 28px Karla";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.lineWidth = 4;
|
||||
ctx.font = 'bold 28px Karla';
|
||||
ctx.strokeStyle = 'black';
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'top';
|
||||
|
||||
ctx.lineJoin = 'round';
|
||||
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "top";
|
||||
ctx.strokeText(this.topLine.toUpperCase(), canvasWidth / 2, 20);
|
||||
ctx.fillText(this.topLine.toUpperCase(), canvasWidth / 2, 20);
|
||||
|
||||
ctx.strokeText(this.bottomLine.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
|
||||
ctx.fillText(this.topLine.toUpperCase(), canvasWidth / 2, 20);
|
||||
ctx.fillText(this.bottomLine.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
|
||||
},
|
||||
|
||||
submit () {
|
||||
var component = this;
|
||||
let component = this;
|
||||
component.isLoading = true;
|
||||
component.exampleCode = '# Example code using the daemon\ncurl \'http://localhost:5279\' --data \'{"method":"publish","params":{"name":"' + component.title + '","bid":0.001, "file_path":"/path/to/your/file.jpg","title":"' + component.title + '", "description":"' + component.description + '","language":"' + component.language + '","license":"' + component.license + '","nsfw":' + component.nsfw + '}}\'';
|
||||
component.$http.post('https://lbry.tech/upload-image', document.getElementById('meme-canvas').toDataURL('image/jpeg', 0.6), {
|
||||
|
||||
component.exampleCode = `
|
||||
# Example code using the daemon
|
||||
curl "http://localhost:5279" --data "{ "method": "publish", "params": { "name": "${component.title}", "bid": 0.001, "file_path": "/path/to/your/file.jpg", "title": "${component.title}", "description": "${component.description}", "language": "${component.language}", "license": "${component.license}", "nsfw": "${component.nsfw}" } }"
|
||||
`;
|
||||
|
||||
component.$http.post("https://lbry.tech/upload-image", document.getElementById("meme-canvas").toDataURL("image/jpeg", 0.6), {
|
||||
headers: {
|
||||
'Content-Type': 'text/plain'
|
||||
"Content-Type": "text/plain"
|
||||
}
|
||||
}).then(function(response) {
|
||||
if(response.status == 'error') {
|
||||
}).then(uploadResponse => {
|
||||
if (uploadResponse.status === "error") {
|
||||
component.isLoading = false;
|
||||
component.exampleCode = '';
|
||||
} else {
|
||||
component.$http.post('https://lbry.tech/forward', {
|
||||
method: 'publish',
|
||||
name: component.title,
|
||||
component.exampleCode = "";
|
||||
return;
|
||||
}
|
||||
|
||||
component.$http.post("https://lbry.tech/forward", {
|
||||
bid: 0.001,
|
||||
file_path: response.filename,
|
||||
title: component.title,
|
||||
description: component.description,
|
||||
file_path: uploadResponse.filename,
|
||||
language: component.language,
|
||||
license: component.license,
|
||||
nsfw: component.nsfw
|
||||
}).then(function(response) {
|
||||
method: "publish",
|
||||
name: component.title,
|
||||
nsfw: component.nsfw,
|
||||
title: component.title
|
||||
}).then(response => {
|
||||
component.isLoading = false;
|
||||
component.jsonData = JSON.stringify(response.body, null, ' ');
|
||||
EventBus.$emit('HookFileUploaded', response.body.txid);
|
||||
component.jsonData = JSON.stringify(response.body, null, " ");
|
||||
EventBus.$emit("HookFileUploaded", response.body.txid);
|
||||
}).catch(error => {
|
||||
component.isLoading = false;
|
||||
component.jsonData = JSON.stringify(error, null, " ");
|
||||
console.log("Forwarding uploaded image failed:\n", error);
|
||||
});
|
||||
}
|
||||
}).catch(uploadError => {
|
||||
component.isLoading = false;
|
||||
component.jsonData = JSON.stringify(uploadError, null, " ");
|
||||
console.log("Image upload failed:\n", uploadError);
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
imagesLoaded (instance) {
|
||||
var component = this;
|
||||
// Make sure the font is loaded
|
||||
document.fonts.load('bold 28px Karla').then(function() {
|
||||
component.updateCanvas();
|
||||
});
|
||||
const component = this;
|
||||
document.fonts.load("bold 28px Karla").then(() => component.updateCanvas()); // Make sure the font is loaded
|
||||
},
|
||||
|
||||
chooseImage (src) {
|
||||
var component = this;
|
||||
const component = this;
|
||||
component.backgroundImage = src;
|
||||
component.updateCanvas();
|
||||
},
|
||||
|
||||
setImage (file) {
|
||||
var component = this;
|
||||
document.getElementById('base-image').src = file;
|
||||
const component = this;
|
||||
document.getElementById("base-image").src = file;
|
||||
|
||||
// allow one second to load the image
|
||||
setTimeout(component.updateCanvas, 1000);
|
||||
},
|
||||
|
||||
highlight (language, text) {
|
||||
return hljs.highlight(language, text).value;
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
},
|
||||
|
||||
watch: {
|
||||
topLine () {
|
||||
this.updateCanvas();
|
||||
|
|
@ -253,6 +252,7 @@ export default {
|
|||
this.updateCanvas();
|
||||
}
|
||||
},
|
||||
name: 'Step2'
|
||||
};
|
||||
|
||||
name: "Step2"
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<section class="hook__page" id="step3-page">
|
||||
|
||||
<header class="hook__page__hero">
|
||||
<div class="inner-wrap">
|
||||
<h1>Support your favorite content creators with LBRY</h1>
|
||||
|
|
@ -9,32 +8,32 @@
|
|||
|
||||
<div class="hook__page__hero__support">
|
||||
<input type="text" v-model="claimId" placeholder="Claim ID goes here"/>
|
||||
<input type="number" v-model="amount" disabled title="You can set this value to any amount of LBC in your wallet, but for demonstration purposes we have hardcoded it to 0.01"><span>LBC</span>
|
||||
<a href="#" v-on:click="send" class="button" title="Execute claim">Execute</a>
|
||||
<input type="number" v-model="amount" disabled title="You can set this value to any amount of LBC in your wallet, but for demonstration purposes we have hardcoded it to 0.01"/><span>LBC</span>
|
||||
<a href="#" v-on:click.prevent="send" class="button" title="Execute claim">Execute</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="xs12" v-if="exampleCode != ''">
|
||||
<pre><code class="bash"><span v-html="highlight('bash',exampleCode)"></span></code></pre>
|
||||
<div class="hook__page__content inner-wrap" v-if="exampleCode !== ''">
|
||||
<pre><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
|
||||
</div>
|
||||
|
||||
<div class="xs12" v-if="isLoading">
|
||||
<div class="hook__page__content inner-wrap" v-if="isLoading">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
<div class="xs12" v-if="jsonData">
|
||||
<p>Success! Here is the response:</p>
|
||||
<pre><code class="json"><span v-html="highlight('json',jsonData)"></span></code></pre>
|
||||
<div class="hook__page__content inner-wrap" v-if="jsonData">
|
||||
<p style="text-align: center;">Success! Here is the response:</p>
|
||||
<pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
|
||||
</div>
|
||||
|
||||
<template v-if="!isLoading && !jsonData">
|
||||
<aside class="hook__page__content">
|
||||
<div class="inner-wrap">
|
||||
<p style="text-align: center;">Click on below claims to support them!</p>
|
||||
<p style="text-align: center;">Click on any of the claims below to support them!</p>
|
||||
|
||||
<div class="hook__page__content__card">
|
||||
<img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
|
||||
<img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')" alt=""/>
|
||||
|
||||
<div v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
|
||||
<h4>It's a Disaster</h4>
|
||||
|
|
@ -43,7 +42,7 @@
|
|||
</div>
|
||||
|
||||
<div class="hook__page__content__card">
|
||||
<img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
|
||||
<img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')" alt=""/>
|
||||
|
||||
<div v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
|
||||
<h4>Unbubbled with Jamie King, Ep1.1 — Bitcoin, Boom or Bust</h4>
|
||||
|
|
@ -52,7 +51,7 @@
|
|||
</div>
|
||||
|
||||
<div class="hook__page__content__card">
|
||||
<img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
|
||||
<img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')" alt=""/>
|
||||
|
||||
<div v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
|
||||
<h4>FORTNITE TOP STREAM MOMENTS — Nickatnyte & GamingwithMolt</h4>
|
||||
|
|
@ -61,7 +60,7 @@
|
|||
</div>
|
||||
|
||||
<div class="hook__page__content__card">
|
||||
<img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
|
||||
<img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')" alt=""/>
|
||||
|
||||
<div v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
|
||||
<h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
|
||||
|
|
@ -71,85 +70,70 @@
|
|||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EventBus from '../event-bus';
|
||||
import hljs from 'highlight.js';
|
||||
import EventBus from "../event-bus";
|
||||
import hljs from "highlight.js";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
claimId: '',
|
||||
amount: 0.01,
|
||||
exampleCode: '',
|
||||
claimId: "",
|
||||
exampleCode: "",
|
||||
isLoading: false,
|
||||
jsonData: ''
|
||||
jsonData: ""
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
|
||||
hljs.configure({
|
||||
languages: ['bash', 'json']
|
||||
languages: ["bash", "json"]
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
send () {
|
||||
var component = this;
|
||||
component.jsonData = '';
|
||||
let component = this;
|
||||
component.jsonData = "";
|
||||
component.isLoading = true;
|
||||
component.exampleCode = '# Example code using the daemon\ncurl \'http://localhost:5279\' --data \'{"method":"wallet_send","params":{"claim_id":"' + this.address + '","amount":' + this.amount + '}}\'';
|
||||
this.$http.post('https://lbry.tech/forward', {
|
||||
method: 'wallet_send',
|
||||
claim_id: this.address,
|
||||
amount: this.amount
|
||||
}).then(function(response) {
|
||||
|
||||
component.exampleCode = `
|
||||
# Example code using the daemon
|
||||
curl "http://localhost:5279" --data "{ "method": "wallet_send", "params": { "claim_id": "${this.address}", "amount": "${this.amount}" } }"
|
||||
`;
|
||||
|
||||
component.$http.post("https://lbry.tech/forward", {
|
||||
amount: component.amount,
|
||||
claim_id: component.address,
|
||||
method: "wallet_send"
|
||||
}).then(response => {
|
||||
component.isLoading = false;
|
||||
component.jsonData = JSON.stringify(response.body, null, ' ');
|
||||
component.jsonData = JSON.stringify(response.body, null, " ");
|
||||
}).catch(error => {
|
||||
component.isLoading = false;
|
||||
component.jsonData = JSON.stringify(error, null, " ");
|
||||
console.log("Sending of LBC failed:\n", error);
|
||||
});
|
||||
},
|
||||
|
||||
chooseClaim (address) {
|
||||
var component = this;
|
||||
const component = this;
|
||||
component.address = address;
|
||||
component.send();
|
||||
},
|
||||
|
||||
goTo (page) {
|
||||
EventBus.$emit('HookStepUpdate', page);
|
||||
EventBus.$emit("HookStepUpdate", page);
|
||||
},
|
||||
|
||||
highlight (language, text) {
|
||||
return hljs.highlight(language, text).value;
|
||||
}
|
||||
},
|
||||
name: 'Step3'
|
||||
};
|
||||
|
||||
name: "Step3"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import '../scss/variables';
|
||||
|
||||
#step3-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;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ module.exports = {
|
|||
],
|
||||
themeConfig: {
|
||||
repo: 'lbryio/lbry.tech',
|
||||
docsBranch: 'master',
|
||||
docsBranch: 'master/content',
|
||||
editLinkText: 'Edit this page on Github'
|
||||
},
|
||||
ga: 'UA-60403362-1',
|
||||
|
|
|
|||
3
content/.vuepress/media/svg/down.svg
Normal file
3
content/.vuepress/media/svg/down.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" fill="#222">
|
||||
<path d="M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 389 B |
|
|
@ -1,362 +0,0 @@
|
|||
.hook {
|
||||
.loader {
|
||||
animation: spin 2s linear infinite;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-top-color: $teal;
|
||||
|
||||
&:not(.small) {
|
||||
width: 4rem; height: 4rem;
|
||||
|
||||
border-width: 6px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 2rem; height: 2rem;
|
||||
border-width: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__navigation {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hook__navigation__step {
|
||||
@media (min-width: 501px) {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 3rem; height: 3rem;
|
||||
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
display: block;
|
||||
|
||||
span {
|
||||
width: 1rem; height: 1rem;
|
||||
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
line-height: 0.9rem;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
span {
|
||||
border-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $teal;
|
||||
|
||||
span {
|
||||
border-color: rgba($teal, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__page {
|
||||
@extend .page__content;
|
||||
}
|
||||
|
||||
.hook__page__hero {
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 1px solid rgba($black, 0.05);
|
||||
|
||||
h1, p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__hero__claim,
|
||||
.hook__page__hero__support {
|
||||
margin-bottom: 3rem; padding-left: 1rem;
|
||||
|
||||
background-color: $white;
|
||||
border: 1px solid rgba($gray, 0.7);
|
||||
font-size: 1rem;
|
||||
|
||||
@media (min-width: 501px) {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
input, a {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: rgba($black, 0.3);
|
||||
}
|
||||
|
||||
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__hero__claim input {
|
||||
width: calc(100% - 10rem);
|
||||
}
|
||||
|
||||
.hook__page__hero__support {
|
||||
input[type=number] {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: calc(100% - 11.5rem);
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__page__content::after {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.hook__page__content__card {
|
||||
margin-bottom: 1rem; padding: 1rem;
|
||||
|
||||
img {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 501px) {
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
|
||||
@media (min-width: 701px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.left {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
#base-image {
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
object-fit: cover;
|
||||
margin: 0 1rem 1rem 0;
|
||||
border: 4px solid white;
|
||||
border-radius: 1px;
|
||||
&.selected {
|
||||
border-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%; height: 100%;
|
||||
background-color: rgba($teal, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
&.metadata {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: rgba($black, 0.3);
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05rem;
|
||||
margin-bottom: 0.025rem;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
@media (min-width: 901px) {
|
||||
&:not([type="checkbox"]):not([type="submit"]) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
&:not([type="checkbox"]):not([type="submit"]) {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
|
||||
border-bottom: 2px solid;
|
||||
padding-bottom: 0.15rem;
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:not([type="file"]):not([type="submit"]) {
|
||||
&:not(:hover):not(:active) {
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: $teal;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="checkbox"] {
|
||||
width: 1.25rem; height: 1.25rem;
|
||||
|
||||
border: 2px solid;
|
||||
margin-right: 0.5rem;
|
||||
position: relative;
|
||||
top: 0.35rem;
|
||||
|
||||
&::after {
|
||||
width: 100%; height: 100%;
|
||||
|
||||
content: "✓";
|
||||
font-size: 1.5rem;
|
||||
line-height: 1rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:not(:checked)::after {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
#meme-top-line,
|
||||
#meme-bottom-line {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme__uploader {
|
||||
@extend .__button-black;
|
||||
text-align: center;
|
||||
width: 11rem;
|
||||
|
||||
> div:first-of-type {
|
||||
width: 100%; height: 100%;
|
||||
top: 0; left: 0;
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
input {
|
||||
top: 0; left: 0;
|
||||
bottom: 0; right: 0;
|
||||
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
a:not(.button):not(.feature-link__title) {
|
||||
a:not(.button):not(.__button-black):not(.feature-link__title):not(.newsletter-standalone__submit) {
|
||||
color: $teal;
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
51
content/.vuepress/scss/partials/_modal.scss
Normal file
51
content/.vuepress/scss/partials/_modal.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
.modal {
|
||||
@include center;
|
||||
top: 0; left: 0;
|
||||
bottom: 0; right: 0;
|
||||
|
||||
background-color: rgba($black, 0.5);
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
|
||||
h3 {
|
||||
@media (min-width: 901px) {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@media (min-width: 901px) {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-wrap {
|
||||
background-color: $white;
|
||||
padding: 2rem 1.5rem;
|
||||
|
||||
@media (min-width: 501px) {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue