From b8c23a00b8b1d4ce93c52253a758301e07e4534e Mon Sep 17 00:00:00 2001
From: Cédric Bonhomme <cedric@cedricbonhomme.org>
Date: Sat, 27 Jun 2020 00:54:26 +0200
Subject: chg: [template] Minor improvements and fixed to the edit_feed.html
 template.

---
 newspipe/static/js/feed.js                | 26 ++++++++++-----
 newspipe/templates/admin/create_user.html | 26 +++++++--------
 newspipe/templates/edit_feed.html         | 53 ++++++++++++++++++++-----------
 3 files changed, 64 insertions(+), 41 deletions(-)

diff --git a/newspipe/static/js/feed.js b/newspipe/static/js/feed.js
index 23e509f4..e51e423f 100644
--- a/newspipe/static/js/feed.js
+++ b/newspipe/static/js/feed.js
@@ -1,29 +1,39 @@
 var node = document.getElementById('add-feed-filter-row');
 if (node != null) {
   node.onclick = function() {
-    document.getElementById('filters-container').innerHTML =
-          '<div class="form-group">'
+    document.getElementById('filters-container').innerHTML +=
+          '<div class="row row-cols-md-auto g-5 align-items-center">'
+          + '<div class="col">'
           + '    <input value="-" type="button" class="form-control del-feed-filter-row" />'
-          + '    <select name="type" class="form-control">'
+          + '</div>'
+          + '<div class="col">'
+          + '    <select name="type" class="form-select">'
           + '        <option value="simple match" selected>simple match</option>'
           + '        <option value="regex">regex</option>'
           + '    </select>'
-          + '    <input type="text" class="form-control"  name="pattern" />'
-          + '    <select name="action_on" class="form-control">'
+          + '</div>'
+          + '<div class="col">'
+          + '    <input type="text" class="form-control" name="pattern" />'
+          + '</div>'
+          + '<div class="col">'
+          + '    <select name="action_on" class="form-select">'
           + '        <option value="match" selected>match</option>'
           + '        <option value="no match">no match</option>'
           + '    </select>'
-          + '    <select name="action" class="form-control">'
+          + '</div>'
+          + '<div class="col">'
+          + '    <select name="action" class="form-select">'
           + '        <option value="mark as read" selected>mark as read</option>'
           + '        <option value="mark as favorite">mark as favorite</option>'
           + '    </select>'
-          + '</div>';
+          + '</div>'
+          + '</div><br />';
   }
 }
 
 var nodes = document.getElementsByClassName('del-feed-filter-row');
 Array.prototype.map.call(nodes, function(node) {
     node.onclick = function() {
-      node.parentNode.remove();
+      node.parentNode.parentNode.remove();
     }
 })
diff --git a/newspipe/templates/admin/create_user.html b/newspipe/templates/admin/create_user.html
index 8844f987..04d9d631 100644
--- a/newspipe/templates/admin/create_user.html
+++ b/newspipe/templates/admin/create_user.html
@@ -4,23 +4,21 @@
 {% endblock %}
 {% block content %}
 <div class="container">
-    <div class="well">
-        <h2>{{ message | safe }}</h2>
-        <form action="" method="post" name="saveprofileform" id="profileform">
-            {{ form.hidden_tag() }}
+  <h2>{{ message | safe }}</h2>
+  <form action="" method="post" name="saveprofileform" id="profileform">
+      {{ form.hidden_tag() }}
 
-            {{ form.nickname.label }}
-            {{ form.nickname(class_="form-control") }} {% for error in form.nickname.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
+      {{ form.nickname.label }}
+      {{ form.nickname(class_="form-control") }} {% for error in form.nickname.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
 
-            {{ form.password.label }}
-            {{ form.password(class_="form-control") }} {% for error in form.password.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
+      {{ form.password.label }}
+      {{ form.password(class_="form-control") }} {% for error in form.password.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
 
-            {{ form.automatic_crawling.label }}
-            {{ form.automatic_crawling(class_="form-control") }} {% for error in form.automatic_crawling.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
+      {{ form.automatic_crawling.label }}
+      {{ form.automatic_crawling(class_="form-control") }} {% for error in form.automatic_crawling.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
 
-            <br />
-            {{ form.submit(class_="btn btn-primary") }}
-        </form>
-    </div>
+      <br />
+      {{ form.submit(class_="btn btn-primary") }}
+  </form>
 </div>
 {% endblock %}
diff --git a/newspipe/templates/edit_feed.html b/newspipe/templates/edit_feed.html
index 41de789d..8d3cec4a 100644
--- a/newspipe/templates/edit_feed.html
+++ b/newspipe/templates/edit_feed.html
@@ -2,18 +2,18 @@
 {% block content %}
 <div class="container">
         <h3>{{ action }}</h3>
-        <form action="" method="POST" name="save" class="form-horizontal">
+        <form action="" method="POST" name="save">
             {{ form.hidden_tag() }}
             <p>Enter the URL of the website or the URL of the feed (RSS/ATOM).</p>
             <div class="form-row">
-                <div class="form-group col-md-6">
+                <div class="col-md-6">
                     <label for="{{ form.site_link.id }}" class="col-sm-3 control-label">{{ form.site_link.label }}</label>
                     <div class="col">
                         {{ form.site_link(class_="form-control", size="100%") }}
                     </div>
                     {% for error in form.site_link.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
                 </div>
-                <div class="form-group col-md-6">
+                <div class="col-md-6">
                     <label for="{{ form.link.id }}" class="col-sm-3 control-label">{{ form.link.label }}</label>
                     <div class="col">
                         {{ form.link(class_="form-control", size="100%") }}
@@ -21,7 +21,7 @@
                     {% for error in form.link.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
                 </div>
             </div>
-            <div class="form-group">
+            <div>
                 <div class="col-sm-offset-3 col-sm-9">
                     {{ form.submit(class_="btn btn-primary") }}
                 </div>
@@ -67,40 +67,55 @@
                 </div>
             </div>
 
-            <div class="form-group">
-                <label class="col-sm-3 control-label">{{ _("Filters") }}</label>
-                <div class="col-sm-9">
-                    <div class="text-muted text-justify">
-                        {{ _("Here you can define actions to perform on newly retrieved items.") }}
-                    </div>
-                </div>
-                <div class="col-sm-1">
-                    <input value="+" type="button" class="form-control" id="add-feed-filter-row" />
+            <hr />
+
+            <div class="row">
+              <div class="col">
+                <h4>{{ _("Filters") }}</h4>
+                <div class="text-justify">
+                  {{ _("Here you can define actions to perform on newly retrieved items.") }}
                 </div>
+                <button type="button" class="btn btn-primary" id="add-feed-filter-row" >+</button>
+              </div>
             </div>
-            <div class="form-inline col-sm-offset-4 col-sm-8" id="filters-container">
+
+            <br />
+
+            <div id="filters-container">
                 {% if feed %}
                     {% for filter_ in feed.filters or [] %}
-                        <div class="form-group">
+                      <div class="row row-cols-md-auto g-5 align-items-center">
+                        <div class="col">
                             <input value="-" type="button" class="form-control del-feed-filter-row" />
-                            <select name="type" class="form-control" >
+                        </div>
+                        <div class="col">
+                            <select name="type" class="form-select" >
                                 <option value="simple match" {% if filter_.get("type") == "simple match" %}selected{% endif %}>{{ _("simple match") }}</option>
                                 <option value="regex" {% if filter_.get("type") == "regex" %}selected{% endif %}>{{ _("regex") }}</option>
                             </select>
+                        </div>
+                        <div class="col">
                             <input type="text" class="form-control" value="{{ filter_.get("pattern") }}" name="pattern" />
-                            <select name="action_on" class="form-control">
+                        </div>
+                        <div class="col">
+                            <select name="action_on" class="form-select">
                                 <option value="match" {% if filter_.get("action on") == "match" %}selected{% endif %}>{{ _("match") }}</option>
                                 <option value="no match" {% if filter_.get("action on") == "no match" %}selected{% endif %}>{{ _("no match") }}</option>
                             </select>
-                            <select name="action" class="form-control">
+                        </div>
+                        <div class="col">
+                            <select name="action" class="form-select">
                                 <option value="mark as read" {% if filter_.get("action") == "mark as read" %}selected{% endif %}>{{ _("mark as read") }}</option>
                                 <option value="mark as favorite" {% if filter_.get("action") == "mark as favorite" %}selected{% endif %}>{{ _("mark as favorite") }}</option>
                             </select>
                         </div>
+                      </div><br />
                     {% endfor %}
                 {% endif %}
             </div>
-
+            
+            <br />
+            
             <div class="form-group">
                 <div class="col-sm-offset-3 col-sm-9">
                     {{ form.submit(class_="btn btn-primary") }}
-- 
cgit