Skip to content

(WIP) LMS: Add Certificate to LinkedIn Profile UI #2160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
talbs wants to merge 1 commit into from
Closed

(WIP) LMS: Add Certificate to LinkedIn Profile UI #2160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions lms/static/sass/base/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,9 @@ $m-green-t1: rgba($m-green,0.25);
$m-green-t2: rgba($m-green,0.50);
$m-green-t3: rgba($m-green,0.75);

// partners, brands, external colors
$color-linkedin: rgb(25, 133, 189);

// ====================

// shadows
Expand Down
19 changes: 19 additions & 0 deletions lms/static/sass/elements/_controls.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,25 @@
}
}

%btn-inherited-linkedin {
@extend %btn-inherited;
@include linear-gradient(top, rgba($white, .3), rgba($white, 0));
border: 1px solid shade($color-linkedin, 10%);
background-color: $color-linkedin;
color: $white;

&:hover, &.active {
background-color: saturate($color-linkedin, 25%);
color: $white;
}

&.disabled, &.is-disabled {
border: 1px solid tint($action-primary-disabled-bg, 10%);
background: $action-primary-disabled-bg;
color: $action-prmary-disabled-fg;
}
}

// ====================

// primary button
Expand Down
34 changes: 25 additions & 9 deletions lms/static/sass/multicourse/_dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -702,10 +702,16 @@
}

.actions {
margin-top: ($baseline/2);

.action {
float: left;
margin: 0 15px 0 0;
margin: 0 ($baseline*0.75) ($baseline/2) 0;

&:last-child {
margin-right: 0;
margin-left: 0;
}

.btn, .cta {
display: inline-block;
Expand All @@ -720,17 +726,20 @@
padding: 6px 12px;
text-align: center;

// STATE: disabled
&.disabled {
cursor: default !important;
}

&:hover, &:focus {
background: #eee;
background-image: -webkit-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
background-image: -moz-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
background-image: -ms-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
background-image: -o-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
background-image: linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
}
.ico, .label {
display: inline-block;
vertical-align: middle;
color: $white;
}

.ico {
@extend %t-icon4;
margin-right: ($baseline/4);
}
}

Expand Down Expand Up @@ -812,6 +821,13 @@
@extend %btn-inherited-primary;
}
}

.action-linkedin {

.btn {
@extend %btn-inherited-linkedin;
}
}
}
}

Expand Down
10 changes: 9 additions & 1 deletion lms/templates/dashboard/_dashboard_certificate_information.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
cert_name_short = course.cert_name_short
if cert_name_short == "":
cert_name_short = settings.CERT_NAME_SHORT

cert_name_long = course.cert_name_long
if cert_name_long == "":
cert_name_long = settings.CERT_NAME_LONG
Expand Down Expand Up @@ -54,6 +54,14 @@
<a class="btn" href="${cert_status['download_url']}"
title="${_('This link will open/download a PDF document')}">
${_("Download Your {cert_name_short} (PDF)").format(cert_name_short=cert_name_short,)}</a></li>

# STATIC PoC: Add Certificate to LinkedIn Profile Button
<li class="action action-linkedin">
<a class="btn" href="">
<i class="ico icon-linkedin-sign"></i>
<div class="label">${_("Add to Your LinkedIn Profile")}</div>
</a>
</li>
% elif cert_status['show_download_url'] and enrollment.mode == 'verified' and cert_status['mode'] == 'honor':
<li class="action">
<p>${_('Since we did not have a valid set of verification photos from you when your {cert_name_long} was generated, we could not grant you a verified {cert_name_short}. An honor code {cert_name_short} has been granted instead.').format(cert_name_short=cert_name_short, cert_name_long=cert_name_long)}</p>
Expand Down