Merge pull request #596 from MITx/features/kfiedler/multicourse-buttons
Make the two buttons that lead to the courseware more actionable
This commit is contained in:
Tom Giannattasio
@@ -115,6 +115,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
@@ -125,7 +149,10 @@
|
||||
padding: 10px 0px 8px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
width: flex-grid(12);
|
||||
float: left;
|
||||
margin: 1px flex-gutter(8) 0 0;
|
||||
@include transition();
|
||||
width: flex-grid(5, 8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -261,7 +261,7 @@
|
||||
padding: 12px 0px;
|
||||
width: 100%;
|
||||
|
||||
a.university {
|
||||
.university {
|
||||
background: rgba(255,255,255, 1);
|
||||
border: 1px solid rgb(180,180,180);
|
||||
@include border-radius(3px);
|
||||
@@ -269,17 +269,14 @@
|
||||
color: $lighter-base-font-color;
|
||||
display: block;
|
||||
font-style: italic;
|
||||
font-family: $sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
@include inline-block;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 0;
|
||||
padding: 5px 10px;
|
||||
|
||||
float: left;
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@@ -306,8 +303,12 @@
|
||||
background: $yellow;
|
||||
border: 1px solid rgb(200,200,200);
|
||||
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
|
||||
margin-top: 16px;
|
||||
margin-top: 17px;
|
||||
margin-right: flex-gutter();
|
||||
padding: 5px;
|
||||
width: flex-grid(8);
|
||||
float: left;
|
||||
@include box-sizing(border-box);
|
||||
|
||||
p {
|
||||
color: $lighter-base-font-color;
|
||||
@@ -317,93 +318,46 @@
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
@include clearfix;
|
||||
margin-top: 22px;
|
||||
position: relative;
|
||||
@include transition(opacity, 0.15s, linear);
|
||||
width: 100%;
|
||||
|
||||
|
||||
.course-work-icon {
|
||||
@include background-image(url('../images/portal-icons/pencil-icon.png'));
|
||||
background-size: cover;
|
||||
float: left;
|
||||
height: 22px;
|
||||
opacity: 0.7;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.complete {
|
||||
float: right;
|
||||
|
||||
p {
|
||||
color: $lighter-base-font-color;
|
||||
font-style: italic;
|
||||
@include inline-block;
|
||||
text-align: right;
|
||||
text-shadow: 0 1px rgba(255,255,255, 0.6);
|
||||
|
||||
.completeness {
|
||||
color: $base-font-color;
|
||||
font-weight: 700;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
|
||||
left: 35px;
|
||||
position: absolute;
|
||||
right: 130px;
|
||||
|
||||
.meter {
|
||||
background: rgb(245,245,245);
|
||||
border: 1px solid rgb(160,160,160);
|
||||
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius(4px);
|
||||
height: 22px;
|
||||
margin: 0 auto;
|
||||
padding: 2px;
|
||||
width: 100%;
|
||||
|
||||
.meter-fill {
|
||||
background: $blue;
|
||||
@include background-image(linear-gradient(-45deg, rgba(255,255,255, 0.15) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255,255,255, 0.15) 50%,
|
||||
rgba(255,255,255, 0.15) 75%,
|
||||
transparent 75%));
|
||||
background-size: 40px 40px;
|
||||
background-repeat: repeat-x;
|
||||
border: 1px solid rgb(115,115,115);
|
||||
@include border-radius(4px);
|
||||
@include box-sizing(border-box);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.enter-course {
|
||||
@include button(shiny, $blue);
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius(3px);
|
||||
display: block;
|
||||
float: left;
|
||||
font: normal 1rem/1.6rem $sans-serif;
|
||||
letter-spacing: 1px;
|
||||
padding: 6px 0px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
width: flex-grid(4);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> a:hover {
|
||||
.cover {
|
||||
.shade {
|
||||
background: rgba(255,255,255, 0.1);
|
||||
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
|
||||
rgba(0,0,0, 0.3) 100%));
|
||||
rgba(0,0,0, 0.3) 100%));
|
||||
}
|
||||
|
||||
.arrow {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
background: darken(rgb(250,250,250), 5%);
|
||||
@include background-image(linear-gradient(-90deg, darken(rgb(253,253,253), 3%), darken(rgb(240,240,240), 5%)));
|
||||
border-color: darken(rgb(190,190,190), 10%);
|
||||
|
||||
.course-status {
|
||||
background: darken($yellow, 3%);
|
||||
border-color: darken(rgb(200,200,200), 3%);
|
||||
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -420,5 +374,6 @@
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,30 +72,24 @@
|
||||
else:
|
||||
course_target = reverse('about_course', args=[course.id])
|
||||
%>
|
||||
<a href="${course_target}" class="cover" style="background-image: url('${course_image_url(course)}')">
|
||||
<div class="shade"></div>
|
||||
<div class="arrow">❯</div>
|
||||
|
||||
<a href="${course_target}">
|
||||
<section class="cover" style="background-image: url('${course_image_url(course)}')">
|
||||
<div class="shade"></div>
|
||||
<div class="arrow">❯</div>
|
||||
</section>
|
||||
|
||||
<section class="info">
|
||||
<hgroup>
|
||||
<h2 class="university">${get_course_about_section(course, 'university')}</h2>
|
||||
<h3>${course.number} ${course.title}</h3>
|
||||
</hgroup>
|
||||
<section class="course-status">
|
||||
<p>Class Starts - <span>${course.start_date_text}</span></p>
|
||||
</section>
|
||||
<p class="enter-course">View Courseware</p>
|
||||
</section>
|
||||
</a>
|
||||
<section class="info">
|
||||
<hgroup>
|
||||
<a href="${reverse('university_profile', args=[course.org])}" class="university">${get_course_about_section(course, 'university')}</a>
|
||||
<h3><a href="${course_target}">${course.number} ${course.title}</a></h3>
|
||||
</hgroup>
|
||||
<section class="course-status">
|
||||
<p>Class Starts - <span>${course.start_date_text}</span></div>
|
||||
</section>
|
||||
<section class="meta">
|
||||
<div class="course-work-icon"></div>
|
||||
<div class="progress">
|
||||
<div class="meter">
|
||||
<div class="meter-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="complete">
|
||||
##<p><span class="completeness">60%</span> complete</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</article>
|
||||
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id}" data-course-number="${course.number}">Unregister</a>
|
||||
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
%if show_link:
|
||||
<a href="${course_target}">
|
||||
%endif
|
||||
<span class="register disabled">You are registered for this course (${course.number}).</span>
|
||||
<span class="register disabled">You are registered for this course (${course.number})</span> <strong>View Courseware</strong>
|
||||
%if show_link:
|
||||
</a>
|
||||
%endif
|
||||
|
||||
Reference in New Issue
Block a user