Commit 52129d75 authored by Sli's avatar Sli

pedagogy: new mobile view and use of css grids for comment display

parent d03835d7
Pipeline #1891 passed with stage
in 22 minutes and 32 seconds
...@@ -1689,20 +1689,6 @@ $pedagogy-white-text: #f0f0f0; ...@@ -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; ...@@ -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; ...@@ -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;
font-weight: bold;
text-align: right;
padding: 15px;
padding-top: 0px;
}
.grade { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 80% 0);
height: 156px; align-content: space-evenly;
width: 8%;
float: left; background-color: $pedagogy-blue;
text-align: left;
padding: 15px; @media screen and (max-width: $large-devices){
padding-right: 40px; grid-template-columns: 50% 50%;
padding-top: 0px; width: 100%;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 75% 0); clip-path: none;
background-color: $pedagogy-blue;
} }
@media screen and (max-width: $large-devices) { .grade-type {
.dif-grade { grid-area: grade-type;
width: 11%;
}
.grade { > p {
width: 8%; color: $pedagogy-white-text;
font-weight: bold;
text-align: right;
} }
} }
.grade-stars {
grid-area: grade-stars;
justify-self: start;
}
} }
.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 { @media screen and (max-width: $large-devices){
color: $pedagogy-white-text; border-left: solid;
text-align: center; border-right: solid;
width : 34%; border-color: $pedagogy-blue;
}
padding: 5px; .status-reported {
margin: 0px; color: red;
float: left; float: left;
padding-left: 10px;
padding-bottom: 10px;
}
@media screen and (max-width: $large-devices) { .actions {
width: 0%; float: right;
}
} }
}
.author-info { .comment-end-bar {
grid-area: comment-end-bar;
a { display: grid;
color: $pedagogy-white-text; grid-template-columns: auto auto auto;
text-align: center; grid-template-rows: 2.5em;
font-weight: bold; grid-template-areas: "report date author";
}
a:hover { background-color: $pedagogy-blue;
color: $pedagogy-light-blue; margin-top: 0px;
}
padding-right: 33%;
padding: 5px; @media screen and (max-width: $large-devices){
margin: 0px; grid-template-columns: auto;
float: right; grid-template-rows: auto;
padding-right: 10%; 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;
} }
} }
}
.action { .author {
float: right; grid-area: author;
text-align: center; justify-self: right;
padding: 5px; padding-right: 30px;
margin: 0px;
}
.status-reported { a {
color: red; color: $pedagogy-white-text;
float: left; font-weight: bold;
padding: 5px; }
margin: 0px;
}
.markdown { a:hover {
height: 125px; color: $pedagogy-light-blue;
margin-top: 0px; }
margin-right: 0px;
padding: 10px; @media screen and (max-width: $large-devices){
padding-left: 40px; // text-align: center;
overflow: auto; justify-self: center;
text-align: justify; padding-right: 0px;
}
}
} }
} }
} }
\ No newline at end of file
...@@ -8,7 +8,6 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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>
{{ 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) %} <div class="comment">
<p class="action"> <div class="anchor">
<a href="{{ url('pedagogy:comment_update', comment_id=comment.id) }}">{% trans %}Edit{% endtrans %}</a> <a href="{{ url('pedagogy:uv_detail', uv_id=uv.id) }}#{{ comment.id }}"><i class="fa fa-paragraph"></i></a>
<a href="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}">{% trans %}Delete{% endtrans %}</a> </div>
</p> {{ comment.comment|markdown }}
{% endif %} </div>
<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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment