[REFACTOR] Creating timestamp for comments in detail materi page

app/static/app/css/detail_materi.css

-body{
-    font-family: 'Poppins', sans-serif;
+body {
+	font-family: "Poppins", sans-serif;
 }
 
-.container{
-    margin-top: 20px;
+.container {
+	margin-top: 20px;
 }
-.bg{
-    background-color: #f8f9fc
+.bg {
+	background-color: #f8f9fc;
 }
 
 .brand-link {
-    color: inherit;
+	color: inherit;
 }
 
 .brand-link:hover,
 .brand-link:active {
-    text-decoration: none;
-    color: inherit;
+	text-decoration: none;
+	color: inherit;
 }
 .detail-materi-color {
-    color: black;
-}
-    .row{
-    }
-
-    .materi-data{
-        background-color: #ffffff;
-    }
-
-        .cover{
-            max-width: 300px;
-
-        }
-
-        .category-wrapper{
-            display: flex;
-            flex-direction: row;
-        }
-        
-        .cover img{
-            width: 100%;
-        }
-
-        .book p, h2 {
-            margin: 0
-        }
-
-            .info-wrapper{
-                margin-top: 20px;
-            }
-
-                .info{
-                    margin: 10px 0;
-                    border-bottom: 1px solid #d4d4d4;
-                    display: flex;
-                    flex-direction: row;
-                }
-
-                .info .col{
-                    padding: 0;
-                }
-
-                .btn-book {
-                    background-color: #ffffff;
-                    color: #615CFD;
-                }
-                .btn-book:hover {
-                    color: #615CFD;
-                }
-
-    .menu-wrapper{
-        display: flex;
-        flex-direction: column;
-    }
-
-    .menu-wrapper .col{
-            padding: 0;
-        }
-            .menu-wrapper .navbar {
-            }
-            .menu-wrapper .nav-link {
-                color: #bbbbbb;
-            }
-            .nav-item :hover{
-                color: #615CFD;
-            }
-
-            .menu-wrapper .nav-item{
-                padding: 5px 0;
-            }
-
-            .description-wrapper{
-                border-bottom: 1px solid #d4d4d4;
-                margin-bottom: 10px;
-            }
-
-            .comment{
-                border-bottom: 1px solid #d4d4d4;
-            }
-            .comment .user .profile{
-                display: inline-block;
-                height: 25px;
-                width: 25px;
-                background-color: #bbb;
-                border-radius: 50%;
-                margin-right: 10px;
-            }
-
-            .comment .text{
-                padding-left: 20px;
-            }
\ No newline at end of file
+	color: black;
+}
+.row {
+}
+
+.materi-data {
+	background-color: #ffffff;
+}
+
+.cover {
+	max-width: 300px;
+}
+
+.category-wrapper {
+	display: flex;
+	flex-direction: row;
+}
+
+.cover img {
+	width: 100%;
+}
+
+.book p,
+h2 {
+	margin: 0;
+}
+
+.info-wrapper {
+	margin-top: 20px;
+}
+
+.info {
+	margin: 10px 0;
+	border-bottom: 1px solid #d4d4d4;
+	display: flex;
+	flex-direction: row;
+}
+
+.info .col {
+	padding: 0;
+}
+
+.btn-book {
+	background-color: #ffffff;
+	color: #615cfd;
+}
+.btn-book:hover {
+	color: #615cfd;
+}
+
+.menu-wrapper {
+	display: flex;
+	flex-direction: column;
+}
+
+.menu-wrapper .col {
+	padding: 0;
+}
+.menu-wrapper .navbar {
+}
+.menu-wrapper .nav-link {
+	color: #bbbbbb;
+}
+.nav-item :hover {
+	color: #615cfd;
+}
+
+.menu-wrapper .nav-item {
+	padding: 5px 0;
+}
+
+.description-wrapper {
+	border-bottom: 1px solid #d4d4d4;
+	margin-bottom: 10px;
+}
+
+.comment {
+	border-bottom: 1px solid #d4d4d4;
+}
+.comment .user .profile {
+	display: inline-block;
+	height: 25px;
+	width: 25px;
+	background-color: #bbb;
+	border-radius: 50%;
+	margin-right: 10px;
+}
+
+.timestamp {
+	font-size: 15px;
+}
+.comment .text {
+	padding-left: 20px;
+}

app/templates/app/detail_materi.html

 {% extends 'base.html' %}
-{% load static %}
+{% load static %} {% load humanize %}
 
 {% block header %}
 <link href="{% static 'css/sb-admin-2.min.css' %}" rel="stylesheet">
@@ -177,6 +177,12 @@
                                     <span style="background-color: #{{comment.profile}}" class="profile p-1 bd-highligh"></span>
                                 {% endif %}
                                 <p class="p-1 bd-highligh m-0"><b>{{comment.user.name}}</b></p>
+                                <p class="p-1 bd-highligh m-0">•</p>
+                                <p
+                                    class="timestamp p-1 bd-highligh m-0 text-muted"
+                                >
+                                    {{ comment.timestamp|naturaltime }}
+                                </p>
                                 {% if user.is_admin %}
                                     <a class="ml-auto p-1 bd-highlight close" href="{% url 'delete-comment' materi_data.id comment.id %}">
                                         <span aria-hidden="true">&times;</span>