🚧 switch to bootstrap-flask / bootstrap 4

TODO.md

@@ -1,3 +1,9 @@
 * check if ffmpeg is faster with less input files
 * close filehandle after sending?
   * or clean up when handling subsequent requests
+
+bootstrap 4
+-----------
+* fix design...
+* fix calendar icon
+* add "Minuten" to Länge

prolefeeder.py

@@ -19,7 +19,7 @@ from config import Config
 app = Flask(__name__)
 app.config.from_object(Config)
 app.config['WTF_I18N_ENABLED'] = False  # enables WTForms built-in translations
-Bootstrap(app)
+bootstrap = Bootstrap(app)
 
 attachment_filenames = {}
 

requirements.txt

@@ -1,7 +1,5 @@
 werkzeug==0.16.1
 flask
-flask-bootstrap
+bootstrap-flask
 python-dotenv
-
-# flask-wtf 0.14.2 is broken (enabling WTForms built-in translations does not work):
-git+https://github.com/lepture/flask-wtf.git@534e1734b86c2f0907af131c11b981e6146ca57c
+flask-wtf >= 1.0.0

templates/base.html

@@ -17,7 +17,7 @@
     </div>
 </div>
 
-{{ utils.flashed_messages() }}
+{{ utils.render_messages() }}
 
 <div class="container">
     {% block app_content %}{% endblock %}

templates/download.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% import "bootstrap/wtf.html" as wtf %}
+{% import "bootstrap/form.html" as wtf %}
 
 
 {% block head %}
@@ -7,7 +7,10 @@
     {% if filename is defined %}
     <meta http-equiv="refresh" content="0;URL='{{ url_for('download_file', filename=filename) }}'" />
     {% endif %}
-    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css"
+          integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg=="
+          crossorigin="anonymous" />
 {% endblock %}
 
 {% block page_header %}
@@ -27,16 +30,17 @@
 
         <div class="form-group required {% if form.start_time.errors %}has-error{% endif -%}">
             {{ form.start_time.label(class_="control-label") }}
-            <div class='input-group' id='start_time_group'>
-                <input name='start_time' id='start_time_' class="form-control"
+            <div class='input-group' id='start_time_group' data-target-input="nearest">
+                <input name='start_time' id='start_time_' class="form-control datetimepicker-input"
+                    type="text" data-target="#start_time_group"
                     placeholder="{{ form.start_time.format }}"
                     {% if form.start_time.data %}
                     value="{{ form.start_time.data.strftime(form.start_time.format) }}"
                     {% endif %}
                 />
-                <span class="input-group-addon">
-                    <span class="glyphicon glyphicon-calendar"></span>
-                </span>
+                <div class="input-group-append" data-target="#start_time_group" data-toggle="datetimepicker">
+                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
+                </div>
             </div>
             {% for error in form.start_time.errors %}
             <p class="help-block">{{ error }}</p>
@@ -65,8 +69,11 @@
 {% block scripts %}
 {{ super() }}
 
-<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
-<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
+<script type="text/javascript"
+        src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"
+        integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA=="
+        crossorigin="anonymous"></script>
 
 <script type="text/javascript">
     $(document).ready(function() {