Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
What's new
10
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Open sidebar
AE
Sith
Commits
52129d75
Verified
Commit
52129d75
authored
Jul 08, 2019
by
Sli
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
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
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
151 additions
and
141 deletions
+151
-141
core/static/core/style.scss
core/static/core/style.scss
+122
-119
pedagogy/templates/pedagogy/macros.jinja
pedagogy/templates/pedagogy/macros.jinja
+0
-1
pedagogy/templates/pedagogy/uv_detail.jinja
pedagogy/templates/pedagogy/uv_detail.jinja
+29
-21
No files found.
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=
"grad
e-typ
e"
>
<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=
"a
ction
"
>
<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=
"a
nchor
"
>
<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>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment