From b599b66ce1fedbdf75b6015d816047439b60d9cb Mon Sep 17 00:00:00 2001 From: Ben Halpern Date: Sun, 15 Dec 2019 17:43:24 -0500 Subject: [PATCH] Cosmetic adjustment + code cleanup for article/mod page (#5105) [deploy] * Cosmetic adjustment + code cleanup for article/mod page * Remove br tags and clean up css --- app/assets/stylesheets/moderators.scss | 193 +++++++++++++++++++++ app/views/moderations/mod.html.erb | 225 +++++-------------------- 2 files changed, 237 insertions(+), 181 deletions(-) diff --git a/app/assets/stylesheets/moderators.scss b/app/assets/stylesheets/moderators.scss index 3c9f531ba..41f0841b2 100644 --- a/app/assets/stylesheets/moderators.scss +++ b/app/assets/stylesheets/moderators.scss @@ -1,3 +1,196 @@ +@import 'variables'; +@import 'mixins'; + +.mod-container { + border-radius: 12px; + padding: 30px 0px; + p { + width: 98%; + max-width: 720px; + margin: 1.3em auto; + font-size: 0.9em; + } + + hr { + margin: 30px auto; + width: 80%; + max-width: 400px; + opacity: 0.3; + } + + #error_explanation { + margin: 10px auto 5px; + box-sizing: border-box; + } + @media screen and ( min-width:880px ){ + margin: 90px auto; + } + .reaction-button { + position: relative; + width: 80px; + height: 80px; + background: white; + border-color: white; + margin: 30px 30px; + border-radius: 200px; + border: 0px; + padding: 12px 12px; + &:active { + border: 0px; + } + } + + + .reaction-button img { + position: absolute; + top: 5px; + width: 70px; + left: 5px; + } + + .reaction-button .reacted-emoji { + display: none; + } + + .reaction-button.reacted .reacted-emoji { + display: block; + } + + .tag-mod-form { + border-top: 1px solid #dddddd; + margin: 42px auto; + } + + .tag-mod-form ul { + text-align: left; + font-size: 15px; + } + + .tag-mod-form form { + width: 500px; + margin: auto; + max-width: 90%; + } + + .tag-mod-form form input { + width: 100%; + padding: 5px; + font-size: 20px; + margin-bottom: 5px; + border-radius: 3px; + box-sizing: border-box; + @include themeable( + border, + theme-border, + 1px solid $light-medium-gray + ); + } + + .tag-mod-form form input[type="submit"] { + background: $dark-purple; + color: white; + font-weight: bold; + padding: 16px 0px; + margin: auto; + display: block; + border-radius: 3px; + font-size: 1.3em; + font-family: $helvetica-condensed; + } + + #undo { + width: 1.5rem; + font-size: 1.1em; + display: inline-block; + color: $red; + background: transparent; + border: 0px; + } + + .tag-mod-form form textarea { + box-sizing: border-box; + width: 100%; + padding: 5px; + font-size: 17px; + height: 100px; + box-sizing: boder-box; + border-radius: 3px; + @include themeable( + border, + theme-border, + 1px solid $light-medium-gray + ); + } + + .level-rating-button { + border-radius: 8px; + font-size: 1.1em; + padding: 3px; + width: 42px; + border: 2px solid black; + font-weight: bold; + } + + .level-rating-button.selected { + background: #9bebff; + } + + input.undo { + background: $red; + } + + .tag-mod-addition-radio { + padding: 5px 20px; + border-radius: 3px; + @include themeable( + border, + theme-border, + 1px solid $light-medium-gray + ); + display: inline-block; + margin: 30px auto 10px; + min-width: 205px; + box-sizing: boder-box; + position: relative; + } + + .tag-mod-form input[type=radio] { + position: absolute; + cursor: pointer; + top: 7px; + } + + .tag-mod-form input[type=radio] + label { + display: inline-block; + cursor: pointer; + font-weight: bold; + padding-left: 25px; + padding-right: 25px; + font-size: 22px; + margin: auto; + margin-left: 4px; + } + + .tag-mod-form input[type=radio]:checked + label{ + @include themeable( + background, + theme-container-accent-background, + $light-green + ); + border-radius: 3px; + } + + .tag-mod-form select { + display: block; + font-size: 20px; + padding: 12px; + font-weight: bold; + margin: auto; + border: solid 2px; + margin: 5px auto 15px; + } +} + .mod-link { display: inline-block; font-size: 1.3em; diff --git a/app/views/moderations/mod.html.erb b/app/views/moderations/mod.html.erb index ad41d5f8d..3cfadefb8 100644 --- a/app/views/moderations/mod.html.erb +++ b/app/views/moderations/mod.html.erb @@ -1,130 +1,13 @@ - +<% end %> - .reaction-button .reacted-emoji { - display: none; - } - - .reaction-button.reacted .reacted-emoji { - display: block; - } - - .tag-mod-form { - border-top: 2px solid #dddddd; - margin: 40px auto; - } - - .tag-mod-form ul { - text-align: left; - font-size: 15px; - } - - .tag-mod-form form { - width: 500px; - margin: auto; - max-width: 90%; - } - - .tag-mod-form form input { - width: 100%; - padding: 5px; - font-size: 20px; - margin-bottom: 5px; - border: 1px solid #888; - } - - .tag-mod-form form input[type="submit"] { - background: #0045ff; - color: white; - font-weight: bold; - padding: 10px; - margin: auto; - display: block; - } - - #undo { - background: #ff0000; - width: 2rem; - height: 2rem; - font-size: small; - display: inline-block; - padding-bottom: 2em; - } - - .tag-mod-form form textarea { - box-sizing: border-box; - width: 100%; - padding: 5px; - font-size: 17px; - height: 100px; - border: 1px solid #888; - } - - .level-rating-button { - border-radius: 8px; - font-size: 1.1em; - padding: 3px; - width: 42px; - border: 2px solid black; - font-weight: bold; - } - - .level-rating-button.selected { - background: #9bebff; - } - - input.undo { - background: #ff0000; /* $red */ - } - - .tag-mod-form input[type=radio] { - position: absolute; - } - - .tag-mod-form input[type=radio] + label { - display: inline-block; - cursor: pointer; - font-weight: bold; - padding-left: 25px; - padding-right: 25px; - font-size: 20px; - margin: auto; - margin-bottom: 15px; - } - - .tag-mod-form input[type=radio]:checked + label{ - color: white; - background: #0045ff; - } - - .tag-mod-form select { - display: block; - font-size: 20px; - padding: 12px; - font-weight: bold; - margin: auto; - border: solid 2px; - margin-top: 5px; - } - - -
-

MODERATE: <%= @moderatable.title %>

+
+

Moderate: <%= @moderatable.title %>

<% if current_user.has_role?(:super_admin) && @moderatable.class.name == "Article" %> -

Admin: Edit | - Content Moderation | - Article Admin

+

Edit Post | + Internal:Article | + Admin:Article

<% elsif current_user.has_role?(:super_admin) && @moderatable.class.name == "Comment" %> -

ADMIN: Comment Admin | - User Admin

+

Admin:Comment | + Admin:User

<% else %> -

+

All negative reactions are private. -

Use the - thumbsdown(👎) to move something "down" for any reason (quality, usefulness, code of conduct grey area). -

The vomit(🤢) is for code of conduct violations (harassment, being an asshole, spam, etc.). -

The DEV team will be notified about vomits and take appropriate action, but leaving a level-headed comment addressing the behavior is welcome if you feel up for it. +

+
+

+ Use Thumbsdown to move this content "down" for any reason (quality, usefulness, etc.). +

+

+ Use vomit for code of conduct violations (harassment, being a jerk, spam, etc.).

<% end %> <% if @allowed_to_adjust %>
-

Tag Adjustment

+

Tag Adjustments

<%= form_for(@tag_adjustment) do |f| %> -

Add or Remove Tags

- <% unless current_user.has_role?(:super_admin) %> -
    -
  • You can only adjust tags that you moderate.
    • -
  • Only adjust tags that are appropriate.
    • -
  • Always be friendly in your tag adjustment reason.
    • -
  • Only adjust tags which haven't been adjusted already.
    • -
  • Each article can have a maximun of four tags
    • -
- <% end %> Current live tags: <%= @moderatable.tag_list %>
- Already adjusted tags: <%= @already_adjusted_tags %> -

<% if @tag_adjustment.errors.any? %>

<%= pluralize(@tag_adjustment.errors.count, "error") %> prohibited this block from being saved:

@@ -176,58 +50,42 @@ <% end %>
-



<% end %> <%= f.hidden_field :article_id, value: @moderatable.id %> <% if current_user.any_admin? || @tag_moderator_tags.any? { |tag| @moderatable.tag_list.include?(tag.name) } %> - <%= f.radio_button :adjustment_type, "removal", required: true %> - <%= f.label :adjustment_type, "Remove", value: "removal" %> +
+ <%= f.radio_button :adjustment_type, "removal", required: true %> + <%= f.label :adjustment_type, "Remove", value: "removal" %> +
<% end %> <% if @moderatable.tag_list.count < 4 %> - <%= f.radio_button :adjustment_type, "addition", required: true %> - <%= f.label :adjustment_type, "Add", value: "addition" %> +
+ <%= f.radio_button :adjustment_type, "addition", required: true %> + <%= f.label :adjustment_type, "Add", value: "addition" %> +
<% end %> -
<% if current_user.has_role?(:super_admin) %> <%= f.text_field :tag_name, placeholder: "Tag Name", required: true %> <% else %> <%= f.select :tag_name, @tag_moderator_tags, { prompt: "Select Tag" }, required: true %> -
<% end %> <%= f.text_area :reason_for_adjustment, placeholder: "Reason for adjustment (Be super kind) - Only the reason is needed, the notification will take care of the rest.", required: true %> <%= f.submit "Submit Tag Adjustment" %> <% end %> <% if @adjustments.any? %> -

- Adjusted Tags:

<% @adjustments.each do |adjustment| %> <% if current_user.any_admin? || adjustment.user_id == current_user.id %> <%= form_for(adjustment, url: "/tag_adjustments/#{adjustment.id}", html: { method: :delete, onsubmit: "return confirm('Are you sure you want to undo the #{adjustment.adjustment_type} of the #{adjustment.tag_name} tag?')" }) do |f| %> - <%= adjustment.adjustment_type == "removal" ? "Removed" : "Added" %>: <%= adjustment.tag_name %> - <%= f.submit "X", id: "undo" %> + <%= adjustment.adjustment_type == "removal" ? "Currently removed tag" : "Currently added tag" %>: <%= adjustment.tag_name %> + <%= f.submit "×", id: "undo" %> <% end %> <% end %> -
<% end %> <% end %>
<% end %> <% if @moderatable.class.name == "Article" %> - <% if @moderatable.last_buffered.blank? %> -
- <%= form_for(BufferUpdate.new) do |f| %> -

Suggest a Tweet

- <%= f.hidden_field :article_id, value: @moderatable.id %> - <%= f.text_area :body_text, maxlength: 220 %> - <%= f.submit "Share Tweet Suggestion" %> - <% end %> -

-

Text will be used in the body of a tweet linking to this post. -

Tweet suggestion can be a TLDR of the post, an interesting quote from the post, or bullet points from topics covered in the post. -

-
- <% end %>
<% @rating_vote = RatingVote.where(article_id: @moderatable.id, user_id: current_user.id).first %> <%= form_for(RatingVote.new) do |f| %> @@ -245,15 +103,20 @@ <% end %> -

- All rating votes are private. -

Provide a rating between 1 and 10 based on which audience would find this post most valuable. -

1: for brand new developers, 3: for junior developers, 10: for very advanced developers, etc. -

This will provide - approximate and gentle algorithmic adjustments to help deliver relevant content. -

It will be used as one of many indicators. No one rating will have an overly dramatic affect. +

+ Who might find this post most valuable, based on overall experience level?

+ <% if @moderatable.last_buffered.blank? %> +
+ <%= form_for(BufferUpdate.new) do |f| %> +

Suggest a Tweet for @<%= ApplicationConfig["SITE_TWITTER_HANDLE"] %>

+ <%= f.hidden_field :article_id, value: @moderatable.id %> + <%= f.text_area :body_text, maxlength: 220, placeholder: "Can be a TLDR of the post, an interesting quote from the post, or bullet points from topics covered in the post, etc." %> + <%= f.submit "Share Tweet Suggestion" %> + <% end %> +
+ <% end %> <% end %>