AC-582 progress page markup corrections

common/test/acceptance/pages/lms/progress.py

@@ -13,14 +13,14 @@ class ProgressPage(CoursePage):
 
     def is_browser_on_page(self):
         is_present = (
-            self.q(css='div.course-info').present and
-            self.q(css='div#grade-detail-graph').present
+            self.q(css='.course-info').present and
+            self.q(css='#grade-detail-graph').present
         )
         return is_present
 
     @property
     def grading_formats(self):
-        return [label.replace(' Scores:', '') for label in self.q(css="div.scores h3").text]
+        return [label.replace(' Scores:', '') for label in self.q(css=".scores dt").text]
 
     def section_score(self, chapter, section):
         """
@@ -79,7 +79,7 @@ class ProgressPage(CoursePage):
         Return the CSS index of the chapter with `title`.
         Returns `None` if it cannot find such a chapter.
         """
-        chapter_css = 'div.chapters section h2'
+        chapter_css = '.chapters section .hd'
         chapter_titles = self.q(css=chapter_css).map(lambda el: el.text.lower().strip()).results
 
         try:
@@ -98,7 +98,7 @@ class ProgressPage(CoursePage):
         # This is a hideous CSS selector that means:
         # Get the links containing the section titles in `chapter_index`.
         # The link text is the section title.
-        section_css = 'div.chapters>section:nth-of-type({0}) div.sections div h3 a'.format(chapter_index)
+        section_css = '.chapters>section:nth-of-type({0}) .sections div .hd a'.format(chapter_index)
         section_titles = self.q(css=section_css).map(lambda el: el.text.lower().strip()).results
 
         # The section titles also contain "n of m possible points" on the second line
@@ -120,7 +120,7 @@ class ProgressPage(CoursePage):
         Return a tuple of the form `(points, max_points)` representing
         the aggregate score for the specified chapter and section.
         """
-        score_css = "div.chapters>section:nth-of-type({0}) div.sections>div:nth-of-type({1}) h3>span".format(
+        score_css = ".chapters>section:nth-of-type({0}) .sections>div:nth-of-type({1}) .hd>span".format(
             chapter_index, section_index
 
         )
@@ -147,7 +147,7 @@ class ProgressPage(CoursePage):
         # This is CSS selector means:
         # Get the scores for the chapter at `chapter_index` and the section at `section_index`
         # Example text of the retrieved elements: "0/1"
-        score_css = "div.chapters>section:nth-of-type({0}) div.sections>div:nth-of-type({1}) div.scores>ol>li".format(
+        score_css = ".chapters>section:nth-of-type({0}) .sections>div:nth-of-type({1}) .scores>dd".format(
             chapter_index, section_index
         )
 

lms/static/sass/course/_profile.scss

@@ -17,7 +17,7 @@
       margin: 0;
       padding: lh(0.5);
 
-      h1 {
+      .hd {
         margin: 0;
         padding-right: 30px;
       }
@@ -138,7 +138,7 @@
       @extend h1.top-header;
       margin-bottom: lh();
 
-      h1 {
+      .hd {
         @include float(left);
         font-size: 1em;
         font-weight: 100;
@@ -174,7 +174,7 @@
       }
     }
 
-    #grade-detail-graph {
+    .grade-detail-graph {
       min-height: 400px;
       width: 100%;
     }
@@ -257,7 +257,7 @@
           border-bottom: 0px;
         }
 
-        h2 {
+        .hd {
           @include border-right(1px dashed #ddd);
           @include box-sizing(border-box);
           display: table-cell;
@@ -267,10 +267,11 @@
           padding-right: flex-gutter(9);
           text-transform: none;
           width: flex-grid(2, 9);
+          vertical-align: top;
         }
 
         .sections {
-          display: table-cell;
+          display: inline-block;
           @include padding-left(flex-gutter(9));
           width: flex-grid(7, 9);
 
@@ -285,7 +286,7 @@
               border-bottom: 0;
             }
 
-            h3 {
+            .hd {
               color: $gray-d1;
 
               span {
@@ -296,30 +297,33 @@
             }
 
             p {
-              color: $gray-d2;;
+              margin: lh(0.5) 0;
+              color: $gray-d1;;
               font-size: em(14);
+              font-weight: 600;
             }
 
             .scores {
               margin: lh(0.5) 0;
 
-              h3 {
-                font-size: em(14);
+              dt {
                 display: inline-block;
+                width: auto;
+                margin: initial;
+                @include margin-right($baseline);
+                border: initial;
+                padding: initial;
+                font-size: em(14);
               }
 
-              ol {
-                list-style: none;
-                margin: 0;
-                padding: 0;
+              dd {
                 display: inline-block;
-
-                li {
-                  display: inline-block;
-                  font-size: em(14);
-                  font-weight: normal;
-                  padding-right: 1em;
-                }
+                margin: 0;
+                @include margin-right($baseline);
+                @include padding-right(1em);
+                font-size: em(14);
+                font-weight: normal;
+                color: $gray-d2;
               }
             }
           }