diff --git a/app/assets/javascripts/initializers/initializeArticleReactions.js b/app/assets/javascripts/initializers/initializeArticleReactions.js
index 1ee70df84..476c1a514 100644
--- a/app/assets/javascripts/initializers/initializeArticleReactions.js
+++ b/app/assets/javascripts/initializers/initializeArticleReactions.js
@@ -81,7 +81,7 @@ function initializeArticleReactions() {
});
setTimeout(function(){
e.target.blur();
- },100)
+ },50)
};
}
}, 3)
diff --git a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
index b8ac5eb35..9cb8a1082 100644
--- a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
+++ b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
@@ -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 = " "
+ } else {
+ itemSummaryContent.innerHTML = itemUsername;
+ }
+ item.getElementsByTagName("SUMMARY")[0].blur();
+ });
+ }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
index 1b5e9228b..d89534a04 100644
--- a/app/assets/stylesheets/comments.scss
+++ b/app/assets/stylesheets/comments.scss
@@ -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;
}
diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss
index 05dd78ae5..bf220c2a6 100644
--- a/app/assets/stylesheets/scaffolds.scss
+++ b/app/assets/stylesheets/scaffolds.scss
@@ -14,6 +14,13 @@ body {
}
+*:focus {
+ &:active {
+ outline: 0;
+ }
+}
+
+
.ptr--ptr{
margin-top:70px;
margin-bottom: -70px;
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb
index b9b473b17..273b76a82 100644
--- a/app/views/comments/_comment.html.erb
+++ b/app/views/comments/_comment.html.erb
@@ -1,87 +1,12 @@
<% if comment && comment.user %>
-
-
-<% end %>
+ <% if comment.depth < 3 %>
+
+
+ <%= render("comments/comment_proper", comment: comment, commentable: commentable,
+ is_view_root: is_view_root, is_childless: is_childless, subtree_html: subtree_html) %>
+
+ <% 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 %>
\ No newline at end of file
diff --git a/app/views/comments/_comment_proper.html.erb b/app/views/comments/_comment_proper.html.erb
new file mode 100644
index 000000000..e403d871e
--- /dev/null
+++ b/app/views/comments/_comment_proper.html.erb
@@ -0,0 +1,87 @@
+
+
+
+
.get(50)%>)
-
-
- <%= comment.user.name %>
-
-
-
- <% if comment.user.twitter_username.present? %>
- <%= image_tag("twitter-logo.svg", class:"icon-img") %>
- <% end %>
- <% if comment.user.github_username.present? %>
- <%= image_tag("github-logo.svg", class:"icon-img") %>
- <% 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") %>
- ASK ME ANYTHING
- <% end %>
-