diff --git a/lms/static/images/berkeley-cover.jpeg b/lms/static/images/berkeley-cover.jpeg new file mode 100644 index 0000000000..c228d30965 Binary files /dev/null and b/lms/static/images/berkeley-cover.jpeg differ diff --git a/lms/static/images/harvard-cover.jpeg b/lms/static/images/harvard-cover.jpeg new file mode 100644 index 0000000000..943fa9ade5 Binary files /dev/null and b/lms/static/images/harvard-cover.jpeg differ diff --git a/lms/static/images/intro-video.jpg b/lms/static/images/intro-video.jpg new file mode 100644 index 0000000000..84933d7fe4 Binary files /dev/null and b/lms/static/images/intro-video.jpg differ diff --git a/lms/static/images/portal-icons/prerec-icon.png b/lms/static/images/portal-icons/prerec-icon.png new file mode 100644 index 0000000000..70f11c2e0b Binary files /dev/null and b/lms/static/images/portal-icons/prerec-icon.png differ diff --git a/lms/static/sass/_course_about.scss b/lms/static/sass/_course_about.scss index 9899052fba..a0c4d42f91 100644 --- a/lms/static/sass/_course_about.scss +++ b/lms/static/sass/_course_about.scss @@ -34,7 +34,6 @@ @include box-sizing(border-box); @include clearfix; float: left; - height: 180px; padding: 20px 20px; position: relative; width: flex-grid(8) + flex-gutter(); @@ -43,17 +42,31 @@ > hgroup { border-bottom: 1px solid rgb(210,210,210); @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); - margin-bottom: 27px; + margin-bottom: 20px; padding-bottom: 20px; width: 100%; h1 { color: $base-font-color; - font-weight: 700; + font-weight: normal; @include inline-block; - margin: 0 10px 0 0; + margin: 0; letter-spacing: 0px; + text-align: left; text-shadow: 0 1px rgba(255,255,255, 0.6); + + a { + color: $lighter-base-font-color; + font: italic 800 0.6em/1em $sans-serif; + letter-spacing: 0px; + margin-left: 15px; + text-shadow: 0 1px rgba(255,255,255, 0.6); + text-transform: none; + + &:hover { + color: $blue; + } + } } h2 { @@ -116,7 +129,6 @@ .media { background: transparent; - border-left: 1px solid rgb(100,100,100); @include box-sizing(border-box); display: block; float: right; @@ -167,6 +179,7 @@ &:hover { cursor: pointer; + text-decoration: none; .play-intro { @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8))); @@ -246,9 +259,18 @@ .teacher-image { background: rgb(255,255,255); border: 1px solid rgb(200,200,200); + height: 115px; float: left; - margin: 0 15px 15px 0; + margin: 0 15px 0px 0; + overflow: hidden; padding: 1px; + width: 115px; + + img { + display: block; + min-height: 100%; + max-width: 100%; + } } } } @@ -397,21 +419,29 @@ @include transition(all, 0.15s, linear); width: 19px; - &.start-icon { + &.start { @include background-image(url('../images/portal-icons/calendar-icon.png')); } - &.final-icon { - @include background-image(url('../images/portal-icons/pencil-icon.png')); + &.end { + @include background-image(url('../images/portal-icons/calendar-icon.png')); } - &.length-icon { + &.length { @include background-image(url('../images/portal-icons/chart-icon.png')); } - &.number-icon { + &.course-number { @include background-image(url('../images/portal-icons/course-info-icon.png')); } + + &.effort { + @include background-image(url('../images/portal-icons/pencil-icon.png')); + } + + &.prerequisites { + @include background-image(url('../images/portal-icons/prerec-icon.png')); + } } span { diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss index 445fed64e7..b92973a79d 100644 --- a/lms/static/sass/shared/_course_object.scss +++ b/lms/static/sass/shared/_course_object.scss @@ -106,6 +106,7 @@ &:hover { @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8))); + text-decoration: none; h2, .info-link { color: $blue; diff --git a/lms/templates/portal/course_about.html b/lms/templates/portal/course_about.html index 48c072036a..f898f2b8f1 100644 --- a/lms/templates/portal/course_about.html +++ b/lms/templates/portal/course_about.html @@ -14,7 +14,7 @@
-

${course.number}: ${get_course_about_section(course, "title")}

${get_course_about_section(course, "university")}

+

${course.number}: ${get_course_about_section(course, "title")}${get_course_about_section(course, "university")}

@@ -42,7 +42,7 @@
- +
% endif
@@ -81,23 +81,23 @@
    -
  1. Course Number

    ${course.number}
  2. -
  3. Classes Start

    ${course.start_date_text}
  4. +
  5. Course Number

    ${course.number}
  6. +
  7. Classes Start

    ${course.start_date_text}
  8. ## End date should come from course.xml, but this is a quick hack % if get_course_about_section(course, "end_date"): -
  9. Classes End

    ${get_course_about_section(course, "end_date")}
  10. +
  11. Classes End

    ${get_course_about_section(course, "end_date")}
  12. % endif % if get_course_about_section(course, "effort"): -
  13. Estimated Effort

    ${get_course_about_section(course, "effort")}
  14. +
  15. Estimated Effort

    ${get_course_about_section(course, "effort")}
  16. % endif + ##
  17. Course Length

    15 weeks
  18. + % if get_course_about_section(course, "prerequisites"): -
  19. Prerequisites

    ${get_course_about_section(course, "prerequisites")}
  20. +
  21. Prerequisites

    ${get_course_about_section(course, "prerequisites")}
  22. % endif - - ##
  23. Course Length

    15 weeks