Refactor rule create/update views

src/newsreader/news/collection/forms.py

@@ -1,4 +1,5 @@
 from django import forms
+from django.utils.translation import gettext_lazy as _
 
 import pytz
 
@@ -11,6 +12,7 @@ class CollectionRuleForm(forms.ModelForm):
     timezone = forms.ChoiceField(
         widget=forms.Select(attrs={"size": len(pytz.all_timezones)}),
         choices=((timezone, timezone) for timezone in pytz.all_timezones),
+        help_text=_("The timezone which the feed uses"),
     )
 
     def __init__(self, *args, **kwargs):

src/newsreader/news/collection/templates/collection/rule-create.html

@@ -1,9 +1,10 @@
-{% extends "collection/rule.html" %}
+{% extends "base.html" %}
 
-{% block form-header %}
+{% load static %}
-  <h1 class="h1 form__title">Create a rule</h1>
-{% endblock %}
 
-{% block confirm-button %}
+{% block content %}
-  <button class="button button--confirm">Create rule</button>
+  <main id="rule--page" class="main">
+    {% url "news:collection:rules" as cancel_url %}
+    {% include "form.html" with form=form title="Create rule" cancel_url=cancel_url only %}
+  </main>
 {% endblock %}

src/newsreader/news/collection/templates/collection/rule-update.html

@@ -1,9 +1,10 @@
-{% extends "collection/rule.html" %}
+{% extends "base.html" %}
 
-{% block form-header %}
+{% load static %}
-  <h1 class="h1 form__title">Update rule</h1>
-{% endblock %}
 
-{% block confirm-button %}
+{% block content %}
-  <button class="button button--confirm">Save rule</button>
+  <main id="rule--page" class="main">
+    {% url "news:collection:rules" as cancel_url %}
+    {% include "form.html" with form=form title="Update rule" cancel_url=cancel_url only %}
+  </main>
 {% endblock %}

src/newsreader/news/collection/templates/collection/rule.html

@@ -1,55 +0,0 @@
-{% extends "base.html" %}
-
-{% load static %}
-
-{% block content %}
-  <main id="rule--page" class="main">
-    <form class="form rule-form" method="post">
-      {% csrf_token %}
-      {{ form.non_field_errors }}
-
-      <div class="form__header">
-        {% block form-header %}{% endblock %}
-      </div>
-      <section class="section form__section rule-form__section">
-        <fieldset class="form__fieldset rule-form__fieldset">
-          <label class="label" for="name">Name</label>
-          {{ form.name.errors }}
-          {{ form.name }}
-        </fieldset>
-
-        <fieldset class="form__fieldset rule-form__fieldset">
-          <label class="label" for="name">Category</label>
-          {{ form.category.errors }}
-          {{ form.category }}
-        </fieldset>
-
-        <fieldset class="form__fieldset rule-form__fieldset">
-          <label class="label" for="name">Feed url</label>
-          {{ form.url.errors }}
-          {{ form.url }}
-        </fieldset>
-
-        <fieldset class="form__fieldset rule-form__fieldset">
-          <label class="label" for="name">Favicon url</label>
-          {{ form.favicon.errors }}
-          {{ form.favicon }}
-        </fieldset>
-
-        <fieldset class="form__fieldset rule-form__fieldset">
-          <label class="label" for="name">Timezone</label>
-          <small class="small helptext">The timezone which the feed uses</small>
-          {{ form.timezone.errors }}
-          {{ form.timezone }}
-        </fieldset>
-      </section>
-
-      <section class="section form__section rule-form__section">
-        <fieldset class="form__fieldset rule-form__fieldset">
-          <a class="link button button--cancel" href="{% url 'news:collection:rules' %}">Cancel</a>
-          {% block confirm-button %}{% endblock %}
-        </fieldset>
-      </section>
-    </form>
-  </main>
-{% endblock %}

src/newsreader/scss/elements/index.scss

@@ -1,10 +1,11 @@
+@import "badge/index";
 @import "button/index";
+@import "help-text/index";
+@import "input/index";
+@import "label/index";
 @import "link/index";
 @import "h1/index";
 @import "h2/index";
 @import "h3/index";
 @import "small/index";
-@import "input/index";
+@import "select/index";
-@import "label/index";
-@import "help-text/index";
-@import "badge/index";

src/newsreader/scss/elements/select/_select.scss

@@ -0,0 +1,11 @@
+.select {
+  max-height: 200px;
+
+  &:not([size]){
+    width: 40%;
+  }
+}
+
+select {
+  @extend .select;
+}

src/newsreader/scss/elements/select/index.scss

@@ -0,0 +1 @@
+@import "select";

src/newsreader/templates/form.html

@@ -24,7 +24,7 @@
 
         {{ field.errors }}
         {{ field }}
-        {{ field.help_text }}
+        <small class="small helptext">{{ field.help_text }}</small>
       </fieldset>
     {% endfor %}
   </section>