Styling fixes for email subscription page

This commit is contained in:
ポール ウェッブ 2018-09-21 09:57:16 -05:00
parent b053113cc8
commit 5b8ca112d0
3 changed files with 90 additions and 74 deletions

View file

@ -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)

View file

@ -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>

View file

@ -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;
} }
} }
} }