From ba2b5d054754d1738544b8394cc0302a521b88d2 Mon Sep 17 00:00:00 2001
From: sonny <sonnyba871@gmail.com>
Date: Fri, 15 May 2020 20:32:35 +0200
Subject: [PATCH] Update rules list view

---
 .../templates/collection/rules.html           | 76 +++++++++++--------
 .../scss/components/form/_form.scss           | 20 +++++
 2 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/src/newsreader/news/collection/templates/collection/rules.html b/src/newsreader/news/collection/templates/collection/rules.html
index 32b6f24..a17b818 100644
--- a/src/newsreader/news/collection/templates/collection/rules.html
+++ b/src/newsreader/news/collection/templates/collection/rules.html
@@ -6,42 +6,52 @@
     <form class="form rules-form">
       {% csrf_token %}
 
-      <div class="form__actions">
-        <input type="submit" class="button button--primary" formaction="{% url "news:collection:rules-enable" %}" formmethod="post" value="{% trans "Enable" %}" />
-        <input type="submit" class="button button--primary" formaction="{% url "news:collection:rules-disable" %}" formmethod="post" value="{% trans "Disable" %}" />
-        <input type="submit" class="button button--error" formaction="{% url "news:collection:rules-delete" %}" formmethod="post" value="{% trans "Delete" %}"/>
-      </div>
-      <table class="table rules-table">
-        <thead class="table__header rules-table__header">
-          <tr class="table__row rules-table__row">
-            <th class="table__heading rules-table__heading--select">
-              <input type="checkbox" id="select-all" data-input="rules" />
-            </th>
-            <th class="table__heading rules-table__heading--name">{% trans "Name" %}</th>
-            <th class="table__heading rules-table__heading--category">{% trans "Category" %}</th>
-            <th class="table__heading rules-table__heading--url">{% trans "URL" %}</th>
-            <th class="table__heading rules-table__heading--succeeded">{% trans "Successfuly ran" %}</th>
-            <th class="table__heading rules-table__heading--enabled">{% trans "Enabled" %}</th>
-            <th class="table__heading rules-table__heading--link"></th>
-          </tr>
-        </thead>
-        <tbody class="table__body">
-          {% for rule in rules %}
+      <section class="section form__section form__section--actions">
+        <fieldset class="fieldset form__fieldset">
+          <input type="submit" class="button button--primary" formaction="{% url "news:collection:rules-enable" %}" formmethod="post" value="{% trans "Enable" %}" />
+          <input type="submit" class="button button--primary" formaction="{% url "news:collection:rules-disable" %}" formmethod="post" value="{% trans "Disable" %}" />
+          <input type="submit" class="button button--error" formaction="{% url "news:collection:rules-delete" %}" formmethod="post" value="{% trans "Delete" %}"/>
+        </fieldset>
+
+        <div class="form__actions">
+          <a class="link button button--confirm" href="{% url "news:collection:rule-create" %}">{% trans "Add a rule" %}</a>
+        </div>
+      </section>
+
+      <section class="section form__section">
+        <table class="table rules-table">
+          <thead class="table__header rules-table__header">
             <tr class="table__row rules-table__row">
-              <td class="table__item rules-table__item"><input name="rules" type="checkbox" value="{{ rule.pk }}" /></td>
-              <td class="table__item rules-table__item" title="{{ rule.name }}">{{ rule.name }}</td>
-              <td class="table__item rules-table__item" title="{{ rule.category.name }}">{{ rule.category.name }}</td>
-              <td class="table__item rules-table__item" title="{{ rule.url }}">{{ rule.url }}</td>
-              <td class="table__item rules-table__item" title="{{ rule.succeeded }}">{{ rule.succeeded }}</td>
-              <td class="table__item rules-table__item" title="{{ rule.enabled }}">{{ rule.enabled }}</td>
-              <td class="table__item rules-table__item">
-                <a class="link" href="{% url "news:collection:rule-update" rule.pk %}"><i class="gg-pen"></i></a>
-              </td>
+              <th class="table__heading rules-table__heading--select">
+                <input type="checkbox" id="select-all" data-input="rules" />
+              </th>
+              <th class="table__heading rules-table__heading--name">{% trans "Name" %}</th>
+              <th class="table__heading rules-table__heading--category">{% trans "Category" %}</th>
+              <th class="table__heading rules-table__heading--url">{% trans "URL" %}</th>
+              <th class="table__heading rules-table__heading--succeeded">{% trans "Successfuly ran" %}</th>
+              <th class="table__heading rules-table__heading--enabled">{% trans "Enabled" %}</th>
+              <th class="table__heading rules-table__heading--link"></th>
             </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+          </thead>
+          <tbody class="table__body">
+            {% for rule in rules %}
+              <tr class="table__row rules-table__row">
+                <td class="table__item rules-table__item"><input name="rules" type="checkbox" value="{{ rule.pk }}" /></td>
+                <td class="table__item rules-table__item" title="{{ rule.name }}">{{ rule.name }}</td>
+                <td class="table__item rules-table__item" title="{{ rule.category.name }}">{{ rule.category.name }}</td>
+                <td class="table__item rules-table__item" title="{{ rule.url }}">{{ rule.url }}</td>
+                <td class="table__item rules-table__item" title="{{ rule.succeeded }}">{{ rule.succeeded }}</td>
+                <td class="table__item rules-table__item" title="{{ rule.enabled }}">{{ rule.enabled }}</td>
+                <td class="table__item rules-table__item">
+                  <a class="link" href="{% url "news:collection:rule-update" rule.pk %}"><i class="gg-pen"></i></a>
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </section>
     </form>
+
     <div class="table__footer">
       <div class="pagination">
         <span class="pagination__previous">
diff --git a/src/newsreader/scss/components/form/_form.scss b/src/newsreader/scss/components/form/_form.scss
index feab671..ab1f27c 100644
--- a/src/newsreader/scss/components/form/_form.scss
+++ b/src/newsreader/scss/components/form/_form.scss
@@ -16,6 +16,19 @@
         justify-content: space-between;
       }
     }
+
+    &--actions {
+      display: flex;
+      flex-direction: row !important;
+
+      & .form__fieldset {
+        flex-direction: row;
+
+        & > * {
+          margin: 0 0 0 5px;
+        }
+      }
+    }
   }
 
   &__fieldset {
@@ -29,6 +42,13 @@
     padding: 15px;
   }
 
+  &__actions {
+    display: flex;
+    flex-direction: row;
+
+    padding: 15px;
+  }
+
   &__title {
     font-size: 18px;
   }