e5846e64bd
Now that we are using separate pages for login and registration rather than modals, clicking the registration button for a course should direct an unauthenticated user to the registration page, and the user should be enrolled in the course upon successful registration. Likewise, an unauthenticated user attempting to unenroll from a course should be directed to the login page and subsequently unenrolled from the course upon successful login. The enrollment change service also now uses HTTP status codes rather than JSON to communicate status to the front end.
569 lines
13 KiB
SCSS
569 lines
13 KiB
SCSS
.course-info {
|
|
.container {
|
|
padding-bottom: 120px;
|
|
}
|
|
|
|
header.course-profile {
|
|
background: rgb(245,245,245);
|
|
@include background-image(url('/static/images/homepage-bg.jpg'));
|
|
background-size: cover;
|
|
@include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
|
|
border-bottom: 1px solid rgb(100,100,100);
|
|
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
|
|
height: 280px;
|
|
margin-top: -69px;
|
|
padding-top: 150px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
.intro-inner-wrapper {
|
|
background: rgba(255,255,255, 0.93);
|
|
border: 1px solid rgb(100,100,100);
|
|
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
|
|
@include box-sizing(border-box);
|
|
@include clearfix;
|
|
margin: 0 auto;
|
|
max-width: 1200px;
|
|
min-width: 760px;
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
> div.table {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
.intro {
|
|
@include box-sizing(border-box);
|
|
@include clearfix;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding: 20px 20px;
|
|
position: relative;
|
|
width: flex-grid(8) + flex-gutter();
|
|
z-index: 2;
|
|
|
|
> hgroup {
|
|
border-bottom: 1px solid rgb(210,210,210);
|
|
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
|
|
margin-bottom: 20px;
|
|
padding-bottom: 20px;
|
|
width: 100%;
|
|
|
|
h1 {
|
|
color: $base-font-color;
|
|
font-weight: normal;
|
|
@include inline-block;
|
|
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 {
|
|
@include inline-block;
|
|
margin: 0;
|
|
|
|
a {
|
|
color: $lighter-base-font-color;
|
|
font: italic 800 1em/1em $sans-serif;
|
|
letter-spacing: 0px;
|
|
text-shadow: 0 1px rgba(255,255,255, 0.6);
|
|
text-transform: none;
|
|
|
|
&:hover {
|
|
color: $blue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-cta {
|
|
@include clearfix;
|
|
float: left;
|
|
margin-right: flex-gutter();
|
|
@include transition(all, 0.15s, linear);
|
|
width: flex-grid(12);
|
|
|
|
> a.find-courses, a.register {
|
|
@include button(shiny, $blue);
|
|
@include box-sizing(border-box);
|
|
@include border-radius(3px);
|
|
display: block;
|
|
font: normal 1.2rem/1.6rem $sans-serif;
|
|
letter-spacing: 1px;
|
|
padding: 10px 0px;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
width: flex-grid(6);
|
|
|
|
&:hover {
|
|
color: rgb(255,255,255);
|
|
}
|
|
}
|
|
|
|
a {
|
|
&:hover, &:visited {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
strong {
|
|
@include button(shiny, $blue);
|
|
@include box-sizing(border-box);
|
|
@include border-radius(3px);
|
|
display: block;
|
|
float: left;
|
|
font: normal 1.2rem/1.6rem $sans-serif;
|
|
letter-spacing: 1px;
|
|
padding: 10px 0px;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
width: flex-grid(3, 8);
|
|
|
|
&:hover {
|
|
color: rgb(255,255,255);
|
|
}
|
|
}
|
|
|
|
span.register {
|
|
background: lighten($blue, 20%);
|
|
border: 1px solid $blue;
|
|
@include box-sizing(border-box);
|
|
color: darken($blue, 20%);
|
|
display: block;
|
|
letter-spacing: 1px;
|
|
padding: 10px 0px 8px;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
float: left;
|
|
margin: 1px flex-gutter(8) 0 0;
|
|
@include transition();
|
|
width: flex-grid(5, 8);
|
|
}
|
|
|
|
#register_error {
|
|
background: $error-red;
|
|
border: 1px solid rgb(202, 17, 17);
|
|
color: rgb(143, 14, 14);
|
|
display: none;
|
|
padding: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.media {
|
|
background: transparent;
|
|
@include box-sizing(border-box);
|
|
display: table-cell;
|
|
padding: 20px;
|
|
position: relative;
|
|
width: flex-grid(4);
|
|
z-index: 2;
|
|
|
|
.hero {
|
|
border: 1px solid rgb(100,100,100);
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.play-intro {
|
|
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
|
|
@include border-radius(4px);
|
|
@include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4));
|
|
border: 2px solid rgba(255,255,255, 0.8);
|
|
height: 80px;
|
|
left: 50%;
|
|
margin-top: -40px;
|
|
margin-left: -40px;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 80px;
|
|
|
|
&::after {
|
|
color: rgba(255,255,255, 0.8);
|
|
content: "\25B6";
|
|
display: block;
|
|
font: normal 2em/1em $sans-serif;
|
|
left: 50%;
|
|
margin-left: -11px;
|
|
margin-top: -16px;
|
|
position: absolute;
|
|
text-shadow: 0 -1px rgba(0,0,0, 0.8);
|
|
top: 50%;
|
|
}
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
|
|
.play-intro {
|
|
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
|
|
@include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.5));
|
|
border-color: rgba(255,255,255, 0.9);
|
|
|
|
&::after {
|
|
color: rgba(255,255,255, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
@include clearfix;
|
|
|
|
nav {
|
|
border-bottom: 1px solid rgb(220,220,220);
|
|
@include box-sizing(border-box);
|
|
@include clearfix;
|
|
margin: 40px 0;
|
|
width: flex-grid(12);
|
|
|
|
&::after {
|
|
@extend .faded-hr-divider;
|
|
content: "";
|
|
display: none;
|
|
}
|
|
|
|
a {
|
|
border-bottom: 3px solid transparent;
|
|
color: $lighter-base-font-color;
|
|
@include inline-block;
|
|
letter-spacing: 1px;
|
|
margin: 0 15px;
|
|
padding: 0px 5px 15px;
|
|
text-align: center;
|
|
text-transform: lowercase;
|
|
|
|
&:first-child {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
&:hover, &.active {
|
|
border-color: rgb(200,200,200);
|
|
color: $base-font-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.details {
|
|
float: left;
|
|
margin-right: flex-gutter();
|
|
width: flex-grid(8);
|
|
|
|
.inner-wrapper {
|
|
> section {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.course-staff {
|
|
|
|
.teacher {
|
|
@include clearfix;
|
|
margin-bottom: 40px;
|
|
|
|
h3 {
|
|
color: $base-font-color;
|
|
font-family: $sans-serif;
|
|
font-weight: 700;
|
|
margin-bottom: 15px;
|
|
text-transform: none;
|
|
}
|
|
|
|
.teacher-image {
|
|
background: rgb(255,255,255);
|
|
border: 1px solid rgb(200,200,200);
|
|
height: 115px;
|
|
float: left;
|
|
margin: 0 15px 0px 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
width: 115px;
|
|
|
|
img {
|
|
display: block;
|
|
min-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.prerequisites, .syllabus {
|
|
ul {
|
|
li {
|
|
font: normal 1em/1.6em $serif;
|
|
}
|
|
ul {
|
|
margin: 5px 0px 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.faq {
|
|
@include clearfix;
|
|
|
|
.responses {
|
|
float: left;
|
|
}
|
|
|
|
.response {
|
|
margin-bottom: 40px;
|
|
|
|
h3 {
|
|
font-family: $sans-serif;
|
|
font-weight: 700;
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.course-sidebar {
|
|
@include box-sizing(border-box);
|
|
float: left;
|
|
width: flex-grid(4);
|
|
|
|
> section {
|
|
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
|
|
border: 1px solid rgb(200,200,200);
|
|
|
|
&.course-summary {
|
|
padding: 16px 20px 30px;
|
|
margin-bottom: 220px;
|
|
border-top: none;
|
|
}
|
|
|
|
&.additional-resources {
|
|
padding: 30px;
|
|
|
|
.opencourseware {
|
|
text-indent: -9999px;
|
|
background: url('../images/opencourseware.png') 0 0 no-repeat;
|
|
width: 266px;
|
|
height: 31px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
padding-left: 29px;
|
|
background: url('../images/link-icon.png') left center no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 30px;
|
|
padding-bottom: 16px;
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
&::after {
|
|
@extend .faded-hr-divider;
|
|
content: "";
|
|
display: block;
|
|
height: 1px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
a.university-name {
|
|
border-right: 1px solid rgb(200,200,200);
|
|
color: $base-font-color;
|
|
font-family: $sans-serif;
|
|
font-style: italic;
|
|
font-weight: 800;
|
|
@include inline-block;
|
|
letter-spacing: 0px;
|
|
margin-right: 15px;
|
|
padding-right: 15px;
|
|
|
|
&:hover {
|
|
color: $lighter-base-font-color;
|
|
}
|
|
}
|
|
|
|
.social-sharing {
|
|
@include box-sizing(border-box);
|
|
float: left;
|
|
height: 44px;
|
|
position: relative;
|
|
text-align: center;
|
|
width: flex-grid(12);
|
|
z-index: 2;
|
|
|
|
float: none;
|
|
|
|
&:hover {
|
|
.sharing-message {
|
|
opacity: 1;
|
|
top: 56px;
|
|
}
|
|
}
|
|
|
|
.sharing-message {
|
|
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
|
|
rgba(0,0,0, 0.7) 100%));
|
|
border: 1px solid rgba(0,0,0, 0.5);
|
|
@include border-radius(4px);
|
|
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
|
|
@include box-sizing(border-box);
|
|
color: rgb(255,255,255);
|
|
float: right;
|
|
font-family: $serif;
|
|
font-size: 0.9em;
|
|
font-style: italic;
|
|
left: 50%;
|
|
margin-left: -110px;
|
|
opacity: 0;
|
|
padding: 6px 10px;
|
|
position: absolute;
|
|
text-align: center;
|
|
@include transition(all, 0.15s, ease-out);
|
|
top: 65px;
|
|
width: 220px;
|
|
|
|
&:hover {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.share {
|
|
height: 44px;
|
|
@include inline-block;
|
|
margin-right: 10px;
|
|
opacity: 0.5;
|
|
@include transition(all, 0.15s, linear);
|
|
width: 44px;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font: 1em $serif;
|
|
letter-spacing: 0;
|
|
color: #999;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.important-dates {
|
|
list-style: none;
|
|
margin: 0px;
|
|
padding: 0px 10px;
|
|
|
|
li {
|
|
@include clearfix;
|
|
border-bottom: 1px dotted rgb(220,220,220);
|
|
margin-bottom: 20px;
|
|
padding-bottom: 10px;
|
|
|
|
&.prerequisites {
|
|
border: 1px solid rgb(220,220,220);
|
|
margin: 0 -10px 0;
|
|
padding: 10px;
|
|
|
|
p {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.icon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
p {
|
|
color: $lighter-base-font-color;
|
|
float: left;
|
|
font-family: $sans-serif;
|
|
}
|
|
|
|
.icon {
|
|
background-size: cover;
|
|
float: left;
|
|
height: 19px;
|
|
margin: 2px 10px 0 0;
|
|
opacity: 0.6;
|
|
@include transition(all, 0.15s, linear);
|
|
width: 19px;
|
|
|
|
&.start {
|
|
@include background-image(url('../images/portal-icons/calendar-icon.png'));
|
|
}
|
|
|
|
&.end {
|
|
@include background-image(url('../images/portal-icons/calendar-icon.png'));
|
|
}
|
|
|
|
&.length {
|
|
@include background-image(url('../images/portal-icons/chart-icon.png'));
|
|
}
|
|
|
|
&.course-number {
|
|
@include background-image(url('../images/portal-icons/course-info-icon.png'));
|
|
}
|
|
|
|
&.effort {
|
|
@include background-image(url('../images/portal-icons/pencil-icon.png'));
|
|
}
|
|
|
|
&.prereq {
|
|
@include background-image(url('../images/portal-icons/prerec-icon.png'));
|
|
}
|
|
}
|
|
|
|
span {
|
|
float: right;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|