Improve progress dot layout for extra courses

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

@@ -38,6 +38,18 @@
       padding: 20px
       display: flex
       
+      .flex-right
+        display: flex
+        flex-grow: 1
+        justify-content: flex-end
+
+      .progress-col
+        display: flex
+        align-self: center
+        align-items: center
+        flex-wrap: wrap
+        justify-content: flex-end
+
   .class:nth-child(2n+1)
     background-color: #ebebeb
 
@@ -46,39 +58,27 @@
     
   .view-class-arrow
     color: $gray-darker
-    // height: 100%
     font-size: 35px
     line-height: 35px
+    margin-left: 15px
     align-self: center
     .view-class-arrow-inner
       color: $gray-light
       &:hover
         text-decoration: none
       
-  .progress-col
-    display: flex
-    align-self: center
-    align-items: center
-    
   .progress-dot
     display: inline-block
-    margin-right: 20px
+    margin: 10px
     width: 62px
     height: 62px
     border-radius: 50%
-    margin-top: 23px
-    margin-bottom: 23px
     background: $gray-light
-    position: relative
+    display: flex
+    justify-content: center
+    align-items: center
     .dot-label
-      color: $gray-dark
-      position: absolute
-      left: 50%
-      top: 50%
-      .text-h6
-        margin-left: -50%
-        margin-top: -50%
-        color: white
+      color: white
     
   .progress-dot.forest
     background: $forest

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

@@ -54,7 +54,7 @@ block content
 
 mixin classRow(classroom)
   .class.row
-    .col-xs-6
+    .class-details-col
       .text-h4.semibold
         = classroom.get('name')
       .language.small
@@ -72,19 +72,20 @@ mixin classRow(classroom)
         a.edit-classroom.text-h6(data-i18n='teacher.edit_class_settings' data-classroom-id=classroom.id data-event-action="Teachers Classes Edit Class Started")
         a.archive-classroom.text-h6(data-i18n='teacher.archive_class' data-classroom-id=classroom.id data-event-action="Teachers Classes Archive Class")
 
-    .progress-col.col-xs-5
-      if classroom.get('members').length == 0
-        +addStudentsButton(classroom)
-      else
-        - var courses = classroom.get('courses').map(function(c) { return view.courses.get(c._id); });
-        - var courseLabelsArray = view.helper.courseLabelsArray(courses);
-        each trimCourse, index in classroom.get('courses') || []
-          - var course = view.courses.get(trimCourse._id);
-          if view.courseInstances.findWhere({ classroomID: classroom.id, courseID: course.id })
-            - var label = courseLabelsArray[index];
-            +progressDot(classroom, course, label)
-    .view-class-arrow.col-xs-1
-      a.view-class-arrow-inner.glyphicon.glyphicon-chevron-right.view-class-btn(data-classroom-id=classroom.id data-event-action="Teachers Classes View Class Chevron")
+    .flex-right
+      .progress-col
+        if classroom.get('members').length == 0
+          +addStudentsButton(classroom)
+        else
+          - var courses = classroom.get('courses').map(function(c) { return view.courses.get(c._id); });
+          - var courseLabelsArray = view.helper.courseLabelsArray(courses);
+          each trimCourse, index in classroom.get('courses') || []
+            - var course = view.courses.get(trimCourse._id);
+            if view.courseInstances.findWhere({ classroomID: classroom.id, courseID: course.id })
+              - var label = courseLabelsArray[index];
+              +progressDot(classroom, course, label)
+      .view-class-arrow
+        a.view-class-arrow-inner.glyphicon.glyphicon-chevron-right.view-class-btn(data-classroom-id=classroom.id data-event-action="Teachers Classes View Class Chevron")
 
 
 mixin addStudentsButton(classroom)
@@ -118,8 +119,7 @@ mixin progressDot(classroom, course, label)
     +progressDotLabel(label)
 
 mixin progressDotLabel(label)
-  .dot-label
-    .text-h6= label
+  .dot-label.text-h6= label
 
 mixin archivedClassRow(classroom)
   .class.row