/courses/teachers screenshot duration stars

app/styles/courses/teacher-courses-view.sass

@@ -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

app/templates/courses/teacher-courses-view.jade

@@ -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')