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

design work

Browse source
This commit is contained in:
nicolaszezuka 2018-03-19 18:33:07 +01:00
parent daa89f3417
commit 9e48e25fa9
3 changed files with 140 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -34,7 +34,6 @@ Response::setMetaDescription("Put your content on the blockchain, experience tru
</div>
<div class="title">
<div class="overflow"><h1>Content Freedom.</h1></div>
<br/>
<p>Put your content on the blockchain and earn rewards.</p>
<div class="button">Claim Your LBRY Channel</div>
</div>

93
view/template/acquisition/youtube_status.php
View file

@ -11,51 +11,58 @@
<section class="section channel pad-top">
<div class="inner">
<div class="content">
<?php if (true): ?>
<div id="email-google-plus-error" class="error">Your email address is set as xxx@plusgoogle.com.<br>If this is not your email address, please <span>change it below</span>.</div>
<?php endif ?>
<div class="zigzag"></div>
<h1><?php echo $isSyncAgreed && $isRewardClaimed ? "You're all set!" : "Almost done!" ?></h1>
<h3>The Steps</h3>
<ul>
<li>
<h4>✓ Confirm your channel</h4>
</li>
<li>
<h4><?php echo $isSyncAgreed ? "✓" : "☐" ?> Agree to sync</h4>
</li>
<li>
<h4><?php echo $isRewardClaimed ? "✓" : "☐" ?> Claim your credits</h4>
To get your credits, <a href="/get">download the app</a> and <a href="/faq/youtube">follow these instructions</a>.
</li>
</ul>
<?php if (true): ?>
<div id="email-google-plus-error" class="error">Your email address is set as xxx@plusgoogle.com. If this is not your email address, please change it below.</div>
<?php endif ?>
<div>
<div class="block">
<p>Your Sync Status<br>
<span><?php switch ($statusData['status']) {
case "pending": echo __("Agree to Terms Below"); break;
case "queued": echo __("Queued"); break;
case "syncing": echo __("Sync in Progress!"); break;
case "synced": echo __("Content is Live!"); break;
} ?></span>
</p>
</div>
<div class="block">
<p>Subscribers<br>
<span><?php echo $statusData['subscribers']?></span>
</p>
</div>
<div class="block">
<p>Videos<br>
<span><?php echo $statusData['videos']?></span>
</p>
</div>
<div class="block">
<p>Expected Rewards<br>
<span><?php echo $statusData['expected_reward']?></span>
</p>
</div>
<div class="confirmation-steps">
<ul>
<li>
<span>✓</span>
<p>Confirm your channel</p>
</li>
<li class="disabled">
<span><?php echo $isSyncAgreed ? "✓" : "☐" ?></span>
<p>Agree to sync</p>
</li>
<li class="disabled">
<span><?php echo $isRewardClaimed ? "✓" : "☐" ?></span>
<p>Claim your credits</p>
<p>To get your credits, <a href="/get">download the app</a> and <a href="/faq/youtube">follow these instructions.</a></p>
</li>
</ul>
</div>
<div class="blocks">
<div class="block">
<p>Your Sync Status<br>
<span>
<?php switch ($statusData['status']) {
case "pending": echo __("Agree to Terms Below"); break;
case "queued": echo __("Queued"); break;
case "syncing": echo __("Sync in Progress!"); break;
case "synced": echo __("Content is Live!"); break;
} ?>
</span>
</p>
</div>
<div class="block">
<p>Subscribers<br>
<span><?php echo $statusData['subscribers']?></span>
</p>
</div>
<div class="block">
<p>Videos<br>
<span><?php echo $statusData['videos']?></span>
</p>
</div>
<div class="block">
<p>Expected Rewards<br>
<span><?php echo $statusData['expected_reward']?></span>
</p>
</div>
</div>
</div>
</div>
</section>

91
web/css/yt2.css
View file

@ -42,6 +42,7 @@ html {
padding: 0;
margin: 0;
font: normal 400 16px/1.5 'metropolis-bold';
color: #2F3C5C;
}
img {
display: block;
@ -222,7 +223,7 @@ header .right a.github {
height: 80px;
}
.hero .title .overflow + .overflow {
margin: -10px 0 20px 0;
margin: -10px 0 0 0;
}
.hero .title .overflow h1 {
position: absolute;
@ -233,6 +234,7 @@ header .right a.github {
float: left;
width: 100%;
font: normal 400 21px/1.2 'metropolis-semibold';
margin-top: 20px;
color: #FFF;
}
.hero .title .button {
@ -806,6 +808,67 @@ header .right a.github {
background: url(../img/youtube/lbc@2x.png) 50% 50% no-repeat;
background-size: 13px;
}
.channel .error {
float: left;
width: 100%;
font: normal 400 18px/1.5 'metropolis-semibold';
color: #AAA;
margin: 0 0 40px 0;
}
.channel .error span {
color: #45B0AF;
border-bottom: 1px solid #45B0AF;
cursor: pointer;
}
.channel .confirmation-steps {
float: left;
width: 100%;
}
.channel .confirmation-steps ul {
float: left;
width: 100%;
list-style: none;
padding: 0;
}
.channel .confirmation-steps ul li {
position: relative;
float: left;
width: 33%;
}
.channel .confirmation-steps ul li span {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
background: #40C0A9;
border-radius: 50%;
font: normal 400 18px/48px sans-serif;
text-align: center;
color: #FFF;
}
.channel .confirmation-steps ul li.disabled span {
background: #CCC;
color: #FFF;
}
.channel .confirmation-steps ul li p {
float: left;
width: 100%;
padding: 0 0 0 60px;
line-height: 48px;
box-sizing: border-box;
}
.channel .confirmation-steps ul li.disabled p {
color: #CCC;
}
.channel .confirmation-steps ul li p + p {
font: normal 400 13px/20px 'metropolis-semibold';
color: #2F3C5C;
margin-top: 0;
}
.channel .confirmation-steps ul li a {
color: #45B0AF;
}
.settings form {
float: left;
width: 100%;
@ -854,6 +917,9 @@ header .right a.github {
box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
transition: box-shadow 0.3s;
}
.settings a {
color: #45B0AF;
}
.settings button:hover {
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
@ -867,6 +933,12 @@ header .right a.github {
color: #125548;
}
/* ---------------------------
--> RESPONSIVE
--------------------------- */
@ -1182,6 +1254,12 @@ header .right a.github {
border-radius: 20px;
}
}
@media only screen and (min-device-width : 300px) and (max-device-width : 767px) and (orientation : landscape) {
.channel .confirmation-steps ul li {
width: 100%;
margin-top: 20px;
}
}
@media only screen and (min-device-width : 300px) and (max-device-width : 767px) and (orientation : portrait) {
header {
padding: 0 10%;
@ -1349,4 +1427,15 @@ header .right a.github {
padding: 0;
text-align: center;
}
.channel .confirmation-steps ul li {
width: 100%;
margin-top: 20px;
}
.channel .block:not(:first-child) {
width: 100%;
}
.channel .error {
font-size: 14px;
text-align: center;
}
}