aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCédric Bonhomme <cedric@cedricbonhomme.org>2020-02-29 10:08:23 +0100
committerCédric Bonhomme <cedric@cedricbonhomme.org>2020-02-29 10:08:23 +0100
commit9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9 (patch)
tree9229707ba50fdf6eb277b796568a3d6d31a7d4f5
parentUpdated README. (diff)
downloadnewspipe-9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9.tar.gz
newspipe-9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9.tar.bz2
newspipe-9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9.zip
Migrating frontend to Bootstrap 4.
Diffstat
-rw-r--r--newspipe/web/static/css/customized-bootstrap.css37
-rw-r--r--newspipe/web/templates/layout.html134
-rw-r--r--newspipe/web/templates/login.html45
-rw-r--r--package-lock.json8
-rw-r--r--package.json6
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",
bgstack15