Skip to content

E
edx-platform
Commit 3889388a by Tom Giannattasio
Options

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

Make the two buttons that lead to the courseware more actionable
parents 5fdf795d 3edf1a6a
Showing with 73 additions and 97 deletions
lms/static/sass/multicourse/_course_about.scss
...@@ -115,6 +115,30 @@ ...@@ -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 { span.register {
background: lighten($blue, 20%); background: lighten($blue, 20%);
border: 1px solid $blue; border: 1px solid $blue;
...@@ -125,7 +149,10 @@ ...@@ -125,7 +149,10 @@
padding: 10px 0px 8px; padding: 10px 0px 8px;
text-transform: uppercase; text-transform: uppercase;
text-align: center; 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
...@@ -261,7 +261,7 @@ ...@@ -261,7 +261,7 @@
padding: 12px 0px; padding: 12px 0px;
width: 100%; width: 100%;
a.university { .university {
background: rgba(255,255,255, 1); background: rgba(255,255,255, 1);
border: 1px solid rgb(180,180,180); border: 1px solid rgb(180,180,180);
@include border-radius(3px); @include border-radius(3px);
...@@ -269,17 +269,14 @@ ...@@ -269,17 +269,14 @@
color: $lighter-base-font-color; color: $lighter-base-font-color;
display: block; display: block;
font-style: italic; font-style: italic;
font-family: $sans-serif;
font-size: 16px;
font-weight: 800; font-weight: 800;
@include inline-block; @include inline-block;
margin-right: 10px; margin-right: 10px;
margin-bottom: 0;
padding: 5px 10px; padding: 5px 10px;
float: left; float: left;
&:hover {
color: $blue;
text-decoration: none;
}
} }
h3 { h3 {
...@@ -306,8 +303,12 @@ ...@@ -306,8 +303,12 @@
background: $yellow; background: $yellow;
border: 1px solid rgb(200,200,200); border: 1px solid rgb(200,200,200);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); @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; padding: 5px;
width: flex-grid(8);
float: left;
@include box-sizing(border-box);
p { p {
color: $lighter-base-font-color; color: $lighter-base-font-color;
...@@ -317,82 +318,23 @@ ...@@ -317,82 +318,23 @@
} }
} }
.meta { .enter-course {
@include clearfix; @include button(shiny, $blue);
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); @include box-sizing(border-box);
content: ""; @include border-radius(3px);
display: block; display: block;
height: 100%; float: left;
width: 60%; 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 { .cover {
.shade { .shade {
background: rgba(255,255,255, 0.1); background: rgba(255,255,255, 0.1);
...@@ -404,6 +346,18 @@ ...@@ -404,6 +346,18 @@
opacity: 1; 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 @@ ...@@ -420,5 +374,6 @@
color: #333; color: #333;
} }
} }
} }
} }
lms/templates/dashboard.html
...@@ -72,30 +72,24 @@ ...@@ -72,30 +72,24 @@
else: else:
course_target = reverse('about_course', args=[course.id]) course_target = reverse('about_course', args=[course.id])
%> %>
<a href="${course_target}" class="cover" style="background-image: url('${course_image_url(course)}')">
<a href="${course_target}">
<section class="cover" style="background-image: url('${course_image_url(course)}')">
<div class="shade"></div> <div class="shade"></div>
<div class="arrow">&#10095;</div> <div class="arrow">&#10095;</div>
</a> </section>
<section class="info"> <section class="info">
<hgroup> <hgroup>
<a href="${reverse('university_profile', args=[course.org])}" class="university">${get_course_about_section(course, 'university')}</a> <h2 class="university">${get_course_about_section(course, 'university')}</h2>
<h3><a href="${course_target}">${course.number} ${course.title}</a></h3> <h3>${course.number} ${course.title}</h3>
</hgroup> </hgroup>
<section class="course-status"> <section class="course-status">
<p>Class Starts - <span>${course.start_date_text}</span></div> <p>Class Starts - <span>${course.start_date_text}</span></p>
</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>
<p class="enter-course">View Courseware</p>
</section> </section>
</a>
</article> </article>
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id}" data-course-number="${course.number}">Unregister</a> <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
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
%if show_link: %if show_link:
<a href="${course_target}"> <a href="${course_target}">
%endif %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: %if show_link:
</a> </a>
%endif %endif
......
Markdown is supported
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