klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-09 19:40:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Antoine Bartuccio
2019-07-08 02:54:49 +02:00
parent d03835d737
commit 52129d7511
3 changed files with 159 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
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;
}
.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;
.grade-type {
grid-area: grade-type;
> p {
color: $pedagogy-white-text;
font-weight: bold;
text-align: right;
}
}
@media screen and (max-width: $large-devices) {
.dif-grade {
width: 11%;
}
.grade {
width: 8%;
}
.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;
.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%;
}
grid-area: info;
margin-bottom: 0px;
@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 {
color: $pedagogy-white-text;
text-align: center;
font-weight: bold;
}
a:hover {
color: $pedagogy-light-blue;
}
padding-right: 33%;
padding: 5px;
margin: 0px;
.actions {
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);
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;
}
}
.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;
}
}
}