chg: [ui] improved forms in navbar.

8 files changed, 79 insertions, 105 deletions

diff --git a/newspipe/static/js/feed.js b/newspipe/static/js/feed.js
index ccbcd54c..23e509f4 100644
--- a/newspipe/static/js/feed.js
+++ b/newspipe/static/js/feed.js
@@ -1,7 +1,7 @@
 var node = document.getElementById('add-feed-filter-row');
 if (node != null) {
   node.onclick = function() {
-    document.getElementById('filters-container').innerHTML = 
+    document.getElementById('filters-container').innerHTML =
           '<div class="form-group">'
           + '    <input value="-" type="button" class="form-control del-feed-filter-row" />'
           + '    <select name="type" class="form-control">'
@@ -17,8 +17,8 @@ if (node != null) {
           + '        <option value="mark as read" selected>mark as read</option>'
           + '        <option value="mark as favorite">mark as favorite</option>'
           + '    </select>'
-          + '</div>';  
-  }  
+          + '</div>';
+  }
 }
 
 var nodes = document.getElementsByClassName('del-feed-filter-row');
@@ -27,30 +27,3 @@ Array.prototype.map.call(nodes, function(node) {
       node.parentNode.remove();
     }
 })
-
-
-// Delete a feed
-var nodes = document.getElementsByClassName('delete-feed');
-Array.prototype.map.call(nodes, function(node) {
-    node.onclick = function() {
-    var r = confirm('You are going to delete this feed.');
-
-    if (r == true) {
-        var feed_id = node.parentNode.parentNode.parentNode.getAttribute("data-feed");
-        node.parentNode.parentNode.parentNode.remove();
-        // $('.feed-menu[data-feed='+feed_id+']').remove();
-
-        // sends the updates to the server
-        fetch(API_ROOT + "feed/" + feed_id, {
-          method: "DELETE", 
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }).then(res => {
-          console.log("Request complete! response:", res);
-        }).catch((error) => {
-          console.error('Error:', error);
-        });;
-    }
-  }
-})
diff --git a/newspipe/templates/about_more.html b/newspipe/templates/about_more.html
index de034b4b..0df05852 100644
--- a/newspipe/templates/about_more.html
+++ b/newspipe/templates/about_more.html
@@ -1,13 +1,17 @@
 {% extends "layout.html" %}
 {% block content %}
 <div class="container">
-    <h2>{{ _('Information about this instance') }}</h2>
-    <ul class="list-group">
-        <li class="list-group-item">{{ _('Newspipe version') }}: <em><a href="{{ version_url }}">{{newspipe_version}}</a></em></li>
-        <li class="list-group-item">{{ _('Python version') }}: <em>{{python_version}}</em></li>
-        <li class="list-group-item">{{ _('Registration') }}: <em>{{registration}}</em></li>
-        <li class="list-group-item">{{ _('Number of users') }}: <em>{{nb_users}}</em></li>
-        <li class="list-group-item">{{ _('Content Security Policy') }}: <em>{{content_security_policy}}</em></li>
-    </ul>
+    <div class="row">
+        <div class="col">
+            <h2>{{ _('Information about this instance') }}</h2>
+            <ul class="list-group">
+                <li class="list-group-item">{{ _('Newspipe version') }}: <em><a href="{{ version_url }}">{{newspipe_version}}</a></em></li>
+                <li class="list-group-item">{{ _('Python version') }}: <em>{{python_version}}</em></li>
+                <li class="list-group-item">{{ _('Registration') }}: <em>{{registration}}</em></li>
+                <li class="list-group-item">{{ _('Number of users') }}: <em>{{nb_users}}</em></li>
+                <li class="list-group-item">{{ _('Content Security Policy') }}: <em>{{content_security_policy}}</em></li>
+            </ul>
+        </div>
+    </div>
 </div><!-- /.container -->
 {% endblock %}
diff --git a/newspipe/templates/article.html b/newspipe/templates/article.html
index 81705da1..df9eba98 100644
--- a/newspipe/templates/article.html
+++ b/newspipe/templates/article.html
@@ -1,37 +1,37 @@
 {% extends "layout.html" %}
 {% block content %}
 <div class="container" data-article="{{ article.id }}">
-    <div class="well">
-        <h2><a href="{{ article.link  }}" target="_blank">{{ article.title|safe }}</a></h2>
-        <h3>{{ _('from') }} <a href="/feed/{{ article.source.id }}">{{ article.source.title }}</a></h3>
-        <a href="{{ url_for("article.delete", article_id=article.id) }}"><i class="fa fa-times delete" aria-hidden="true" title="{{ _('Delete this article') }}"></i></a>
-        {% if article.like %}
-            <a href="#"><i class="fa fa-star like" aria-hidden="true" title="{{ _('One of your favorites') }}"></i></a>
-        {% else %}
-            <a href="#"><i class="fa fa-star-o like" aria-hidden="true" title="{{ _('Click if you like this article') }}"></i></a>
-        {% endif %}
-        {% if article.readed %}
-            <a href="#"><i class="fa fa-square-o readed" title="{{ _('Mark this article as unread') }}"></i></a>
-        {% else %}
-            <a href="#"><i class="fa fa-check-square-o readed" aria-hidden="true" aria-hidden="true" title="{{ _('Mark this article as read') }}"></i></a>
-        {% endif %}
-        <h6>{{ article.date | datetime }}</h6>
+    <div class="row">
+        <div class="col">
+            <h2><a href="{{ article.link  }}" target="_blank">{{ article.title|safe }}</a></h2>
+            <h3>{{ _('from') }} <a href="/feed/{{ article.source.id }}">{{ article.source.title }}</a></h3>
+            <a href="{{ url_for("article.delete", article_id=article.id) }}"><i class="fa fa-times delete" aria-hidden="true" title="{{ _('Delete this article') }}"></i></a>
+            {% if article.like %}
+                <a href="#"><i class="fa fa-star like" aria-hidden="true" title="{{ _('One of your favorites') }}"></i></a>
+            {% else %}
+                <a href="#"><i class="fa fa-star-o like" aria-hidden="true" title="{{ _('Click if you like this article') }}"></i></a>
+            {% endif %}
+            {% if article.readed %}
+                <a href="#"><i class="fa fa-square-o readed" title="{{ _('Mark this article as unread') }}"></i></a>
+            {% else %}
+                <a href="#"><i class="fa fa-check-square-o readed" aria-hidden="true" aria-hidden="true" title="{{ _('Mark this article as read') }}"></i></a>
+            {% endif %}
+            <h6>{{ article.date | datetime }}</h6>
+        </div>
     </div>
     <br />
-    <div class="well">
-        {{ article.content | safe }}
+    <div class="row">
+        <div class="col">
+            {{ article.content | safe }}
+        </div>
     </div>
     <br />
-    <div class="well">
-        <a href="https://api.pinboard.in/v1/posts/add?url={{ article.link  }}&description={{ article.title }}" rel="noreferrer" target="_blank">
-            <img src="{{ url_for('static', filename='img/pinboard.png') }}" title="{{ _('Share on') }} Pinboard" />
-        </a>
-        <a href="https://reddit.com/submit?url={{ article.link }}&title={{ article.title }}" rel="noreferrer" target="_blank">
-            <img src="{{ url_for('static', filename='img/reddit.png') }}" title="{{ _('Share on') }} reddit" />
-        </a>
-        <a href="https://twitter.com/intent/tweet?url={{ article.link }}&text={{ article.title }}"  rel="noreferrer" target="_blank">
-            <img src="{{ url_for('static', filename='img/twitter.png') }}" title="{{ _('Share on') }} twitter" >
-        </a>
+    <div class="row">
+        <div class="col">
+        <a href="https://api.pinboard.in/v1/posts/add?url={{ article.link  }}&description={{ article.title }}" rel="noreferrer" target="_blank"><img src="{{ url_for('static', filename='img/pinboard.png') }}" title="{{ _('Share on') }} Pinboard" /></a>
+        <a href="https://reddit.com/submit?url={{ article.link }}&title={{ article.title }}" rel="noreferrer" target="_blank"><img src="{{ url_for('static', filename='img/reddit.png') }}" title="{{ _('Share on') }} reddit" /></a>
+        <a href="https://twitter.com/intent/tweet?url={{ article.link }}&text={{ article.title }}"  rel="noreferrer" target="_blank"><img src="{{ url_for('static', filename='img/twitter.png') }}" title="{{ _('Share on') }} twitter" ></a>
+        <div class="col">
     </div>
 </div><!-- /.container -->
 {% endblock %}
diff --git a/newspipe/templates/home.html b/newspipe/templates/home.html
index 86563d13..23d4ee37 100644
--- a/newspipe/templates/home.html
+++ b/newspipe/templates/home.html
@@ -7,7 +7,7 @@
 </style>
 <div class="container-fluid">
 {% if feeds|count == 0 %}
-    <div class="row  justify-content-center">
+    <div class="row justify-content-center">
         <div class="col-md-6">
             <h1>{{ _("You don't have any feeds.") }}</h1>
             <h1><a href="{{ url_for('feed.form') }}">{{ _('Add some') }}</a>, {{ _('or') }} <a href="{{ url_for('user.management') }}">{{ _('upload an OPML file.') }}</a></h1>
@@ -46,7 +46,6 @@
                             <a href="{{ url_for('feed.form', feed_id=feed.id) }}"><i class="fa fa-pencil-square-o" aria-hidden="true" title="{{ _('Edit this feed') }}"></i></a>
                             <a href="{{ url_for('article.mark_as', new_value='unread', feed_id=feed.id) }}"><i class="fa fa-square-o" aria-hidden="true" title="{{ _('Mark this feed as unread') }}"></i></a>
                             <a href="{{ url_for('article.mark_as', new_value='read', feed_id=feed.id) }}"><i class="fa fa-check-square-o" aria-hidden="true" title="{{ _('Mark this feed as read') }}"></i></a>
-                            <a href="#"><i class="fa fa-times delete-feed" aria-hidden="true" title="{{ _('Delete this feed') }}"></i></a>
                         </span></li>
                     {% endfor %}
                     </div>
@@ -78,7 +77,6 @@
                 <a href="{{ url_for('feed.form', feed_id=fid) }}"><i class="fa fa-pencil-square-o" aria-hidden="true" title="{{ _('Edit this feed') }}"></i></a>
                 <a href="{{ url_for('article.mark_as', new_value='unread', feed_id=fid) }}"><i class="fa fa-square-o" aria-hidden="true" title="{{ _('Mark this feed as unread') }}"></i></a>
                 <a href="{{ url_for('article.mark_as', new_value='read', feed_id=fid) }}"><i class="fa fa-check-square-o" aria-hidden="true" title="{{ _('Mark this feed as read') }}"></i></a>
-                <a href="#"><i class="fa fa-times delete-feed" aria-hidden="true" title="{{ _('Delete this feed') }}"></i></a>
             </span></li>
         {% endfor %}
         </div>
@@ -108,7 +106,6 @@
                 <a href="{{ url_for('feed.form', feed_id=fid) }}"><i class="fa fa-pencil-square-o" aria-hidden="true" title="{{ _('Edit this feed') }}"></i></a>
                 <a href="{{ url_for('article.mark_as', new_value='unread', feed_id=fid) }}"><i class="fa fa-square-o" aria-hidden="true" title="{{ _('Mark this feed as unread') }}"></i></a>
                 <a href="{{ url_for('article.mark_as', new_value='read', feed_id=fid) }}"><i class="fa fa-check-square-o" aria-hidden="true" title="{{ _('Mark this feed as read') }}"></i></a>
-                <a href="#"><i class="fa fa-times delete-feed" aria-hidden="true" title="{{ _('Delete this feed') }}"></i></a>
             </span></li>
         {% endfor %}
         </div>
diff --git a/newspipe/templates/layout.html b/newspipe/templates/layout.html
index 7d2b8c70..115a1cd9 100644
--- a/newspipe/templates/layout.html
+++ b/newspipe/templates/layout.html
@@ -4,7 +4,7 @@
     {% block head %}
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Newspipe is a web news aggregator and reader." />
+    <meta name="description" content="Newspipe - A web news reader." />
     <meta name="author" content="" />
     <title>Newspipe{% if head_titles %} - {{ ' - '.join(head_titles) }}{% endif %}</title>
     <link rel="shortcut icon" href="{{ url_for("static", filename="img/favicon.ico") }}" />
@@ -37,37 +37,33 @@
                     {% endif %}
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownRSS" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-rss" aria-hidden="true"></i>&nbsp;{{ _('Feeds') }}</a>
-                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownRSS">
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownRSS" style="min-width: 300px;">
                               <a class="dropdown-item" href="{{ url_for('feeds.feeds') }}">{{ _('Feeds') }}</a>
                               <a class="dropdown-item" href="{{ url_for('feeds.inactives') }}">{{ _('Inactive') }}</a>
                               <a class="dropdown-item" href="{{ url_for('popular') }}">{{ _('Popular') }}</a>
                               <a class="dropdown-item" href="{{ url_for('articles.history') }}">{{ _('History') }}</a>
                               <div class="dropdown-divider"></div>
                               <a class="dropdown-item" href="{{ url_for('feed.form') }}">{{ _('Add a new feed') }}</a>
-                              <form class="navbar-form  navbar-left px-4 py-3" action="{{ url_for('feed.bookmarklet') }}">
-                                  <label class="sr-only" for="inlineFormInputGroupAPIKey">{{ _('Add a new feed') }}</label>
-                                  <div class="input-group input-group-inline">
-                                      <div class="input-group-prepend">
-                                            <input class="form-control" name="url" type="url" placeholder="{{_('Site or feed url')}}" required="required"/>
-                                      </div>
+                              <form class="px-4 py-3" action="{{ url_for('feed.bookmarklet') }}">
+                                <div class="input-group">
+                                      <label class="sr-only" for="inlineFormInputGroupAPIKey">{{ _('Add a new feed') }}</label>
+                                      <input class="form-control" name="url" type="url" placeholder="{{_('Site or feed url')}}" required="required"/>
                                       <button type="submit" class="btn btn-primary"><i class="fa fa-plus" aria-hidden="true"></i></button>
-                                  </div>
-                                </form>
+                                 </div>
+                              </form>
                         </div>
                     </li>
 
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCategory" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-tag" aria-hidden="true"></i>&nbsp;{{ _('Categories') }}</a>
-                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownCategory">
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownCategory" style="min-width: 250px;">
                             <a class="dropdown-item" href="{{ url_for('categories.list_') }}">{{ _('Categories') }}</a>
                             <div class="dropdown-divider"></div>
                             <a class="dropdown-item" href="{{ url_for('category.form') }}">{{ _('Add a new category') }}</a>
-                            <form class="navbar-form navbar-left px-4 py-3" action="{{ url_for('category.form') }}" method="POST" name="category">
+                            <form class="px-4 py-3" action="{{ url_for('category.form') }}" method="POST" name="category">
                                 <label class="sr-only" for="inlineFormInputGroupAPIKey">{{ _('Add a new category') }}</label>
-                                <div class="input-group input-group-inline">
-                                    <div class="input-group-prepend">
-                                          <input class="form-control" name="name" type="text" placeholder="{{_('Category name')}}" required="required"/>
-                                    </div>
+                                <div class="input-group">
+                                    <input class="form-control" name="name" type="text" placeholder="{{_('Category name')}}" required="required"/>
                                     <button type="submit" class="btn btn-primary"><i class="fa fa-plus" aria-hidden="true"></i></button>
                                 </div>
                             </form>
@@ -84,16 +80,16 @@
 
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownSearch" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-search" aria-hidden="true"></i></i>&nbsp;{{ _('Search') }}</a>
-                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownSearch">
-                            <form class="navbar-form navbar-left px-4 py-3" action="{{ url_for('home') }}" method="GET">
-                                <div class="form-group">
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownSearch" style="min-width: 300px;">
+                            <form class="px-4 py-3" action="{{ url_for('home') }}" method="GET">
+                                <div class="mb-3">
                                     <input class="form-control" name="query" type="text" placeholder="{{_('Query')}}" required="required"/>
                                 </div>
-                                <div class="form-group form-check">
+                                <div class="mb-3">
                                     <input type="checkbox" class="form-check-input" id="checkTitle" name="search_title" checked>
                                     <label class="form-check-label" for="checkTitle">Search in title</label>
                                 </div>
-                                <div class="form-group form-check">
+                                <div class="mb-3">
                                     <input type="checkbox" class="form-check-input" id="checkContent" name="search_content">
                                     <label class="form-check-label" for="checkContent">Search in content</label>
                                 </div>
diff --git a/newspipe/templates/login.html b/newspipe/templates/login.html
index cade2777..94037d81 100644
--- a/newspipe/templates/login.html
+++ b/newspipe/templates/login.html
@@ -6,20 +6,20 @@
             <h2>{{ _('Log In') }}</h2>
             <form action="{{ url_for('login') }}" method=post>
                 {{ form.hidden_tag() }}
-                <div class="form-group">
+                <div class="input-group mb-3">
                 {{ form.nickmane(class_="form-control", placeholder=_('Your nickname')) }}
                 </div>
                 {% for message in form.nickmane.errors %}
                     <div class="alert alert-warning" role="alert">{{ message }}</div>
                 {% endfor %}
-                <div class="form-group">
+                <div class="input-group mb-3">
                 {{ form.password(class_="form-control", placeholder=_('Your Password')) }}
                 </div>
                 {% for message in form.password.errors %}
                     <div class="alert alert-warning" role="alert">{{ message }}</div>
                 {% endfor %}
                 {{ form.submit(class_="btn btn-primary") }}
-                <a href="/signup" class="btn btn-secondary">{{ _('Sign up') }}</a>
+                <a href="/signup" class="btn btn-info">{{ _('Sign up') }}</a>
             </form>
         </div>
     </div>
diff --git a/newspipe/templates/signup.html b/newspipe/templates/signup.html
index c940df5f..68ebbb6a 100644
--- a/newspipe/templates/signup.html
+++ b/newspipe/templates/signup.html
@@ -2,20 +2,24 @@
 {% block content %}
 <div class="container">
     <div class="row justify-content-center">
-        <div class="col">
+        <div class="col-md-6">
             <form action="" method="post" name="save">
                 {{ form.hidden_tag() }}
-                <div class="form-group">
-                    {{ form.nickname(class_="form-control", placeholder=_('Your nickname')) }} {% for error in form.nickname.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
-                    <p class="help-block">{{ _('Letters, numbers, dots and underscores only.') }}</p>
+                <div class="input-group mb-3">
+                    {{ form.nickname(class_="form-control", placeholder=_('Your nickname')) }}
+                    {% for error in form.nickname.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
+                    &nbsp;<span class="text-muted">{{ _('Letters, numbers, dots and underscores only.') }}</span>
                 </div>
-                <div class="form-group">
-                    {{ form.email(class_="form-control", placeholder=_('Your email')) }} {% for error in form.email.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
-                    <p class="help-block">{{ _("Only for account activation. Your email won't be stored.") }}</p>
+                <p class="help-block"></p>
+                <div class="input-group mb-3">
+                    {{ form.email(class_="form-control", placeholder=_('Your email')) }}
+                    {% for error in form.email.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
+                    &nbsp;<span class="text-muted">{{ _("Only for account activation. Your email won't be stored.") }}</span>
                 </div>
-                <div class="form-group">
-                    {{ form.password(class_="form-control", placeholder=_('Your password')) }} {% for error in form.password.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
-                    <p class="help-block">{{ _('Minimum 6 characters.') }}</p>
+                <div class="input-group mb-3">
+                    {{ form.password(class_="form-control", placeholder=_('Your password')) }}
+                    {% for error in form.password.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
+                    &nbsp;<span class="text-muted">{{ _('Minimum 6 characters.') }}</span>
                 </div>
                 <br />
                 {{ form.submit(class_="btn btn-primary") }}
diff --git a/newspipe/web/views/session_mgmt.py b/newspipe/web/views/session_mgmt.py
index c279ffc1..4fab943f 100644
--- a/newspipe/web/views/session_mgmt.py
+++ b/newspipe/web/views/session_mgmt.py
@@ -34,8 +34,8 @@ Principal(current_app)
 login_manager = LoginManager()
 login_manager.init_app(current_app)
 login_manager.login_view = "login"
-login_manager.login_message = lazy_gettext("Please log in to access this page.")
-login_manager.login_message_category = "info"
+login_manager.login_message = ""
+# login_manager.login_message_category = "info"
 
 logger = logging.getLogger(__name__)