Styling with TailwindCSS

Refactoring the base_form layout template

Want more?

This lesson for enrolled students only. Join the course to unlock it!

You can see the code changes implemented in this lecture below.

If you have purchased the course in a different platform, you still have access to the code changes per lecture here on Teclado. The lecture video and lecture notes remain locked.
Join course for $15

Modified files

templates/app/article_update.html
--- 
+++ 
@@ -1,15 +1,11 @@
 {% extends "app/layouts/base_form.html" %}

-{% block content %}
-  <h1>Edit Article</h1>
+{% block article_stats %}
   <p>{{ article.word_count }} word{{ article.word_count | pluralize }}.</p>
   <p>Last edited on {{ article.updated_at | date:"jS F Y" }}</p>
-  <form method="POST">
-    {% csrf_token %}
-    {{ form.as_p }}
-    <button type="submit">Save</button>
-  </form>
+{% endblock article_stats %}

-  <a href="{% url 'home' %}">Back to list</a>
+{% block buttons %}
   <a href="{% url 'delete_article' article.id %}">Delete article</a>
-{% endblock content %}+  <button type="submit">Save</button>
+{% endblock buttons %}=
templates/app/article_create.html
--- 
+++ 
@@ -1,12 +1,5 @@
 {% extends "app/layouts/base_form.html" %}

-{% block content %}
-  <h1>Create Article</h1>
-  <form method="POST">
-    {% csrf_token %}
-    {{ form.as_p }}
-    <button type="submit">Save</button>
-  </form>
-
-  <a href="{% url 'home' %}">Back to list</a>
-{% endblock content %}+{% block buttons %}
+  <button type="submit">Save</button>
+{% endblock buttons %}
templates/app/layouts/base_form.html
--- 
+++ 
@@ -1,6 +1,26 @@
 {% extends "app/base.html" %}

+{% load widget_tweaks %}
+
 {% block content %}
+<form method="POST">
+  {% csrf_token %}
+  {% render_field form.title %}
+  
+  {% block article_stats %}
+
+  {% endblock article_stats %}
+  
+  {% render_field form.status %}
+  
+  {% render_field form.content %}
+
+  {% render_field form.twitter_post %}
+
+  {% block buttons %}
+
+  {% endblock buttons %}
+</form>
 {% endblock content %}

 {% block page_js %}