Make the course content page responsive

LEARNER-2754
edx · Nov 1, 2017 · 268bea9 · 268bea9
1 parent ea4582a
commit 268bea9
Show file tree

Hide file tree

Showing 50 changed files with 650 additions and 396 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -1,4 +1,5 @@
 common/lib/xmodule/xmodule/css
 common/static/sass/bourbon
 common/static/xmodule/modules/css
+common/test/test-theme
 lms/static/sass/vendor
diff --git a/cms/static/sass/views/_certificates.scss b/cms/static/sass/views/_certificates.scss
@@ -11,7 +11,8 @@
 // * +Layout - Certificates
 // ====================
 .view-certificates {
-  .content-primary, .content-supplementary {
+  .content-primary,
+  .content-supplementary {
     @include box-sizing(border-box);
 
     float: left;
@@ -66,10 +67,11 @@
     width: flex-grid(3, 12);
   }
 
-  .certificate-info-section{
+  .certificate-info-section {
     overflow: auto;
 
-    .course-title-section, .course-number-section{
+    .course-title-section,
+    .course-number-section {
       min-width: 47%;
 
       @include margin-right(2%);
@@ -150,7 +152,7 @@
 
     .collection-details {
       .actions {
-        @include transition(opacity .15s .25s ease-in-out);
+        @include transition(opacity 0.15s 0.25s ease-in-out);
 
         position: absolute;
         top: $baseline;
@@ -285,7 +287,9 @@
           }
         }
 
-        label, input, textarea {
+        label,
+        input,
+        textarea {
           display: block;
         }
 
@@ -306,7 +310,8 @@
         }
 
         //this section is borrowed from _account.scss - we should clean up and unify later
-        input, textarea {
+        input,
+        textarea {
           @extend %t-copy-base;
 
           height: 100%;
@@ -491,7 +496,8 @@
 }
 
 .view-certificates .certificates {
-  .certificate-details, .certificate-edit {
+  .certificate-details,
+  .certificate-edit {
     .title {
       @extend %t-title4;
       @extend %t-strong;
@@ -563,7 +569,8 @@
 // ====================
 // TO-DO: refactor to use collection styling where possible.
 .view-certificates .certificates {
-  .signatory-details, .signatory-edit {
+  .signatory-details,
+  .signatory-edit {
     @extend %ui-window;
 
     border-color: $gray-l4;
@@ -595,7 +602,8 @@
     }
 
     .signatory-panel-edit {
-      float:right;
+      @include float(right);
+
       padding: 8px;
       position: inherit;
     }
@@ -604,9 +612,11 @@
   .signatory-edit {
 
     // TO-DO: remove icon styling, use save / cancel pattern for Studio
-    .signatory-panel-close, .signatory-panel-save, .signatory-panel-delete {
-      float:right;
-      padding:10px;
+    .signatory-panel-close,
+    .signatory-panel-save,
+    .signatory-panel-delete {
+      float: right;
+      padding: $baseline/2;
     }
 
     .tip {
@@ -637,7 +647,9 @@
         }
       }
 
-      label, input, textarea {
+      label,
+      input,
+      textarea {
         display: block;
       }
 
@@ -658,7 +670,8 @@
       }
 
       //TO-DO: this section is borrowed from _account.scss - we should clean up and unify later
-      input, textarea {
+      input,
+      textarea {
         @extend %t-copy-base;
 
         height: 100%;
@@ -705,7 +718,7 @@
           border-color: $red;
         }
 
-        .message-error{
+        .message-error {
           color: $red;
         }
       }

diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss
@@ -427,7 +427,8 @@
           }
         }
 
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           background: $color-background-alternate;
         }
       }

diff --git a/cms/static/sass/views/_group-configuration.scss b/cms/static/sass/views/_group-configuration.scss
@@ -75,7 +75,8 @@
             display: inline-block;
             color: $black;
 
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
               color: $blue;
             }
 

diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
@@ -48,7 +48,8 @@
     }
 
     // STATE: hover/focus
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       .incontext-editor-open-action {
         opacity: 1;
       }

diff --git a/common/lib/xmodule/xmodule/css/annotatable/display.scss b/common/lib/xmodule/xmodule/css/annotatable/display.scss
@@ -12,12 +12,12 @@ $annotatable--body-font-size: em(14);
 }
 
 .annotatable-header {
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
 }
 
 .annotatable-section {
   position: relative;
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   border: 1px solid $annotatable--border-color;
   border-radius: 0.5em;
   margin-bottom: 0.5em;
@@ -55,8 +55,8 @@ $annotatable--body-font-size: em(14);
   position: absolute;
   right: 0;
   margin: 2px 1em 2px 0;
-  &.expanded:after { content: " \2191" }
-  &.collapsed:after { content: " \2193" }
+  &.expanded::after { content: " \2191"; }
+  &.collapsed::after { content: " \2193"; }
 }
 
 .annotatable-span {
@@ -75,9 +75,9 @@ $annotatable--body-font-size: em(14);
     (purple rgba(115,9,178,0.3) rgba(115,9,178,0.9))) {
 
     $highlight_index: $highlight_index + 1;
-    $marker: nth($highlight,1);
-    $color: nth($highlight,2);
-    $selected_color: nth($highlight,3);
+    $marker: nth($highlight, 1);
+    $color: nth($highlight, 2);
+    $selected_color: nth($highlight, 3);
 
     @if $highlight_index == 1 {
       &.highlight {
@@ -177,7 +177,7 @@ $annotatable--body-font-size: em(14);
     }
   }
 
-  &:after {
+  &::after {
     content: '';
     display: inline-block;
     position: absolute;

diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -21,8 +21,8 @@
 
 // +Variables - Capa
 // ====================
-$annotation-yellow: rgba(255, 255,10, 0.3);
-$color-copy-tip: rgb(100,100,100);
+$annotation-yellow: rgba(255, 255, 10, 0.3);
+$color-copy-tip: rgb(100, 100, 100);
 
 // FontAwesome Icon code
 // ====================
@@ -45,9 +45,9 @@ $asterisk-icon: '\f069'; // .fa-asterisk
 
 // +Mixins - Status Icon - Capa
 // ====================
-@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d"){
+@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d") {
   .status-icon {
-    &:after {
+    &::after {
       @extend %use-font-awesome;
 
       color: $color;
@@ -219,7 +219,7 @@ div.problem {
     padding: ($baseline/2);
     width: 100%;
 
-    &:after {
+    &::after {
       @include margin-left($baseline*0.75);
     }
 
@@ -365,7 +365,7 @@ div.problem {
 div.problem {
   ol.enumerate {
     li {
-      &:before {
+      &::before {
         display: block;
         visibility: hidden;
         height: 0;
@@ -456,7 +456,7 @@ div.problem {
       margin-top: ($baseline / 2);
       margin-bottom: 0;
 
-      &:before {
+      &::before {
         @extend %t-strong;
 
         display: inline;
@@ -465,7 +465,7 @@ div.problem {
       }
 
       &:empty {
-        &:before {
+        &::before {
           display: none;
         }
       }
@@ -845,7 +845,7 @@ div.problem {
 
       .status {
         .status-icon {
-          &:after {
+          &::after {
             content: '';
           }
         }
@@ -871,11 +871,11 @@ div.problem {
     .indicator-container {
       display: inline-block;
 
-      .status.correct:after,
-      .status.partially-correct:after,
-      .status.incorrect:after,
-      .status.submitted:after,
-      .status.unanswered:after {
+      .status.correct::after,
+      .status.partially-correct::after,
+      .status.incorrect::after,
+      .status.submitted::after,
+      .status.unanswered::after {
         @include margin-left(0);
       }
     }
@@ -1485,7 +1485,7 @@ div.problem {
       font-weight: normal;
     }
 
-    a.annotation-return:after { content: " \2191" }
+    a.annotation-return::after { content: " \2191" }
 
     .block, ul.tags {
       margin: .5em 0;
@@ -1557,7 +1557,7 @@ div.problem {
 
       pre { background-color: $gray-l3; color: $black; }
 
-      &:before {
+      &::before {
         @extend %t-strong;
 
         display: block;
@@ -1603,7 +1603,7 @@ div.problem {
     }
 
     label.choicetextgroup_show_correct, section.choicetextgroup_show_correct {
-      &:after {
+      &::after {
         @include margin-left($baseline*0.75);
 
         content: url('#{$static-path}/images/correct-icon.png');