From 02653e7132d5b4fc5655c253607c007ccdeeed99 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 13 Jan 2014 15:05:54 -0500
Subject: [PATCH] LMS: adding rendering/styling support for add certificate to
 LinkedIn option

---
 lms/static/sass/base/_variables.scss          |  3 ++
 lms/static/sass/elements/_controls.scss       | 19 +++++++++++
 lms/static/sass/multicourse/_dashboard.scss   | 34 ++++++++++++++-----
 .../_dashboard_certificate_information.html   | 10 +++++-
 4 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss
index 369fe1027a5d..bed99a33a24d 100644
--- a/lms/static/sass/base/_variables.scss
+++ b/lms/static/sass/base/_variables.scss
@@ -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
diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss
index d7f1376d93e1..a1fe07e47e2c 100644
--- a/lms/static/sass/elements/_controls.scss
+++ b/lms/static/sass/elements/_controls.scss
@@ -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
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 5172981661d9..236fb2163c1a 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -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;
@@ -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);
             }
           }
 
@@ -812,6 +821,13 @@
             @extend %btn-inherited-primary;
           }
         }
+
+        .action-linkedin {
+
+          .btn {
+            @extend %btn-inherited-linkedin;
+          }
+        }
       }
     }
 
diff --git a/lms/templates/dashboard/_dashboard_certificate_information.html b/lms/templates/dashboard/_dashboard_certificate_information.html
index 3f07fc797bb1..c446124648e1 100644
--- a/lms/templates/dashboard/_dashboard_certificate_information.html
+++ b/lms/templates/dashboard/_dashboard_certificate_information.html
@@ -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
@@ -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>