Modify copy and style of comment signin cta (#202)

This commit is contained in:
Ben Halpern 2018-04-11 15:17:12 -07:00 committed by GitHub
parent 073e5444ac
commit 80de5a96a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 8 deletions

View file

@ -27,6 +27,7 @@ function initializeBaseTracking() {
}
}, 25);
facebookTrackingScript();
eventListening();
}
//This function is cromulent
@ -79,3 +80,14 @@ function facebookTrackingScript() {
fbTrack();
}
}
function eventListening(){
var registerNowButt = document.getElementById("cta-comment-register-now-link");
if (registerNowButt) {
registerNowButt.onclick = function(){
ga('send', 'event', 'click', 'register-now-click', null, null);
}
}
}

View file

@ -38,7 +38,8 @@ function initializeCommentsPage() {
if (allNodes[i].dataset.commentAuthorId == responseObj.current_user.id) {
allNodes[i].dataset.currentUserComment = "true";
var userActionsEl = allNodes[i].children[0].children[2].children[0];
if (userActionsEl) {
var buttEl = document.getElementById('button-for-comment-' + allNodes[i].dataset.commentId);
if (userActionsEl && buttEl) {
userActionsEl.className = 'current-user-actions';
userActionsEl.style.display = 'inline-block';
document.getElementById('button-for-comment-' + allNodes[i].dataset.commentId).classList.add('reacted');

View file

@ -711,6 +711,14 @@ a.header-link{
opacity:1;
}
}
a.register-now-cta{
font-size:1.4em;
background: $green;
color: $black;
padding: 3px 10px;
margin-right:5px;
line-height:1.8em;
}
.current-user-actions{
.hidden{
display:none;

View file

@ -2,30 +2,32 @@
<div class="comment-hash-marker" id="cta-comment-marker"></div>
<div class="single-comment-node root comment-deep-0"
id="cta-comment-register-now-node">
<div class="inner-comment" style="box-shadow: 5px 5px 0px #4e57ef;border:1px solid #4e57ef;">
<div class="inner-comment" style="box-shadow: 8px 8px 0px #4e57ef;border:4px solid #4e57ef;margin: 20px auto;">
<div class="details">
<img class="profile-pic" src="<%= ProfileImage.new(User.first).get(50)%>" />
<a href="<%= User.first.path %>">
<img class="profile-pic" src="<%= ProfileImage.new(User.first).get(50)%>" />
</a>
<span class="comment-username">
<span class="comment-username-inner">
<%= User.first.name %>
<a href="<%= User.first.path %>"><%= User.first.name %></a>
</span>
</span>
<span class="op-marker">FOUNDER</span>
<span class="op-marker">DEV.TO FOUNDER</span>
</div>
<div class="body">
<p>
Dear <b>lurker</b>, this message is for <b><em>you</em></b>.
Hey there, we see you aren't signed in.
</p>
<p>
Please consider creating an account on <a href="https://dev.to">dev.to</a>. It literally takes a few seconds and <b><em>we'd appreciate the support so much</em></b>. ❤️
</p>
<button class="reaction-button" title="heart">
<button class="reaction-button" title="heart" style="margin-top: 10px;margin-bottom: -10px;">
<%= image_tag "favorite-heart-outline-button.svg" %>
<span class="reactions-count">1,337</span>
</button>
</div>
<div class="actions">
<a href="/enter" id="cta-comment-register-now-link" rel="nofollow">REGISTER NOW</a>
<a href="/enter" id="cta-comment-register-now-link" class="register-now-cta" rel="nofollow">REGISTER NOW</a>
</div>
</div>
</div>