Skip to content
Browse files

[Bug 635103] Redesign report abuse dialog.

Use a style that is clearer and more consistent with other parts of the
site (specifically the unhelpful survey for articles).
  • Loading branch information...
1 parent 08cc7db commit 8da39c1a38400572e155e495d8e28971af2f8dbc @mythmon mythmon committed
View
6 apps/kbforums/templates/kbforums/includes/post.html
@@ -1,3 +1,5 @@
+{% from "wiki/includes/flag_form.html" import flag_form with context %}
+
<div class="author">
<a class="avatar" href="{{ profile_url(post.creator, request.user == post.creator) }}">
<img src="{{ profile_avatar(post.creator) }}" height="45" width="45" alt=""/>
@@ -20,9 +22,7 @@
{% endwith %}
<div class="post-actions">
{% if document and document.slug and post.id %}
- <form class="report" action="{{ url('wiki.discuss.flag_post', document.slug, post.id) }}" method="post">
- {% include 'wiki/includes/flag_form.html' %}
- </form>
+ {{ flag_form(url('wiki.discuss.flag_post', document.slug, post.id)) }}
{% endif %}
</div>
</div>
View
6 apps/questions/templates/questions/answers.html
@@ -3,6 +3,8 @@
{% from "layout/errorlist.html" import errorlist %}
{% from "upload/attachments.html" import attachments_form %}
{% from "includes/common_macros.html" import content_editor, for_contributors %}
+{% from "wiki/includes/flag_form.html" import flag_form with context %}
+
{# L10n: {q} is the title of the question. #}
{% set title = _('{q} | Firefox Support Forum')|f(q=question.title) %}
{% set classes = 'answers' %}
@@ -268,9 +270,7 @@ <h2 class="summary">{{ question.title }}</h2>
{% endif %}
{% if user.is_authenticated() and user != question.creator and not question.is_locked %}
- <form class="report" action="{{ url('questions.flag', question.id) }}" method="post">
- {% include 'questions/includes/flag_form.html' %}
- </form>
+ {{ flag_form(url('questions.flag', question.id)) }}
{% endif %}
</div>
View
6 apps/questions/templates/questions/includes/answer.html
@@ -1,5 +1,7 @@
{% from "upload/attachments.html" import attachment %}
{% from "karma/includes/karma_macros.html" import titles %}
+{% from "wiki/includes/flag_form.html" import flag_form with context %}
+
<div class="answer grid_9" {% if answer.id %}id="answer-{{ answer.id }}"{% endif %}>
<div class="user-meta">
<div class="avatar">
@@ -120,9 +122,7 @@ <h3 class="is-owner">Question owner</h3>
</ul>
{% if user.is_authenticated() and user != answer.creator and not question.is_locked %}
- <form class="report" action="{{ url('questions.answer_flag', question.id, answer.id) }}" method="post">
- {% include 'questions/includes/flag_form.html' %}
- </form>
+ {{ flag_form(url('questions.answer_flag', question.id, answer.id)) }}
{% endif %}
{% endif %}
</div>
View
9 apps/questions/templates/questions/includes/flag_form.html
@@ -1,9 +0,0 @@
-{{ csrf() }}
-<select name="reason">
- <option value="spam">{{ _('Spam or other unrelated content') }}</option>
- <option value="language">{{ _('Inappropriate language/dialog') }}</option>
- <option value="bug_support">{{ _('Misplaced bug report or support request') }}</option>
- <option value="other">{{ _('Other (please specify)') }}</option>
-</select>
-<input type="text" class="text" name="other" />
-<input type="submit" class="link-btn" value="{{ _('Report Abuse') }}" />
View
15 apps/users/templates/users/profile.html
@@ -1,5 +1,7 @@
{# vim: set ts=2 et sts=2 sw=2: #}
{% extends "users/base.html" %}
+{% from "wiki/includes/flag_form.html" import flag_form with context %}
+
{% set title = _('{user} | Profile')|f(user=profile.user.username) %}
{% set classes = 'profile' %}
{% set canonical_url = unlocalized_url('users.profile', profile.user.pk) %}
@@ -18,18 +20,7 @@
</div>
{% endif %}
{% if request.user.is_authenticated and request.user != profile.user %}
- <section id="flag">
- <form class="report" title="{{ _('Report this profile') }}" action="{{ url('users.flag', object_id=profile.pk) }}" method="post">
- {{ csrf() }}
- <select name="reason">
- <option value="spam">{{ _('Spam or other unrelated content') }}</option>
- <option value="language">{{ _('Inappropriate language/dialog') }}</option>
- <option value="other">{{ _('Other (please specify)') }}</option>
- </select>
- <input type="text" class="text" name="other" />
- <input type="submit" class="link-btn" value="{{ _('Report Abuse') }}" />
- </form>
- </section>
+ {{ flag_form(url('users.flag', object_id=profile.pk), False) }}
{% endif %}
<h1 class="user">{{ display_name(profile.user) }}
{% if profile.name %}
View
44 apps/wiki/templates/wiki/includes/flag_form.html
@@ -1,9 +1,35 @@
-{{ csrf() }}
-<select name="reason">
- <option value="spam">{{ _('Spam or other unrelated content') }}</option>
- <option value="language">{{ _('Inappropriate language/dialog') }}</option>
- <option value="bug_support">{{ _('Misplaced bug report or support request') }}</option>
- <option value="other">{{ _('Other (please specify)') }}</option>
-</select>
-<input type="text" class="text" name="other" />
-<input type="submit" class="link-btn" value="{{ _('Report Abuse') }}" />
+{% macro flag_form(post_target, bug_support=True) %}
+
+<section id="report-abuse">
+ <a class="link-btn">{{ _('Report Abuse') }}</a>
+ <div class="popup">
+ <a class="kbox-close" href="javascript:void">&#x2716;</a>
+ <h2>{{ _('Report this') }}</h2>
+ <form action="{{ post_target }}" method="post">
+ {{ csrf() }}
+
+ <label><input type="radio" name="reason" value="spam" />
+ {{ _('Spam or other unrelated content') }}
+ </label>
+ <label><input type="radio" name="reason" value="language" />
+ {{ _('Inappropriate language/dialog') }}
+ </label>
+ {% if bug_support %}
+ <label><input type="radio" name="reason" value="bug_support" />
+ {{ _('Misplaced bug report or support request') }}
+ </label>
+ {% endif %}
+ <label><input type="radio" name="reason" value="other" />
+ {{ _('Other (please specify)') }}
+ </label>
+
+ <textarea name="other" placeholder="{{ _('Have more to say?') }}"></textarea>
+
+ <button class="btn btn-submit" type="submit">{{ _('Submit') }}</button>
+ </form>
+
+ <span class="message"></span>
+ </div>
+</section>
+
+{% endmacro %}
View
56 media/css/reportabuse.css
@@ -1,56 +0,0 @@
-form.report {
- margin: 18px 0 0;
- position: relative;
-}
-
-form.report select,
-form.report input.text {
- display: none;
-}
-
-form.report input[type="submit"] {
- color: #999;
- margin: 0;
-}
-
-form.report .kbox-container {
- left: -70px;
- top: 25px;
- width: 255px;
-}
-
-form.report .report-post-box ul {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-form.report .report-post-box li {
- border: 0;
- margin: 0;
- min-height: 17px;
- padding: 0 0 6px;
-}
-
-form.report .report-post-box input.text {
- border: solid 1px #87C4DC;
- border-radius: 6px;
- -moz-border-radius: 6px;
- -webkit-border-radius: 6px;
- display: block;
- padding: 3px 8px;
- width: 92%;
-}
-
-form.report.processing .report-post-box a {
- color: #bbb;
- cursor: default;
-}
-
-form.report.processing .report-post-box input.text {
- border-color: #bbb;
-}
-
-div.report-reply a.reply {
- float: right;
-}
View
111 media/js/reportabuse.js
@@ -1,3 +1,5 @@
+/*jshint*/
+/*global gettext, _ */
/*
* Report abuse UI.
*/
@@ -6,78 +8,37 @@
"use strict";
-k.ReportAbuse = {
- init: function(options) {
- options = $.extend({
- selector: 'form.report input[type="submit"]'
- }, options);
-
- // Click handler
- $(options.selector).click(function(ev){
- ev.preventDefault();
- var $form = $(this).closest('form');
- $('div.report-post-box').remove();
-
- // Build up the HTML for the kbox popup
- var html = '<section class="report-post-box">' +
- '<ul class="wrap"></ul></section>',
- $html = $(html),
- $ul = $html.find('ul'),
- kbox = new KBox($html, {
- title: $form.attr('title') || gettext('Report this post'),
- position: 'none',
- container: $form,
- closeOnOutClick: true
- });
- $form.find('select option').each(function(){
- var $this = $(this),
- $li = $('<li><a href="#"></a></li>'),
- $a = $li.find('a');
- $a.attr('data-val', $this.attr('value')).text($this.text());
- $ul.append($li);
- });
- $ul.append('<li><input type="text" class="text other"/></li>');
-
- // Selection click handlers
- $html.find('ul a').click(function(ev){
- ev.preventDefault();
- $form.find('select').val($(this).data('val'));
- var other = $html.find('input.other').val();
- $form.find('input[name="other"]').val(other);
- $.ajax({
- url: $form.attr('action'),
- type: 'POST',
- data: $form.serialize(),
- dataType: 'json',
- success: function(data) {
- var $msg = $('<div class="msg"></div>');
- $msg.text(data.message);
- $html.find('ul').replaceWith($msg);
- },
- error: function() {
- var message = gettext("There was an error."),
- $msg = $('<div class="msg"></div>');
- $msg.text(data.message);
- $html.find('ul').replaceWith($msg);
- }
- });
-
- return false;
- });
-
- // Hitting Enter key in the "Other" textbox should select other.
- $html.find('input.other').keypress(function(e) {
- if (e.keyCode == 13) {
- e.preventDefault();
- $html.find('a[data-val="other"]').click();
- }
- });
-
- kbox.open();
- });
- }
-};
-
-$(document).ready(k.ReportAbuse.init);
-
-})(jQuery);
+$(document).ready(function() {
+ $('#report-abuse > a').on('click', function() {
+ $(this).siblings('.popup').fadeToggle(300);
+ });
+
+ $('#report-abuse .btn[type="cancel"], #report-abuse .kbox-close').on('click', function(ev) {
+ $(this).closest('.popup').fadeToggle(300);
+ });
+
+ $('#report-abuse .btn[type="submit"]').on('click', function(ev) {
+ ev.preventDefault();
+ var $this = $(this);
+ var $form = $this.parent();
+
+ $.ajax({
+ url: $form.attr('action'),
+ type: 'POST',
+ data: $form.serialize(),
+ dataType: 'json',
+
+ success: function(data) {
+ $form.siblings('.message').text(data.message);
+ $form.slideUp();
+ },
+ error: function(error) {
+ $form.siblings('.message')
+ .text(gettext('There was an error. Please try again in a moment.'));
+ $form.slideUp();
+ }
+ });
+ });
+});
+
+})(jQuery);
View
68 media/less/reportabuse.less
@@ -0,0 +1,68 @@
+#report-abuse {
+ position: relative;
+ float: right;
+
+ a {
+ color: #999;
+ cursor: pointer;
+ }
+
+ .popup {
+ display: none;
+ padding: 12px;
+
+ position: absolute;
+ left: -190px;
+ top: 30px;
+ width: 255px;
+ z-index: 3;
+
+ background: #FFF;
+ border: 1px solid #CCC;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+ h2 {
+ margin: 0 0 10px;
+ font-size: 1.5em;
+ }
+
+ form {
+ padding: 0;
+ margin: 0;
+
+ label {
+ text-align: left;
+ width: 100%;
+ margin-bottom: 6px;
+ display: block;
+ }
+
+ input[type=radio] {
+ margin-right: 5px;
+ }
+
+ textarea {
+ margin: 0 0 6px;
+ width: 100%;
+ }
+ }
+
+ .result {
+ display: none;
+ }
+
+ &:after {
+ content: "";
+ background: #FFF;
+ box-shadow: -1px -2px 1px rgba(0, 0, 0, 0.3);
+ display: block;
+ height: 10px;
+ width: 10px;
+ position: absolute;
+ left: 225px;
+ top: -5px;
+ transform: rotate(45deg);
+ z-index: 2;
+ }
+ }
+}
View
2 media/less/users.less
@@ -105,7 +105,7 @@ article {
#admin-actions {
a.edit {
- background: transparent url(../img/icons.actions.png) no-repeat left -25px;
+ background: transparent url(../img/icons.actions.png) no-repeat 4px -21px;
float: right;
padding: 0 0 0 18px;
}
View
6 settings.py
@@ -477,12 +477,12 @@ def JINJA_CONFIG():
),
'forums': (
'less/forums.less',
- 'css/reportabuse.css',
+ 'less/reportabuse.less',
),
'questions': (
'less/questions.less',
'css/cannedresponses.css',
- 'css/reportabuse.css',
+ 'less/reportabuse.less',
),
'mobile/questions': (
'less/mobile/questions.less',
@@ -520,7 +520,7 @@ def JINJA_CONFIG():
),
'users': (
'less/users.less',
- 'css/reportabuse.css',
+ 'less/reportabuse.less',
),
'mobile/users': (
'less/mobile/users.less',

0 comments on commit 8da39c1

Please sign in to comment.
Something went wrong with that request. Please try again.