Création de la page article.

WSR/static/scss/app.scss

@@ -69,6 +69,11 @@ body {
   backdrop-filter: blur(8px);
 }
 
+a {
+  color: $red;
+  text-decoration: none;
+}
+
 // Other
 header {
   display: flex;
@@ -89,3 +94,18 @@ header {
     height: auto;
   }
 }
+
+.article-container {
+  .meta {
+    color: $dark-gray;
+    font-size: 0.9rem;
+  }
+
+  .article-content {
+    margin-top: map-get($spacers, 5);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @extend .eurostile;
+  }
+}
\ No newline at end of file

WSR/static/scss/components.scss

@@ -180,6 +180,12 @@
   display: flex;
   flex-direction: column;
   width: 332px;
+  text-decoration: none;
+  color: $black;
+
+  &:hover {
+    color: $red;
+  }
 
   .header {
     display: flex;
@@ -215,11 +221,6 @@ footer {
   padding-bottom: 24px;
   border-top: 4px solid $dark-gray;
   color: $light-gray;
-
-  a {
-    color: $red;
-    text-decoration: none;
-  }
 }
 
 .cars-showcase {

WSR/templates/article.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}WSR - {{ article.title }}{% endblock %}
+
+{% block content %}
+    <div class="container mt-4">
+        <div class="p-4 bg-white article-container">
+            <h4>{{ article.title }}</h4>
+            <div class="meta">
+                <span>Publié par </span><a href="#">WSR CM</a> le {{ article.publication_date|date:"d/m/Y" }}
+            </div>
+
+            <div class="article-content">
+                {% autoescape off %}
+                    {{ article.content }}
+                {% endautoescape %}
+            </div>
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file

WSR/templates/home.html

@@ -69,7 +69,7 @@
 
                 <div class="news-cards">
                     {% for article in six_last_articles %}
-                        <div class="news-card">
+                        <a class="news-card" href="{% url 'article' id=article.id %}">
                             <div class="header">
                                 <div class="logo">
                                     <img src="{% static 'images/WSR.png' %}" alt="Logo WSR">
@@ -79,7 +79,7 @@
                                 <div class="eurostile">{{ article.title }}</div>
                                 <div class="desc">{{ article.summary }}</div>
                             </div>
-                        </div>
+                        </a>
                     {% endfor %}
                 </div>
                 <div class="d-flex justify-content-end">

WSR/views.py

@@ -65,8 +65,16 @@ def home(request):
 
 
 def view_article(request, id):
-    article = Article.objects.get(id)
-    return None
+    article = Article.objects.get(id=id)
+    md = markdown.Markdown()
+    article.content = md.convert(article.content)
+    return render(
+        request,
+        'article.html',
+        {
+            "article": article
+        }
+    )
 
 
 def races_types(request):