LBRYFoundation/lbry.com
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry.com.git synced 2025-08-23 17:47:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Combined boxes and changed some things

Browse source
This commit is contained in:
ポール ウェッブ 2019-04-05 17:05:25 -05:00
parent 5590a31e15
commit a341a776c1
3 changed files with 49 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
view/template/acquisition/youtube.php
View file

@ -37,7 +37,7 @@
<div class="inner-wrap inner-wrap--center-left">
<h1 class="weight-light">LBRY &times; YouTube Sync</h1>
<h2 class="weight-light">Get your YouTube videos in front of the LBRY audience</h2>
<button class="button button--inverse" id="scroll-to-claim" type="button">Claim your channel now</button>
<button class="button button--inverse" data-id="scroll-to-claim" type="button">Claim your channel now</button>
</div>
</section>
@ -50,7 +50,7 @@
<h2>Connect with your fans while earning money and rewards</h2>
<form id="youtube_claim" method="post" action="/youtube/token">
<div hidden id="sync-status" class="sync-status"></div>
<p hidden id="sync-status" class="sync-status"></p>
<input-submit>
<label class="symbol-prefix">@</label>
@ -68,6 +68,16 @@
<div hidden id="lbry_error" class="error">LBRY channel name is either not valid or your input is blank</div>
</input-submit>
<br/>
<checkbox-element>
<input id="immediate-sync" name="immediate_sync" type="checkbox" value="true"/>
<label for="immediate-sync">I want to sync my content to the LBRY network and agree to <a href="/faq/youtube-terms" target="_blank">these terms</a></label>
<checkbox-toggle/>
</checkbox-element>
<input type="text" hidden name="type" value="sync"/>
</form>
<small class="meta">
@ -206,19 +216,11 @@
<h3>Sync &amp; Earn</h3>
<p>LBRY offers a single-click sync process for existing YouTubers.</p>
<form id="sync" method="post" action="/youtube/token">
<checkbox-element>
<input id="immediate-sync" name="immediate_sync" type="checkbox" value="true"/>
<label for="immediate-sync">I want to sync my content to the LBRY network and agree to <a href="/faq/youtube-terms" target="_blank">these terms</a></label>
<checkbox-toggle/>
</checkbox-element>
<br/>
<input type="text" hidden name="type" value="sync"/>
<div>
<input type="submit" value="Sync Now"/>
</div>
</form>
<div>
<button class="button button--inverse" data-id="scroll-to-claim" type="button">Sync now</button>
</div>
</div>
</section>

20
web/js/yt2/app.js
View file

@ -250,13 +250,17 @@ new App();
document.getElementById("scroll-to-claim").onclick = () => {
const element = document.getElementById("claim-section");
const elementOffset = element.offsetTop - 2;
const youtubeCtas = document.querySelectorAll("[data-id='scroll-to-claim']");
window.scroll({ top: elementOffset, behavior: "smooth" });
youtubeCtas.forEach(cta => {
cta.onclick = () => {
const element = document.getElementById("claim-section");
const elementOffset = element.offsetTop - 2;
setTimeout(() => { // give the scroll time to finish before focusing
document.getElementById("lbry_channel_name").focus();
}, 300);
};
window.scroll({ top: elementOffset, behavior: "smooth" });
setTimeout(() => { // give the scroll time to finish before focusing
document.getElementById("lbry_channel_name").focus();
}, 300);
};
});

27
web/scss/pages/_youtube.scss
View file

@ -66,13 +66,28 @@ $lbry-yt-blue: mix($lbry-blue-5, $lbry-black, 50%);
.error-block {
border: 1px solid var(--lbry-red-5);
background-color: var(--lbry-red-4);
color: var(--lbry-white);
.error-block,
.sync-status {
margin: 0 auto 0.5rem; padding: 0.5rem 0.75rem;
border-style: solid;
border-width: 1px;
font-size: 0.8rem;
margin-bottom: 0.5rem;
padding: 0.5rem 0.75rem;
@media (min-width: 951px) {
max-width: 80%;
}
}
.error-block {
background-color: var(--lbry-red-4);
border-color: var(--lbry-red-5);
color: var(--lbry-white);
}
.sync-status {
background-color: rgba($lbry-black, 0.05);
border-color: var(--lbry-gray-3);
}
.hero--youtube {