diff --git a/app/assets/stylesheets/ltags/UserSubscriptionTag.scss b/app/assets/stylesheets/ltags/UserSubscriptionTag.scss index dc6ad612c..35f5a7b3e 100644 --- a/app/assets/stylesheets/ltags/UserSubscriptionTag.scss +++ b/app/assets/stylesheets/ltags/UserSubscriptionTag.scss @@ -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); } } diff --git a/app/liquid_tags/user_subscription_tag.rb b/app/liquid_tags/user_subscription_tag.rb index 91bd11661..697365e64 100644 --- a/app/liquid_tags/user_subscription_tag.rb +++ b/app/liquid_tags/user_subscription_tag.rb @@ -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 diff --git a/app/views/liquids/_user_subscription.html.erb b/app/views/liquids/_user_subscription.html.erb index 97bafc346..48b6872cc 100644 --- a/app/views/liquids/_user_subscription.html.erb +++ b/app/views/liquids/_user_subscription.html.erb @@ -1,22 +1,38 @@
>
-
-
- + +
+ +
+ + <%= "#{author_username} profile image" %>> - + + +
-
<%= cta_text %>
-
+ +

+ <%= cta_text %> +

+ +
-
You must first sign in to DEV.
- +
+ You must first sign in to DEV. +
+
-
- + + -
+ + -
+ +
-
-
+