diff --git a/app/assets/images/collapse.svg b/app/assets/images/collapse.svg new file mode 100644 index 000000000..a1946b41b --- /dev/null +++ b/app/assets/images/collapse.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/expand.svg b/app/assets/images/expand.svg new file mode 100644 index 000000000..d92d6b372 --- /dev/null +++ b/app/assets/images/expand.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/small-medal.svg b/app/assets/images/small-medal.svg new file mode 100644 index 000000000..e4c4683b2 --- /dev/null +++ b/app/assets/images/small-medal.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/small-overflow-horizontal.svg b/app/assets/images/small-overflow-horizontal.svg new file mode 100644 index 000000000..509a1a10d --- /dev/null +++ b/app/assets/images/small-overflow-horizontal.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/small-thread.svg b/app/assets/images/small-thread.svg new file mode 100644 index 000000000..d814a301d --- /dev/null +++ b/app/assets/images/small-thread.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/javascripts/initializers/initializeCommentDropdown.js b/app/assets/javascripts/initializers/initializeCommentDropdown.js index a87e14d35..69c6725b2 100644 --- a/app/assets/javascripts/initializers/initializeCommentDropdown.js +++ b/app/assets/javascripts/initializers/initializeCommentDropdown.js @@ -131,7 +131,7 @@ function initializeCommentDropdown() { return; } - reportAbuseLink.innerHTML = `Report Abuse`; + reportAbuseLink.innerHTML = `Report abuse`; } function addDropdownListener(dropdown) { diff --git a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb index 57162e038..21876e659 100644 --- a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb +++ b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb @@ -1,3 +1,5 @@ +var iconSmallThread = ``; + function initializeCommentsPage() { if (document.getElementById('comments-container')) { toggleCodeOfConduct(); @@ -28,12 +30,22 @@ function initializeCommentsPage() { for (var i = 0; i < publicReactionCounts.length; i++) { var buttForComment = document.getElementById('button-for-comment-' + publicReactionCounts[i].id); if (buttForComment) { + var reactionsCountWrapper = buttForComment.querySelector('.reactions-count'); + var reactionsLabelWrapper = buttForComment.querySelector('.reactions-label'); if (publicReactionCounts[i].count > 0) { - if (!document.getElementById('reactions-count-' + publicReactionCounts[i].id)) { - buttForComment.innerHTML = buttForComment.innerHTML + "" + publicReactionCounts[i].count + ''; + + if (publicReactionCounts[i].count > 1) { + reactionsLabelWrapper.innerHTML = " likes"; } else { - document.getElementById('reactions-count-' + publicReactionCounts[i].id).innerHTML = publicReactionCounts[i].count; + reactionsLabelWrapper.innerHTML = " like"; } + + reactionsCountWrapper.id = 'reactions-count-' + publicReactionCounts[i].id; + reactionsCountWrapper.innerHTML = publicReactionCounts[i].count; + reactionsCountWrapper.classList.remove("hidden"); + } else { + reactionsCountWrapper.classList.add("hidden"); + reactionsCountWrapper.innerHTML = '0'; } } } @@ -41,14 +53,13 @@ function initializeCommentsPage() { for (var i = 0; i < allNodes.length; i++) { if (allNodes[i].dataset.commentAuthorId == responseObj.current_user.id) { allNodes[i].dataset.currentUserComment = "true"; - var userActionsEl = allNodes[i].children[0].children[2].children[0]; + var path = allNodes[i].dataset.path; + var userActionsEl = allNodes[i].querySelector('.current-user-actions'); var buttEl = document.getElementById('button-for-comment-' + allNodes[i].dataset.commentId); if (userActionsEl && buttEl) { - userActionsEl.className = 'current-user-actions'; - userActionsEl.innerHTML = 'Delete\ - Edit' - userActionsEl.style.display = 'inline-block'; - document.getElementById('button-for-comment-' + allNodes[i].dataset.commentId).classList.add('reacted'); + userActionsEl.innerHTML = `
  • Edit
  • +
  • Delete
  • ` + userActionsEl.classList.remove('hidden'); } } } @@ -78,16 +89,27 @@ function initializeCommentsPage() { thisButt.disabled = true; function successCb(response) { - var reactionCountSpan = thisButt.children[2]; + var reactionCount = thisButt.querySelector('.reactions-count'); + var reactionLabel = thisButt.querySelector('.reactions-label'); if (response.result === 'create') { thisButt.classList.add('reacted'); - if (reactionCountSpan) { - reactionCountSpan.innerHTML = parseInt(reactionCountSpan.innerHTML) + 1; + if (reactionCount) { + reactionCount.innerHTML = parseInt(reactionCount.innerHTML) + 1; + reactionCount.classList.remove("hidden"); + if(parseInt(reactionCount.innerHTML) == 1) { + reactionLabel.innerHTML = " like" + } else if(parseInt(reactionCount.innerHTML) > 1) { + reactionLabel.innerHTML = " likes" + } } } else { thisButt.classList.remove('reacted'); - if (reactionCountSpan) { - reactionCountSpan.innerHTML = parseInt(reactionCountSpan.innerHTML) - 1; + if (reactionCount) { + reactionCount.innerHTML = parseInt(reactionCount.innerHTML) - 1; + if(parseInt(reactionCount.innerHTML) == 0) { + reactionCount.classList.add("hidden"); + reactionLabel.innerHTML = "Like" + } } } } @@ -117,13 +139,12 @@ function initializeCommentsPage() { showModal('reply-to-comment'); return; } - var actionNode = event.target.parentNode; - var parentId = actionNode.dataset.commentId; + var parentId = event.target.closest('.comment').dataset.commentId; var waitingOnCSRF = setInterval(function () { var metaTag = document.querySelector("meta[name='csrf-token']"); if (metaTag) { clearInterval(waitingOnCSRF); - commentWrapper = event.target.closest('.inner-comment'); + commentWrapper = event.target.closest('.comment__details'); commentWrapper.classList.add("replying"); commentWrapper.innerHTML += buildCommentFormHTML(commentableId, commentableType, parentId); initializeCommentsPage(); @@ -137,14 +158,7 @@ function initializeCommentsPage() { return false; } } - var editButts = document.getElementsByClassName('edit-butt'); - for (var i = 0; i < editButts.length; i++) { - var butt = editButts[i]; - butt.onclick = function () { - // event.preventDefault(); - // alert("edit clicked!") - }; - } + if (document.getElementById('new_comment')) { document.getElementById('new_comment').addEventListener('submit', handleCommentSubmit); } @@ -165,16 +179,6 @@ function toggleCodeOfConduct() { } } -function replaceActionButts(el) { - var loggedInActionButts = ""; - var wrapper = el.getElementsByClassName("actions")[0] - if (el.dataset.currentUserComment == "true") { - loggedInActionButts = 'Delete\ - Edit' - } - wrapper.innerHTML = '' + loggedInActionButts + 'Reply'; -} - function handleCommentSubmit(event) { event.preventDefault(); var form = event.target; @@ -219,10 +223,13 @@ function handleCommentSubmit(event) { var mainCommentsForm = document.getElementById("new_comment"); if (parentComment) { handleFormClose(event); - if (newComment.depth > 2) { - parentComment.getElementsByClassName("toggle-reply-form")[0].innerHTML = "" + if (newComment.depth > 3) { + var replyTrigger = parentComment.getElementsByClassName("toggle-reply-form")[0]; + var threadIndicator = `${ iconSmallThread }Thread`; + replyTrigger.classList.replace("inline-flex", "hidden"); + replyTrigger.parentNode.innerHTML += threadIndicator; } - var actionsNode = parentComment.getElementsByClassName("inner-comment")[0]; + var actionsNode = parentComment.getElementsByClassName("comment__inner")[0]; actionsNode.parentNode.insertBefore(newNode, actionsNode.nextSibling); } @@ -496,19 +503,19 @@ function handleImageUpload(event, randomIdNumber) { } function listenForDetailsToggle() { - var detailItems = document.getElementsByTagName("DETAILS"); + var detailItems = document.querySelectorAll(".js-comment-wrapper"); 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 item = event.target; + var itemSummaryContent = item.getElementsByClassName("js-collapse-comment-content")[0]; + var usernames = item.getElementsByClassName("js-comment-username"); var number = ""; if (usernames.length > 1) { number = " + " + (usernames.length - 1) + " replies" } var itemUsername = usernames[0].textContent + number if (item.open) { - itemSummaryContent.innerHTML = " " + itemSummaryContent.innerHTML = ""; } else { itemSummaryContent.innerHTML = itemUsername; } diff --git a/app/assets/javascripts/utilities/buildCommentFormHTML.js.erb b/app/assets/javascripts/utilities/buildCommentFormHTML.js.erb index cd80cb238..f1876bade 100644 --- a/app/assets/javascripts/utilities/buildCommentFormHTML.js.erb +++ b/app/assets/javascripts/utilities/buildCommentFormHTML.js.erb @@ -18,7 +18,7 @@ function buildCommentFormHTML(commentableId, commentableType, parentId) {
    - +
    diff --git a/app/assets/javascripts/utilities/buildCommentHTML.js.erb b/app/assets/javascripts/utilities/buildCommentHTML.js.erb index 5821233cb..50d6e60c1 100644 --- a/app/assets/javascripts/utilities/buildCommentHTML.js.erb +++ b/app/assets/javascripts/utilities/buildCommentHTML.js.erb @@ -1,116 +1,138 @@ function buildCommentHTML(comment) { + var iconSmallOverflowHorizontal = ``; + var iconCollaspe = ``; + var iconExpand = ``; + var depthClass = ""; - var githubIcon = ""; - var twitterIcon = ""; var customClass = ""; - var detailsStartHTML = ""; - var detailsFinishHTML = ""; - var body = ""; - if (!comment.newly_created) { - depthClass="child flat-node" - } else if (comment.depth == 0 ){ - depthClass = "root"; - } else if (comment.depth < 3) { - depthClass="child" + var detailsStartHTML = ""; + var detailsEndHTML = ""; + + var commentHeader = ""; + var commentFooter = ""; + var commentAvatar = ""; + var commentBody = ""; + + if ( comment.depth == 0 ) { + depthClass += "root "; } else { - depthClass="child flat-node" + depthClass += "child " } - if (comment.user.twitter_username && comment.user.twitter_username.length > 0) { - twitterIcon = '<%= image_tag("twitter-logo.svg", class:"icon-img", alt: "twitter logo") %>' - } - if (comment.user.github_username && comment.user.github_username.length > 0) { - githubIcon = '<%= image_tag("github-logo.svg", class:"icon-img", alt: "github logo") %>' + + if ( comment.depth > 3 ) { + depthClass += "comment--too-deep "; } + if (comment.newly_created) { customClass = "comment-created-via-fetch" } + if (comment.depth < 3) { - detailsStartHTML = '
     ' - detailsFinishHTML = '
    ' + detailsStartHTML = ` +
    + + + ${ iconCollaspe } + ${ iconExpand } + + + + `; + detailsEndHTML = `
    `; } - body = '\ - '+detailsStartHTML+'\ -
    \ -
    \ -
    \ -
    \ - \ - '+comment.user.username+'\ - '+comment.user.name+'\ - \ - '+twitterIcon+'\ - '+githubIcon+'\ - \ - \ - \ -
    \ -
    \ - '+comment.body_html+'\ - '+reactions(comment)+'\ -
    \ - '+actions(comment)+'\ -
    \ -
    \ - '+detailsFinishHTML; + commentAvatar = ` + ${ comment.user.username } profile + `; - return body; + commentHeader = `
    + + ${ comment.user.name } + + + + + + + + +
    + + +
    +
    `; + + commentFooter = `
    + ${ react(comment) } + ${ reply(comment) } +
    `; + + commentBody = `${ detailsStartHTML } +
    +
    + ${ commentAvatar } +
    +
    + ${ commentHeader } +
    + ${ comment.body_html } +
    +
    + ${ commentFooter } +
    +
    +
    + ${ detailsEndHTML }`; + + return commentBody; } -function actions(comment) { +function reply(comment) { + var iconSmallComment = ``; + var replyButton = ` + ${ iconSmallComment } + + `; if (comment.newly_created) { - return '
    \ - \ - Reply\ -
    '; - } else { - return '
    \ - VIEW/REPLY\ -
    '; + return replyButton; } } -function reactions(comment) { - if (comment.newly_created) { - return ''; - } else { - if (comment.heart_ids.indexOf(userData().id) > -1) { - var reactedClass = "reacted"; - } else { - var reactedClass = "" - } - return ''; +function react(comment) { + var reactedClass = ""; + var num = 1; + var iconSmallHeart = ``; + var iconSmallHeartFilled = ``; + + if (!comment.newly_created && comment.heart_ids.indexOf(userData().id) > -1) { + reactedClass = "reacted" } + + if (!comment.newly_created) { + num = comment.public_reactions_count; + } + + var reactButton = ``; + + return reactButton; } diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss deleted file mode 100644 index 7357162d2..000000000 --- a/app/assets/stylesheets/comments.scss +++ /dev/null @@ -1,775 +0,0 @@ -@import 'variables'; -@import 'mixins'; -@import 'functions'; -@import 'config/import'; - -%kbd { - display: inline-block; - padding: 3px 5px; - font-size: 11px; - line-height: 10px; - color: #444d56; - vertical-align: middle; - background-color: #fafbfc; - border: solid 1px #c6cbd1; - border-bottom-color: #959da5; - border-radius: 3px; - box-shadow: inset 0 -1px 0 #959da5; -} - -$indent-distance: calc(1.1vw + 13px); - -@keyframes fade-out { - 0% { - background-color: rgb(208, 255, 235); - } - 100% { - background-color: white; - } -} - -a.header-link { - color: var(--body-color); - display: block; - &:hover { - color: var(--body-color); - } -} - -.comments { - .picture { - height: 180px; - max-width: 900px; - margin: auto; - border-top-right-radius: 5px; - border-top-left-radius: 5px; - @media screen and (min-width: 390px) { - height: 240px; - } - @media screen and (min-width: 820px) { - height: 280px; - } - background-color: #ecf0f2; - background: #ecf0f2 no-repeat top center; - background-size: cover; - position: relative; - z-index: 1; - } - .blank-comment-space { - height: 3px; - @media screen and (min-width: 820px) { - height: 0px; - } - } - .article-header { - width: 820px; - max-width: 100%; - margin: 50px auto 10px; - padding: 0px 0px 90px; - background: var(--card-bg); - z-index: 3; - position: relative; - @media screen and (min-width: 820px) { - margin: 72px auto 10px; - border-radius: 5px; - @include themeable( - border, - theme-container-border, - 1px solid darken($lightest-gray, 4%) - ); - } - h3 { - width: 94%; - margin: 12px 0 5px; - margin-left: 1.8%; - font-weight: 500; - font-size: calc(1.5vw + 22px); - } - h4 { - margin: 0; - font-weight: 300; - color: rgb(195, 195, 195); - font-size: 17px; - width: 96%; - margin: auto; - margin-bottom: -40px; - a { - color: rgb(105, 103, 103); - } - } - .body { - padding: 60px 0px 0px; - width: 96%; - margin: auto; - margin-bottom: -35px; - .read-more { - color: var(--link-brand-color); - display: inline-block; - &:hover { - opacity: 0.96; - } - } - img { - max-width: 100%; - max-height: 350px; - } - kbd { - @extend %kbd; - } - } - } - .single-comment-header { - height: 10px; - } -} - -.comments-container { - padding-top: 10px; - margin: auto; - margin-bottom: var(--su-4); - text-align: left; - overflow-wrap: break-word; - &.comments-dedicated-page-container { - width: 800px; - max-width: 96%; - min-height: calc(97vh - 200px); - } - - img.icon-image { - height: 21px; - opacity: 0.7; - &:hover { - opacity: 1; - } - } - - .top-level-actions { - margin: 0px 0px 85px; - padding: 3px 0px; - z-index: 4; - position: relative; - border-radius: 3px; - font-size: calc(0.35vw + 16px); - h3 { - margin: 5px 0px; - a { - font-size: 0.62em; - background: $black; - color: white; - margin: 2px 0px 2px; - margin-right: 5px; - vertical-align: 2px; - } - } - .comment-action-buttons, - .comment-action-text { - display: inline-block; - color: $medium-gray; - font-weight: 300; - } - a { - display: inline-block; - background: $purple; - border-radius: 3px; - color: $black; - font-family: $helvetica-condensed; - font-stretch: condensed; - padding: 4px 8px; - font-size: 0.77em; - vertical-align: 1px; - margin: 8px 0px 2px; - } - .commentable-title { - font-size: calc(0.3vw + 16px); - color: $medium-gray; - } - } - - details { - details { - .comment-deep-1, - .comment-deep-2 { - margin-top: -123px; - } - // this ms-lang hack (which behaves like a media query) is going to be ignored by all browsers - // except IE and 11 and it fixes indentation on the unsupported
    tags - _:-ms-lang(x), - .comment-deep-1, - .comment-deep-2 { - margin-top: 0px; - } - summary { - position: relative; - } - &[open] { - > summary { - width: calc(1.1vw + 12px); //slightly smaller than indent distance - padding-bottom: 100px; - } - } - } - summary { - cursor: pointer; - color: lighten($medium-gray, 8%); - font-size: 14.5px; - font-style: oblique; - padding: 4px 0px; - padding-left: 4px; - user-select: none; - &:active { - outline: 0; - box-shadow: 0px 0px 0px $light-medium-gray !important; - } - &:focus-visible { - 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 { - .comment-hash-marker { - margin-top: -45px; - margin-bottom: 45px; - border: 1px solid transparent; - z-index: var(--z-negative); - position: relative; - &:target + .single-comment-node { - animation-name: fade-out; - animation-duration: 5s; - animation-timing-function: ease-out; - } - } - .root-comment { - margin-top: -80px; - .comment-parent-link { - background: var(--card-bg); - @include themeable( - border, - theme-container-border, - 1px solid $medium-gray - ); - display: block; - padding: 9px 12px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 0.8em; - @include themeable( - background, - theme-container-accent-background, - lighten($lightest-gray, 1%) - ); - } - } - } - .comment-view-parent { - margin-bottom: 7px; - text-align: left; - font-family: $helvetica-condensed; - font-size: 0.8em; - background: $purple; - display: inline-block; - padding: 2px 4px; - border-radius: 3px; - margin-right: 5px; - vertical-align: top; - &.comment-view-commentable { - background: transparent; - max-width: calc(100% - 100px); - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; - } - } - - .alert-error { - background: $red; - max-width: 730px; - font-family: var(--ff-sans-serif); - color: white; - border-radius: 5px; - margin: 20px auto; - padding: 20px; - } -} - -.single-comment-node { - padding: 2px 0px 0px $indent-distance; - text-align: left; - &.root { - padding: 0px 0px 2px 0; - } - margin-top: 15px; - font-size: 17px; - position: relative; - @media screen and (min-width: 390px) { - font-size: 20px; - } - &.flat-node { - padding: 0px; - margin-top: -3px; - margin-bottom: -3px; - &.root { - padding: 2px 0px; - margin-top: 0px; - } - .inner-comment { - border-top-left-radius: 0px; - border-top-right-radius: 0px; - } - button { - margin-bottom: 3px; - z-index: 7; - position: relative; - } - } - .comment-deep-3 { - margin-top: -5px; - padding: 2px 0px 2px calc(0.9vw + 7px); - button { - margin-bottom: 3px; - z-index: 8; - position: relative; - } - } - .permalink { - width: 40px; - position: absolute; - right: 2px; - margin-top: calc(0.4vw + 12px); - text-align: center; - opacity: 0.9; - img { - width: 14px; - } - &:hover { - opacity: 1; - } - } - .low-quality-comment-marker { - font-size: 0.66em; - padding: 6px 13px; - @include themeable( - background, - theme-container-accent-background, - $light-gray - ); - font-weight: bold; - border-bottom: 1px solid $light-medium-gray; - a { - background: lighten($green, 14%); - color: $black; - padding: 1px 5px 3px; - border-radius: 3px; - vertical-align: -1px; - margin-left: 3px; - } - img { - height: 22px; - width: 22px; - border-radius: 100px; - border: 2px solid $medium-gray; - vertical-align: -0.6em; - margin-right: 2px; - } - } - .low-quality-comment > *:not(.dropdown) { - opacity: 0.5; - } - - .body { - padding: 1px; - padding-left: 1.5%; - padding-right: 1.5%; - padding-bottom: 5px; - margin: 0; - width: 96%; - font-size: 0.95em; - line-height: 1.35em; - overflow: hidden; - margin-bottom: -28px; - word-wrap: break-word; - font-family: var(--ff-sans-serif); - position: relative; - margin-left: 1px; - h1, - h2, - h3, - h4, - h5, - h6 { - padding: 0px; - margin: 4px 0px calc(1.1vw + 10px); - font-size: 1em; - font-weight: 600; - } - h1 { - font-size: 1.3em; - } - p { - padding: 0px; - margin: 4px 0px calc(1.1vw + 10px); - } - ul, - ol { - padding-left: 6px; - margin: 0.8em 0.7em 0.8em 1em; - } - ul { - list-style-type: square; - } - li { - margin: 3px 0px calc(0.5vw + 5px); - } - blockquote { - border-left: calc(0.2vw + 2px) solid $dark-gray; - padding: 0.1% 3% 0.1% 2%; - margin: 1.6em 1vw; - font-size: 0.92em; - line-height: 1.4em; - p { - padding: 0; - margin: 0.95em 0 0.95em; - } - &.twitter-tweet { - background: white; - max-width: 480px; - min-height: 135px; - border: 1px solid #e9eef2; - font-size: 17px; - line-height: 20px; - border-radius: 5px; - margin-top: 10px; - padding: 10px; - } - } - .edited-notification { - color: lighten($medium-gray, 20%); - font-size: 0.7em; - padding: 3px 0px 0px; - position: relative; - z-index: 1; - } - img { - max-width: 100%; - max-height: calc(50vh + 100px); - } - .table-wrapper-paragraph { - width: 100%; - margin-left: 0%; - overflow-x: auto; - } - a { - &.anchor { - padding-top: 50px; - margin-top: -50px; - -webkit-background-clip: content-box; - background-clip: content-box; - } - } - kbd { - @extend %kbd; - } - .liquid-comment { - .details { - .comment-date { - top: calc(14px - 0.25vw); - } - } - } - &.hidden-comment { - padding: 5px 0; - margin-bottom: 0; - } - } - .icon-img { - height: 16px; - width: 16px; - margin-right: 0px; - opacity: 0.7; - } - .details { - padding: 0px; - border-top-left-radius: 3px; - color: var(--link-brand-color); - position: relative; - .comment-date { - border: none; - position: absolute; - top: calc(14px - 0.25vw); - right: calc(35px + 0.2vw); - font-size: 12px; - text-align: right; - a { - color: var(--card-color-tertiary); - } - } - .dropbtn { - border: none; - cursor: pointer; - position: absolute; - top: calc(0.3vw + 13px); - right: 10px; - &.commentable-hidden { - top: calc(0.3vw + 8px); - } - svg { - transform: translateY(3px); - fill: var(--card-color-tertiary); - } - } - - .dropdown { - position: absolute; - top: 40px; - right: 200px; - display: inline-block; - - @media screen and (min-width: 580px) { - right: 10px; - } - - .dropdown-icon { - position: absolute; - left: 10px; - top: 7px; - padding: 4px; - max-width: 15px; - max-height: 15px; - } - } - - &.hidden-comment { - .dropbtn { - top: calc(0.3vw + 8px); - } - } - - img.profile-pic { - height: 33px; - width: 33px; - border-radius: 50px; - margin: 1.5% 0.2% 1.5% 1.5%; - } - .comment-username { - vertical-align: calc(0.62vw + 13px); - } - .comment-username-inner { - vertical-align: middle; - display: inline-block; - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; - max-width: calc(60% - 20px); - } - .icon-img { - vertical-align: calc(0.7vw + 9px); - margin-left: 2px; - } - .op-marker { - display: none; - @media screen and (min-width: 580px) { - display: inline-block; - vertical-align: calc(0.7vw + 12px); - background: $purple; - color: $black; - padding: 2px 6px 2px; - margin-left: 0.3vw; - font-family: $helvetica-condensed; - font-stretch: condensed; - font-size: 0.78em; - border-radius: 3px; - } - } - a { - @include themeable(color, theme-secondary-color, lighten($dark-gray, 3%)); - } - } - .reaction-button, - .dropbtn { - border: 0px; - background: transparent; - cursor: pointer; - border-radius: 3px; - height: 32px; - display: block; - padding: 0px; - margin-left: 2px; - position: relative; - 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: 0.7em; - background: $light-gray; - padding: 1px 5px; - border-radius: 3px; - border: 1px solid darken($light-gray, 10%); - margin-left: 1px; - position: absolute; - top: 4px; - left: 24px; - } - img { - height: 21px; - width: 21px; - opacity: 0.62; - left: 0px; - &.dropdown-icon { - height: 18px; - width: 18px; - } - } - &:hover { - img { - opacity: 1; - } - } - .voted-heart { - display: none; - vertical-align: 0px; - margin-left: 0px; - height: 22px; - width: 22px; - opacity: 0.9; - &:hover { - opacity: 1; - } - } - @media screen and (min-width: 390px) { - vertical-align: -7px; - } - &.reacted { - color: $green; - img { - display: none; - } - .voted-heart { - display: inline-block; - } - .reactions-count { - color: $black; - font-weight: 500; - } - } - } - img.icon-image { - height: 20px; - } - - .actions { - font-size: 0.8em; - padding: 0.3em 0.6em 0.3em 0.4em; - text-align: right; - position: relative; - min-height: 1.2em; - z-index: 5; - text-transform: capitalize; - margin-left: 58px; - a.thread-indication { - color: lighten($medium-gray, 22%); - font-size: 0.8em; - cursor: default; - &:hover { - opacity: 1; - } - } - a.register-now-cta { - font-size: 1.4em; - background: lighten($yellow, 12%); - border: 1px solid darken($yellow, 15%); - box-shadow: 5px 6px 0px darken($yellow, 15%); - color: $black; - padding: 5px 10px; - margin-right: 8px; - vertical-align: 20px; - line-height: 1.8em; - } - .current-user-actions { - .hidden { - display: none; - } - a { - margin-right: 10px; - display: inline-block; - color: $medium-gray; - } - } - } - .inner-comment { - padding: 0px; - border: 1px solid $light-medium-gray; - background: var(--card-bg); - &.comment-created-via-fetch { - animation: comment-create 1.2s; - .body { - background-color: transparent; - } - } - } - .comment-read-more { - background: $green !important; - padding: 3px 6px; - display: block; - width: 250px; - text-align: center; - margin: auto; - border-radius: 3px; - margin-bottom: 20px; - font-weight: bold; - &:hover { - opacity: 1; - background: lighten($green, 5%) !important; - } - } -} - -@keyframes fadein { - 0% { - opacity: 0.5; - height: 21px; - width: 18px; - } - 100% { - opacity: 1; - height: 25px; - width: 22px; - } -} -@keyframes comment-create { - from { - background-color: $light-green; - } - to { - @include themeable(background-color, theme-container-background, #fff); - } -} - -#response-templates-data { - display: none; -} - -.comments-settings__row { - display: flex; - flex-direction: row; - justify-content: space-between; - grid-gap: var(--su-2); - - &--subtitle { - color: var(--base-60); - } -} diff --git a/app/assets/stylesheets/config/_generator.scss b/app/assets/stylesheets/config/_generator.scss index 8bd3b5ff2..40488e8b8 100644 --- a/app/assets/stylesheets/config/_generator.scss +++ b/app/assets/stylesheets/config/_generator.scss @@ -615,6 +615,7 @@ (), false ), + ('fs', 'font-style', ('italic': italic, 'normal': normal), (), false), ( 'text', 'text-transform', diff --git a/app/assets/stylesheets/fundamentals.scss b/app/assets/stylesheets/fundamentals.scss index 574a81ce2..571f60b23 100644 --- a/app/assets/stylesheets/fundamentals.scss +++ b/app/assets/stylesheets/fundamentals.scss @@ -1,5 +1,3 @@ -@import 'variables'; - #error_explanation { width: 100%; border: 2px solid #d94949; @@ -24,39 +22,3 @@ border-radius: 5px; } } - -// Remove post confirmation -.delete-confirm.container { - padding: 150px 10px; - min-height: 300px; - text-align: center; - h4 { - background: $black; - padding: 5px 8px; - color: $white; - display: inline-block; - margin-bottom: 0px; - border-radius: 3px; - } - h2 { - font-size: 22px; - margin-bottom: 40px; - } - a.delete-link { - background: $red; - color: white; - padding: 10px 15px; - &:hover { - color: white; - opacity: 0.9; - } - } - form button { - background: $red; - color: white; - font-size: 1.5em; - border: 0px; - border-radius: 3px; - padding: 6px 12px; - } -} diff --git a/app/assets/stylesheets/minimal.scss b/app/assets/stylesheets/minimal.scss index b64fd6518..170d150d1 100644 --- a/app/assets/stylesheets/minimal.scss +++ b/app/assets/stylesheets/minimal.scss @@ -9,7 +9,6 @@ @import 'podcast-episodes-show'; @import 'podcast-form'; @import 'user-profile-header'; -@import 'comments'; @import 'live'; @import 'preact/sidebar-widget'; @import 'preact/article-form'; diff --git a/app/assets/stylesheets/podcast-episodes-show.scss b/app/assets/stylesheets/podcast-episodes-show.scss index 9bc7aea51..9dcfc96f4 100644 --- a/app/assets/stylesheets/podcast-episodes-show.scss +++ b/app/assets/stylesheets/podcast-episodes-show.scss @@ -5,8 +5,6 @@ } .podcast-episode-container { - font-family: var(--ff-sans-serif); - .hero { padding-bottom: 30px; text-align: center; @@ -204,13 +202,6 @@ margin-bottom: 20px; } } - .body { - padding: calc(0.7vw + 4px) 0px calc(0.5vw + 2px); - font-family: var(--ff-sans-serif); - img { - min-height: 0px !important; - } - } } @keyframes spin { diff --git a/app/assets/stylesheets/views/comments.scss b/app/assets/stylesheets/views/comments.scss index 0b72597c1..e135db95c 100644 --- a/app/assets/stylesheets/views/comments.scss +++ b/app/assets/stylesheets/views/comments.scss @@ -1,10 +1,14 @@ @import '../config/import'; .comment-form { + --preview-display: none; + --field-display: flex; + display: flex; + margin-bottom: var(--su-4); &__field { - display: flex; + display: var(--field-display); flex: 1 auto; flex-direction: column; margin-bottom: var(--su-3); @@ -63,34 +67,192 @@ border: 1px solid var(--base-20); margin-bottom: var(--su-3); background: var(--card-bg); - } -} - -// temporary until we have new design for comments -.inner-comment { - &.replying { - .actions, - .reaction-button { - display: none; - } - } - - .comment-form { - margin: var(--su-6) var(--su-4) 0 var(--su-4); - } -} - -.comment-form { - .comment-form__preview { - display: none; + display: var(--preview-display); } &.preview-open { - .comment-form__preview { + --preview-display: block; + --field-display: none; + } +} + +.comment-wrapper { + --level-n-indent: var(--su-3); + --level-1-indent: var(--su-4); + + @media (min-width: $breakpoint-m) { + --level-n-indent: calc(var(--su-4) + var(--su-1)); + --level-1-indent: calc(var(--su-6) + var(--su-1)); + } + position: relative; + + > summary { + position: static; + display: block; + align-items: center; + transform: initial; + top: 0; + left: var(--indent); + cursor: pointer; + font-size: var(--fs-s); + color: var(--base-60); + margin-bottom: var(--su-4); + margin-left: var(--indent); + padding: var(--su-1) var(--su-2); + font-style: italic; + border-radius: var(--radius); + background: var(--base-0); + + .expanded { + display: none; + } + + .collapsed { display: block; } - .comment-form__field { + + &::-webkit-details-marker { display: none; } } + + &--deep-0 > summary { + --indent: 0; + } + + &--deep-1:not(.root) > summary { + --indent: var(--level-1-indent); + } + + &--deep-2:not(.root) > summary { + --indent: var(--level-n-indent); + } + + &[open] > summary { + position: absolute; + top: var(--su-8); + background: transparent; + width: auto; + padding: var(--su-1) 0; + margin-left: 0; + + @media (min-width: $breakpoint-s) { + // display: none; + } + + .expanded { + display: block; + } + + .collapsed { + display: none; + } + + .expanded, + .collapsed { + opacity: 0.5; + transition: all var(--transition-props); + } + } + + &[open]:hover { + > summary { + display: block; + } + + .expanded, + .collapsed { + opacity: 1; + } + } +} + +.comment { + --comment-gap: var(--su-4); + --dropdown-opacity: 0.5; + --footer-display: flex; + + @media (min-width: $breakpoint-m) { + --comment-gap: var(--su-6); + } + + &.child { + &:not(.comment--too-deep) { + padding-left: var(--level-n-indent); + } + &.comment--deep-1 { + padding-left: var(--level-1-indent); + } + } + + &__dropdown-trigger { + @media (min-width: $breakpoint-s) { + opacity: var(--dropdown-opacity); + } + } + + &__dropdown { + margin-left: auto; + margin-right: calc(-1 * var(--su-3)); + position: relative; + top: calc(-1 * var(--su-2)); + } + + &__inner { + display: flex; + align-items: flex-start; + margin-bottom: var(--comment-gap); + + &:hover, + &:focus-within { + --dropdown-opacity: 1; + } + } + + &__details { + padding-left: var(--su-2); + flex: 1 auto; + min-width: 0; + + &.replying { + --footer-display: none; + } + } + + &__content { + padding: var(--su-1); + border-radius: var(--radius); + } + + &__header { + display: flex; + align-items: center; + padding: var(--su-2) var(--su-3) 0; + font-size: var(--fs-s); + + @media (min-width: $breakpoint-m) { + font-size: var(--fs-base); + } + } + + &__body { + padding: 0 var(--su-3); + margin: var(--su-2) 0 var(--su-4); + } + + &__footer { + // border-top: 1px solid var(--base-10); + padding-top: var(--su-1); + display: var(--footer-display); + align-items: center; + } + + &__quality-marker { + border-bottom: 1px solid var(--base-10); + padding: var(--su-3); + padding-top: var(--su-2); + font-weight: var(--fw-medium); + display: flex; + align-items: center; + } } diff --git a/app/views/articles/_bottom_content.html.erb b/app/views/articles/_bottom_content.html.erb index 5aabf6fab..dc50b0a1a 100644 --- a/app/views/articles/_bottom_content.html.erb +++ b/app/views/articles/_bottom_content.html.erb @@ -1,6 +1,6 @@ <% if articles %>