Rework blog posts list

articles/templates/articles/article_list.html

@@ -8,28 +8,25 @@
 
 {% block content %}
     <section>
-        <h2>Blog posts</h2>
+        <h2 id="blog-posts">Blog posts</h2>
-        <table>
+        {% for article in articles %}
-            <tr><th scope="col">Date</th><th scope="col">Title</th></tr>
+            <p>
-            {% for article in articles %}
+                {% include "articles/snippets/datetime.html" %}<br>
-                <tr>
+                <a href="{% url 'article-detail' slug=article.slug %}">{{ article.title }}</a>
-                    <td>{% include "articles/snippets/datetime.html" %}</td>
+            </p>
-                    <td><a href="{% url 'article-detail' slug=article.slug %}">{{ article.title }}</a></td>
+        {% empty %}
-                </tr>
+            <p>No article here. Come back later 🙂</p>
-            {% empty %}
+        {% endfor %}
-                <tr><td colspan="2">No article here. Come back later 🙂</td></tr>
-            {% endfor %}
-        </table>
     </section>
     <nav class="pagination">
         <div>
             {% if page_obj.has_next %}
-                <a href="?page={{ page_obj.next_page_number }}">⇠ Older</a>
+                <a href="?page={{ page_obj.next_page_number }}#blog-posts"><button>⇠ Older</button></a>
             {% endif %}
         </div>
         <div>
             {% if page_obj.has_previous %}
-                <a href="?page={{ page_obj.previous_page_number }}">Newer ⇢</a>
+                <a href="?page={{ page_obj.previous_page_number }}#blog-posts"><button>Newer ⇢</button></a>
             {% endif %}
         </div>
     </nav>