diff --git a/app/assets/images/small-comment-filled.svg b/app/assets/images/small-comment-filled.svg new file mode 100644 index 000000000..6d350fae7 --- /dev/null +++ b/app/assets/images/small-comment-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/small-heart-filled.svg b/app/assets/images/small-heart-filled.svg new file mode 100644 index 000000000..0ac236523 --- /dev/null +++ b/app/assets/images/small-heart-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/small-link.svg b/app/assets/images/small-link.svg new file mode 100644 index 000000000..b2ca1c45b --- /dev/null +++ b/app/assets/images/small-link.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/javascripts/initializers/initNotifications.js b/app/assets/javascripts/initializers/initNotifications.js index 1879f0b89..fec5475da 100644 --- a/app/assets/javascripts/initializers/initNotifications.js +++ b/app/assets/javascripts/initializers/initNotifications.js @@ -109,8 +109,9 @@ function initReactions() { var thisButt = this; document .getElementById('comment-form-for-' + thisButt.dataset.reactableId) - .classList.add('showing'); - thisButt.innerHTML = ''; + .classList.remove('hidden'); + thisButt.classList.add('hidden'); + thisButt.classList.remove('inline-flex'); setTimeout(function () { document .getElementById( diff --git a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb index 2a49de7ab..8736ad4c3 100644 --- a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb +++ b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb @@ -238,7 +238,7 @@ function handleCommentSubmit(event) { } else if (document.getElementById("notifications-container")) { var newDiv = document.createElement("span") - newDiv.innerHTML = '
Reply sent — Check it out
' + newDiv.innerHTML = '
Reply sent — Check it out
' form.replaceWith(newDiv); } else { diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss index 60c3214eb..82d910a5d 100644 --- a/app/assets/stylesheets/base/layout.scss +++ b/app/assets/stylesheets/base/layout.scss @@ -47,6 +47,14 @@ width: var(--layout-sidebar-right-width); } + &__content { + // Hack preventing content exceeding its container - it works for scenarios where we have + // `pre` tag having wide (overflowing) text. And the container itself is part of a layout + // built using CSS `grid`. Without this, the grid layout wouldn't stick to its defined + // widths... + min-width: 0; + } + &__content__inner { margin: 0 auto; width: 100%; diff --git a/app/assets/stylesheets/base/typography.scss b/app/assets/stylesheets/base/typography.scss index 4b6b52d9d..4cbb2dbe1 100644 --- a/app/assets/stylesheets/base/typography.scss +++ b/app/assets/stylesheets/base/typography.scss @@ -5,6 +5,7 @@ --content-rythm: var(--su-2); --content-font-size: var(--fs-l); --content-secondary-font-size: var(--fs-base); + --content-tertiary-font-size: var(--fs-base); @media (min-width: $breakpoint-s) { --content-secondary-font-size: var(--fs-l); @@ -72,6 +73,10 @@ body { font-size: var(--content-secondary-font-size); } + &--tertiary { + font-size: var(--content-tertiary-font-size); + } + a { &.anchor { padding-top: 0; diff --git a/app/assets/stylesheets/components/cards.scss b/app/assets/stylesheets/components/cards.scss index ce7edac2d..fcfe923eb 100644 --- a/app/assets/stylesheets/components/cards.scss +++ b/app/assets/stylesheets/components/cards.scss @@ -13,6 +13,11 @@ box-shadow: 0 0 0 1px var(--card-secondary-border); } + &--elevated { + box-shadow: 0 0 0 1px var(--card-secondary-border), 0 1px 3px var(--base-a5), + 0 3px 9px var(--base-a5); + } + &__header { padding: var(--su-3) var(--su-4); border-bottom: 1px solid var(--body-bg); diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss index ceca22dc4..f07140f2e 100644 --- a/app/assets/stylesheets/config/_colors.scss +++ b/app/assets/stylesheets/config/_colors.scss @@ -223,4 +223,6 @@ --reaction-custom-bg: var(--accent-success-a10); --reaction-save-color: var(--accent-brand); --reaction-save-bg: var(--accent-brand-a10); + --reaction-comment-color: var(--accent-warning); + --reaction-comment-bg: var(--accent-warning-a10); } diff --git a/app/assets/stylesheets/minimal.scss b/app/assets/stylesheets/minimal.scss index 14093c382..619c30ff8 100644 --- a/app/assets/stylesheets/minimal.scss +++ b/app/assets/stylesheets/minimal.scss @@ -11,8 +11,6 @@ @import 'podcast-form'; @import 'user-profile-header'; @import 'comments'; -@import 'notifications'; -@import 'notifications-welcome-broadcast'; @import 'live'; @import 'preact/sidebar-widget'; @import 'preact/article-form'; diff --git a/app/assets/stylesheets/notifications-welcome-broadcast.scss b/app/assets/stylesheets/notifications-welcome-broadcast.scss deleted file mode 100644 index 2c40c83c6..000000000 --- a/app/assets/stylesheets/notifications-welcome-broadcast.scss +++ /dev/null @@ -1,20 +0,0 @@ -// TODO: [@forem/delightful]: Refactor nesting in this file -// in addition to notifications.scss so that the nesting is -// not as deep as it currently is -.notifications-index { - .home { - .articles-list { - .single-article { - .content { - &.broadcast-content { - .opt-out { - padding-top: 24px; - font-size: 12px; - font-style: italic; - } - } - } - } - } - } -} diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss deleted file mode 100644 index 2499f72d6..000000000 --- a/app/assets/stylesheets/notifications.scss +++ /dev/null @@ -1,603 +0,0 @@ -@import 'variables'; -@import 'mixins'; -@import 'functions'; -@import 'config/import'; - -.notifications-index { - .home { - overflow: initial; - - .articles-list { - .signup-cue { - padding: 30px 25px; - background: white; - border-radius: 6px; - box-shadow: 0px 3px 9px #d4dce4; - hr { - margin: 30px auto 15px; - } - a.sign-up-link { - display: inline-block; - border: 1px solid $medium-gray; - padding: 4px 8px; - border-radius: 3px; - margin: 20px 6px; - img { - width: 18px; - vertical-align: -1px; - } - } - } - // TODO: [@forem/delightful]: Remove .signup-cue-advanced and .sloan - // from stylesheet since it does not appear to be used anywhere - .signup-cue-advanced { - text-align: left; - padding: 30px 25px; - .sloan { - height: calc(5vw + 200px); - margin: 10px auto 30px; - display: block; - } - } - .single-article { - .reaction-images { - display: inline-block; - } - .reaction-image { - width: 21px; - height: 21px; - vertical-align: -4px; - } - .content { - padding-bottom: 18px; - line-height: 1.35em; - &.notification-content { - a { - color: $sky-blue; - font-weight: 500; - } - } - &.reaction-content { - width: calc(100% - 145px); - } - &.badge-content { - margin: auto; - width: 98%; - display: block; - text-align: center; - .badge-title { - margin: 6px auto; - width: 90%; - font-size: 1.3em; - } - p.badge-description { - margin: 10px auto; - width: 90%; - @include themeable(color, theme-secondary-color, #666666); - &.milestone-emojis { - font-size: xx-large; - padding-top: 10px; - padding-bottom: 0px; - } - } - img.badge-image { - margin: 10px 0px 20px; - height: 150px; - } - img.milestone-gif { - margin: 10px 0px 10px; - border-radius: 8px; - width: 300px; - } - hr.minimal-divider { - width: 90px; - opacity: 0.4; - margin: 18px auto 22px; - } - p.badge-reward-message { - margin: 8px auto; - width: 90%; - color: var(--body-color); - } - p.badge-credit-message { - margin: 8px auto; - width: 100%; - color: var(--body-color); - font-size: 0.94em; - line-height: 1.35em; - strong a { - font-weight: 700; - } - } - } - .follow-action-button { - display: block; - color: white; - background: $sky-blue; - border: 2px solid $sky-blue; - border-radius: 3px; - font-size: 1.1em; - margin-top: 0.3em; - padding: 2px 10px; - min-height: 33px; - min-width: 150px; - &.following-butt { - background: $sky-blue; - color: white; - } - &:hover { - border: 2px solid darken($sky-blue, 5%); - } - &.badge-button { - margin-bottom: 12px; - display: inline-block; - } - } - .mod-instructions { - font-size: 0.9em; - background: darken($light-gray, 1%); - border: 1px solid darken($light-gray, 12%); - width: 80%; - padding: 10px 0px 10px 35px; - border-radius: 3px; - } - .notification-comment-reacted-link { - vertical-align: middle; - padding: 2px 6px; - border: 1px solid lighten($medium-gray, 9%); - border-radius: 3px; - max-width: 100%; - display: inline-block; - margin-bottom: 3px; - overflow: hidden; - text-overflow: ellipsis; - &:hover { - @include themeable( - background, - theme-container-background-hover, - lighten($blue, 57%) - ); - border: 1px solid lighten($sky-blue, 17%); - } - } - .notification-new-post { - padding: 12px 10px; - margin-top: 10px; - border: 1px solid lighten($dark-gray, 18%); - border-radius: 3px; - color: var(--body-color); - position: relative; - .notification-new-post-title { - font-size: 1.7em; - word-wrap: break-word; - line-height: 1.06em; - } - .notification-new-post-tags { - margin-top: 6px; - @include themeable(color, theme-color, $medium-gray); - } - } - .footnote { - font-size: 0.8em; - opacity: 0.9; - } - .follower-pic-row { - display: inline-block; - } - } - .comment-link-wrapper { - display: block; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - } - .comment-text { - padding: 10px; - margin-top: 10px; - border: 1px solid lighten($dark-gray, 18%); - border-radius: 3px; - color: var(--body-color); - position: relative; - .comment-text-header { - display: block; - padding: 5px 10px; - margin-left: -10px; - margin-top: -10px; - margin-bottom: 8px; - border-bottom: 1px solid lighten($dark-gray, 18%); - width: 100%; - font-weight: bold; - font-size: 0.76em; - position: relative; - z-index: 6; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - @include themeable( - background, - theme-container-accent-background, - lighten($lightest-gray, 1%) - ); - } - &:hover { - border: 1px solid $black; - } - h1, - h2, - h3, - h4, - h5, - h6 { - font-size: 1.2em; - } - p { - color: var(--body-color); - width: 99%; - padding: 0; - margin-left: 0; - } - img { - max-width: 100%; - max-height: 400px; - } - blockquote { - border-left: calc(0.2vw + 2px) solid $dark-gray; - padding: 0.1% 6% 0.1% 2%; - margin-left: 0.5rem; - } - } - .comment-actions { - position: relative; - button { - background: transparent; - border: 0px; - margin-top: 5px; - margin-left: -5px; - margin-right: 3px; - height: 30px; - width: 45px; - padding: 3px 0px; - overflow-y: hidden; - -webkit-appearance: none; - .reacted-emoji { - display: none; - } - &.readinglist-button { - background: darken($purple, 26%); - color: white; - font-family: $helvetica-condensed; - height: auto; - width: auto; - padding: 3px 7px; - display: inline-block; - vertical-align: 5px; - font-size: 17px; - border-radius: 3px; - float: right; - img { - opacity: 1; - } - &.reacted { - vertical-align: 0px; - padding: 3px 7px 1px; - } - } - &.reacted { - background: transparent; - .reacted-emoji { - display: inline; - } - .reaction-button-text { - display: none; - } - img { - display: none; - } - } - } - img { - height: 25px; - width: 25px; - opacity: 0.7; - &:hover { - opacity: 1; - } - } - .toggle-reply-form { - position: absolute; - right: 5px; - bottom: 8px; - font-weight: 300; - font-family: $helvetica-condensed; - font-stretch: condensed; - color: $bold-blue; - &.already-replied-link { - color: $green; - } - } - } - .reply-sent-notice { - @include themeable( - background, - theme-container-background, - $light-green - ); - text-align: center; - padding: 10px 0px; - a { - display: inline-block; - background: $green; - color: white !important; - padding: 3px 8px; - border-radius: 3px; - } - } - form { - width: 104%; - background: $light-gray; - overflow: auto; - position: relative; - margin-bottom: calc(0.8vw - 6px); - z-index: 4; - margin-left: -2%; - border-top: 1px solid $light-medium-gray; - text-align: right; - display: none; - margin-top: 4px; - @include themeable( - background, - theme-container-accent-background, - $light-gray - ); - &.showing { - display: block; - } - &.submitting { - input[type='submit'] { - background: #00bbff; - } - textarea { - color: lighten($dark-gray, 25%); - border: 1px solid $light-green; - background: #fff url(image-src('loading-ellipsis.svg')) no-repeat - center center; - background-size: 50px; - } - } - @media screen and (min-width: 820px) { - width: 100%; - margin-left: 0%; - border-radius: 3px; - @include themeable( - border, - theme-container-border, - 1px solid rgb(232, 229, 229) - ); - } - - .field { - margin-bottom: 0px; - } - textarea { - width: 92%; - margin: 15px auto 2px; - display: block; - resize: none; - border-radius: 3px; - height: 55px; - font-size: 16px; - padding: 6px; - transition: height 0.3s ease; - height: calc(2vw + 120px); - @include themeable( - border, - theme-container-background, - 1px solid rgb(232, 229, 229) - ); - background: var(--card-bg); - color: var(--body-color); - } - input[type='submit'] { - margin-right: 15px; - background: rgb(0, 146, 228); - color: white; - border: 0px; - font-size: 11px; - font-weight: 500; - margin-top: 3px; - padding: 5px 12px; - border-radius: 3px; - appearance: none; - } - } - } - .single-notification { - cursor: default; - } - .unseen { - @include themeable( - background, - theme-container-accent-background, - $light-purple - ); - } - } - } - - .load-more-wrapper { - clear: both; - - @include load-more; - } -} - -.notification-nav { - margin-bottom: var(--su-4); - - &:last-child { - margin-bottom: 0; - } - - header { - color: var(--base-80); - } - - .crayons-link { - margin-bottom: var(--su-1); - - &:last-child { - margin-bottom: 0; - } - } -} - -.notifications-filter__list { - li { - margin-bottom: var(--su-1); - - &:last-child { - margin-bottom: 0; - } - } - - &--item { - align-items: center; - border-radius: var(--radius); - box-sizing: border-box; - color: var(--card-color); - display: inline-flex; - font-weight: var(--fw-medium); - justify-content: space-between; - padding: var(--su-2); - width: 100%; - - &:hover { - background: var(--base-10); - } - - &.selected { - background: var(--base-10); - - .notifications-filter__icon { - visibility: visible; - } - } - } -} - -.notifications-filter__dropdown { - display: none; - - @media screen and (max-width: 950px) { - display: block; - } - - &__menu-overlay { - display: none; - - &.showing { - display: flex; - } - - &:before { - content: ''; - position: fixed; - left: 0; - right: 0; - top: 0; - right: 0; - height: 100%; - width: 100%; - background: rgba(0, 0, 0, 0.5); - z-index: 499; - } - } - - &__header { - padding: var(--su-3) var(--su-4); - } - - &__title { - font-weight: var(--fw-bold); - } - - &__menu { - display: flex; - background: var(--base-inverted); - flex-direction: column; - position: absolute; - width: 100%; - left: 0; - right: 0; - z-index: 500; - } - - &__select { - appearance: none; - border: none; - display: flex; - align-items: center; - padding: var(--su-4); - justify-content: center; - font-weight: var(--fw-bold); - width: 100%; - font-family: var(--ff-sans-serif); - - &:hover &:active { - background-color: var(--base-10); - } - } - - &__icon { - visibility: hidden; - } - - &__option { - align-items: center; - display: flex; - justify-content: space-between; - padding: var(--su-3) var(--su-4); - - &:hover, - &:active, - &:focus { - background-color: var(--base-10); - } - - &.selected { - } - } - - &__label { - display: flex; - flex-direction: column; - align-items: baseline; - } - - &__label--title { - font-weight: var(--fw-medium); - font-size: var(--fs-base); - } - - &__label--subtitle { - color: var(--base-60); - font-size: var(--fs-s); - } -} - -.notifications-filter__list, -.notifications-filter__dropdown { - .notifications-filter__icon { - visibility: hidden; - } - - .selected { - .notifications-filter__icon { - visibility: visible; - } - } -} diff --git a/app/assets/stylesheets/views.scss b/app/assets/stylesheets/views.scss index 928f2235d..ade82102f 100644 --- a/app/assets/stylesheets/views.scss +++ b/app/assets/stylesheets/views.scss @@ -4,6 +4,7 @@ @import 'views/footer'; @import 'views/listings'; @import 'views/dashboard'; +@import 'views/notifications'; @import 'views/profile'; @import 'views/mod-actions'; @import 'views/mod-center'; diff --git a/app/assets/stylesheets/views/notifications.scss b/app/assets/stylesheets/views/notifications.scss new file mode 100644 index 000000000..67f9b674f --- /dev/null +++ b/app/assets/stylesheets/views/notifications.scss @@ -0,0 +1,167 @@ +@import '../config/import'; + +.notification { + --unseen-border-width: 0px; + --padding: var(--su-3); + padding: var(--padding); + padding-left: calc(var(--padding) - var(--unseen-border-width)); + + display: flex; + color: var(--base-80); + border-radius: 0; + + @media (min-width: $breakpoint-s) { + --padding: var(--su-4); + } + @media (min-width: $breakpoint-m) { + --padding: var(--su-5); + border-radius: var(--radius); + } + + &--middle { + align-items: center; + } + + &--promoted { + text-align: center; + flex-direction: column; + align-items: center; + padding: var(--su-5); + + @media (min-width: $breakpoint-m) { + padding: var(--su-8); + } + } + + &__content { + padding-left: var(--su-4); + flex: 1 auto; + // Hack preventing content exceeding its container - it works for scenarios where we have + // `pre` tag having wide (overflowing) text. And the container itself is part of a layout + // built using CSS `grid`. Without this, the grid layout wouldn't stick to its defined + // widths... + min-width: 0; + } + + &__mod-controls { + padding: var(--su-1); + display: flex; + align-items: center; + font-size: var(--fs-s); + position: absolute; + right: calc(var(--su-2) * -1); + top: calc(var(--su-3) * -1); + border-radius: 9999px; + } + + &__actions { + border-top: 1px solid var(--base-10); + padding-top: var(--su-1); + display: flex; + } + + &__reply-title { + border-radius: var(--radius) var(--radius) 0 0; + margin-bottom: var(--su-1); + padding: var(--su-2) var(--su-3); + font-size: var(--fs-s); + background: var(--base-a5); + margin-left: var(--su-2); + display: inline-block; + max-width: 80%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + vertical-align: middle; + font-weight: var(--fw-medium); + } + + &__preview { + padding: var(--su-1); + + &__title { + font-size: var(--fs-xl); + line-height: var(--lh-tight); + margin-bottom: var(--su-2); + + @media (min-width: $breakpoint-m) { + font-size: var(--fs-2xl); + } + } + } + + .unseen & { + --unseen-border-width: 4px; + + @media (min-width: $breakpoint-l) { + --unseen-border-width: 8px; + } + + border-left: var(--unseen-border-width) solid var(--accent-brand); + } +} + +////////////////////////////////////////////// +// TODO: ///////////////////////////////////// +////////////////////////////////////////////// +// // +// Dear Paweł, // +// You can do it better. // +// // +// Sincerely yours, Paweł. // +// // +////////////////////////////////////////////// + +.reaction-icon--like { + color: var(--reaction-like-color); +} +.reaction-icon--unicorn { + color: var(--reaction-custom-color); +} +.reaction-icon--readinglist { + color: var(--reaction-save-color); +} +.reaction-icon--comment { + color: var(--reaction-comment-color); +} + +.crayons-btn--ghost { + &.reaction-like { + &.reacted { + --bg: var(--reaction-like-bg); + --bg-hover: var(--reaction-like-bg); + } + } + + &.reaction-comment { + &.reacted { + --bg: var(--reaction-comment-bg); + --bg-hover: var(--reaction-comment-bg); + } + } + + &.reaction-readinglist { + &.reacted { + --bg: var(--reaction-save-bg); + --bg-hover: var(--reaction-save-bg); + } + } + + .reaction-icon { + --not-reacted-display: inline-block; + --reacted-display: none; + &.not-reacted { + display: var(--not-reacted-display); + } + &.reacted { + display: var(--reacted-display); + } + } + + &.reacted { + .reaction-icon { + --not-reacted-display: none; + --reacted-display: inline-block; + } + } +} diff --git a/app/labor/reaction_image.rb b/app/labor/reaction_image.rb index 93d8fd78e..56ac9ba80 100644 --- a/app/labor/reaction_image.rb +++ b/app/labor/reaction_image.rb @@ -7,11 +7,11 @@ class ReactionImage def path images = { - "like" => "emoji/emoji-one-heart.png", - "unicorn" => "emoji/emoji-one-unicorn.png", + "like" => "heart-filled.svg", + "unicorn" => "unicorn-filled.svg", "hands" => "emoji/emoji-one-hands.png", "thinking" => "emoji/emoji-one-thinking.png", - "readinglist" => "emoji/emoji-one-bookmark.png", + "readinglist" => "save-filled.svg", "thumbsdown" => "emoji/emoji-one-thumbs-down.png", "vomit" => "emoji/emoji-one-nausea-face.png" }.freeze diff --git a/app/views/notifications/_aggregated_reactions.html.erb b/app/views/notifications/_aggregated_reactions.html.erb index 0b605d8fa..d681ca3f6 100644 --- a/app/views/notifications/_aggregated_reactions.html.erb +++ b/app/views/notifications/_aggregated_reactions.html.erb @@ -1,34 +1,45 @@ <%# TODO: change to map of IDs %> <% actors = siblings.map { |n| n["user"] }.uniq %> <% reactable_data = notification.json_data["reaction"]["reactable"] %> -" class="small-pic-link-wrapper"> -
- " alt="link to <%= actors.first["username"] %>'s profile"> -
-
-
+
<% if actors.size == 1 %> - "><%= actors.first["name"] %> - <% elsif actors.size == 2 %> - "><%= actors.first["name"] %> and - "><%= actors.last["name"] %> - <% elsif actors.size > 1 %> - "><%= actors.first["name"] %> and <%= pluralize(actors.size - 1, "other") %> + " class="crayons-avatar crayons-avatar--xl"> + " class="crayons-avatar__image" alt="link to <%= actors.first["username"] %>'s profile" width="48" height="48"> + + <% else %> + " class="crayons-avatar crayons-avatar--l mr-4"> + " class="crayons-avatar__image" alt="link to <%= actors.first["username"] %>'s profile" width="48" height="48"> + + " class="crayons-avatar crayons-avatar--l absolute -right-1 -bottom-3 border-solid border-2 border-base-inverted"> + " class="crayons-avatar__image" alt="link to <%= actors.last["username"] %>'s profile" width="48" height="48"> + + <% end %> +
+ +
+ + <% if actors.size == 1 %> + " class="crayons-link fw-bold"><%= actors.first["name"] %> + <% elsif actors.size == 2 %> + " class="crayons-link fw-bold"><%= actors.first["name"] %> and + " class="crayons-link fw-bold"><%= actors.last["name"] %> + <% elsif actors.size > 1 %> + " class="crayons-link fw-bold"><%= actors.first["name"] %> and <%= pluralize(actors.size - 1, "other") %> + <% end %> + reacted to + " class="crayons-link fw-bold"> + <%# your article/comment or the actual title of the article/comment %> + <%= reactable_data["title"].blank? ? "your #{reactable_data['class']['name'].downcase}" : h(reactable_data["title"]) %> + + with + + + <% reaction_categories = siblings.map { |n| n["category"] } %> + <% reaction_categories.each do |cat| %> + <% image_path = ReactionImage.new(cat).path %> + <% if image_path.present? %> + <%= inline_svg_tag(image_path, aria: true, class: "crayons-icon reaction-image mx-1 my-1 reaction-icon--#{cat}", title: cat.to_s.humanize) %> + <% end %> <% end %> - reacted to - " class="notification-comment-reacted-link"> - <%# your article/comment or the actual title of the article/comment %> - <%= reactable_data["title"].blank? ? "your #{reactable_data['class']['name'].downcase}" : h(reactable_data["title"]) %> - - - with - <% reaction_categories = siblings.map { |n| n["category"] } %> - <% reaction_categories.each do |cat| %> - <% image_path = ReactionImage.new(cat).path %> - <% if image_path.present? %> - <%= image_tag(image_path, class: "reaction-image", alt: cat.to_s.humanize) %> - <% end %> - <% end %> -
diff --git a/app/views/notifications/_article.html.erb b/app/views/notifications/_article.html.erb index cdfdbc28a..76543f4ad 100644 --- a/app/views/notifications/_article.html.erb +++ b/app/views/notifications/_article.html.erb @@ -1,59 +1,60 @@ -<% if notification.action == "Reaction" %> - <%= render "reaction", notification: notification %> -<% elsif notification.action.include? "Milestone" %> - <%= render "milestone", notification: notification %> -<% else %> - <% json_data = notification.json_data %> - <% if json_data["organization"] %> -
- "> - <%= json_data[ logo" src="<%= json_data["organization"]["profile_image_90"] %>"> - <%= json_data["organization"]["name"] %> - -
- <% end %> - " class="small-pic-link-wrapper"> -
- " alt="link to <%= json_data["user"]["username"] %>'s profile"> -
-
-
- "> - <%= json_data["user"]["name"] %> - - made a new post<%= ":" unless json_data["organization"] %> - <% if json_data["organization"] %> - under "><%= json_data["organization"]["name"] %>: - <% end %> +
+ <% if notification.action == "Reaction" %> + <%= render "reaction", notification: notification %> + <% elsif notification.action.include? "Milestone" %> + <%= render "milestone", notification: notification %> + <% else %> + <% json_data = notification.json_data %> + <%= render "notifications/shared/profile_pic", json_data: json_data %> -
- <%= time_ago_in_words json_data["article"]["published_at"] %> ago -
- - "> -
-
- <%= h(json_data["article"]["title"]) %> -
-
- + +

<%= time_ago_in_words json_data["article"]["published_at"] %> ago

+ - <% cache "activity-published-article-reactions-#{@last_user_reaction}-#{json_data['article']['updated_at']}-#{json_data['article']['id']}" do %> -
- - -
- <% end %> -
-<% end %> +
+ " class="crayons-link block p-3 pb-4"> +

<%= h(json_data["article"]["title"]) %>

+
+ <% json_data["article"]["cached_tag_list_array"].each do |tag| %> + #<%= tag %> + <% end %> +
+
+ + <% cache "activity-published-article-reactions-#{@last_user_reaction}-#{json_data['article']['updated_at']}-#{json_data['article']['id']}" do %> +
+ + + +
+ <% end %> +
+
+ <% end %> +
diff --git a/app/views/notifications/_badgeachievement.html.erb b/app/views/notifications/_badgeachievement.html.erb index 471bb00f8..6db456113 100644 --- a/app/views/notifications/_badgeachievement.html.erb +++ b/app/views/notifications/_badgeachievement.html.erb @@ -1,30 +1,20 @@ <% json_data = notification.json_data %> -
+
<% cache "activity-badge-reward-#{json_data['badge_achievement']['badge_id']}" do %> -
- You received the <%= sanitize(json_data["badge_achievement"]["badge"]["title"]) %> badge +
+

+ You received the <%= sanitize(json_data["badge_achievement"]["badge"]["title"]) %> badge +

+

<%= json_data["badge_achievement"]["badge"]["description"] %>

+
+ +
+ " alt="<%= json_data["badge_achievement"]["badge"]["title"] %>"> +

<%= json_data["badge_achievement"]["rewarding_context_message"].html_safe %>

-

- <%= json_data["badge_achievement"]["badge"]["description"] %> -

- " alt="<%= json_data["badge_achievement"]["badge"]["title"] %>"> <% end %> -

- - <%= json_data["badge_achievement"]["rewarding_context_message"].html_safe %> - -

- "> - - -
-

- You also get 5 new credits to use for community listings
- if you have anything you'd like to promote. 🎉 -

-

- More information about listings -

+ +

" class="crayons-btn w-100 m:w-50">Visit your profile

+

You also get 5 new credits to use for community listings if you have anything you'd like to promote. 🎉

+

More information about listings

diff --git a/app/views/notifications/_broadcast.html.erb b/app/views/notifications/_broadcast.html.erb index 3f1daafa8..e84b6f1d5 100644 --- a/app/views/notifications/_broadcast.html.erb +++ b/app/views/notifications/_broadcast.html.erb @@ -1,16 +1,16 @@ -<% json_data = notification.json_data %> -<% user = User.find_by(id: json_data["user"]["id"]) %> -<% cache "broadcast-html-#{notification.json_data['broadcast']['title']}" do %> - " class="small-pic-link-wrapper"> -
- link to <%= json_data['s profile"> -
-
-
"> - <%= json_data["broadcast"]["processed_html"].html_safe %> +
+ <% json_data = notification.json_data %> + <% user = User.find_by(id: json_data["user"]["id"]) %> + <% cache "broadcast-html-#{notification.json_data['broadcast']['title']}" do %> + " class="crayons-avatar crayons-avatar--3xl shrink-0 mb-6"> + link to <%= json_data['s profile" width="48" height="48"> + +
"> + <%= json_data["broadcast"]["processed_html"].html_safe %> - <% if notification.json_data['broadcast']['type_of'] == "Welcome" %> - - <% end %> -
-<% end %> + <% if notification.json_data['broadcast']['type_of'] == "Welcome" %> +

Visit Settings to manage your notifications.

+ <% end %> +
+ <% end %> +
diff --git a/app/views/notifications/_comment.html.erb b/app/views/notifications/_comment.html.erb index 688e89d7f..816900fa8 100644 --- a/app/views/notifications/_comment.html.erb +++ b/app/views/notifications/_comment.html.erb @@ -1,56 +1,68 @@ -<% if notification.action == "Reaction" %> - <%= render "reaction", notification: notification %> -<% else %> - <% json_data = notification.json_data %> - <% cache "activity-profile-pic-#{json_data['user']['id']}-#{json_data['user']['profile_image_90']}" do %> - " class="small-pic-link-wrapper"> -
- " alt="link to <%= json_data["user"]["username"] %>'s profile"> -
-
- <% end %> -
- <% if notification.action.blank? %> - "><%= json_data["user"]["name"] %> - <% if json_data["comment"]["depth"] && json_data["comment"]["depth"] > 0 %> - replied to a thread in - <% else %> - commented on - <% end %> - "> - <%= h(json_data["comment"]["commentable"]["title"]) %> - - <% if json_data["comment"]["created_at"] %> -
- <%= time_ago_in_words json_data["comment"]["created_at"] %> ago -
- <% end %> - <%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "default" %> - <% elsif notification.action == "Moderation" %> - ">@<%= json_data["comment"]["path"].split("/")[1] %> just left a comment. Since they are new to the community, could you leave a nice reply to help them feel welcome? - Thank you! -

- Alternatively, if this comment violates the code of conduct, please downvote/report as appropriate. -

- re: - "> - <%= h(json_data["comment"]["commentable"]["title"]) %> - - <%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "moderation" %> -
-
All negative reactions are 100% private.
- <% elsif notification.action == "First" %> - "><%= json_data["user"]["name"] %> - wrote their first comment on: - "> - <%= h(json_data["comment"]["commentable"]["title"]) %> - -
- <%= time_ago_in_words notification.created_at %> ago -
- <%= render "notifications/shared/comment_box", activity: activity, context: "moderation" %> - Give them their first reply! 🎉 -
+
+ <% if notification.action == "Reaction" %> + <%= render "reaction", notification: notification %> + <% else %> + <% json_data = notification.json_data %> + <% cache "activity-profile-pic-#{json_data['user']['id']}-#{json_data['user']['profile_image_90']}" do %> + <%= render "notifications/shared/profile_pic", json_data: json_data %> <% end %> -
-<% end %> + +
+ <% if notification.action.blank? %> + <% if json_data["comment"]["created_at"] %> +
+

+ " class="crayons-link fw-bold"> + <%= json_data["user"]["name"] %> + + <% if json_data["comment"]["depth"] && json_data["comment"]["depth"] > 0 %> + replied to a thread in + <% else %> + commented on + <% end %> + " class="crayons-link fw-bold"> + <%= h(json_data["comment"]["commentable"]["title"]) %> + +

+

" class="crayons-link fs-s crayons-link--secondary"><%= time_ago_in_words json_data["comment"]["created_at"] %> ago

+
+ <% end %> + + <%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "default" %> + + <% elsif notification.action == "Moderation" %> +
+

+ " class="crayons-link fw-bold"><%= json_data["comment"]["path"].split("/")[1] %> + just left a comment on + " class="crayons-link fw-bold"> + <%= h(json_data["comment"]["commentable"]["title"]) %> + . +

+

Since they are new to the community, could you leave a nice reply to help them feel welcome? Thank you!

+
+ + <%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "moderation" %> + +

All negative reactions are 100% private. If this comment violates the code of conduct, please downvote/report as inappropriate.

+ + <% elsif notification.action == "First" %> +
+

+ " class="crayons-link fw-bold"><%= json_data["user"]["name"] %> + wrote their first comment on + " class="crayons-link fw-bold"> + <%= h(json_data["comment"]["commentable"]["title"]) %> + +

+

<%= time_ago_in_words notification.created_at %> ago

+ +

Give them their first reply! 🎉

+
+ + <%= render "notifications/shared/comment_box", activity: activity, context: "moderation" %> + + <% end %> +
+ <% end %> +
diff --git a/app/views/notifications/_follow.html.erb b/app/views/notifications/_follow.html.erb index 9b485ea08..307895416 100644 --- a/app/views/notifications/_follow.html.erb +++ b/app/views/notifications/_follow.html.erb @@ -1,44 +1,36 @@ -<% first_notification = notification.json_data["aggregated_siblings"].first %> -<% cache "activity-profile-pic-#{first_notification['id']}-#{first_notification['profile_image_90']}" do %> - " class="small-pic-link-wrapper"> -
- " alt="link to <%= first_notification["username"] %>'s profile"> -
-
-<% end %> - -
+
notification--middle <% else %> flex-col items-center <% end %>"> <% if notification.json_data["aggregated_siblings"].length == 1 %> - <% cache "activity-follow-button-#{first_notification['path']}-#{first_notification['name']}" do %> - "><%= first_notification["name"] %> followed you! - <%= follow_button(notification.decorate.mocked_object("user"), "follow-back") %> + <% first_notification = notification.json_data["aggregated_siblings"].first %> + <% cache "activity-profile-pic-#{first_notification['id']}-#{first_notification['profile_image_90']}" do %> + " class="crayons-avatar <% if notification.json_data["aggregated_siblings"].length == 1 %>crayons-avatar--xl<% else %>crayons-avatar--l<% end %> shrink-0"> + " class="crayons-avatar__image" alt="link to <%= first_notification["username"] %>'s profile" width="48" height="48"> + <% end %> - <% elsif notification.json_data["aggregated_siblings"].length == 2 %> - <% json_data_array = notification["json_data"]["aggregated_siblings"] %> - -
- - <% else %> -
- <% notification.json_data["aggregated_siblings"][1..10].each do |sibling| %> -
- "> - " alt="link to <%= sibling["name"] %>'s profile" class="round"> - +
+ <% cache "activity-follow-button-#{first_notification['path']}-#{first_notification['name']}" do %> +
+

" class="crayons-link fw-bold"><%= first_notification["name"] %> followed you!

+ <%= follow_button(notification.decorate.mocked_object("user"), "follow-back") %>
<% end %>
-
- "><%= first_notification["name"] %> - and <%= notification.json_data["aggregated_siblings"].size - 1 %> others followed you! + <% else %> + <% json_data_array = notification["json_data"]["aggregated_siblings"] %> + +

+ <% if notification.json_data["aggregated_siblings"].length == 2 %> + " class="crayons-link fw-bold"><%= json_data_array.first["name"] %> and + " class="crayons-link fw-bold"><%= json_data_array.second["name"] %> followed you! + <% else %> + " class="crayons-link fw-bold"><%= json_data_array.first["name"] %> + and <%= notification.json_data["aggregated_siblings"].size - 1 %> others followed you! + <% end %> +

<% end %>
diff --git a/app/views/notifications/_mention.html.erb b/app/views/notifications/_mention.html.erb index f72dea29f..a911cf5db 100644 --- a/app/views/notifications/_mention.html.erb +++ b/app/views/notifications/_mention.html.erb @@ -1,14 +1,13 @@ -<% json_data = notification.json_data %> -<% cache "activity-profile-pic-#{json_data['user']['id']}-#{json_data['user']['profile_image_90']}" do %> - " class="small-pic-link-wrapper"> -
- " alt="link to <%= json_data["user"]["username"] %>'s profile"> -
-
-<% end %> +
+ <% json_data = notification.json_data %> + <% cache "activity-profile-pic-#{json_data['user']['id']}-#{json_data['user']['profile_image_90']}" do %> + <%= render "notifications/shared/profile_pic", json_data: json_data %> + <% end %> -<%# below links to comment thread %> -
- "><%= json_data["user"]["name"] %> mentioned you in a comment - <%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "default" %> +
+

+ " class="crayons-link fw-bold"><%= json_data["user"]["name"] %> mentioned you in a comment +

+ <%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "default" %> +
diff --git a/app/views/notifications/_milestone.html.erb b/app/views/notifications/_milestone.html.erb index 96ce5dc6e..6844ca25d 100644 --- a/app/views/notifications/_milestone.html.erb +++ b/app/views/notifications/_milestone.html.erb @@ -1,18 +1,16 @@ <% json_data = notification.json_data %> -
-
+
+

🎉🎉🎉🎉🎉🎉🎉🎉

+

Your post - "><%= h(json_data["article"]["title"]) %> passed <%= notification.milestone_count %> <%= notification.milestone_type.pluralize.downcase %>! -

-

🎉🎉🎉🎉🎉🎉🎉🎉

+ " class="crayons-link fw-bold"><%= h(json_data["article"]["title"]) %> passed <%= notification.milestone_count %> <%= notification.milestone_type.pluralize.downcase %>! + - " rel="noopener noreferrer" target="_blank"> - px;" class="milestone-gif" src="https://media.giphy.com/media/<%= json_data["gif_id"] %>/giphy-downsized.gif" alt="A random celebratory gif!"> + " rel="noopener noreferrer" class="block my-4" target="_blank"> + /giphy-downsized.gif" alt="A random celebratory gif!"> -
- - + + + Check your dashboard
diff --git a/app/views/notifications/_nav_menu.html.erb b/app/views/notifications/_nav_menu.html.erb index c0ace6736..c43c3a8c2 100644 --- a/app/views/notifications/_nav_menu.html.erb +++ b/app/views/notifications/_nav_menu.html.erb @@ -1,27 +1,64 @@ -