diff options
| -rw-r--r-- | newspipe/web/static/css/customized-bootstrap.css | 37 | ||||
| -rw-r--r-- | newspipe/web/templates/layout.html | 134 | ||||
| -rw-r--r-- | newspipe/web/templates/login.html | 45 | ||||
| -rw-r--r-- | package-lock.json | 8 | ||||
| -rw-r--r-- | package.json | 6 |
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") }}">🗞 </a> - {% else %} - <a class="navbar-brand" href="{{ url_for("home") }}">🗞 </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> {{ _('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> {{ _('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> <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> {{ _('Recent bookmarks') }}</a></li> - <li><a href="{{ url_for("popular") }}"><span class="glyphicon glyphicon-list"></span> {{ _('Popular feeds') }}</a></li> - <li><a href="{{ url_for("about") }}"><span class="glyphicon glyphicon-question-sign"></span> {{ _('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", |