mirror of
https://github.com/ae-utbm/sith.git
synced 2026-09-18 02:04:20 +00:00
style: improve ue comments appearance
This commit is contained in:
imperosol
@@ -1,11 +1,7 @@
|
|||||||
@import "core/static/core/devices";
|
@import "core/static/core/devices";
|
||||||
@import "core/static/core/colors";
|
@import "core/static/core/colors";
|
||||||
|
|
||||||
|
|
||||||
$pedagogy-blue: #1bb9ea;
|
|
||||||
$pedagogy-orange: #ea7900;
|
$pedagogy-orange: #ea7900;
|
||||||
$pedagogy-hover-blue: #0e97ce;
|
|
||||||
$pedagogy-light-blue: #caf0ff;
|
|
||||||
$pedagogy-white-text: #f0f0f0;
|
$pedagogy-white-text: #f0f0f0;
|
||||||
|
|
||||||
.pedagogy {
|
.pedagogy {
|
||||||
@@ -108,13 +104,6 @@ $pedagogy-white-text: #f0f0f0;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.leave-comment-not-allowed {
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.leave-comment {
|
.leave-comment {
|
||||||
.comment-form-content {
|
.comment-form-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -163,216 +152,57 @@ $pedagogy-white-text: #f0f0f0;
|
|||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-container {
|
.comment {
|
||||||
display: grid;
|
padding: 15px;
|
||||||
grid-template-columns: 300px auto;
|
margin: 20px;
|
||||||
grid-template-rows: auto auto auto;
|
display: flex;
|
||||||
grid-template-areas:
|
flex-direction: column;
|
||||||
"grade-block comment"
|
gap: 10px;
|
||||||
"grade-block info"
|
background: $primary-neutral-light-color;
|
||||||
"comment-end-bar comment-end-bar";
|
border-radius: 5px;
|
||||||
margin-bottom: 30px;
|
border: 1px darken($secondary-neutral-light-color, 10%) solid;
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
@media screen and (max-width: $large-devices) {
|
&.reported {
|
||||||
grid-template-columns: auto;
|
border: #fc8181 1px solid;
|
||||||
grid-template-rows: auto auto auto auto;
|
|
||||||
grid-template-areas:
|
|
||||||
"grade-block"
|
|
||||||
"comment"
|
|
||||||
"info"
|
|
||||||
"comment-end-bar";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.grade-block {
|
.comment-header {
|
||||||
grid-area: grade-block;
|
display: flex;
|
||||||
width: 300px;
|
gap: 20px;
|
||||||
|
|
||||||
display: grid;
|
img {
|
||||||
grid-template-columns: 150px 150px;
|
width: 50px;
|
||||||
grid-template-rows: 156px auto;
|
height: 50px;
|
||||||
grid-template-areas:
|
border-radius: 50%;
|
||||||
"grade-type grade-stars"
|
|
||||||
"grade-extension grade-extension";
|
|
||||||
grid-gap: 15px;
|
|
||||||
|
|
||||||
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30px, 270px 0);
|
|
||||||
align-items: start;
|
|
||||||
|
|
||||||
background-color: $pedagogy-blue;
|
|
||||||
|
|
||||||
@media screen and (max-width: $large-devices) {
|
|
||||||
grid-template-columns: 50% auto;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
grid-template-areas: "grade-type grade-stars";
|
|
||||||
width: auto;
|
|
||||||
clip-path: none;
|
|
||||||
align-content: space-evenly;
|
|
||||||
align-items: end;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.grade-extension {
|
.comment-metadata {
|
||||||
grid-area: grade-extension;
|
display: flex;
|
||||||
background-color: $pedagogy-blue;
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grade-type {
|
.comment-options {
|
||||||
grid-area: grade-type;
|
flex: 2;
|
||||||
|
display: flex;
|
||||||
>p {
|
justify-content: right;
|
||||||
color: $pedagogy-white-text;
|
gap: 15px;
|
||||||
font-weight: bold;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.grade-stars {
|
|
||||||
grid-area: grade-stars;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment {
|
.comment-stars {
|
||||||
grid-area: comment;
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
display: grid;
|
flex-wrap: wrap;
|
||||||
grid-template-columns: auto;
|
gap: 1em 2em;
|
||||||
grid-template-rows: auto auto;
|
padding: 1.5em;
|
||||||
grid-template-areas:
|
border-top: 0.0625rem grey dotted;
|
||||||
"anchor"
|
border-bottom: 0.0625rem grey dotted;
|
||||||
"markdown";
|
|
||||||
|
|
||||||
@media screen and (max-width: $large-devices) {
|
|
||||||
border-left: solid;
|
|
||||||
border-right: solid;
|
|
||||||
border-color: $pedagogy-blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anchor {
|
|
||||||
grid-area: anchor;
|
|
||||||
text-align: right;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown {
|
|
||||||
grid-area: markdown;
|
|
||||||
|
|
||||||
min-height: 139px;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
padding: 10px;
|
|
||||||
text-align: justify;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.comment-content {
|
||||||
grid-area: info;
|
text-align: justify;
|
||||||
padding-bottom: 10px;
|
padding: .5em 20px 1em;
|
||||||
|
|
||||||
@media screen and (max-width: $large-devices) {
|
|
||||||
border-left: solid;
|
|
||||||
border-right: solid;
|
|
||||||
border-color: $pedagogy-blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-reported {
|
|
||||||
color: red;
|
|
||||||
float: left;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action {
|
|
||||||
float: right;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-end-bar {
|
|
||||||
grid-area: comment-end-bar;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 33% auto auto;
|
|
||||||
grid-template-rows: 2.5em;
|
|
||||||
grid-template-areas: "author date report";
|
|
||||||
|
|
||||||
background-color: $pedagogy-blue;
|
|
||||||
margin-top: -1px;
|
|
||||||
|
|
||||||
@media screen and (max-width: $large-devices) {
|
|
||||||
grid-template-columns: auto;
|
|
||||||
grid-template-rows: auto auto auto;
|
|
||||||
grid-template-areas:
|
|
||||||
"report"
|
|
||||||
"date"
|
|
||||||
"author";
|
|
||||||
margin-top: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author {
|
|
||||||
grid-area: author;
|
|
||||||
|
|
||||||
padding-top: 6px;
|
|
||||||
padding-left: 20px;
|
|
||||||
|
|
||||||
background-color: $pedagogy-orange;
|
|
||||||
clip-path: polygon(0 10px, 0 100%, 350px 200%, 300px 10px);
|
|
||||||
|
|
||||||
@media screen and (max-width: $large-devices) {
|
|
||||||
clip-path: none;
|
|
||||||
padding: 0;
|
|
||||||
padding-bottom: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $pedagogy-white-text;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: $pedagogy-hover-blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date {
|
|
||||||
grid-area: date;
|
|
||||||
color: $pedagogy-white-text;
|
|
||||||
|
|
||||||
@media screen and (max-width: $large-devices) {
|
|
||||||
padding-bottom: 7px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.report {
|
|
||||||
grid-area: report;
|
|
||||||
justify-self: right;
|
|
||||||
padding-right: 30px;
|
|
||||||
padding-left: 30px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $pedagogy-white-text;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: $pedagogy-hover-blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $large-devices) {
|
|
||||||
text-align: center;
|
|
||||||
justify-self: inherit;
|
|
||||||
padding-bottom: 7px;
|
|
||||||
background-color: $white-color;
|
|
||||||
|
|
||||||
border-left: solid;
|
|
||||||
border-right: solid;
|
|
||||||
border-color: $pedagogy-blue;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $black-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,83 +8,122 @@
|
|||||||
|
|
||||||
<section>
|
<section>
|
||||||
{%- for comment in comments -%}
|
{%- for comment in comments -%}
|
||||||
<div id="comment-{{ comment.id }}" class="comment-container">
|
<article
|
||||||
|
id="comment-{{ comment.id }}"
|
||||||
<div class="grade-block">
|
class="comment {% if comment.is_reported %}reported{% endif %}"
|
||||||
<div class="grade-type">
|
>
|
||||||
<p>{% trans %}Global grade{% endtrans %}</p>
|
{% if comment.is_reported %}
|
||||||
<p>{% trans %}Utility{% endtrans %}</p>
|
<div class="alert alert-red">
|
||||||
<p>{% trans %}Interest{% endtrans %}</p>
|
<div class="alert-main">
|
||||||
<p>{% trans %}Teaching{% endtrans %}</p>
|
<h5 class="alert-title margin-bottom">
|
||||||
<p>{% trans %}Work load{% endtrans %}</p>
|
{% trans %}This comment has been reported{% endtrans %}
|
||||||
|
</h5>
|
||||||
|
<p>{% trans %}It will be hidden until moderated.{% endtrans %}</p>
|
||||||
|
{% if user.has_perm("pedagogy.view_uecommentreport") %}
|
||||||
|
{% for report in comment.reports.all() %}
|
||||||
|
<div class="markdown margin-bottom">
|
||||||
|
<blockquote>
|
||||||
|
<em>{{ report.reporter.get_display_name() }}</em>
|
||||||
|
{{ report.reason|markdown }}
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% if user.has_perm("pedagogy.delete_uecomment") %}
|
||||||
|
<div class="alert-aside">
|
||||||
|
<a
|
||||||
|
href="{{ url("pedagogy:comment_delete", comment_id=comment.id) }}"
|
||||||
|
class="btn btn-red"
|
||||||
|
>
|
||||||
|
<i class="fa fa-trash"></i>{% trans %}Delete{% endtrans %}
|
||||||
|
</a>
|
||||||
|
<a href="{{ url("pedagogy:moderation") }}" class="btn btn-green">
|
||||||
|
<i class="fa fa-check"></i>{% trans %}Moderate{% endtrans %}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<div class="grade-stars">
|
{% endif %}
|
||||||
<p>{{ display_star(comment.grade_global) }}</p>
|
<div class="comment-header">
|
||||||
<p>{{ display_star(comment.grade_utility) }}</p>
|
<img
|
||||||
<p>{{ display_star(comment.grade_interest) }}</p>
|
{% if comment.author.avatar_pict %}
|
||||||
<p>{{ display_star(comment.grade_teaching) }}</p>
|
src="{{ comment.author.avatar_pict.get_download_url() }}"
|
||||||
<p>{{ display_star(comment.grade_work_load) }}</p>
|
{% elif comment.author.profile_pict %}
|
||||||
|
src="{{ comment.author.profile_pict.get_download_url() }}"
|
||||||
|
{% else %}
|
||||||
|
src="{{ static("core/img/unknown.jpg") }}"
|
||||||
|
{% endif %}
|
||||||
|
alt="{% trans %}Profile{% endtrans %}"
|
||||||
|
/>
|
||||||
|
<div class="comment-metadata">
|
||||||
|
<a href="{{ comment.author.get_absolute_url() }}">
|
||||||
|
<strong>{{ comment.author.get_display_name() }}</strong>
|
||||||
|
</a>
|
||||||
|
<time datetime="{{ comment.publish_date.isoformat(timespec="seconds") }}">
|
||||||
|
{{ comment.publish_date|localtime|date(DATETIME_FORMAT) }}
|
||||||
|
{{ comment.publish_date|localtime|time(DATETIME_FORMAT) }}
|
||||||
|
</time>
|
||||||
</div>
|
</div>
|
||||||
<div class="grade-extension"></div>
|
<div class="comment-options">
|
||||||
</div>
|
{% if user.can_edit(comment) %}
|
||||||
|
|
||||||
<div class="comment">
|
|
||||||
<div class="anchor">
|
|
||||||
<a href="{{ url('pedagogy:ue_detail', ue_id=ue.id) }}#comment-{{ comment.id }}"><i class="fa fa-paragraph"></i></a>
|
|
||||||
</div>
|
|
||||||
{{ comment.comment|markdown }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info">
|
|
||||||
{% if comment.is_reported %}
|
|
||||||
<p class="status-reported">
|
|
||||||
{% trans %}This comment has been reported{% endtrans %}
|
|
||||||
</p>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if comment.author_id == user.id or user.has_perm("pedagogy.change_comment") %}
|
|
||||||
<button
|
|
||||||
class="btn btn-orange action"
|
|
||||||
hx-get="{{ url('pedagogy:comment_update', comment_id=comment.id) }}"
|
|
||||||
hx-swap="outerHTML"
|
|
||||||
hx-target="#comment-{{ comment.id }}"
|
|
||||||
>
|
|
||||||
<i class="fa fa-pencil"></i> {% trans %}Edit{% endtrans %}
|
|
||||||
</button>
|
|
||||||
{% endif %}
|
|
||||||
{% if comment.author_id == user.id or user.has_perm("pedagogy.delete_comment") %}
|
|
||||||
<form
|
|
||||||
class="action"
|
|
||||||
hx-post="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}"
|
|
||||||
hx-confirm='{% trans obj=object %}Are you sure you want to delete "{{ obj }}"?{% endtrans %}'
|
|
||||||
hx-swap="outerHTML"
|
|
||||||
hx-target="#comment-{{ comment.id }}"
|
|
||||||
>
|
|
||||||
{% csrf_token %}
|
|
||||||
<button class="btn btn-red action">
|
|
||||||
<i class="fa fa-trash-can"></i> {% trans %}Delete{% endtrans %}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="comment-end-bar">
|
|
||||||
<div class="report">
|
|
||||||
<p>
|
|
||||||
<a
|
<a
|
||||||
|
class="clickable"
|
||||||
|
hx-get="{{ url('pedagogy:comment_update', comment_id=comment.id) }}"
|
||||||
|
hx-swap="outerHTML"
|
||||||
|
hx-target="#comment-{{ comment.id }}"
|
||||||
|
tooltip="{% trans %}Edit{% endtrans %}"
|
||||||
|
>
|
||||||
|
<i class="fa fa-pencil edit-action"></i>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
{% if not comment.is_reported %}
|
||||||
|
<a
|
||||||
|
class="clickable"
|
||||||
hx-get="{{ url('pedagogy:comment_report', comment_id=comment.id) }}"
|
hx-get="{{ url('pedagogy:comment_report', comment_id=comment.id) }}"
|
||||||
hx-swap="outerHTML"
|
hx-swap="outerHTML"
|
||||||
hx-target="#comment-{{ comment.id }}"
|
hx-target="#comment-{{ comment.id }}"
|
||||||
|
tooltip="{% trans %}Report{% endtrans %}"
|
||||||
>
|
>
|
||||||
{% trans %}Report this comment{% endtrans %}
|
<i class="fa fa-exclamation delete-action"></i>
|
||||||
</a>
|
</a>
|
||||||
</p>
|
{% endif %}
|
||||||
|
{% if user.has_perm("pedagogy.delete_uecomment") %}
|
||||||
|
<a
|
||||||
|
href="{{ url("pedagogy:comment_delete", comment_id=comment.id) }}"
|
||||||
|
tooltip="{% trans %}Delete{% endtrans %}"
|
||||||
|
>
|
||||||
|
<i class="fa fa-trash-can delete-action"></i>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="comment-stars">
|
||||||
|
<div>
|
||||||
|
<span>{% trans %}Global grade{% endtrans %}</span>
|
||||||
|
<span>{{ display_star(comment.grade_global) }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{% trans %}Utility{% endtrans %}</span>
|
||||||
|
<span>{{ display_star(comment.grade_utility) }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{% trans %}Interest{% endtrans %}</span>
|
||||||
|
<span>{{ display_star(comment.grade_interest) }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{% trans %}Teaching{% endtrans %}</span>
|
||||||
|
<span>{{ display_star(comment.grade_teaching) }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{% trans %}Workload{% endtrans %}</span>
|
||||||
|
<span>{{ display_star(comment.grade_work_load) }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="date"><p>{{ comment.publish_date.strftime('%d/%m/%Y') }}</p></div>
|
|
||||||
<div class="author"><p>{{ user_profile_link(comment.author) }}</p></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<div class="comment-content">
|
||||||
|
{{ comment.comment|markdown }}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
{%- endfor -%}
|
{%- endfor -%}
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -1,14 +1,19 @@
|
|||||||
{# A few hx-partials for swapping a few parts of the main ue_detail.jinja #}
|
{# A few hx-partials for swapping a few parts of the main ue_detail.jinja #}
|
||||||
|
|
||||||
|
{% from "pedagogy/macros.jinja" import display_star %}
|
||||||
|
|
||||||
<hx-partial id="ue-grade">
|
<hx-partial id="ue-grade">
|
||||||
{% include "pedagogy/fragments/ue_detail/grade.jinja" %}
|
{% include "pedagogy/fragments/ue_detail/grade.jinja" %}
|
||||||
</hx-partial>
|
</hx-partial>
|
||||||
|
|
||||||
<hx-partial id="comment-form">
|
<hx-partial id="comment-form">
|
||||||
{% if object.has_user_already_commented(user) %}
|
{% if object.has_user_already_commented(user) %}
|
||||||
<div class="leave-comment-not-allowed">
|
<em>
|
||||||
<p>{% trans %}You already posted a comment on this UE. If you want to comment again, please modify or delete your previous comment.{% endtrans %}</p>
|
{% trans trimmed %}
|
||||||
</div>
|
You already posted a comment on this UE.
|
||||||
|
If you want to comment again, please modify or delete your previous comment.
|
||||||
|
{% endtrans %}
|
||||||
|
</em>
|
||||||
<br>
|
<br>
|
||||||
{% elif user.has_perm("pedagogy.add_uecomment") %}
|
{% elif user.has_perm("pedagogy.add_uecomment") %}
|
||||||
{{ add_comment_form }}
|
{{ add_comment_form }}
|
||||||
|
|||||||
@@ -77,9 +77,12 @@
|
|||||||
|
|
||||||
<div id="comment-form">
|
<div id="comment-form">
|
||||||
{% if object.has_user_already_commented(user) %}
|
{% if object.has_user_already_commented(user) %}
|
||||||
<div class="leave-comment-not-allowed">
|
<em>
|
||||||
<p>{% trans %}You already posted a comment on this UE. If you want to comment again, please modify or delete your previous comment.{% endtrans %}</p>
|
{% trans trimmed %}
|
||||||
</div>
|
You already posted a comment on this UE.
|
||||||
|
If you want to comment again, please modify or delete your previous comment.
|
||||||
|
{% endtrans %}
|
||||||
|
</em>
|
||||||
<br>
|
<br>
|
||||||
{% elif user.has_perm("pedagogy.add_uecomment") %}
|
{% elif user.has_perm("pedagogy.add_uecomment") %}
|
||||||
{{ add_comment_form }}
|
{{ add_comment_form }}
|
||||||
|
|||||||
Reference in New Issue
Block a user