codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-11-27 17:45:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

/courses/teachers screenshot duration stars

Browse source
This commit is contained in:
Matt Lott 2015-12-01 07:01:17 -08:00
parent 7efb3518a6
commit 6418562ba2
2 changed files with 136 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
app/styles/courses/teacher-courses-view.sass
View file

@ -79,6 +79,135 @@
margin: 10px
text-align: center
.star-container
position: absolute
left: 10px
bottom: 10px
.star-text
position: absolute
left: 4px
bottom: 5px
width: 40px
z-index: 1
.round-star-label
-webkit-box-sizing: content-box
-moz-box-sizing: content-box
box-sizing: content-box
width: 30px
height: 30px
position: relative
border: none
font: normal 100%/normal Arial, Helvetica, sans-serif
color: rgba(0,0,0,1)
text-align: center
-o-text-overflow: clip
text-overflow: clip
background: #E9E417
&:before
-webkit-box-sizing: content-box
-moz-box-sizing: content-box
box-sizing: content-box
width: 30px
height: 30px
position: absolute
content: ""
top: 0
left: 0
border: none
font: normal 100%/normal Arial, Helvetica, sans-serif
color: rgba(0,0,0,1)
-o-text-overflow: clip
text-overflow: clip
background: #E9E417
text-shadow: none
-webkit-transform: rotateZ(30deg)
transform: rotateZ(30deg)
&:after
-webkit-box-sizing: content-box
-moz-box-sizing: content-box
box-sizing: content-box
width: 30px
height: 30px
position: absolute
content: ""
top: 0
left: 0
border: none
font: normal 100%/normal Arial, Helvetica, sans-serif
color: rgba(0,0,0,1)
-o-text-overflow: clip
text-overflow: clip
background: #E9E417
text-shadow: none
-webkit-transform: rotateZ(60deg)
transform: rotateZ(60deg)
.star-text-big
position: absolute
left: 4px
bottom: 10px
width: 40px
z-index: 1
.round-star-label-big
-webkit-box-sizing: content-box
-moz-box-sizing: content-box
box-sizing: content-box
width: 40px
height: 40px
position: relative
border: none
font: normal 100%/normal Arial, Helvetica, sans-serif
color: rgba(0,0,0,1)
text-align: center
-o-text-overflow: clip
text-overflow: clip
background: #E9E417
&:before
-webkit-box-sizing: content-box
-moz-box-sizing: content-box
box-sizing: content-box
width: 40px
height: 40px
position: absolute
content: ""
top: 0
left: 0
border: none
font: normal 100%/normal Arial, Helvetica, sans-serif
color: rgba(0,0,0,1)
-o-text-overflow: clip
text-overflow: clip
background: #E9E417
text-shadow: none
-webkit-transform: rotateZ(30deg)
transform: rotateZ(30deg)
&:after
-webkit-box-sizing: content-box
-moz-box-sizing: content-box
box-sizing: content-box
width: 40px
height: 40px
position: absolute
content: ""
top: 0
left: 0
border: none
font: normal 100%/normal Arial, Helvetica, sans-serif
color: rgba(0,0,0,1)
-o-text-overflow: clip
text-overflow: clip
background: #E9E417
text-shadow: none
-webkit-transform: rotateZ(60deg)
transform: rotateZ(60deg)
.section-header
border-bottom: 1px solid black
font-size: 20px

7
app/templates/courses/teacher-courses-view.jade
View file

@ -94,6 +94,13 @@ mixin course-info(course)
if course.get('free')
.corner-ribbon.top-left.sticky.shadow.uppercase free
img.media-object(src=course.get('screenshot'))
.star-container
if course.get('duration') === 1
.star-text #{course.get('duration') || 0} hr
.round-star-label
else
.star-text-big #{course.get('duration') || 0} hrs
.round-star-label-big
.media-body
span.spr.course-name= course.get('name')
p= course.get('description')