klmp200
/
Sith
mirror of https://github.com/ae-utbm/sith3.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

pedagogy: put report button at left and author at right

This commit is contained in:
Antoine Bartuccio 2019-07-09 16:03:47 +02:00
parent 5229628d48
commit f37c022538
Signed by: klmp200
GPG Key ID: E7245548C53F904B
2 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
core/static/core/style.scss
View File

@ -2029,40 +2029,46 @@ $pedagogy-white-text: #f0f0f0;
grid-area: comment-end-bar; grid-area: comment-end-bar;
display: grid; display: grid;
grid-template-columns: auto auto auto; grid-template-columns: 33% auto auto;
grid-template-rows: 2.5em; grid-template-rows: 2.5em;
grid-template-areas: "report date author"; grid-template-areas: "author date report";
background-color: $pedagogy-blue; background-color: $pedagogy-blue;
margin-top: -1px; margin-top: -1px;
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices){
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: auto; grid-template-rows: auto auto auto;
grid-template-areas: grid-template-areas:
"author" "report"
"date" "date"
"report"; "author";
margin-top: 0px; margin-top: 0px;
text-align: center;
} }
.report { .author {
grid-area: report; grid-area: author;
padding-top: 8px;
padding-top: 6px;
padding-left: 20px; padding-left: 20px;
background-color: $white-color;
clip-path: polygon(0 0%, 0 200%, 300px 200%, 250px 0); background-color: $pedagogy-orange;
clip-path: polygon(0 10px, 0 100%, 300px 200%, 250px 10px);
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices){
clip-path: none; clip-path: none;
text-align: center; padding: 0px;
padding-top: 6px; padding-bottom: 7px;
padding-bottom: 6px;
padding-left: 0px;
} }
& a { a {
color: $black-color; color: $pedagogy-white-text;
font-weight: bold;
}
a:hover {
color: $pedagogy-hover-blue;
} }
} }
@ -2072,40 +2078,36 @@ $pedagogy-white-text: #f0f0f0;
color: $pedagogy-white-text; color: $pedagogy-white-text;
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices){
text-align: center; padding-bottom: 7px;
} }
} }
.author { .report {
grid-area: author; grid-area: report;
justify-self: right; justify-self: right;
padding-right: 30px; padding-right: 30px;
padding-left: 30px; padding-left: 30px;
background-color: $pedagogy-light-blue;
a { a {
color: $pedagogy-orange; color: $pedagogy-white-text;
font-weight: bold;
} }
a:hover { a:hover {
color: $black-color; color: $pedagogy-hover-blue;
} }
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices){
text-align: center; text-align: center;
justify-self: inherit; justify-self: inherit;
padding-right: 0px; padding-bottom: 7px;
padding-bottom: 10px; background-color: $white-color;
background-color: $pedagogy-blue;
border-left: solid;
border-right: solid;
border-color: $pedagogy-blue;
a { a {
color: $pedagogy-white-text; color: $black-color;
font-weight: bold;
}
a:hover {
color: $pedagogy-light-blue;
} }
} }
} }

4
pedagogy/templates/pedagogy/uv_detail.jinja
View File

@ -182,9 +182,9 @@
</div> </div>
<div class="comment-end-bar"> <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> <div class="report"><p><a href="{{ url('pedagogy:comment_report', comment_id=comment.id) }}">{% trans %}Report this comment{% endtrans %}</a></p></div>
<p class="date">{{ comment.publish_date.strftime('%d/%m/%Y') }}</p> <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 class="author"><p>{{ user_profile_link(comment.author) }}</p></div>
</div> </div>