mirror of https://github.com/ae-utbm/sith3.git
pedagogy: new mobile view and use of css grids for comment display
This commit is contained in:
parent
d03835d737
commit
52129d7511
GPG Key ID:
E7245548C53F904B
|
|
@ -1689,20 +1689,6 @@ $pedagogy-white-text: #f0f0f0;
|
||||||
&.star-checked {
|
&.star-checked {
|
||||||
color: $pedagogy-orange;
|
color: $pedagogy-orange;
|
||||||
}
|
}
|
||||||
&.stars-grade {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: $large-devices) {
|
|
||||||
&.stars-grade {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
&.star-checked {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&.star-not-checked {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#dynamic_view {
|
#dynamic_view {
|
||||||
|
|
@ -1870,18 +1856,6 @@ $pedagogy-white-text: #f0f0f0;
|
||||||
grid-template-columns: 50% 50%;
|
grid-template-columns: 50% 50%;
|
||||||
grid-template-rows: auto auto;
|
grid-template-rows: auto auto;
|
||||||
grid-template-areas: "grade grade-stars" "uv-infos uv-infos";
|
grid-template-areas: "grade grade-stars" "uv-infos uv-infos";
|
||||||
|
|
||||||
.pedagogy {
|
|
||||||
&.stars-grade {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&.star-checked {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
&.star-not-checked {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1909,142 +1883,171 @@ $pedagogy-white-text: #f0f0f0;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment {
|
.comment-container {
|
||||||
max-width: 100%;
|
display: grid;
|
||||||
max-height: 200px;
|
grid-template-columns: auto auto;
|
||||||
overflow: hidden;
|
grid-template-rows: 156px auto auto;
|
||||||
|
grid-template-areas: "grade-block comment" "grade-block info" "comment-end-bar comment-end-bar";
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
||||||
.anchor {
|
@media screen and (max-width: $large-devices){
|
||||||
float: right;
|
grid-template-columns: auto;
|
||||||
|
grid-template-rows: 156px auto auto auto;
|
||||||
|
grid-template-areas: "grade-block" "comment" "info" "comment-end-bar"
|
||||||
}
|
}
|
||||||
|
|
||||||
.grade-block {
|
.grade-block {
|
||||||
|
grid-area: grade-block;
|
||||||
|
width: 300px;
|
||||||
|
|
||||||
.dif-grade {
|
display: grid;
|
||||||
height: 156px;
|
grid-template-columns: 150px 150px;
|
||||||
width: 8%;
|
grid-template-rows: auto;
|
||||||
background-color: $pedagogy-blue;
|
grid-template-areas: "grade-type grade-stars";
|
||||||
color: $pedagogy-white-text;
|
grid-gap: 15px;
|
||||||
height: 156px;
|
|
||||||
float: left;
|
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 80% 0);
|
||||||
font-weight: bold;
|
align-content: space-evenly;
|
||||||
text-align: right;
|
|
||||||
padding: 15px;
|
background-color: $pedagogy-blue;
|
||||||
padding-top: 0px;
|
|
||||||
|
@media screen and (max-width: $large-devices){
|
||||||
|
grid-template-columns: 50% 50%;
|
||||||
|
width: 100%;
|
||||||
|
clip-path: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grade {
|
.grade-type {
|
||||||
height: 156px;
|
grid-area: grade-type;
|
||||||
width: 8%;
|
|
||||||
float: left;
|
> p {
|
||||||
text-align: left;
|
color: $pedagogy-white-text;
|
||||||
padding: 15px;
|
font-weight: bold;
|
||||||
padding-right: 40px;
|
text-align: right;
|
||||||
padding-top: 0px;
|
}
|
||||||
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 75% 0);
|
|
||||||
background-color: $pedagogy-blue;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $large-devices) {
|
.grade-stars {
|
||||||
.dif-grade {
|
grid-area: grade-stars;
|
||||||
width: 11%;
|
justify-self: start;
|
||||||
}
|
|
||||||
|
|
||||||
.grade {
|
|
||||||
width: 8%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.grade-text {
|
.comment {
|
||||||
color: $pedagogy-white-text;
|
grid-area: comment;
|
||||||
text-align: center;
|
overflow: scroll;
|
||||||
|
|
||||||
|
@media screen and (max-width: $large-devices){
|
||||||
|
border-left: solid;
|
||||||
|
border-right: solid;
|
||||||
|
border-color: $pedagogy-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anchor {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
padding: 10px;
|
||||||
|
padding-left: 40px;
|
||||||
|
overflow: auto;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
background-color: $pedagogy-blue;
|
grid-area: info;
|
||||||
width: 100%;
|
margin-bottom: 0px;
|
||||||
float: left;
|
|
||||||
|
|
||||||
.date-info {
|
|
||||||
color: $pedagogy-white-text;
|
|
||||||
text-align: center;
|
|
||||||
width : 34%;
|
|
||||||
|
|
||||||
padding: 5px;
|
|
||||||
margin: 0px;
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
@media screen and (max-width: $large-devices) {
|
|
||||||
width: 0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
@media screen and (max-width: $large-devices){
|
||||||
|
border-left: solid;
|
||||||
|
border-right: solid;
|
||||||
|
border-color: $pedagogy-blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-info {
|
.status-reported {
|
||||||
|
color: red;
|
||||||
|
float: left;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
.actions {
|
||||||
color: $pedagogy-white-text;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: $pedagogy-light-blue;
|
|
||||||
}
|
|
||||||
padding-right: 33%;
|
|
||||||
|
|
||||||
padding: 5px;
|
|
||||||
margin: 0px;
|
|
||||||
float: right;
|
float: right;
|
||||||
padding-right: 10%;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-end-bar {
|
||||||
|
grid-area: comment-end-bar;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto auto;
|
||||||
|
grid-template-rows: 2.5em;
|
||||||
|
grid-template-areas: "report date author";
|
||||||
|
|
||||||
|
background-color: $pedagogy-blue;
|
||||||
|
margin-top: 0px;
|
||||||
|
|
||||||
|
@media screen and (max-width: $large-devices){
|
||||||
|
grid-template-columns: auto;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-template-areas: "author" "date" "report"
|
||||||
}
|
}
|
||||||
|
|
||||||
.report {
|
.report {
|
||||||
|
grid-area: report;
|
||||||
|
padding-top: 6px;
|
||||||
|
padding-left: 20px;
|
||||||
background-color: $pedagogy-orange;
|
background-color: $pedagogy-orange;
|
||||||
clip-path: polygon(0 0%, 0 100%, 300px 100%, 250px 0);
|
clip-path: polygon(0 0%, 0 200%, 300px 200%, 250px 0);
|
||||||
width : 33%;
|
|
||||||
|
@media screen and (max-width: $large-devices){
|
||||||
|
clip-path: none;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 6px;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
& a {
|
& a {
|
||||||
color: $pedagogy-white-text;
|
color: $pedagogy-white-text;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
padding: 5px;
|
}
|
||||||
margin: 0px;
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
@media screen and (max-width: $large-devices) {
|
.date {
|
||||||
clip-path: none;
|
grid-area: date;
|
||||||
width : 32%;
|
color: $pedagogy-white-text;
|
||||||
|
|
||||||
|
@media screen and (max-width: $large-devices){
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.author {
|
||||||
|
grid-area: author;
|
||||||
|
justify-self: right;
|
||||||
|
padding-right: 30px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $pedagogy-white-text;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: $pedagogy-light-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $large-devices){
|
||||||
|
// text-align: center;
|
||||||
|
justify-self: center;
|
||||||
|
padding-right: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.action {
|
|
||||||
float: right;
|
|
||||||
text-align: center;
|
|
||||||
padding: 5px;
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-reported {
|
|
||||||
color: red;
|
|
||||||
float: left;
|
|
||||||
padding: 5px;
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown {
|
|
||||||
height: 125px;
|
|
||||||
margin-top: 0px;
|
|
||||||
margin-right: 0px;
|
|
||||||
padding: 10px;
|
|
||||||
padding-left: 40px;
|
|
||||||
overflow: auto;
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -8,7 +8,6 @@
|
||||||
<span class="fa fa-star pedagogy star-not-checked"></span>
|
<span class="fa fa-star pedagogy star-not-checked"></span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<span class="pedagogy stars-grade grade-text">{{ grade + 1 }}/5</span>
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<span class="grade-text"> {% trans %} not rated {% endtrans %} </span>
|
<span class="grade-text"> {% trans %} not rated {% endtrans %} </span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -138,16 +138,17 @@
|
||||||
{% if object.comments.exists() %}
|
{% if object.comments.exists() %}
|
||||||
<h2>{% trans %}Comments{% endtrans %}</h2>
|
<h2>{% trans %}Comments{% endtrans %}</h2>
|
||||||
{% for comment in object.comments.order_by("-publish_date").all() %}
|
{% for comment in object.comments.order_by("-publish_date").all() %}
|
||||||
<div id="{{ comment.id }}" class="comment">
|
<div id="{{ comment.id }}" class="comment-container">
|
||||||
|
|
||||||
<div class="grade-block">
|
<div class="grade-block">
|
||||||
<div class="dif-grade">
|
<div class="grade-type">
|
||||||
<p>{% trans %}global grade{% endtrans %}</p>
|
<p>{% trans %}global grade{% endtrans %}</p>
|
||||||
<p>{% trans %}utility{% endtrans %}</p>
|
<p>{% trans %}utility{% endtrans %}</p>
|
||||||
<p>{% trans %}interest{% endtrans %}</p>
|
<p>{% trans %}interest{% endtrans %}</p>
|
||||||
<p>{% trans %}teaching{% endtrans %}</p>
|
<p>{% trans %}teaching{% endtrans %}</p>
|
||||||
<p>{% trans %}work load{% endtrans %}</p>
|
<p>{% trans %}work load{% endtrans %}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grade">
|
<div class="grade-stars">
|
||||||
<p>{{ display_star(comment.grade_global) }}</p>
|
<p>{{ display_star(comment.grade_global) }}</p>
|
||||||
<p>{{ display_star(comment.grade_utility) }}</p>
|
<p>{{ display_star(comment.grade_utility) }}</p>
|
||||||
<p>{{ display_star(comment.grade_interest) }}</p>
|
<p>{{ display_star(comment.grade_interest) }}</p>
|
||||||
|
|
@ -155,28 +156,35 @@
|
||||||
<p>{{ display_star(comment.grade_work_load) }}</p>
|
<p>{{ display_star(comment.grade_work_load) }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="anchor">
|
|
||||||
<a href="{{ url('pedagogy:uv_detail', uv_id=uv.id) }}#{{ comment.id }}"><i class="fa fa-paragraph"></i></a>
|
<div class="comment">
|
||||||
|
<div class="anchor">
|
||||||
|
<a href="{{ url('pedagogy:uv_detail', uv_id=uv.id) }}#{{ comment.id }}"><i class="fa fa-paragraph"></i></a>
|
||||||
|
</div>
|
||||||
|
{{ comment.comment|markdown }}
|
||||||
</div>
|
</div>
|
||||||
{{ comment.comment|markdown }}
|
|
||||||
|
|
||||||
{% if comment.is_reported %}
|
|
||||||
<p class="status-reported">
|
|
||||||
{% trans %}This comment has been reported{% endtrans %}
|
|
||||||
</p>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if user.is_owner(comment) %}
|
|
||||||
<p class="action">
|
|
||||||
<a href="{{ url('pedagogy:comment_update', comment_id=comment.id) }}">{% trans %}Edit{% endtrans %}</a>
|
|
||||||
<a href="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}">{% trans %}Delete{% endtrans %}</a>
|
|
||||||
</p>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
|
{% if comment.is_reported %}
|
||||||
|
<p class="status-reported">
|
||||||
|
{% trans %}This comment has been reported{% endtrans %}
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if user.is_owner(comment) %}
|
||||||
|
<p class="actions">
|
||||||
|
<a href="{{ url('pedagogy:comment_update', comment_id=comment.id) }}">{% trans %}Edit{% endtrans %}</a>
|
||||||
|
<a href="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}">{% trans %}Delete{% endtrans %}</a>
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="comment-end-bar">
|
||||||
<p class="report"><a href="{{ url('pedagogy:comment_report', comment_id=comment.id) }}">{% trans %}Report this comment{% endtrans %}</a></p>
|
<p class="report"><a href="{{ url('pedagogy:comment_report', comment_id=comment.id) }}">{% trans %}Report this comment{% endtrans %}</a></p>
|
||||||
<p class="date-info">{{ comment.publish_date.strftime('%d/%m/%Y') }}</p>
|
|
||||||
<p class="author-info">{{ user_profile_link(comment.author) }}</p>
|
<p class="date">{{ comment.publish_date.strftime('%d/%m/%Y') }}</p>
|
||||||
|
|
||||||
|
<p class="author">{{ user_profile_link(comment.author) }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue