maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update styling of user subscription liquid tag (#9003) [deploy]

Browse source 
* Update user subscription user tag styling

* Update notice styling

* Refactor toggle visibility

* Update profile image styling

* Refactor JS & CSS updates

* Show  state in Preview of liquid tag
This commit is contained in:
Lisa Sy 2020-07-01 07:35:42 -07:00 • committed by GitHub
parent b44c0f5c0e
commit 997d5c1b88
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 141 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
app/assets/stylesheets/ltags/UserSubscriptionTag.scss
View file

@ -1,85 +1,76 @@
@import 'config/import';
.ltag__user-subscription-tag {
.ltag__user-subscription-tag__container {
&__container {
@include generate-box(
$level: 1,
$bg: var(--card-bg),
$border: var(--card-color),
$color: var(--card-color)
);
box-sizing: border-box;
display: flex;
justify-content: center;
border: 2px solid black;
box-shadow: 4px 4px 0 black;
}
padding: var(--su-4);
#profile-images {
text-align: center;
img {
border-radius: 50%;
@media screen and (min-width: $breakpoint-m) {
padding: var(--su-6);
}
}
.ltag__user-subscription-tag__subscriber-profile-image {
display: none;
&__signed-in {
color: var(--base-70);
}
.ltag__user-subscription-tag__content {
margin: 1rem auto;
&__profile-images {
&.signed-in {
margin: 0 auto var(--su-4);
position: relative;
height: 80px;
width: 80px;
.ltag__user-subscription-tag__author-profile-image,
.ltag__user-subscription-tag__subscriber-profile-image {
display: block;
}
}
&.signed-out {
height: auto;
width: auto;
text-align: center;
margin: 0 auto;
.ltag__user-subscription-tag__author-profile-image {
margin: 0 auto var(--su-4);
}
.ltag__user-subscription-tag__subscriber-profile-image {
display: none;
}
}
img {
border-radius: 100%;
}
}
.ltag__user-subscription-tag__cta-text {
text-align: center;
}
.ltag__user-subscription-tag__signed-out {
text-align: center;
}
.ltag__user-subscription-tag__response {
display: none;
}
#sign-in-btn {
width: max-content;
}
.ltag__user-subscription-tag__signed-in {
text-align: center;
display: none;
}
#logged-in-text,
#apple-auth-message {
text-align: center;
}
.ltag__user-subscription-tag__subscriber-email {
font-weight: bold;
}
#user-subscription-confirmation-modal {
display: none;
}
#subscriber-apple-auth {
display: none;
}
.crayons-modal__overlay {
position: fixed;
z-index: 400;
}
.ltag__user-subscriptino-tag__confirmation-buttons {
text-align: center;
}
#sign-in-btn,
#subscribe-btn {
margin: 0 auto;
display: block;
}
#confirmation-btn,
#cancel-btn {
width: max-content;
display: inline-block;
margin-right: 8px;
margin-bottom: 1rem;
&__subscriber-profile-image {
position: absolute;
bottom: 0;
right: 0;
box-shadow: 0 0 0 4px var(--body-color-inverted);
}
}
// modal styles overwrite crayons component WIP
#user-subscription-confirmation-modal {
.crayons-modal__box__header {
padding: var(--su-2) var(--su-4);
}
.crayons-modal__box__body {
padding: var(--su-6);
}
}

51
app/liquid_tags/user_subscription_tag.rb
View file

@ -13,46 +13,62 @@ class UserSubscriptionTag < LiquidTagBase
// Hiding/showing elements
// ***************************************
const subscriptionSignedIn = document.getElementById('subscription-signed-in');
const subscriptionSignedOut = document.getElementById('subscription-signed-out');
const responseMessage = document.getElementById('response-message');
const subscriberAppleAuth = document.getElementById('subscriber-apple-auth');
const confirmationModal = document.getElementById('user-subscription-confirmation-modal');
const profileImageContainer = document.getElementById('profile-images');
const subscriberImageContainer = document.querySelector('.ltag__user-subscription-tag__subscriber-profile-image');
function clearSubscriptionArea() {
document.getElementById('subscription-signed-in').style.display = 'none';
document.getElementById('subscription-signed-out').style.display = 'none';
document.getElementById('response-message').style.display = 'none';
document.getElementById('subscriber-apple-auth').style.display = 'none';
subscriptionSignedIn.classList.add("hidden");
subscriptionSignedOut.classList.add("hidden");
responseMessage.classList.add("hidden");
subscriberAppleAuth.classList.add("hidden");
hideConfirmationModal();
}
function showSignedIn() {
clearSubscriptionArea();
document.getElementById('subscription-signed-in').style.display = 'block';
subscriptionSignedIn.classList.remove("hidden");
profileImageContainer.classList.remove("signed-out");
}
function showSignedOut() {
clearSubscriptionArea();
subscriptionSignedOut.classList.remove("hidden");
}
function showResponseMessage(noticeType, msg) {
clearSubscriptionArea();
const responseMessage = document.getElementById('response-message')
responseMessage.style.display = 'block';
responseMessage.classList.remove("hidden");
responseMessage.classList.add(`crayons-notice--${noticeType}`);
responseMessage.textContent = msg;
}
function showAppleAuthMessage() {
clearSubscriptionArea();
document.getElementById('subscriber-apple-auth').style.display = 'block';
subscriberAppleAuth.classList.remove("hidden");
}
function showSubscribed() {
updateSubscriberData();
const authorUsername = document.getElementById('user-subscription-tag').dataset.authorUsername;
const alreadySubscribedMsg = `You are already subscribed!`;
const alreadySubscribedMsg = `You are already subscribed.`;
showResponseMessage('success', alreadySubscribedMsg);
}
function showConfirmationModal() {
document.getElementById('user-subscription-confirmation-modal').style.display = 'block';
confirmationModal.classList.remove("hidden");
}
function hideConfirmationModal() {
document.getElementById('user-subscription-confirmation-modal').style.display = 'none';
confirmationModal.classList.add("hidden");
}
// Updating DOM elements
@ -80,13 +96,6 @@ class UserSubscriptionTag < LiquidTagBase
profileImages.forEach(function(profileImage) {
profileImage.src = subscriber.profile_image_90;
profileImage.alt = `${subscriber.username} profile image`;
profileImage.style.display = 'block';
});
const profileImageWrappers = document.querySelectorAll(`span${identifier}`);
profileImageWrappers.forEach(function(profileImageWrapper) {
profileImageWrapper.style.display = 'inline-block';
});
}
@ -209,13 +218,19 @@ class UserSubscriptionTag < LiquidTagBase
if (isUserSignedIn()) {
showSignedIn();
addConfirmationModalClickHandlers();
profileImageContainer.classList.remove("signed-out");
profileImageContainer.classList.add("signed-in");
// We need access to some DOM elements (i.e. csrf token, article id, userData, etc.)
document.addEventListener('DOMContentLoaded', function() {
checkIfSubscribed();
});
} else {
showSignedOut();
addSignInClickHandler();
profileImageContainer.classList.remove("signed-in");
profileImageContainer.classList.add("signed-out");
subscriberImageContainer.classList.add("hidden");
}
JAVASCRIPT

66
app/views/liquids/_user_subscription.html.erb
View file

@ -1,22 +1,38 @@
<div class="ltag__user-subscription-tag" id="user-subscription-tag" data-author-username=<%= author_username %>>
<div class="ltag__user-subscription-tag__container">
<div class="ltag__user-subscription-tag__content" id="content">
<div class="ltag__user-subscription__profile-images" id="profile-images">
<span class="crayons-avatar crayons-avatar--l mr-2 ltag__user-subscription-tag__author-profile-image">
<div class="ltag__user-subscription-tag__content w-100" id="content">
<div class="ltag__user-subscription-tag__profile-images signed-out" id="profile-images">
<span class="crayons-avatar crayons-avatar--xl ltag__user-subscription-tag__author-profile-image">
<img class="crayons-avatar__image ltag__user-subscription-tag__author-profile-image" src=<%= author_profile_image %> <%= "#{author_username} profile image" %>>
</span>
<span class="crayons-avatar crayons-avatar--l mr-2 ltag__user-subscription-tag__subscriber-profile-image">
<span class="crayons-avatar crayons-avatar--xl ltag__user-subscription-tag__subscriber-profile-image">
<img class="crayons-avatar__image ltag__user-subscription-tag__subscriber-profile-image">
</span>
</div>
<div class="ltag__user-subscription-tag__cta-text fs-3xl" id="user-subscription-cta-text"><%= cta_text %></div>
<div class="ltag__user-subscription-tag__subscription-area" id="subscription-area">
<h1 class="ltag__user-subscription-tag__cta-text fs-xl mt-0 mb-4 align-center" id="user-subscription-cta-text">
<%= cta_text %>
</h1>
<div class="ltag__user-subscription-tag__subscription-area align-center" id="subscription-area">
<div class="ltag__user-subscription-tag__signed-out" id="subscription-signed-out">
<div class="fs-base" id="logged-out-text">You must first sign in to DEV.</div>
<button class="crayons-btn" id="sign-in-btn">Sign In</button>
<div class="fs-base mb-2" id="logged-out-text">
You must first sign in to DEV.
</div>
<button class="crayons-btn" id="sign-in-btn">
Sign In
</button>
</div>
<div class="ltag__user-subscription-tag__signed-in" id="subscription-signed-in">
<button class="crayons-btn" id="subscribe-btn">Subscribe</button>
<div class="ltag__user-subscription-tag__signed-in hidden" id="subscription-signed-in">
<button class="crayons-btn mb-4" id="subscribe-btn">
Subscribe
</button>
<div class="fs-s" id="logged-in-text">
You'll subscribe with
<span class="ltag__user-subscription-tag__subscriber-email"></span>
@ -25,7 +41,8 @@
<a href="/settings">update your email address in Settings</a>.
</div>
</div>
<div class="ltag__user-subscription-tag__apple-auth fs-s" id="subscriber-apple-auth">
<div class="ltag__user-subscription-tag__apple-auth fs-s hidden" id="subscriber-apple-auth">
<button disabled class="crayons-btn" id="subscribe-btn">Subscribe</button>
<div class="fs-s" id="apple-auth-message">
Hey, there! It looks like when you created your DEV account you signed
@ -35,31 +52,38 @@
first to a different email address.
</div>
</div>
<div class="ltag__user-subscription-tag__response-message" id="response-message"></div>
<div class="ltag__user-subscription-tag__response-message crayons-notice fs-base w-100 hidden" id="response-message"></div>
</div>
</div>
<div id="user-subscription-confirmation-modal">
<div class="crayons-modal crayons-modal--l">
<div id="user-subscription-confirmation-modal" class="hidden">
<div class="crayons-modal crayons-modal--s">
<div class="crayons-modal__box">
<header class="crayons-modal__box__header">
<h2>Confirm subscribe</h2>
<button type="button" class="crayons-btn crayons-btn--icon crayons-btn--ghost" id="close-confirmation-modal">
<h2 class="fs-l fw-bold mt-0 mb-0">
Confirm subscribe
</h2>
<button type="button" class="crayons-btn crayons-btn--icon-rounded crayons-btn--ghost" id="close-confirmation-modal">
<svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
</svg>
</button>
</header>
<div class="crayons-modal__box__body">
<div id="confirmation-text">
<p id="confirmation-text" class="fs-base mb-4 mt-0">
You'll share your email address
<span class="ltag__user-subscription-tag__subscriber-email"></span>
with
<span class="ltag__user-subscription-tag__author-username"><%= author_username %></span>.
<span class="ltag__user-subscription-tag__author-username fw-medium"><%= author_username %></span>.
Once you do this, you cannot undo this.
</div>
<p>
<div class="ltag__user-subscription-tag__confirmation-buttons">
<button class="crayons-btn" id="confirmation-btn">Confirm subscription</button>
<button class="crayons-btn--secondary" id="cancel-btn">Cancel</button>
<button class="crayons-btn mr-1" id="confirmation-btn">
Confirm subscription
</button>
<button class="crayons-btn crayons-btn--secondary" id="cancel-btn">
Cancel
</button>
</div>
</div>
</div>