Initial form refactor

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

@@ -1,37 +1,10 @@
 {% extends "base.html" %}
 
-{% load static i18n %}
+{% load static %}
 
 {% block content %}
   <main id="import--page" class="main">
-    <form class="form import-form" method="post" enctype="multipart/form-data">
-      {% csrf_token %}
-      {{ form.non_field_errors }}
-
-      <div class="form__header">
-        <h1 class="h1 form__title">{% trans "Import an OPML file" %}</h1>
-      </div>
-      <section class="section form__section import-form__section">
-        <fieldset class="form__fieldset import-form__fieldset">
-          <label class="label import-form__label" for="name">
-            {% trans "File" %}
-          </label>
-          {{ form.file.errors }}
-          {{ form.file }}
-        </fieldset>
-
-        <fieldset class="form__fieldset import-form__fieldset">
-          <label class="label import-form__label" for="name">
-            {% trans "Skip existing" %}
-          </label>
-          {{ form.skip_existing }}
-        </fieldset>
-
-        <fieldset class="form__fieldset import-form__fieldset">
-          <a class="link button button--cancel" href="{% url 'news:collection:rules' %}">Cancel</a>
-          <button class="button button--confirm">Import</button>
-        </fieldset>
-      </section>
-    </form>
+    {% url "news:collection:rules" as cancel_url %}
+    {% include "form.html" with form=form title="Import an OPML file" cancel_url=cancel_url only %}
   </main>
 {% endblock %}

src/newsreader/scss/components/form/_form.scss

@@ -8,6 +8,16 @@
   font-family: $form-font;
   background-color: $white;
 
+  &__section {
+    &--last {
+      & .form__fieldset {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    }
+  }
+
   &__fieldset {
     @extend .fieldset;
   }
@@ -19,14 +29,6 @@
     padding: 15px;
   }
 
-  &__actions {
-    display: flex;
-    justify-content: space-between;
-
-    width: 50%;
-    padding: 15px;
-  }
-
   &__title {
     font-size: 18px;
   }

src/newsreader/scss/elements/input/_input.scss

@@ -8,6 +8,15 @@
   &:focus {
     border: 1px $focus-blue solid;
   }
+
+  &[type="file"] {
+    width: 40%;
+  }
+
+  &[type="checkbox"] {
+    align-self: flex-start;
+    margin: 0 0 0 10px;
+  }
 }
 
 input {

src/newsreader/templates/form.html

@@ -0,0 +1,41 @@
+{% load i18n %}
+
+<form class="form{% if classes %} {{ classes }}{% endif %}" method="{{ method|default:"post" }}" enctype="multipart/form-data">
+  {% csrf_token %}
+
+  {% if form.non_field_errors %}
+    <section class="section form__errors">
+      {{ form.non_field_errors }}
+    </section>
+  {% endif %}
+
+  {% if title %}
+    <section class="section form__header">
+      <h1 class="h1 form__title">{{ title }}</h1>
+    </section>
+  {% endif %}
+
+  <section class="section form__section">
+    {% for field in form %}
+      <fieldset class="form__fieldset">
+        <label class="label form__label" for="{{ field.name }}">
+          {{ field.label }}
+        </label>
+
+        {{ field.errors }}
+        {{ field }}
+        {{ field.help_text }}
+      </fieldset>
+    {% endfor %}
+  </section>
+
+  <section class="section form__section--last">
+    <fieldset class="form__fieldset">
+      {% if cancel_url %}
+        <a class="link button button--cancel" href="{{ cancel_url }}">{% trans "Cancel" %}</a>
+      {% endif %}
+
+      <button class="button button--confirm">{% trans "Save" %}</button>
+    </fieldset>
+  </section>
+</form>