Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
Subreddit Rules: Update styles
Browse files Browse the repository at this point in the history
Styles the new rule 'kind' inputs and display, and updates their
display text to match the spec.
  • Loading branch information
madbook authored and MelissaCole committed Jan 25, 2016
1 parent a10d837 commit e61640a
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 17 deletions.
13 changes: 12 additions & 1 deletion r2/r2/controllers/front.py
Expand Up @@ -945,7 +945,18 @@ def GET_rules(self):
"""Get the rules for the current subreddit"""
if not feature.is_enabled("subreddit_rules", subreddit=c.site.name):
abort(404)
return ModToolsPage(content=Rules()).render()

kind_labels = {
"all": _("Posts & Comments"),
"link": _("Posts only"),
"comment": _("Comments only"),
}
content = Rules(kind_labels=kind_labels)
extra_js_config = {"kind_labels": kind_labels}
return ModToolsPage(
content=content,
extra_js_config=extra_js_config,
).render()

@require_oauth2_scope("read")
@api_doc(api_section.subreddits, uses_site=True)
Expand Down
3 changes: 2 additions & 1 deletion r2/r2/lib/pages/pages.py
Expand Up @@ -4017,11 +4017,12 @@ def __init__(self, **kwargs):

class Rules(Templated):
"""Show subreddit rules for everyone and add edit controls for mods."""
def __init__(self):
def __init__(self, kind_labels):
self.can_edit = c.user_is_loggedin and (c.user_is_admin or
c.site.is_moderator_with_perms(c.user, 'config'))
self.rules = SubredditRules.get_rules(c.site)
self.site_rules = SITEWIDE_RULES
self.kind_labels = kind_labels
Templated.__init__(self)


Expand Down
31 changes: 24 additions & 7 deletions r2/r2/public/static/css/subreddit-rules.less
Expand Up @@ -46,12 +46,13 @@
.subreddit-rule-form {
.c-form-group {
position: relative;
margin-bottom: unit(@margin-medium, px);

label {
.label {
color: @color-grey;
}

label.required:after {
.label.required:after {
color: @color-warning-red;
content: ' *';
display: inline;
Expand All @@ -68,6 +69,10 @@
}
}
}

.form-group-kind label {
margin-right: unit(@margin-large, px);
}
}

.subreddit-rule-add-form-buttons .subreddit-rule-edit-button {
Expand Down Expand Up @@ -152,6 +157,10 @@

> header {
margin-bottom: @margin-xx-large * 1px;

p {
font-weight: 500;
}
}

> footer {
Expand Down Expand Up @@ -180,13 +189,21 @@

.subreddit-rule-title {
.md-font-size(@font-base, @font-medium, @line-medium);
.md-margins(@font-medium, 0, @margin-small);
margin-top: 0;
margin-bottom: unit(@margin-x-small, px);
font-weight: 500;
}

.subreddit-rule-kind {
.md-font-size(@font-base, @font-x-small, @line-medium);
margin-bottom: unit(@margin-x-small, px);
font-weight: 500;
color: @color-dark-grey;
}

.subreddit-rule-description {
color: @color-text-grey;
}
}
}

.subreddit-rule-contents-display .subreddit-rule-kind {
margin-left: 10px;
margin-bottom: 10px;
}
3 changes: 3 additions & 0 deletions r2/r2/public/static/js/edit-subreddit-rules.js
Expand Up @@ -189,6 +189,9 @@ requires r.ui.TextCounter

renderTemplate: function() {
var modelData = this.model.toJSON();
var kind = modelData.kind;

modelData.kind = r.config.kind_labels[kind];

if (this.state === this.EDITING_STATE) {
this.$el.html(this.formTemplate(modelData));
Expand Down
33 changes: 25 additions & 8 deletions r2/r2/templates/rules.html
Expand Up @@ -49,15 +49,18 @@ <h2>Community Rules</h2>
%if thing.rules:
%for rule in thing.rules:
<% description_html = unsafe(safemarkdown(rule['description'], wrap=False)) %>
<% kind = rule.get('kind', 'all') %>
<%
kind = rule.get('kind', 'all')
kind_label = thing.kind_labels.get(kind)
%>
<div class="subreddit-rule-item"
data-priority="${rule['priority']}"
data-description="${keep_space(rule['description'])}"
data-kind="${kind}">
${self.subreddit_rule(
short_name=rule['short_name'],
description=description_html,
kind=kind,
kind=kind_label,
editable=thing.can_edit,
)}
</div>
Expand Down Expand Up @@ -142,7 +145,7 @@ <h4 class="subreddit-rule-title">
<div class="c-form-group form-group-short_name">
<div class="md-container-small">
<div class="md">
<label for="short_name" class="required">Short name</label>
<label for="short_name" class="label required">Short name</label>
<div class="text-counter">
<span class="text-counter-display"></span>&#32;
remaining
Expand All @@ -159,15 +162,29 @@ <h4 class="subreddit-rule-title">
</div>
</div>
<div class="c-form-group form-group-kind">
<input type="radio" name="kind" value="link"> links<br>
<input type="radio" name="kind" value="comment"> comments<br>
<input type="radio" name="kind" value="all" checked> both<br>
${error_field("INVALID_OPTION", "kind")}
<div class="md-container-small">
<div class="md">
<div class="label">Applies to</div>
<label>
<input type="radio" name="kind" value="all" checked>
${thing.kind_labels.get('all')}
</label>
<label>
<input type="radio" name="kind" value="link">
${thing.kind_labels.get('link')}
</label>
<label>
<input type="radio" name="kind" value="comment">
${thing.kind_labels.get('comment')}
</label>
${error_field("INVALID_OPTION", "kind")}
</div>
</div>
</div>
<div class="c-form-group form-group-description">
<div class="md-container-small">
<div class="md">
<label for="description">Full description of this rule</label>
<label class="label" for="description">Full description of this rule</label>
<div class="text-counter">
<span class="text-counter-display" rel="description"></span>&#32;
remaining
Expand Down

0 comments on commit e61640a

Please sign in to comment.