notes & templates review

aircox/templates/aircox/base.html

@@ -74,8 +74,9 @@ Usefull context:
                         <a class="nav-item" href="{% url "profile" %}" target="new">
                             {% translate "Profile" %}
                         </a>
-                        <a class="nav-item" href="{% url 'logout' %}">
-                            <i title="{% translate 'disconnect' %}" class="fa fa-power-off"></i>
+                        <a class="nav-item" href="{% url "logout" %}" title="{% translate "Disconnect" %}"
+                            aria-label="{% translate "Disconnect" %}">
+                            <i class="fa fa-power-off"></i>
                         </a>
                         {% endif %}
                         {% endblock %}

aircox/templates/aircox/episode_form.html

@@ -23,7 +23,6 @@
     <table>
         {{ form.as_table }}
         {% render_honeypot_field "website" %}
-
     </table>
     <br/>
     <input type="submit" value="Update" class="button is-success">

aircox/templates/aircox/program_form.html

@@ -6,6 +6,7 @@
   {{ form.media }}
 {% endblock %}
 
+{# FIXME: why disabling application init? #}
 {% block init-scripts %}
 {% endblock %}
 
@@ -16,12 +17,23 @@
 <section class="container">
 <div>
 <form method="post" enctype="multipart/form-data">{% csrf_token %}
-    <table>
-        {{ form.as_table }}
-        {% render_honeypot_field "website" %}
-    </table>
-    <br/>
-    <input type="submit" value="Update" class="button is-success">
+    {% csrf_token %}
+    {% for field in form %}
+    <div class="field is-horizontal">
+        <label class="label">{{ field.label }}</label>
+        <div class="control">{{ field }}</div>
+    </div>
+    {% if field.errors %}
+    <p class="help is-danger">{{ field.errors }}</p>
+    {% endif %}
+    {% if field.help_text %}
+    <p class="help">{{ field.help_text|safe }}</p>
+    {% endif %}
+    {% endfor %}
+
+    <div class="has-text-right">
+        <button type="submit" class="button">{% translate "Update" %}</button>
+    </div>
 </form>
 </div>
 </section>

dev-1.0-121-notes.md

@@ -3,3 +3,13 @@
 - don't forget to add your exported module member name to __all__ ;)
 - it is better to put forms inside aircox.forms submodule (as aircox.forms.program subfiles, etc. if the file is to big + reexport in aircox.forms.__init__)
 - you can eventually regroup urls under "/admin" or sth like this, in order to avoid mixing public and backoffice urls.
+- you can use fontawesome icons instead of UTF-8 ones (=> Editer sur la page d'émission, etc.): https://fontawesome.com/icons?d=gallery&m=free
+- Forms:
+    - tables should not be used to render forms: either use flexbox or stack vertically labels and inputs. Generally, tables are in used to render data sets in modern web dev.;
+    - CSS framework partially use Bulma's ones (https://bulma.io/documentation/form/general/ ). You can customize form rendering by iterating over fields (example: aircox/templates/aircox/page_detail.html => comment form; no need for honeypot if user is authenticated)
+    - you can use template inheritance and inclusion in order to avoid repeating the code over all templates. If required you can just have base template as "page_form.html" that you can even set directly to your view classes if nothing specific is required for the model (on view class => template_name attribute). Less code = less bugs = less maintenance.
+    - btw some templates *_form extends from different base template.
+    - also, for submit button, just use class "button" (for color panel coherency). For secondary buttons, there is the css class "secondary" (as in `<button class="button secondary" />`
+- you might add an `<hr>` between episode form and playlist editor;
+- if you want you can also add comment management;
+- you might want to use aria-label too for accessibility (eventually, aria-description). Not mandatory but still is cool to think of accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA