From 04802d2d722440968015c313942d41571c38cd03 Mon Sep 17 00:00:00 2001
From: Aura Milena Alba <36944773+amalbas@users.noreply.github.com>
Date: Tue, 19 May 2020 08:33:24 -0500
Subject: [PATCH] Remove pattern library of programs.html (#23951)

---
 lms/djangoapps/learner_dashboard/views.py     |   2 +-
 lms/static/sass/_build-learner-dashboard.scss |   3 -
 lms/static/sass/bootstrap/_legacy.scss        |   1 +
 .../bootstrap/elements/_program-card.scss     | 211 ++++++++++++++++++
 lms/static/sass/bootstrap/lms-main.scss       |   3 +
 lms/static/sass/views/_program-list.scss      |  39 +++-
 lms/templates/learner_dashboard/programs.html |   3 +-
 7 files changed, 246 insertions(+), 16 deletions(-)
 create mode 100644 lms/static/sass/bootstrap/elements/_program-card.scss

diff --git a/lms/djangoapps/learner_dashboard/views.py b/lms/djangoapps/learner_dashboard/views.py
index 360ff6d368..e77f970c08 100644
--- a/lms/djangoapps/learner_dashboard/views.py
+++ b/lms/djangoapps/learner_dashboard/views.py
@@ -22,7 +22,7 @@ def program_listing(request):
         'nav_hidden': True,
         'show_dashboard_tabs': True,
         'show_program_listing': programs_config.enabled,
-        'uses_pattern_library': True,
+        'uses_bootstrap': True,
     }
 
     return render_to_response('learner_dashboard/programs.html', context)
diff --git a/lms/static/sass/_build-learner-dashboard.scss b/lms/static/sass/_build-learner-dashboard.scss
index 1974891d52..16962bcd69 100644
--- a/lms/static/sass/_build-learner-dashboard.scss
+++ b/lms/static/sass/_build-learner-dashboard.scss
@@ -10,6 +10,3 @@
 @import 'elements/program-card';
 @import 'elements-v2/icons';
 @import 'elements/progress-circle';
-
-// Various View Styling
-@import 'views/program-list';
diff --git a/lms/static/sass/bootstrap/_legacy.scss b/lms/static/sass/bootstrap/_legacy.scss
index 98a9cbb573..678df10fb7 100644
--- a/lms/static/sass/bootstrap/_legacy.scss
+++ b/lms/static/sass/bootstrap/_legacy.scss
@@ -120,6 +120,7 @@ $gray-base: rgba(65, 65, 65, 100) !default;
 $gray-light1: rgb(252, 252, 252) !default;
 $gray-light2: mix($white, $gray, 60%) !default;
 $gray-light3: mix($white, $gray, 80%) !default;
+$gray-light4: mix($white, $gray, 95%) !default;
 
 // ----------------------------
 // #COLORS- Bootstrap-style
diff --git a/lms/static/sass/bootstrap/elements/_program-card.scss b/lms/static/sass/bootstrap/elements/_program-card.scss
new file mode 100644
index 0000000000..33b8e85021
--- /dev/null
+++ b/lms/static/sass/bootstrap/elements/_program-card.scss
@@ -0,0 +1,211 @@
+%hide-until-focus {
+  @include left(0);
+
+  display: inline-block;
+  position: absolute;
+  top: -999999px;
+  overflow: hidden;
+}
+
+.program-card {
+  flex: 0 0 98%;
+  max-width: 98%;
+  border: 1px solid $gray-500;
+  border-bottom: none;
+  margin-bottom: $baseline;
+  position: relative;
+
+  @include margin-right(8px);
+  @include margin-left(8px);
+
+  @include media-breakpoint-up(md) {
+    flex: 0 0 47%;
+    max-width: 47%;
+
+    &:nth-child(2n+1) {
+      @include margin-left(0);
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    flex: 0 0 48%;
+    max-width: 48%;
+  }
+
+  .card-link {
+    @include left(0);
+    @include right(0);
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border: 0;
+    z-index: 1;
+    opacity: 0.8;
+
+    &:active,
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+
+    .banner-image-container {
+      position: relative;
+      overflow: hidden;
+      height: 166px;
+
+      @include media-breakpoint-up(sm) { height: 242px; }
+
+      @include media-breakpoint-up(md) { height: 116px; }
+
+      @include media-breakpoint-up(lg) { height: 145px; }
+
+      .banner-image {
+        @include left(50%);
+
+        position: absolute;
+        top: 0;
+        z-index: 0;
+        transform: translate(-50%, 0);
+        min-height: 100%;
+      }
+    }
+  }
+
+  .text-section {
+    padding: 40px $baseline $baseline;
+    position: relative;
+    margin-top: 156px;
+
+    @include media-breakpoint-up(sm) { margin-top: 232px; }
+
+    @include media-breakpoint-up(md) { margin-top: 106px; }
+
+    @include media-breakpoint-up(lg) { margin-top: 135px; }
+  }
+
+  .meta-info {
+    font-size: 0.75rem;
+    color: $gray-dark;
+    position: absolute;
+    top: $baseline;
+    width: calc(100% - 40px);
+    display: flex;
+  }
+
+  .organization {
+    @include make-col(6);
+
+    white-space: nowrap;
+    overflow: hidden;
+    padding: 0;
+  }
+
+  .category {
+    @include make-col(6);
+    @include text-align(right);
+
+    padding: 0;
+
+    .category-text {
+      @include float(right);
+    }
+
+    .category-icon {
+      @include float(right);
+      @include margin-right($baseline*0.25);
+
+      background-color: transparent;
+      background-size: 100%;
+      width: ($baseline*0.7);
+      height: ($baseline*0.7);
+    }
+  }
+
+  .hd-3 {
+    font: -apple-system-short-headline !important;
+    color: $gray-dark;
+    min-height: ($baseline*3);
+    line-height: 1.15;
+    margin-bottom: 0.625rem;
+    font-size: 1.5rem;
+  }
+
+  .status-text {
+    display: flex;
+    margin-bottom: 5px;
+
+    .number-status {
+      font: -apple-system-short-caption1 !important;
+      text-align: center;
+      width: 100%;
+      float: left;
+      padding: {
+        left: 5px;
+        right: 5px;
+        bottom: 8px;
+      }
+
+      margin-top: -8px;
+      font-size: 0.9375em;
+      font-family: $font-family-sans-serif;
+    }
+
+    .number-circle {
+      padding-top: 1px;
+      border-radius: 50%;
+      margin-left: auto;
+      margin-right: auto;
+      width: 23px;
+      height: 23px;
+      color: white;
+      text-align: center;
+      font-size: 0.9375em;
+      font-family: $font-family-sans-serif;
+      font-weight: bold;
+    }
+
+    .completed {
+      background: $blue;
+    }
+
+    .enrolled {
+      background: $green;
+    }
+
+    .not-enrolled {
+      background: $gray-dark;
+    }
+  }
+
+  .progress-container {
+    .progress-bar {
+      height: 5px;
+      display: flex;
+      width: 100%;
+      background-color: $white;
+
+      .item {
+        width: 100%;
+        margin-right: 2px;
+        height: 5px;
+
+        &.completed {
+          background: $blue;
+        }
+
+        &.enrolled {
+          background: $green;
+        }
+
+        &.not-enrolled {
+          background: lightgray;
+        }
+
+        &.not-enrolled:last-of-type {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
diff --git a/lms/static/sass/bootstrap/lms-main.scss b/lms/static/sass/bootstrap/lms-main.scss
index 73ecf5820e..b25e635ab8 100644
--- a/lms/static/sass/bootstrap/lms-main.scss
+++ b/lms/static/sass/bootstrap/lms-main.scss
@@ -20,6 +20,8 @@ $static-path: '../..';
 @import 'shared/help-tab';
 @import './elements/banners';
 @import './elements/progress-circle';
+@import './elements/program-card';
+@import 'elements/icons';
 
 // Features
 @import 'features/bookmarks';
@@ -36,6 +38,7 @@ $static-path: '../..';
 @import "views/entitlement-support-page";
 @import "views/course-entitlements";
 @import "views/program-details";
+@import 'views/program-list';
 
 // Responsive Design
 @import '../header';
diff --git a/lms/static/sass/views/_program-list.scss b/lms/static/sass/views/_program-list.scss
index d278f465de..3cc8a5b908 100644
--- a/lms/static/sass/views/_program-list.scss
+++ b/lms/static/sass/views/_program-list.scss
@@ -1,4 +1,9 @@
 .program-list-wrapper {
+  @include make-row();
+
+  max-width: 73.125rem;
+  margin: 0 auto;
+
   @include media-breakpoint-up(sm) {
     padding: $baseline;
   }
@@ -6,28 +11,31 @@
 
 .program-cards-container {
   @include grid-container();
-  @include span(12);
+  @include make-col(12);
+
+  padding: 0 8px;
 
   @include media-breakpoint-up(sm) {
-    @include span(9);
+    @include make-col(9);
   }
 }
 
 .sidebar {
-  @include span(12);
+  @include make-col(12);
   @include float(right);
 
   margin-bottom: $baseline;
+  padding: 0 8px;
 
   @include media-breakpoint-up(sm) {
-    @include span(3);
+    @include make-col(3);
   }
 
   .aside {
     padding: $baseline;
     margin-bottom: $baseline;
     box-sizing: border-box;
-    border: 1px solid $border-color-l3;
+    border: 1px solid $gray-500;
   }
 
   .program-advertise {
@@ -37,21 +45,32 @@
       width: 100%;
       text-align: center;
       padding: 10px;
+      white-space: normal;
+      border-color: theme-color("primary");
+      color: theme-color("primary");
+      font-weight: 600;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background: theme-color("primary");
+        color: $white;
+      }
     }
 
     .advertise-message {
-      font-size: font-size(x-small);
-      color: palette(grayscale, black);
+      font-size: 0.75rem;
+      color: $gray-dark;
       margin-bottom: $baseline;
     }
   }
 }
 
 .empty-programs-message {
-  @include span(12);
+  @include make-col(12);
 
-  border: 3px solid $gray-l4;
-  background: $gray-l6;
+  background: $gray-light4;
+  border: 3px solid $gray-light3;
   padding: ($baseline*2) 0;
   text-align: center;
   margin-bottom: 20px;
diff --git a/lms/templates/learner_dashboard/programs.html b/lms/templates/learner_dashboard/programs.html
index be4576252c..c37db0af4b 100644
--- a/lms/templates/learner_dashboard/programs.html
+++ b/lms/templates/learner_dashboard/programs.html
@@ -1,5 +1,4 @@
-## Override the default styles_version to the Pattern Library version (version 2)
-<%! main_css = "style-learner-dashboard" %>
+<%! main_css = "css/bootstrap/lms-main.css" %>
 
 <%page expression_filter="h"/>
 <%inherit file="../main.html" />