[Pedagogy] Front comment nearly ended

core/static/core/style.scss

@@ -1673,9 +1673,76 @@ label {
 
 .pedagogy {
   &.star_not_checked {
-    color : gray;
+    color : #f7f7f7;
   }
   &.star_checked {
-    color : orange;
+    color: #ea7900;
+  }
+}
+
+#pedagogy {
+  font-family: "Fira Sans";
+  color: #062f38;
+  background-color: #caf0ff;
+  .comment{
+    background-color: #caf0ff;
+    max-width: 100%;
+    max-height: 200px;
+    overflow: hidden;
+    margin-bottom: 40px;
+
+    .grade{
+      height: 200px;
+      float: left;
+      text-align: left;
+      padding: 15px;
+      padding-right: 40px;
+      padding-top: 0px;
+      clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 75% 0);
+      background-color: #1bb9ea;
+    }
+
+    .dif_grade{
+      background-color: #1bb9ea;
+      color: #f0f0f0;
+      height: 200px;
+      float: left;
+      text-align: right;
+      padding: 15px;
+      padding-top: 0px;
+    }
+
+    .author_info{
+      background-color: #1bb9ea;
+      color: #f0f0f0;
+      text-align: center;
+      width: 50px;
+      padding: 5px;
+      margin: 0px;
+      float: left;
+      padding-right: 50px;
+      clip-path: polygon(0 0, 0 100%, 100% 100%, 75% 0);
+    }
+    .date_info{
+      background-color: #1bb9ea;
+      color: #f0f0f0;
+      float: left;
+      text-align: center;
+      width : 34%;
+      padding: 5px;
+      margin: 0px;
+    }
+
+    .text{
+      height: 125px;
+      margin-top: 0px;
+      margin-right: 0px;
+      padding: 10px;
+      padding-left: 40px;
+      margin-bottom: 29px;
+      overflow: auto;
+      text-align: justify;
+      background-color: #caf0ff;
+    }
   }  
 }

pedagogy/templates/pedagogy/uv_detail.jinja

@@ -6,47 +6,65 @@
 {% endblock %}
 
 {% block content %}
-	<p><a href="{{ url('pedagogy:guide') }}">{% trans %}Back{% endtrans %}</a></p>
+	<div id="pedagogy">
-	<h1>{{ object.code }} - {{ object.title }}</h1>
+		<p><a href="{{ url('pedagogy:guide') }}">{% trans %}Back{% endtrans %}</a></p>
-	<p>{% trans %}Department: {% endtrans %}{{ object.department }}</p>
+		<h1>{{ object.code }} - {{ object.title }}</h1>
-	<p>{{ object.objectives|markdown }}</p>
+		<p>{{ object.department }}</p>
-	<p>{{ object.program|markdown }}</p>
+		<p>{{ object.credit_type }}</p>
-	<p>{{ object.skills|markdown }}</p>
+		<p>{{ object.semester }}</p>
-	<p>{{ object.key_concepts|markdown }}</p>
+		<p>{{ object.objectives|markdown }}</p>
-	<p>{% trans %}UV manager: {% endtrans %}{{ object.manager }}</p>
+		<p>{{ object.program|markdown }}</p>
+		<p>{{ object.skills|markdown }}</p>
+		<p>{{ object.key_concepts }}</p>
+		<p>{% trans %}UV manager: {% endtrans %}{{ object.manager }}</p>
 
-	<p>{{ display_star(object.grade_global_average) }}</p>
+		<p>{{ display_star(object.grade_global_average) }}</p>
-	<p>{{ display_star(object.grade_utility_average) }}</p>
+		<p>{{ display_star(object.grade_utility_average) }}</p>
-	<p>{{ display_star(object.grade_interest_average) }}</p>
+		<p>{{ display_star(object.grade_interest_average) }}</p>
-	<p>{{ display_star(object.grade_teaching_average) }}</p>
+		<p>{{ display_star(object.grade_teaching_average) }}</p>
-	<p>{{ display_star(object.grade_work_load_average) }}</p>
+		<p>{{ display_star(object.grade_work_load_average) }}</p>
 
-	{% if object.comments.exists() %}
+		{% if object.comments.exists() %}
-		<h2>{% trans %}Comments{% endtrans %}</h2>
+			<h2>{% trans %}Comments{% endtrans %}</h2>
-		{% for comment in object.comments.all() %}
+			{% for comment in object.comments.all() %}
-			<p>{{ display_star(comment.grade_global) }}</p>
+				<div class="comment">
-			<p>{{ display_star(comment.grade_utility) }}</p>
+					<div class="dif_grade">
-			<p>{{ display_star(comment.grade_interest) }}</p>
+						<p>{% trans %}global grade{% endtrans %}</p>
-			<p>{{ display_star(comment.grade_teaching) }}</p>
+						<p>{% trans %}utility grade{% endtrans %}</p>
-			<p>{{ display_star(comment.grade_work_load) }}</p>
+						<p>{% trans %}interest grade{% endtrans %}</p>
-			<p>{{ comment.comment|markdown }}</p>
+						<p>{% trans %}teaching grade{% endtrans %}</p>
-			<p>{% trans %}Published: {% endtrans %}{{ comment.publish_date }}</p>
+						<p>{% trans %}work_load grade{% endtrans %}</p>
-			<p>{% trans %}Author: {% endtrans %}{{ comment.author }}</p>
+					</div>
-			{% if user.is_owner(comment) %}
+					<div class="grade">
-				<p><a href="{{ url('pedagogy:comment_update', comment_id=comment.id) }}">{% trans %}Edit{% endtrans %}</a></p>
+						<p>{{ display_star(comment.grade_global) }}</p>
-				<p><a href="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}">{% trans %}Delete{% endtrans %}</a></p>
+						<p>{{ display_star(comment.grade_utility) }}</p>
-			{% endif %}
+						<p>{{ display_star(comment.grade_interest) }}</p>
-			<p><a href="{{ url('pedagogy:comment_report', comment_id=comment.id) }}">{% trans %}Report{% endtrans %}</a></p>
+						<p>{{ display_star(comment.grade_teaching) }}</p>
-			{% if comment.is_reported %}
+						<p>{{ display_star(comment.grade_work_load) }}</p>
-				<p>{% trans %}This comment has been reported{% endtrans %}</p>
+					</div>
-			{% endif %}
+					<p class="text">{{ comment.comment }}</p>
-		{% endfor %}
+					<p class="date_info">{{ comment.publish_date.strftime('%d/%m/%Y') }}</p>
-	{% endif %}
+					<p class="author_info">{{ comment.author }}</p>
 
-	<h2>{% trans %}Leave comment{% endtrans %}</h2>
+					{# Warning, it's not displayed yet #}
-	<form action="{{ url('pedagogy:uv_detail', uv_id=object.id) }}" method="post" enctype="multipart/form-data">
+					<p><a href="{{ url('pedagogy:comment_report', comment_id=comment.id) }}">{% trans %}Report{% endtrans %}</a></p>
-        {% csrf_token %}
+					{% if comment.is_reported %}
-		{{ form.as_p() }}
+						<p>{% trans %}This comment has been reported{% endtrans %}</p>
-        <p><input type="submit" value="{% trans %}Comment{% endtrans %}" /></p>
+					{% endif %}
-	</form>
+
+					{% if user.is_owner(comment) %}
+						<p><a href="{{ url('pedagogy:comment_update', comment_id=comment.id) }}">{% trans %}Edit{% endtrans %}</a></p>
+						<p><a href="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}">{% trans %}Delete{% endtrans %}</a></p>
+					{% endif %}
+				</div>
+			{% endfor %}
+		{% endif %}
+
+		<h2>{% trans %}Leave comment{% endtrans %}</h2>
+		<form action="{{ url('pedagogy:uv_detail', uv_id=object.id) }}" method="post" enctype="multipart/form-data">
+			{% csrf_token %}
+			{{ form.as_p() }}
+			<p><input type="submit" value="{% trans %}Comment{% endtrans %}" /></p>
+		</form>
+	</div>
 {% endblock %}