Improved user management page.

3 files changed, 30 insertions, 11 deletions

diff --git a/newspipe/web/static/css/custom.css b/newspipe/web/static/css/custom.css
index 01befb3e..c85cc8a1 100644
--- a/newspipe/web/static/css/custom.css
+++ b/newspipe/web/static/css/custom.css
@@ -39,6 +39,7 @@ a {
 }
 .btn-primary {
     background-color: #0082c9;
+    opacity: 1;
     color: white;
 }
 
diff --git a/newspipe/web/templates/management.html b/newspipe/web/templates/management.html
index a6a7d57c..6cd6ec97 100644
--- a/newspipe/web/templates/management.html
+++ b/newspipe/web/templates/management.html
@@ -31,25 +31,42 @@
             <div class="row">
                 <div class="col">
                     <h3>{{ _('Articles') }}</h3>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
                     <h5>{{ _('Import') }}</h5>
+                    <p>{{ _('Import a Newspipe account') }} (*.json)</p>
                     <form action="" method="post" id="formImportJSON" enctype="multipart/form-data">
-                        <span class="btn btn-file">{{ _('Import a Newspipe account') }} (<span class="text-info">*.json</span>)<input type="file" name="jsonfile" /></span>
+                        <input type="file" name="jsonfile" />
                         <button class="btn btn-primary" type="submit">OK</button>
                     </form>
-                    <br />
+                </div>
+                <div class="col">
                     <h5>{{ _('Export') }}</h5>
-                    <a href="{{ url_for('articles.export') }}" class="btn btn-primary">{{ _('Export your Newspipe account to JSON') }}</a>
+                    <p>{{ _('Export your newspipe account to JSON.') }}</p>
+                    <a href="{{ url_for('articles.export') }}" class="btn btn-primary">{{ _('Export') }}</a>
+                </div>
+            </div>
+            <br />
+            <div class="row">
+                <div class="col">
+                    <h3 id="import">{{ _('Feeds') }}</h3>
                 </div>
+            </div>
+            <div class="row">
                 <div class="col">
-                    <h3 id="import">{{ _('OPML') }}</h3>
                     <h5>{{ _('Import') }}</h5>
+                    <p>{{ _('Batch import feeds from OPML') }} (*.xml {{ _('or') }} *.opml).</p>
                     <form action="" method="post" id="formImportOPML" enctype="multipart/form-data">
-                        <span class="btn btn-file">{{ _('Batch import feeds from OPML') }} (<span class="text-info">*.xml {{ _('or') }} *.opml</span>)<input type="file" name="opmlfile" /></span>
+                        <input type="file" name="opmlfile" />
                         <button class="btn btn-primary" type="submit">OK</button>
                     </form>
-                    <br />
+                </div>
+                <div class="col">
                     <h5>{{ _('Export') }}</h5>
-                    <form class="form-inline" action="{{ url_for('feeds.export') }}" method="GET" id="formExportOPML">
+                    <p>{{ _('Export your feeds to OPML.') }}</p>
+                    <form class="form" action="{{ url_for('feeds.export') }}" method="GET" id="formExportOPML">
                         <div class="form-group">
                             <div class="input-group">
                                 <label>Include disabled feeds</label>
@@ -64,10 +81,11 @@
                                 <input type="checkbox" class="form-control" name="includeprivate" checked />
                             </div>
                         </div>
-                        <button class="btn btn-primary" type="submit">{{ _('Export your feeds to OPML') }}</button>
+                        <button class="btn btn-primary" type="submit">{{ _('Export') }}</button>
                     </form>
                 </div>
             </div>
+
             <div class="row">
                 <div class="col-md-12">
                     <br />
diff --git a/package-lock.json b/package-lock.json
index 106e200a..f17279a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
       "resolved": "https://registry.npmjs.org/datatables/-/datatables-1.10.18.tgz",
       "integrity": "sha512-ntatMgS9NN6UMpwbmO+QkYJuKlVeMA2Mi0Gu/QxyIh+dW7ZjLSDhPT2tWlzjpIWEkDYgieDzS9Nu7bdQCW0sbQ==",
       "requires": {
-        "jquery": "3.4.1"
+        "jquery": ">=1.7"
       }
     },
     "datatables.net": {
@@ -22,7 +22,7 @@
       "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.10.20.tgz",
       "integrity": "sha512-4E4S7tTU607N3h0fZPkGmAtr9mwy462u+VJ6gxYZ8MxcRIjZqHy3Dv1GNry7i3zQCktTdWbULVKBbkAJkuHEnQ==",
       "requires": {
-        "jquery": "3.4.1"
+        "jquery": ">=1.7"
       }
     },
     "datatables.net-bs4": {
@@ -31,7 +31,7 @@
       "integrity": "sha512-kQmMUMsHMOlAW96ztdoFqjSbLnlGZQ63iIM82kHbmldsfYdzuyhbb4hTx6YNBi481WCO3iPSvI6YodNec46ZAw==",
       "requires": {
         "datatables.net": "1.10.20",
-        "jquery": "3.4.1"
+        "jquery": ">=1.7"
       }
     },
     "fork-awesome": {