Skip to content

GitLab

Verified Commit 52129d75 authored by Sli's avatar Sli
Browse files
Options

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
    Hide whitespace changes
    Inline Side-by-side
    Showing with 151 additions and 141 deletions
    core/static/core/style.scss
    View file @ 52129d75
    ......@@ -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 {
    max-width: 100%;
    max-height: 200px;
    overflow: hidden;
    .comment-container {
    display: grid;
    grid-template-columns: auto auto;
    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 {
    float: right;
    @media screen and (max-width: $large-devices){
    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 {
    height: 156px;
    width: 8%;
    background-color: $pedagogy-blue;
    color: $pedagogy-white-text;
    height: 156px;
    float: left;
    font-weight: bold;
    text-align: right;
    padding: 15px;
    padding-top: 0px;
    }
    display: grid;
    grid-template-columns: 150px 150px;
    grid-template-rows: auto;
    grid-template-areas: "grade-type grade-stars";
    grid-gap: 15px;
    .grade {
    height: 156px;
    width: 8%;
    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: $pedagogy-blue;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 80% 0);
    align-content: space-evenly;
    background-color: $pedagogy-blue;
    @media screen and (max-width: $large-devices){
    grid-template-columns: 50% 50%;
    width: 100%;
    clip-path: none;
    }
    @media screen and (max-width: $large-devices) {
    .dif-grade {
    width: 11%;
    }
    .grade-type {
    grid-area: grade-type;
    .grade {
    width: 8%;
    > p {
    color: $pedagogy-white-text;
    font-weight: bold;
    text-align: right;
    }
    }
    .grade-stars {
    grid-area: grade-stars;
    justify-self: start;
    }
    }
    .grade-text {
    color: $pedagogy-white-text;
    text-align: center;
    .comment {
    grid-area: comment;
    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;
    width: 100%;
    float: left;
    grid-area: info;
    margin-bottom: 0px;
    .date-info {
    color: $pedagogy-white-text;
    text-align: center;
    width : 34%;
    @media screen and (max-width: $large-devices){
    border-left: solid;
    border-right: solid;
    border-color: $pedagogy-blue;
    }
    padding: 5px;
    margin: 0px;
    .status-reported {
    color: red;
    float: left;
    padding-left: 10px;
    padding-bottom: 10px;
    }
    @media screen and (max-width: $large-devices) {
    width: 0%;
    }
    .actions {
    float: right;
    }
    }
    .author-info {
    .comment-end-bar {
    grid-area: comment-end-bar;
    a {
    color: $pedagogy-white-text;
    text-align: center;
    font-weight: bold;
    }
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 2.5em;
    grid-template-areas: "report date author";
    a:hover {
    color: $pedagogy-light-blue;
    }
    padding-right: 33%;
    background-color: $pedagogy-blue;
    margin-top: 0px;
    padding: 5px;
    margin: 0px;
    float: right;
    padding-right: 10%;
    @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);
    width : 33%;
    clip-path: polygon(0 0%, 0 200%, 300px 200%, 250px 0);
    @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) {
    clip-path: none;
    width : 32%;
    .date {
    grid-area: date;
    color: $pedagogy-white-text;
    @media screen and (max-width: $large-devices){
    text-align: center;
    }
    }
    }
    .action {
    float: right;
    text-align: center;
    padding: 5px;
    margin: 0px;
    }
    .author {
    grid-area: author;
    justify-self: right;
    padding-right: 30px;
    .status-reported {
    color: red;
    float: left;
    padding: 5px;
    margin: 0px;
    }
    a {
    color: $pedagogy-white-text;
    font-weight: bold;
    }
    .markdown {
    height: 125px;
    margin-top: 0px;
    margin-right: 0px;
    padding: 10px;
    padding-left: 40px;
    overflow: auto;
    text-align: justify;
    a:hover {
    color: $pedagogy-light-blue;
    }
    @media screen and (max-width: $large-devices){
    // text-align: center;
    justify-self: center;
    padding-right: 0px;
    }
    }
    }
    }
    }
    \ No newline at end of file
    pedagogy/templates/pedagogy/macros.jinja
    View file @ 52129d75
    ......@@ -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
    View file @ 52129d75
    ......@@ -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>
    {{ 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="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 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>
    ......
    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