mirror of
https://github.com/LBRYFoundation/lbry.com.git
synced 2025-08-23 17:47:26 +00:00
Styling fixes for email subscription page
This commit is contained in:
parent
b053113cc8
commit
5b8ca112d0
3 changed files with 90 additions and 74 deletions
8
lib/thirdparty/LBRY.class.php
vendored
8
lib/thirdparty/LBRY.class.php
vendored
|
@ -5,6 +5,10 @@ class LBRY
|
||||||
{
|
{
|
||||||
public static function getApiUrl($endpoint)
|
public static function getApiUrl($endpoint)
|
||||||
{
|
{
|
||||||
|
if (!strlen(Config::get(Config::LBRY_API_SERVER)) > 0) {
|
||||||
|
throw new Exception("API server URL is missing from `/data/config.php`");
|
||||||
|
}
|
||||||
|
|
||||||
return Config::get(Config::LBRY_API_SERVER) . $endpoint;
|
return Config::get(Config::LBRY_API_SERVER) . $endpoint;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -27,7 +31,7 @@ class LBRY
|
||||||
|
|
||||||
public static function editEmailSettings($token, $email, $isPrimary =null, $isEnabled = null)
|
public static function editEmailSettings($token, $email, $isPrimary =null, $isEnabled = null)
|
||||||
{
|
{
|
||||||
return Curl::post(static::getApiUrl('/user/email/edit'),['auth_token' => $token],['email' => $email],['is_primary' => $isPrimary],['is_enabled' => $isEnabled]);
|
return Curl::post(static::getApiUrl('/user/email/edit'), ['auth_token' => $token], ['email' => $email], ['is_primary' => $isPrimary], ['is_enabled' => $isEnabled]);
|
||||||
}
|
}
|
||||||
|
|
||||||
public static function emailStatus($token)
|
public static function emailStatus($token)
|
||||||
|
@ -38,7 +42,7 @@ class LBRY
|
||||||
|
|
||||||
public static function applyTags($type, $token, $tags)
|
public static function applyTags($type, $token, $tags)
|
||||||
{
|
{
|
||||||
return Curl::post(static::getApiUrl('/user/tag/edit'),['auth_token' => $token],[$type => $tags]);
|
return Curl::post(static::getApiUrl('/user/tag/edit'), ['auth_token' => $token], [$type => $tags]);
|
||||||
}
|
}
|
||||||
|
|
||||||
public static function unsubscribe($email)
|
public static function unsubscribe($email)
|
||||||
|
|
|
@ -11,8 +11,44 @@
|
||||||
<div class="notice notice-error spacer1"><?php echo $error ?></div>
|
<div class="notice notice-error spacer1"><?php echo $error ?></div>
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
<div class="notice notice-success hide">Your email preferences have been updated.</div>
|
<div class="notice notice-success hide">Your email preferences have been updated.</div>
|
||||||
|
|
||||||
|
<section class="tag-section spacer1">
|
||||||
|
<h4>Fine-tune your newsletter</h4>
|
||||||
|
<div class="notice notice-error hide"></div>
|
||||||
|
|
||||||
|
<div class="row-fluid spacer1">
|
||||||
|
<?php $tagIndex = 0 ?>
|
||||||
|
<?php foreach($tags as $tag => $enabled): ?>
|
||||||
|
<?php $tagId = 'tag_' . (++$tagIndex) ?>
|
||||||
|
<div class="span6">
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span10">
|
||||||
|
<label for="<?php echo $tagId ?>"><?php echo isset($tagMetadata[$tag]['label']) ? $tagMetadata[$tag]['label'] : $tag ?></label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="span2">
|
||||||
|
<span class="slider-checkbox">
|
||||||
|
<input id="<?php echo $tagId ?>" type="checkbox" <?php echo $enabled ? 'checked' : '' ?> value="<?php echo urlencode($tag) ?>" />
|
||||||
|
<label class="label"></label>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php if (isset($tagMetadata[$tag]['description'])): ?>
|
||||||
|
<div class="meta">
|
||||||
|
<?php echo $tagMetadata[$tag]['description'] ?>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
</div>
|
||||||
|
<?php if ($tagIndex % 2 == 0): ?>
|
||||||
|
</div><div class="row-fluid spacer1">
|
||||||
|
<?php endif ?>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="email-section">
|
<section class="email-section">
|
||||||
<h4>Where do you want to receive email?</h4>
|
<h4>Quick Unsubscribe</h4>
|
||||||
<div class="notice notice-error hide spacer1"></div>
|
<div class="notice notice-error hide spacer1"></div>
|
||||||
<?php $emailIndex = 0 ?>
|
<?php $emailIndex = 0 ?>
|
||||||
<table>
|
<table>
|
||||||
|
@ -35,39 +71,11 @@
|
||||||
</tr>
|
</tr>
|
||||||
<?php endforeach ?>
|
<?php endforeach ?>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
<div class="meta">If you toggle "off" and hit "Save", you will be removed from all of our mailing lists.</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="tag-section spacer1">
|
|
||||||
<h4>What do you want to receive email about?</h4>
|
|
||||||
<div class="notice notice-error hide"></div>
|
|
||||||
<div class="row-fluid spacer1">
|
|
||||||
<?php $tagIndex = 0 ?>
|
|
||||||
<?php foreach($tags as $tag => $enabled): ?>
|
|
||||||
<?php $tagId = 'tag_' . (++$tagIndex) ?>
|
|
||||||
<div class="span6">
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span10">
|
|
||||||
<label for="<?php echo $tagId ?>"><?php echo isset($tagMetadata[$tag]['label']) ? $tagMetadata[$tag]['label'] : $tag ?></label>
|
|
||||||
</div>
|
|
||||||
<div class="span2">
|
|
||||||
<span class="slider-checkbox">
|
|
||||||
<input id="<?php echo $tagId ?>" type="checkbox" <?php echo $enabled ? 'checked' : '' ?> value="<?php echo urlencode($tag) ?>" />
|
|
||||||
<label class="label"></label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<?php if (isset($tagMetadata[$tag]['description'])): ?>
|
|
||||||
<div class="meta">
|
|
||||||
<?php echo $tagMetadata[$tag]['description'] ?>
|
|
||||||
</div>
|
|
||||||
<?php endif ?>
|
|
||||||
</div>
|
|
||||||
<?php if ($tagIndex % 2 == 0): ?>
|
|
||||||
</div><div class="row-fluid spacer1">
|
|
||||||
<?php endif ?>
|
|
||||||
<?php endforeach ?>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<div>
|
<div>
|
||||||
<input type="submit" value="Save" class="btn-primary">
|
<input type="submit" value="Save" class="btn-primary">
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -3,69 +3,73 @@ $unchecked-color: #888;
|
||||||
|
|
||||||
.slider-checkbox {
|
.slider-checkbox {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
margin: 0px;
|
width: 40px; height: 20px;
|
||||||
margin-top: 1px;
|
top: 0; left: 0;
|
||||||
|
|
||||||
|
background-color: red;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: 0;
|
margin: 1px 0 0 0;
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
||||||
filter: alpha(opacity=0);
|
|
||||||
-moz-opacity: 0;
|
|
||||||
-khtml-opacity: 0;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
&:not(:checked) + .label {
|
||||||
background: red;
|
&::before {
|
||||||
width: 40px;
|
background-color: $unchecked-color;
|
||||||
height: 20px;
|
content: "\f00d";
|
||||||
|
padding-left: 18px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
left: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:checked + .label {
|
&:checked + .label {
|
||||||
&:before {
|
&::before {
|
||||||
background-color: $checked-color;
|
background-color: $checked-color;
|
||||||
content: "\f00c";
|
content: "\f00c";
|
||||||
padding-left: 6px;
|
padding-right: 17px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
&:after {
|
|
||||||
|
&::after {
|
||||||
left: 21px;
|
left: 21px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
padding-left: 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 46px;
|
|
||||||
&:before, &:after {
|
&::before,
|
||||||
|
&::after {
|
||||||
|
border-radius: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
-webkit-border-radius: 0px;
|
|
||||||
-moz-border-radius: 0px;
|
|
||||||
border-radius: 0px;
|
|
||||||
transition: background-color 0.3s, left 0.3s;
|
transition: background-color 0.3s, left 0.3s;
|
||||||
}
|
}
|
||||||
&:before {
|
|
||||||
content: "\f00d";
|
&::before {
|
||||||
color: #fff;
|
width: 40px; height: 20px;
|
||||||
|
top: 0; left: 0;
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
color: white;
|
||||||
font-family: 'FontAwesome', sans-serif;
|
font-family: 'FontAwesome', sans-serif;
|
||||||
padding-left: 23px;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
background-color: $unchecked-color;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
height: 20px;
|
|
||||||
width: 40px;
|
|
||||||
-webkit-border-radius: 0px;
|
|
||||||
-moz-border-radius: 0px;
|
|
||||||
border-radius: 0px;
|
|
||||||
}
|
}
|
||||||
&:after {
|
|
||||||
|
&::after {
|
||||||
|
width: 18px; height: 18px;
|
||||||
|
|
||||||
|
background-color: white;
|
||||||
content: "";
|
content: "";
|
||||||
letter-spacing: 20px;
|
|
||||||
background: #fff;
|
|
||||||
left: 1px;
|
|
||||||
top: 1px;
|
top: 1px;
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue