Migrating frontend to Bootstrap 4.

author: Cédric Bonhomme <cedric@cedricbonhomme.org> 2020-02-29 10:08:23 +0100
committer: Cédric Bonhomme <cedric@cedricbonhomme.org> 2020-02-29 10:08:23 +0100
commit: 9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9 (patch)
tree: 9229707ba50fdf6eb277b796568a3d6d31a7d4f5
parent: Updated README. (diff)
download: newspipe-9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9.tar.gz
newspipe-9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9.tar.bz2
newspipe-9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9.zip
5 files changed, 94 insertions, 136 deletions
diff --git a/newspipe/web/static/css/customized-bootstrap.css b/newspipe/web/static/css/customized-bootstrap.css
index c385c908..f6bbcfd7 100644
--- a/newspipe/web/static/css/customized-bootstrap.css
+++ b/newspipe/web/static/css/customized-bootstrap.css
@@ -1,13 +1,38 @@
+html {
+    position: relative;
+    min-height: 100%;
+}
 body {
-    margin-top: 50px;
+    /* Margin bottom by footer height */
+    margin-bottom: 60px;
+    background-color: rgb(246, 248, 250);
 }
-div.top {
-    position: relative;
-    top: -50px;
-    display: block;
-    height: 0;
+img {
+    padding: 2px;
 }
 
+.bg-newspipe-blue {
+    background-color: #205081;
+}
+
+
+/* Sticky footer */
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 60px;
+  line-height: 60px; /* Vertically center the text there */
+  background-color: #006FBA;
+}
+.footer a{
+    color: #FFFFFF;
+}
+
+
+
+
 #newspipenav {
     background-color: #205081;
     border: #205081;
diff --git a/newspipe/web/templates/layout.html b/newspipe/web/templates/layout.html
index afbfa928..b5eb801a 100644
--- a/newspipe/web/templates/layout.html
+++ b/newspipe/web/templates/layout.html
@@ -11,6 +11,7 @@
     <!-- Bootstrap core CSS -->
     <link href="{{ url_for('static', filename='npm_components/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet" media="screen" />
     <!-- Add custom CSS here -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='npm_components/fork-awesome/css/fork-awesome.min.css') }}">
     <link href="{{ url_for("static", filename="css/customized-bootstrap.css") }}" rel="stylesheet" media="screen" />
     <!-- jquery, bootstrap, datatables -->
     <script type="text/javascript" src="{{ url_for('static', filename = 'npm_components/jquery/dist/jquery.min.js') }}"></script>
@@ -22,112 +23,37 @@
   </head>
   <body>
     {% block menu %}
-    <nav id="newspipenav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
-      <div class="container-fluid">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          {% if current_user.is_authenticated %}
-              <a class="navbar-brand" href="{{ url_for("feeds.feeds") }}">🗞&nbsp;</a>
-          {% else %}
-              <a class="navbar-brand" href="{{ url_for("home") }}">🗞&nbsp;</a>
-          {% endif %}
-          <a class="navbar-brand" href="{{ url_for("home") }}">Newspipe</a>
-          {% if head_titles %}
-            <p class="navbar-text" style="max-height: 20px; overflow: hidden">
-            {{ " - ".join(head_titles) }}
-            </p>
-          {% endif %}
-        </div>
-        <!-- Collect the nav links, forms, and other content for toggling -->
-        <div id="navbar" class="navbar-collapse collapse">
-          <ul class="nav navbar-nav navbar-right">
-            {% if current_user.is_authenticated %}
-                {% if conf.CRAWLING_METHOD == "default" and current_user.is_admin %}
-                    <li><a href="/fetch"><span class="glyphicon glyphicon-import"></span> {{ _('Fetch') }}</a></li>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-newspipe-blue">
+        <a class="navbar-brand" href="/"><img src="{{ url_for('static', filename='img/logo.png') }}" width="120px" alt="Newspipe" title="Newspipe" /></a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        {% block menu_links %}
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+
+             <ul class="navbar-nav mr-auto w-100 justify-content-end">
+                 {% if current_user.is_authenticated %}
+                     <li class="nav-item">
+                         <a class="nav-link" href="{{ url_for('logout') }}" title="{{ _('Logout') }}"><i class="fa fa-sign-out" aria-hidden="true"></i></a>
+                    </li>
+                {% else %}
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ url_for('bookmarks.list_') }}" title="{{  _('Recent bookmarks') }}">{{  _('Recent bookmarks') }}</a>
+                   </li>
+                   <li class="nav-item">
+                       <a class="nav-link" href="{{ url_for('popular') }}" title="{{  _('Popular feeds') }}">{{  _('Popular feeds') }}</a>
+                   </li>
+                   <li class="nav-item">
+                       <a class="nav-link" href="{{ url_for('about') }}" title="{{  _('About') }}">{{  _('About') }}</a>
+                   </li>
                 {% endif %}
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                        <div><span class="glyphicon glyphicon-bookmark"></span></div>
-                    </a>
-                    <ul class="dropdown-menu">
-                        <li><a href="{{ url_for('bookmarks.list_') }}">{{ _('Your bookmarks') }}</a></li>
-                        <li><a href="{{ url_for('bookmark.form') }}">{{ _('Add a new bookmark') }}</a></li>
-                    </ul>
-                </li>
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                        <div><span class="glyphicon glyphicon-plus-sign"></span>&nbsp;{{ _('Add a new feed') }}</div>
-                    </a>
-                    <ul class="dropdown-menu">
-                        <li>
-                            <form action="{{ url_for('feed.bookmarklet') }}" class="navbar-form  navbar-left" method="GET" name="save">
-                              <div class="input-group input-group-inline">
-                                  <input class="form-control" name="url" type="url" placeholder="{{_("Site or feed url")}}" required="required"/>
-                                  <span class="input-group-btn">
-                                        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button>
-                                  </span>
-                              </div><!-- /input-group -->
-                            </form>
-                        </li>
-                    </ul>
-                </li>
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                        <div><span class="glyphicon glyphicon-plus-sign"></span>&nbsp;{{ _('Add a new category') }}</div>
-                    </a>
-                    <ul class="dropdown-menu">
-                        <li>
-                            <form action="{{ url_for('category.form') }}" class="navbar-form  navbar-left" method="POST" name="category">
-                              <div class="input-group input-group-inline">
-                                  <input class="form-control" name="name" type="text" placeholder="{{_("Category name")}}" required="required"/>
-                                  <span class="input-group-btn">
-                                        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button>
-                                  </span>
-                              </div><!-- /input-group -->
-                            </form>
-                        </li>
-                    </ul>
-                </li>
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ _('Feed') }} <b class="caret"></b></a>
-                    <ul class="dropdown-menu">
-                        <li><a href="{{ url_for("feeds.inactives") }}">{{ _('Inactive') }}</a></li>
-                        <li><a href="{{ url_for("articles.history") }}">{{ _('History') }}</a></li>
-                        <li><a href="{{ url_for("feeds.feeds") }}">{{ _('All') }}</a></li>
-                        <li role="presentation" class="divider"></li>
-                        <li><a href="{{ url_for("popular") }}">{{ _('Popular') }}</a></li>
-                    </ul>
-                </li>
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                        <div><span class="glyphicon glyphicon-user"></span>&nbsp;<b class="caret"></b></div>
-                    </a>
-                    <ul class="dropdown-menu">
-                        <li><a href="{{ url_for("user.profile") }}"><span class="glyphicon glyphicon-user"></span> {{ _('Profile') }}</a></li>
-                        <li><a href="{{ url_for("user.management") }}"><span class="glyphicon glyphicon-hdd"></span> {{ _('Your data') }}</a></li>
-                        <li><a href="{{ url_for("about") }}"><span class="glyphicon glyphicon-question-sign"></span> {{ _('About') }}</a></li>
-                        {% if current_user.is_admin %}
-                        <li role="presentation" class="divider"></li>
-                        <li><a href="{{ url_for("admin.dashboard") }}"><span class="glyphicon glyphicon-dashboard"></span> {{ _('Dashboard') }}</a></li>
-                        <li role="presentation" class="divider"></li>
-                        {% endif %}
-                        <li><a href="{{ url_for("logout") }}"><span class="glyphicon glyphicon-log-out"></span> {{ _('Logout') }}</a></li>
-                    </ul>
-                </li>
-            {% else %}
-                <li><a href="{{ url_for("bookmarks.list_") }}"><span class="glyphicon glyphicon-bookmark"></span>&nbsp;{{ _('Recent bookmarks') }}</a></li>
-                <li><a href="{{ url_for("popular") }}"><span class="glyphicon glyphicon-list"></span>&nbsp;{{ _('Popular feeds') }}</a></li>
-                <li><a href="{{ url_for("about") }}"><span class="glyphicon glyphicon-question-sign"></span>&nbsp;{{ _('About') }}</a></li>
-            {% endif %}
-          </ul>
-        </div><!-- /.navbar-collapse -->
-      </div><!-- /.container-fluid -->
+            </ul>
+        </div>
+        {% endblock %}
     </nav>
+
+
+
     {% endblock %}
     <br />
 
diff --git a/newspipe/web/templates/login.html b/newspipe/web/templates/login.html
index d2724ac3..7ac4a35a 100644
--- a/newspipe/web/templates/login.html
+++ b/newspipe/web/templates/login.html
@@ -1,28 +1,35 @@
 {% extends "layout.html" %}
 {% block content %}
 <div class="container">
-    <div class="well">
-        <h2>{{ _('Log In') }}</h2>
-        <form action="{{ url_for('login') }}" method=post>
-            {{ form.hidden_tag() }}
+    <div class="row">
+        <div class="col-md-6">
+            <div class="card">
+                <div class="card-body">
+                    <h2>{{ _('Log In') }}</h2>
+                    <form action="{{ url_for('login') }}" method=post>
+                        {{ form.hidden_tag() }}
 
-            <div class="form-group">
-            {{ 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">
+                        {{ 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">
-            {{ 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 %}
+                        <div class="form-group">
+                        {{ 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-default") }}
-        </form>
+                        {{ form.submit(class_="btn btn-default") }}
+                        <a href="/signup" class="btn btn-default">{{ _('Sign up') }}</a>
+                    </form>
+
+                </div>
+            </div>
+        </div>
     </div>
-    <a href="/signup" class="btn btn-default">{{ _('Sign up') }}</a>
 </div><!-- /.container -->
 {% endblock %}
diff --git a/package-lock.json b/package-lock.json
index 1e93907c..cbbd0aed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "newspipe",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "bootstrap": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.4.1.tgz",
-      "integrity": "sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA=="
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz",
+      "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA=="
     },
     "datatables": {
       "version": "1.10.18",
diff --git a/package.json b/package.json
index 76acd92b..feccdfbe 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,10 @@
   "license": "AGPL-3.0",
   "private": true,
   "dependencies": {
-    "bootstrap": "^3.3.7",
+    "bootstrap": "^4.4.1",
     "datatables": "^1.10.18",
-    "datatables.net": "^1.10.12",
-    "datatables.net-bs": "^1.10.12",
+    "datatables.net": "^1.10.20",
+    "datatables.net-bs": "^1.10.20",
     "fork-awesome": "^1.1.7",
     "jquery": "^3.4.1",
     "lodash": "^4.17.15",
author	Cédric Bonhomme <cedric@cedricbonhomme.org>	2020-02-29 10:08:23 +0100
committer	Cédric Bonhomme <cedric@cedricbonhomme.org>	2020-02-29 10:08:23 +0100
commit	9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9 (patch)
tree	9229707ba50fdf6eb277b796568a3d6d31a7d4f5
parent	Updated README. (diff)
download	newspipe-9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9.tar.gz newspipe-9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9.tar.bz2 newspipe-9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9.zip