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

Add details to toggles and modify some styling (#1484)

Browse source 
* Add details to toggles and modify some styling

* Add details to child comments

* Finalize comment collapse in nested comments

* Modify styling on comment <details>
This commit is contained in:
Ben Halpern 2019-01-08 12:53:48 -05:00 • committed by GitHub
parent 84bd3a69d7
commit 7c8f71251d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 195 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/initializers/initializeArticleReactions.js
View file

@ -81,7 +81,7 @@ function initializeArticleReactions() {
});
setTimeout(function(){
e.target.blur();
},100)
},50)
};
}
}, 3)

26
app/assets/javascripts/initializers/initializeCommentsPage.js.erb
View file

@ -58,8 +58,9 @@ function initializeCommentsPage() {
for (var i = 0; i < butts.length; i++) {
var butt = butts[i];
butt.onclick = function (event) {
var thisButt = this;
thisButt.blur();
event.preventDefault();
var thisButt = this;
sendHapticMessage('medium');
var userStatus = document.getElementsByTagName('body')[0].getAttribute('data-user-status');
if (userStatus === 'logged-out') {
@ -138,6 +139,7 @@ function initializeCommentsPage() {
document.getElementById('new_comment').onsubmit = handleCommentSubmit;
}
}
listenForDetailsToggle();
}
function toggleCodeOfConduct() {
@ -473,3 +475,25 @@ function handleImageUpload(event, randomIdNumber) {
}
}
}
function listenForDetailsToggle() {
var detailItems = document.getElementsByTagName("DETAILS");
for (var i = 0; i < detailItems.length; i++) {
detailItems[i].addEventListener("toggle", event => {
var item = event.target
var itemSummaryContent = item.getElementsByTagName("SPAN")[0]
var usernames = item.getElementsByClassName("comment-username")
var number = "";
if (usernames.length > 1) {
number = " + " + (usernames.length - 1) + " replies"
}
var itemUsername = usernames[0].textContent + number
if (item.open) {
itemSummaryContent.innerHTML = "&nbsp;"
} else {
itemSummaryContent.innerHTML = itemUsername;
}
item.getElementsByTagName("SUMMARY")[0].blur();
});
}
}

77
app/assets/stylesheets/comments.scss
View file

@ -1,5 +1,5 @@
@import 'variables';
$indent-distance: calc(1.2vw + 12px);
$indent-distance: calc(1.1vw + 12px);
@keyframes fade-out {
0% {background-color: rgb(208, 255, 235);}
@ -171,7 +171,7 @@ a.header-link{
}
.top-level-actions{
margin:0px 8px 30px;
margin:0px 8px 85px;
padding:3px 0px;
z-index:4;
position:relative;
@ -215,7 +215,7 @@ a.header-link{
background:$light-gray;
overflow:auto;
position:relative;
margin-bottom:calc(0.8vw - 6px);
margin-bottom: 4px;
z-index:4;
margin-left:-2%;
border-top:1px solid $light-medium-gray;
@ -340,6 +340,48 @@ a.header-link{
}
}
details {
user-select: none;
details {
.comment-deep-1,.comment-deep-2 {
margin-top: -122px;
}
summary {
z-index: 15;
position: relative;
}
&[open] {
> summary {
width: calc(1.1vw + 11px); //slightly smaller than indent distance
padding-bottom: 100px;
}
}
}
summary {
cursor: pointer;
color: lighten($medium-gray, 15%);
font-size: 13.5px;
font-style: oblique;
padding: 2px 0px;
padding-left: 4px;
&:active {
outline:0;
box-shadow: 0px 0px 0px $light-medium-gray !important;
}
&:focus {
outline:0;
&:not(:active) {
box-shadow: 0px 0px 6px $light-medium-gray !important;
}
}
span {
display: inline-block;
width: calc(100% - 50px);
line-height: 20px;
}
}
}
.comment-trees{
// margin-left:-$indent-distance;
.comment-hash-marker{
@ -380,12 +422,12 @@ a.header-link{
}
.single-comment-node{
padding:2px 0px 2px $indent-distance;
padding:2px 0px 0px $indent-distance;
text-align: left;
&.root{
padding:10px 0px 2px 0;
padding:0px 0px 2px 0;
}
margin-top:42px;
margin-top:15px;
font-size:17px;
position:relative;
@media screen and ( min-width: 390px ){
@ -469,10 +511,11 @@ a.header-link{
font-size:0.95em;
line-height:1.35em;
overflow:hidden;
margin-bottom:-30px;
margin-bottom:-28px;
word-wrap: break-word;
font-family: $helvetica;
position:relative;
margin-left: 1px;
h1,h2,h3,h4,h5,h6{
padding:0px;
margin:4px 0px calc(1.1vw + 10px);
@ -600,7 +643,7 @@ a.header-link{
border: none;
cursor: pointer;
position: absolute;
top: calc(0.3vw + 11px);
top: calc(0.3vw + 13px);
right: 10px;
}
@ -689,7 +732,6 @@ a.header-link{
.reaction-button,.dropbtn{
border:0px;
background:transparent;
vertical-align:2px;
cursor:pointer;
border-radius:3px;
height:32px;
@ -700,6 +742,12 @@ a.header-link{
margin-top:calc(-0.6vw - 4px);
z-index:8;
position:relative;
&.reaction-button {
padding-right: 25px;
padding-top: 4px;
margin-top: 0px;
height:25px;
}
.reactions-count {
font-size:calc(0.9em + 0.1vw);
background: $light-gray;
@ -712,10 +760,14 @@ a.header-link{
left: 24px;
}
img{
height:20px;
width:20px;
height:21px;
width:21px;
opacity:0.62;
left:0px;
&.dropdown-icon {
height:18px;
width:18px;
}
}
&:hover{
img{
@ -726,10 +778,9 @@ a.header-link{
display:none;
vertical-align:0px;
margin-left:0px;
height: 25px;
height: 22px;
width: 22px;
opacity:0.9;
animation: fadein 0.22s ease ;
&:hover{
opacity:1;
}

7
app/assets/stylesheets/scaffolds.scss
View file

@ -14,6 +14,13 @@ body {
}
*:focus {
&:active {
outline: 0;
}
}
.ptr--ptr{
margin-top:70px;
margin-bottom: -70px;

97
app/views/comments/_comment.html.erb
View file

@ -1,87 +1,12 @@
<% if comment && comment.user %>
<div class="comment-hash-marker" id="<%= comment.id_code_generated %>"></div>
<div id="comment-node-<%= comment.id %>" class="single-comment-node <%= comment_class(comment,is_view_root) %> <%= "flat-node" if comment.depth > 3 %> comment-deep-<%=comment.depth%>" data-comment-id="<%= comment.id %>" data-comment-author-id="<%= comment_user_id_unless_deleted comment %>">
<% if comment.deleted %>
<div class="inner-comment">
<div class="body" style="padding-bottom:32px;opacity:0.3;user-select:none;cursor:default">
[deleted]
</div>
</div>
<% else %>
<div class="inner-comment">
<% if comment.decorate.low_quality %>
<div class="low-quality-comment-marker">
<%=image_tag(cl_image_path(asset_path("/assets/sloan.png"),
:type=>"fetch",
:width => 50,
:height => 50,
:crop => "imagga_scale",
:quality => "auto",
:flags => "progressive",
:fetch_format => "auto",
:sign_url => true), class:"sloan", alt:"sloth-mascot") %>
Comment marked as low quality/non-constructive by the community <a href="/code-of-conduct">View code of conduct</a>
</div>
<% end %>
<div class="details <%= "low-quality-comment" if comment.decorate.low_quality %>">
<a href="/<%= comment.user.username %>">
<img class="profile-pic" src="<%= ProfileImage.new(comment.user).get(50)%>" />
<span class="comment-username">
<span class="comment-username-inner">
<%= comment.user.name %>
</span>
</span>
</a>
<% if comment.user.twitter_username.present? %>
<a href="https://twitter.com/<%= comment.user.twitter_username %>" rel="noopener noreferrer" target="_blank"><%= image_tag("twitter-logo.svg", class:"icon-img") %></a>
<% end %>
<% if comment.user.github_username.present? %>
<a href="https://github.com/<%= comment.user.github_username %>" rel="noopener noreferrer" target="_blank"><%= image_tag("github-logo.svg", class:"icon-img") %></a>
<% end %>
<% if commentable && (commentable.user_id == comment.user_id ||
commentable.second_user_id == comment.user_id ||
commentable.third_user_id == comment.user_id) &&
commentable.decorate.cached_tag_list_array.include?("ama") %>
<span class="op-marker">ASK ME ANYTHING</span>
<% end %>
<div class="comment-date">
<a href="<%= comment.path %>"><%= comment.readable_publish_date %></a>
</div>
<button class="dropbtn">
<%= image_tag("chevron-down.svg", class: "dropdown-icon") %>
</button>
<div class="dropdown">
<div class="dropdown-content">
<a href="<%= comment.path %>">
Permalink
</a>
<span class="mod-actions hidden" style="display:none">
<a href="<%=comment.path%>/mod" class="edit-butt" rel="nofollow" style="color:#0a0a0a">Moderate</a>
</span>
<a href="/report-abuse?url=https://dev.to<%= comment.path %>">Report Abuse</a>
</div>
</div>
</div>
<div class="body <%= "low-quality-comment" if comment.decorate.low_quality %>">
<%= comment.processed_html.html_safe %>
<button class="reaction-button" id="button-for-comment-<%= comment.id %>" data-comment-id="<%= comment.id %>" title="heart">
<%= image_tag "favorite-heart-outline-button.svg" %>
<img class="voted-heart" src="<%= asset_path("emoji/emoji-one-heart.png") %>"/>
</button>
</div>
<div class="actions" data-comment-id="<%= comment.id %>" data-path="<%=commentable.path%>/comments/<%= comment.id_code_generated %>">
<span class="current-user-actions hidden" style="display:none">
<a data-no-instant href="<%=commentable.path%>/comments/<%= comment.id_code_generated %>/delete_confirm" class="edit-butt" rel="nofollow">DELETE</a>
<a href="<%=commentable.path%>/comments/<%= comment.id_code_generated %>/edit" class="edit-butt" rel="nofollow">EDIT</a>
</span>
<% if comment.depth < 2 || is_childless %>
<a href="#<%=commentable.path%>/comments/new/<%= comment.id_code_generated %>" class="toggle-reply-form" rel="nofollow">REPLY</a>
<% else %>
<a href="#<%=commentable.path%>/comments/new/<%= comment.id_code_generated %>" class="toggle-reply-form thread-indication" rel="nofollow">THREAD</a>
<% end %>
</div>
</div>
<% end %>
<%= subtree_html %>
</div>
<% end %>
<% if comment.depth < 3 %>
<details open>
<summary><span>&nbsp;</span></summary>
<%= render("comments/comment_proper", comment: comment, commentable: commentable,
is_view_root: is_view_root, is_childless: is_childless, subtree_html: subtree_html) %>
</details>
<% else %>
<%= render("comments/comment_proper", comment: comment, commentable: commentable,
is_view_root: is_view_root, is_childless: is_childless, subtree_html: subtree_html) %>
<% end %>
<% end %>

87
app/views/comments/_comment_proper.html.erb Normal file
View file

@ -0,0 +1,87 @@
<div class="comment-hash-marker" id="<%= comment.id_code_generated %>"></div>
<div id="comment-node-<%= comment.id %>" class="single-comment-node <%= comment_class(comment,is_view_root) %> <%= "flat-node" if comment.depth > 3 %> comment-deep-<%=comment.depth%>" data-comment-id="<%= comment.id %>" data-comment-author-id="<%= comment_user_id_unless_deleted comment %>">
<% if comment.deleted %>
<div class="inner-comment">
<div class="body" style="padding-bottom:32px;opacity:0.3;user-select:none;cursor:default">
[deleted]
</div>
</div>
<% else %>
<div class="inner-comment">
<% if comment.decorate.low_quality %>
<div class="low-quality-comment-marker">
<%=image_tag(cl_image_path(asset_path("/assets/sloan.png"),
:type=>"fetch",
:width => 50,
:height => 50,
:crop => "imagga_scale",
:quality => "auto",
:flags => "progressive",
:fetch_format => "auto",
:sign_url => true), class:"sloan", alt:"sloth-mascot") %>
Comment marked as low quality/non-constructive by the community <a href="/code-of-conduct">View code of conduct</a>
</div>
<% end %>
<div class="details <%= "low-quality-comment" if comment.decorate.low_quality %>">
<a href="/<%= comment.user.username %>">
<img class="profile-pic" src="<%= ProfileImage.new(comment.user).get(50)%>" />
<span class="comment-username">
<span class="comment-username-inner">
<%= comment.user.name %>
</span>
</span>
</a>
<% if comment.user.twitter_username.present? %>
<a href="https://twitter.com/<%= comment.user.twitter_username %>" rel="noopener noreferrer" target="_blank"><%= image_tag("twitter-logo.svg", class:"icon-img") %></a>
<% end %>
<% if comment.user.github_username.present? %>
<a href="https://github.com/<%= comment.user.github_username %>" rel="noopener noreferrer" target="_blank"><%= image_tag("github-logo.svg", class:"icon-img") %></a>
<% end %>
<% if commentable && (commentable.user_id == comment.user_id ||
commentable.second_user_id == comment.user_id ||
commentable.third_user_id == comment.user_id) &&
commentable.decorate.cached_tag_list_array.include?("ama") %>
<span class="op-marker">ASK ME ANYTHING</span>
<% end %>
<div class="comment-date">
<a href="<%= comment.path %>"><%= comment.readable_publish_date %></a>
</div>
<button class="dropbtn">
<%= image_tag("three-dots.svg", class: "dropdown-icon") %>
</button>
<div class="dropdown">
<div class="dropdown-content">
<a href="<%= comment.path %>">
Permalink
</a>
<span class="mod-actions hidden" style="display:none">
<a href="<%=comment.path%>/mod" class="edit-butt" rel="nofollow" style="color:#0a0a0a">Moderate</a>
</span>
<a href="/report-abuse?url=https://dev.to<%= comment.path %>">Report Abuse</a>
</div>
</div>
</div>
<div class="body <%= "low-quality-comment" if comment.decorate.low_quality %>">
<%= comment.processed_html.html_safe %>
<button class="reaction-button" id="button-for-comment-<%= comment.id %>" data-comment-id="<%= comment.id %>" title="heart">
<%= image_tag "favorite-heart-outline-button.svg" %>
<img class="voted-heart" src="<%= asset_path("emoji/emoji-one-heart.png") %>"/>
</button>
</div>
<div class="actions" data-comment-id="<%= comment.id %>" data-path="<%=commentable.path%>/comments/<%= comment.id_code_generated %>">
<span class="current-user-actions hidden" style="display:none">
<a data-no-instant href="<%=commentable.path%>/comments/<%= comment.id_code_generated %>/delete_confirm" class="edit-butt" rel="nofollow">DELETE</a>
<a href="<%=commentable.path%>/comments/<%= comment.id_code_generated %>/edit" class="edit-butt" rel="nofollow">EDIT</a>
</span>
<% if comment.depth < 2 || is_childless %>
<a href="#<%=commentable.path%>/comments/new/<%= comment.id_code_generated %>" class="toggle-reply-form" rel="nofollow">REPLY</a>
<% else %>
<a href="#<%=commentable.path%>/comments/new/<%= comment.id_code_generated %>" class="toggle-reply-form thread-indication" rel="nofollow">THREAD</a>
<% end %>
</div>
</div>
<% end %>
<%= subtree_html %>
</div>