Skip to content
Snippets Groups Projects
Commit 3889388a authored by Tom Giannattasio's avatar Tom Giannattasio
Browse files

Merge pull request #596 from MITx/features/kfiedler/multicourse-buttons 

Make the two buttons that lead to the courseware more actionable
parents 5fdf795d 3edf1a6a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lms/static/sass/multicourse/_course_about.scss
+ 28
− 1
View file @ 3889388a
......@@ -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);
}
}
}
......
lms/static/sass/multicourse/_dashboard.scss
+ 37
− 82
View file @ 3889388a
......@@ -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;
}
}
}
}
lms/templates/dashboard.html
+ 16
− 22
View file @ 3889388a
......@@ -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">&#10095;</div>
</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>
<a href="${course_target}">
<section class="cover" style="background-image: url('${course_image_url(course)}')">
<div class="shade"></div>
<div class="arrow">&#10095;</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 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>
</section>
</a>
</article>
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id}" data-course-number="${course.number}">Unregister</a>
......
lms/templates/portal/course_about.html
+ 1
− 1
View file @ 3889388a
......@@ -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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment