🚧 switch to bootstrap-flask / bootstrap 4

TODO.md

@@ -2,11 +2,9 @@
 * close filehandle after sending?
   * or clean up when handling subsequent requests
 * `DeprecationWarning: The 'attachment_filename' parameter has been renamed to 'download_name'. The old name will be removed in Flask 2.1.`
+* "Keine gültige ganze Zahl" ist keine gute fehlermeldung
 
 bootstrap 4
 -----------
-* fix calender locale ("December")
-* waren die Fehler früher rot?
-
 * add "Minuten" to Länge
 * update screenshot

templates/base.html

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

templates/download.html

@@ -32,10 +32,11 @@
 
         {{ wtf.form_errors(form, hiddens="only") }}
 
-        <div class="form-group required {% if form.start_time.errors %}has-error{% endif -%}">
+        <div class="form-group required">
             {{ form.start_time.label(class_="form-control-label") }}
             <div class='input-group date' id='start_time_group' data-target-input="nearest">
-                <input name='start_time' id='start_time_' class="form-control datetimepicker-input"
+                <input name='start_time' id='start_time_'
+                    class="form-control datetimepicker-input {{"is-invalid" if form.start_time.errors else ""}}"
                     type="text" data-target="#start_time_group"
                     placeholder="{{ form.start_time.format }}"
                     {% if form.start_time.data %}
@@ -46,17 +47,17 @@
                     <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>
-            {% endfor %}
+            {% if form.start_time.errors %}
+                <div class="invalid-feedback">{{ form.start_time.errors|join("<br/>")|safe }}</div>
+            {% endif %}
         </div>
 
-        <div class="form-group required {% if form.length.errors %}has-error{% endif -%}">
+        <div class="form-group required">
             {{ form.length.label(class_="form-control-label") }}
-            {{ form.length(class_="form-control") }}
-            {% for error in form.length.errors %}
-            <p class="help-block">{{ error }}</p>
-            {% endfor %}
+            {{ form.length(class_="form-control " + ("is-invalid" if form.length.errors else "")) }}
+            {% if form.length.errors %}
+                <div class="invalid-feedback">{{ form.length.errors|join("<br/>")|safe }}</div>
+            {% endif %}
         </div>
 
         <div class="form-group required">
@@ -74,7 +75,7 @@
 {{ super() }}
 
 <script type="text/javascript"
-        src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
+        src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment-with-locales.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>