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

core/static/core/style.scss

@@ -1689,20 +1689,6 @@ $pedagogy-white-text: #f0f0f0;
   &.star-checked {
     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 {
@@ -1870,18 +1856,6 @@ $pedagogy-white-text: #f0f0f0;
       grid-template-columns: 50% 50%;
       grid-template-rows: auto auto;
       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;
   }
 
-  .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-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 {
+      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 {
-      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;
-        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 {
+        grid-area: report;
+        padding-top: 6px;
+        padding-left: 20px;
         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 {
           color: $pedagogy-white-text;
           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;
-    }
   }
 }

pedagogy/templates/pedagogy/macros.jinja

@@ -8,7 +8,6 @@
                 <span class="fa fa-star pedagogy star-not-checked"></span>
             {% endif %}
         {% endfor %}
-        <span class="pedagogy stars-grade grade-text">{{ grade + 1 }}/5</span>
     {% else %}
         <span class="grade-text"> {% trans %} not rated {% endtrans %} </span>
     {% endif %}

pedagogy/templates/pedagogy/uv_detail.jinja

@@ -138,16 +138,17 @@
 		{% if object.comments.exists() %}
 			<h2>{% trans %}Comments{% endtrans %}</h2>
 			{% 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="dif-grade">
+						<div class="grade-type">
 							<p>{% trans %}global grade{% endtrans %}</p>
 							<p>{% trans %}utility{% endtrans %}</p>
 							<p>{% trans %}interest{% endtrans %}</p>
 							<p>{% trans %}teaching{% endtrans %}</p>
 							<p>{% trans %}work load{% endtrans %}</p>
 						</div>
-						<div class="grade">
+						<div class="grade-stars">
 							<p>{{ display_star(comment.grade_global) }}</p>
 							<p>{{ display_star(comment.grade_utility) }}</p>
 							<p>{{ display_star(comment.grade_interest) }}</p>
@@ -155,28 +156,35 @@
 							<p>{{ display_star(comment.grade_work_load) }}</p>
 						</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>
-					{{ 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">
+						{% 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="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>