From 7475716662dd9ba9bd5182de22266db58b14fd30 Mon Sep 17 00:00:00 2001 From: Lisa Sy Date: Wed, 15 Jul 2020 09:54:19 -0700 Subject: [PATCH] Make small CSS improvements to mod center (#9315) [deploy] MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update mod center layout & color fixes * Update SVG for external link * - Update external link svg to use - Remove scrollbar in actions menu - Move action panel styling from `articles.scss` to `moderators.scss` * Delete schema.rb * Add back schema file * SiteConfig view refactoring (#9286) * Clean up payment pointer in top shell * Simplify handling of social media icons * Also guard against empty strings * Only traverse hash once * Adds a default value to the shell version cache response in case it returns undefined (#9250) * [deploy] 🐞 Hotfix Real time chat was broken (#9293) * Feature 🚀 : Ability to delete messages in chat channels - Sending message ID to frontend - Deleting Message - Use pusher to delete message realtime * Minor Bug 🐞: Show message action only for current user - User can delete or edit their own messages * Test cases added * Bug 🐞: Update message id for receiver Message id was not sent to receiver by pusher * Refactoring🛠: Message controller refactoring * Test Cases📝 : Specs for Delete message added * Feature 🚀 : Ability to edit messages * Test Cases📝 : Specs for Edit message added * Merge conflict resolved * 🐞Hotfix: Findinder error in chat Co-authored-by: Narender Singh * Bump jsdom from 16.2.2 to 16.3.0 (#9279) * Fix TypeError: userData is null in blockButton.js (#9299) Should fix https://app.honeybadger.io/fault/67192/ed6f6b392b5bd791d6dc04732f125123. * Fix TypeError: userData is null in initializeOnboardingTaskCard.js (#9298) [deploy] * Fix TypeError: userData is null in initializeOnboardingTaskCard.js Should fix https://app.honeybadger.io/fault/67192/65045742fda3390a067960f53a894e87. * Combine return statements in initializeOnboardingTaskCard * Fix TypeError: null is not an object in initializeArticleReactions.js (#9297) [deploy] * Fix TypeError: null is not an object in initializeArticleReactions.js Should fix https://app.honeybadger.io/fault/67192/6f9b4fdf475e2229c968fa26d785b90f * Return 0 rather than undefined if reactionEl doesn't exist * Routine Rubocop fixes (#9302) * rubocop -A * rubocop --auto-gen-config * Fix sorting in Bundler/OrderedGems to consider punctuation * Rubocop: activate Layout/ClassStructure (#9304) * change Label Follow Weight Scale for Tags in Dashboard (#9247) * [deploy] Remove codeql analysis for right now (#9308) * Update Readme Headline (#9309) * [deploy] Fix TypeError: Cannot set property 'innerHTML' of null (#9306) Should fix https://app.honeybadger.io/fault/67192/f79e24dfb4e4364da09dda6380e9d2ff. * Add /forem redirect (#9317) * [deploy] Make sidebar sponsor headline configurable (#9251) * Make sidebar sponsor headline configurable * Fix spec * Fix spec typo * Create profile image generator (#8695) * Create profile image generator * Update spec/services/users/profile_image_generator_spec.rb Co-authored-by: Mac Siri * Remove difficult cloudinary dependency Co-authored-by: Mac Siri Co-authored-by: Michael Kohl Co-authored-by: Fernando Valverde Co-authored-by: Sarthak Sharma <7lovesharma7@gmail.com> Co-authored-by: Narender Singh Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: Vaidehi Joshi Co-authored-by: rhymes Co-authored-by: Veggier <47649859+Veggier@users.noreply.github.com> Co-authored-by: Molly Struve Co-authored-by: Ben Halpern Co-authored-by: Jacob Herrington Co-authored-by: Mac Siri --- app/assets/stylesheets/article-show.scss | 85 ----- app/assets/stylesheets/moderators.scss | 303 ++++++++++++------ app/javascript/actionsPanel/actionsPanel.js | 4 +- .../moderations/_mod_sidebar_left.html.erb | 82 ++--- app/views/moderations/actions_panel.html.erb | 7 +- app/views/moderations/index.html.erb | 4 +- 6 files changed, 262 insertions(+), 223 deletions(-) diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss index 63ce8e7bb..eacb6c2fb 100644 --- a/app/assets/stylesheets/article-show.scss +++ b/app/assets/stylesheets/article-show.scss @@ -6,91 +6,6 @@ height: 10px; } -.mod-actions-menu { - position: fixed; - top: var(--header-height); - right: 0; - height: calc(100vh - var(--header-height)); - z-index: 100; - transform: translateX(360px); - transition: var(--transition-props); - - iframe { - height: 100%; - border: none; - width: 360px; - } - - &.showing { - transform: initial; - - iframe { - box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.1); - } - } -} - -.mod-actions-menu-btn { - position: fixed; - bottom: var(--su-7); - right: var(--su-7); - z-index: 201; - cursor: pointer; - transition: 0.3s all ease; - border-radius: 50px; - - @media (max-width: $breakpoint-m) { - bottom: 68px; - right: 8px; - padding: 0; - svg { - height: 42px; - width: 42px; - } - } -} - -.mod-actions-menu-btn { - transition: 0.3s all ease; -} - -.flag-user-modal { - .flag-user-modal-header { - padding-left: var(--su-4); - - h2 { - font-weight: var(--fw-bold); - font-size: var(--fs-l); - line-height: var(--lh-tight); - } - - .modal-header-close-icon { - border-radius: 100%; - background: var(--base-10); - } - } - - .flag-user-modal-body { - span { - font-size: var(--fs-base); - line-height: var(--lh-base); - color: var(--base-90); - } - - .crayons-fields { - margin-top: var(--su-4); - - .abuse-report-link { - margin: var(--su-4) 0 0 var(--su-7); - } - } - - .buttons-container { - margin-top: var(--su-8); - } - } -} - .video-player-header { background: $black; margin-top: 0; diff --git a/app/assets/stylesheets/moderators.scss b/app/assets/stylesheets/moderators.scss index 2c95246b4..fd59db6ea 100644 --- a/app/assets/stylesheets/moderators.scss +++ b/app/assets/stylesheets/moderators.scss @@ -2,92 +2,121 @@ @import 'mixins'; @import 'config/import'; +// Mod Center + .mod-center-heading { + margin-top: var(--su-6); margin-bottom: var(--su-6); } -.mod-index-container { - .mod-index-header { - background-color: var(--base-inverted); - border-radius: var(--radius) var(--radius) 0 0; - border-bottom: 1px solid var(--base-10); - padding: var(--su-6) var(--su-4); +.mod-index-header { + background-color: var(--base-inverted); + border-radius: var(--radius) var(--radius) 0 0; + border-bottom: 2px solid var(--base-10); + padding: var(--su-6) var(--su-4); - .tag-view { - color: var(--base-90); + .tag-view { + color: var(--base-90); + } +} + +.mod-index-list-header { + background-color: var(--base-0); + border-bottom: 2px solid var(--base-10); + border-left: none; + border-right: none; + border-top: none; + display: grid; + grid-template-columns: 4fr 2fr 1fr; + + h2 { + padding: var(--su-2) var(--su-4); + color: var(--base-50); + } +} + +.mod-index-list { + margin: 0; + width: 100%; +} + +.moderation-single-article { + align-items: center; + background-color: var(--base-inverted); + border-top: none; + border-left: none; + border-right: none; + border-bottom: 2px solid var(--base-10); + display: grid; + grid-template-columns: 4fr 2fr 1fr; + padding: var(--su-4); + text-align: left; + width: 100%; + + &:hover { + background: var(--base-0); + + .article-title { + color: var(--link-brand-color); } } - .mod-index-list-header { - display: grid; - grid-template-columns: 4fr 2fr 1fr; - background-color: var(--base-0); - border: solid var(--base-10); - border-width: 1px 0; - h2 { - padding: var(--su-2) var(--su-4); - color: var(--base-50); + + .article-title { + color: var(--base-90); + min-width: 0; + + header > h3 { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } } - .mod-index-list { - margin: 0; + + .mod-article-tag { + color: var(--base-80); + padding-right: var(--su-2); + + .article-hash-tag { + color: var(--base-40); + } + } + + .article-author { + color: var(--base-80); + padding-left: var(--su-4); + } + + .article-published-at { + color: var(--base-90); + padding-left: var(--su-6); + } + + .article-iframes-container { + border-radius: var(--radius); + box-sizing: border-box; + grid-column-start: 1; + grid-column-end: 4; width: 100%; - .moderation-articles-list { - .moderation-single-article { - width: 100%; - background-color: var(--base-inverted); - text-align: left; - padding: var(--su-4); - border: solid var(--base-10); - border-width: 1px 0; - display: grid; - grid-template-columns: 4fr 2fr 1fr; - .article-title { - color: var(--base-90); - min-width: 0; - header > h3 { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } - .mod-article-tag { - color: var(--base-80); - padding-right: var(--su-2); - .article-hash-tag { - color: var(--base-40); - } - } - .article-author { - color: var(--base-80); - padding-left: var(--su-4); - } - .article-published-at { - color: var(--base-90); - padding-left: var(--su-6); - } - .article-iframes-container { - border-radius: var(--radius); - margin-top: var(--su-3); - grid-column-start: 1; - grid-column-end: 4; - width: 100%; - display: flex; - &.opened { - border: 1px solid var(--base-20); - } - iframe { - border: none; - } - .article-iframe { - width: 100%; - height: 650px; // height is arbitrary, will be removed for modal-esque view - } - .actions-panel-iframe { - width: 60%; - height: 650px; // height is arbitrary, will be removed for modal-esque view - } - } - } + display: flex; + + &.opened { + margin-top: var(--su-4); + border: 1px solid var(--base-20); + box-shadow: 0 0 4px 2px var(--base-10); + } + + iframe { + border: none; + } + + .article-iframe { + width: 100%; + height: 650px; // height is arbitrary, will be removed for modal-esque view + } + + .actions-panel-iframe { + width: 60%; + height: 650px; // height is arbitrary, will be removed for modal-esque view } } } @@ -96,12 +125,98 @@ .moderations-actions_panel { min-height: initial; height: 100%; + #page-content-inner { margin-bottom: 0; height: 100%; } } +// Actions Menu + +.mod-actions-menu { + position: fixed; + top: var(--header-height); + right: 0; + height: calc(100vh - var(--header-height)); + z-index: 100; + transform: translateX(360px); + transition: var(--transition-props); + + iframe { + height: 100%; + border: none; + width: 360px; + } + + &.showing { + transform: initial; + + iframe { + box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.1); + } + + body { + overflow-y: hidden; + } + } +} + +.mod-actions-menu-btn { + transition: 0.3s all ease; + position: fixed; + bottom: var(--su-7); + right: var(--su-7); + z-index: 201; + cursor: pointer; + transition: 0.3s all ease; + border-radius: 50px; + + @media (max-width: $breakpoint-m) { + bottom: calc(var(--header-height) + var(--su-3)); + right: var(--su-3); + padding: 0; + } +} + +.flag-user-modal { + .flag-user-modal-header { + padding-left: var(--su-4); + + h2 { + font-weight: var(--fw-bold); + font-size: var(--fs-l); + line-height: var(--lh-tight); + } + + .modal-header-close-icon { + border-radius: 100%; + background: var(--base-10); + } + } + + .flag-user-modal-body { + span { + font-size: var(--fs-base); + line-height: var(--lh-base); + color: var(--base-90); + } + + .crayons-fields { + margin-top: var(--su-4); + + .abuse-report-link { + margin: var(--su-4) 0 0 var(--su-7); + } + } + + .buttons-container { + margin-top: var(--su-8); + } + } +} + + .mod-container { display: flex; flex-direction: column; @@ -110,6 +225,7 @@ box-shadow: none; margin-bottom: 0; height: 100%; + .circle { border-radius: 100%; &.centered-icon { @@ -126,28 +242,34 @@ display: flex; flex-direction: column; } + &.other-things { padding: var(--su-4); - h1 { + + h3 { text-transform: uppercase; font-size: var(--fs-s); } } + h1 { font-size: var(--fs-l); font-weight: var(--fw-bold); } + h2 { font-size: var(--fs-base); font-weight: var(--fw-normal); color: var(--base-70); } + button.close-actions-panel { position: absolute; right: var(--su-4); top: var(--su-4); } } + .reactions-container { padding: var(--su-4); background-color: var(--base-inverted); @@ -335,6 +457,7 @@ .other-things-container { border-top: 1px solid var(--base-20); overflow-y: auto; + button.other-things-btn { background: inherit; border: none; @@ -694,15 +817,21 @@ display: inline-block; font-size: 1.3em; padding: 3px 8px; - border-radius: 3px; + border-radius: var(--radius); } -.mod-center-section-title { - padding: var(--su-2); +.mod-center--nav { + margin-bottom: var(--su-6); +} - &.resources { - margin-top: var(--su-7); - } +.mod-center--nav__title { + color: var(--base-80); + padding: var(--su-2); + text-transform: uppercase; +} + +.mod-center--nav__item { + justify-content: space-between; } .mod-center-inbox { @@ -714,14 +843,6 @@ } } -#mod-center-other-options svg { - width: var(--su-3); - height: var(--su-3); - &:hover { - cursor: pointer; - } -} - .mod-feedback { margin-top: var(--su-6); margin-left: var(--su-3); diff --git a/app/javascript/actionsPanel/actionsPanel.js b/app/javascript/actionsPanel/actionsPanel.js index 22469e861..6b30ebc1c 100644 --- a/app/javascript/actionsPanel/actionsPanel.js +++ b/app/javascript/actionsPanel/actionsPanel.js @@ -17,8 +17,9 @@ export function addCloseListener() { } export function initializeHeight() { + document.documentElement.style.height = '100%'; - document.body.style.cssText = 'height: 100%; margin: 0; padding-top: 0;'; + document.body.style.cssText = 'height: 100%; margin: 0; padding-top: 0; overflow-y: hidden'; document.getElementById('page-content').style.cssText = 'margin-top: 0 !important; margin-bottom: 0;'; } @@ -33,6 +34,7 @@ function toggleDropdown(type) { } } + function applyReactedClass(category) { const upVote = document.querySelector("[data-category='thumbsup']"); const downVote = document.querySelector("[data-category='thumbsdown']"); diff --git a/app/views/moderations/_mod_sidebar_left.html.erb b/app/views/moderations/_mod_sidebar_left.html.erb index 95343e3c2..40b56ec47 100644 --- a/app/views/moderations/_mod_sidebar_left.html.erb +++ b/app/views/moderations/_mod_sidebar_left.html.erb @@ -1,47 +1,49 @@
-

Mod Center

-
- INBOX -
-
- <% if @current_user_tags.any? %> - <% @current_user_tags.each do |tag| %> - " class="crayons-link crayons-link--block inbox-tags<%= " crayons-link--current" if tag == @tag&.name %>" data-tag-name="<%= tag %>"> - #<%= tag %> - +

+ Mod Center +

+ +
+ <% if @community_mod_channel %>
Have feedback to improve your Mod experience? diff --git a/app/views/moderations/actions_panel.html.erb b/app/views/moderations/actions_panel.html.erb index 3f94e19cb..28803344b 100644 --- a/app/views/moderations/actions_panel.html.erb +++ b/app/views/moderations/actions_panel.html.erb @@ -54,14 +54,15 @@ How does this work? - <%= inline_svg_tag("external-link-logo.svg", aria: true, title: "External link") %>
-

Other things you can do

+

+ Other things you can do +

<% if current_user.any_admin? || @should_show_adjust_tags %> @@ -115,7 +116,6 @@ How does this work? - <%= inline_svg_tag("external-link-logo.svg", aria: true, title: "External link") %>
@@ -158,7 +158,6 @@ How does this work? - <%= inline_svg_tag("external-link-logo.svg", aria: true, title: "External link") %>
diff --git a/app/views/moderations/index.html.erb b/app/views/moderations/index.html.erb index cefe61754..e5eb0e39f 100644 --- a/app/views/moderations/index.html.erb +++ b/app/views/moderations/index.html.erb @@ -9,9 +9,9 @@ <%= render "moderations/mod_sidebar_left" %>
- +

<%= @tag ? "##{@tag.name}" : "All topics" %> - +

Post