~cedric/newspipe

9dd7748dd86bf35d6a3dd896c22f7e6f40245fa9 โ€” Cรฉdric Bonhomme 1 year, 4 months ago e4dbe99
Migrating frontend to Bootstrap 4.
M newspipe/web/static/css/customized-bootstrap.css => newspipe/web/static/css/customized-bootstrap.css +31 -6
@@ 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;

M newspipe/web/templates/layout.html => newspipe/web/templates/layout.html +30 -104
@@ 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 />


M newspipe/web/templates/login.html => newspipe/web/templates/login.html +26 -19
@@ 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 %}

M package-lock.json => package-lock.json +4 -4
@@ 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",

M package.json => package.json +3 -3
@@ 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",