Merge pull request #1962 from edx/fix/btalbot/lms-mktgiframe

edx.org - resolved iframe button styles in IE + added in coming soon state

lms/static/sass/_shame.scss

@@ -16,11 +16,12 @@
     display: block;
     padding: $baseline/2 $baseline*2.5;
     text-transform: lowercase;
-    color: $white !important;
+    color: $white;
     letter-spacing: 0.1rem;
     cursor: pointer;
     text-align: center;
     border: none !important;
+    text-decoration: none;
     text-shadow: none;
     letter-spacing: 0.1rem;
     font-size: 17px;
@@ -52,6 +53,17 @@
     }
   }
 
+  .btn-tertiary {
+    @extend .btn;
+    background: $m-blue-l1;
+    color: $m-blue;
+
+    // no hover state conventions to follow from marketing :/
+    &:hover, &:active {
+
+    }
+  }
+
   // nav list
   .list-actions {
     list-style: none;
@@ -63,23 +75,23 @@
     }
   }
 
-  // register actions
   .action {
 
-  }
-
     // not registered (default)
-  .action-register {
-    @extend .btn-primary;
-  }
-
-  // not signed in
-  .is-not-signedin {
+    &.action-register {
       @extend .btn-primary;
     }
 
     // already registered
-  .is-registered {
+    &.is-registered {
       @extend .btn-secondary;
     }
+
+    // coming soon
+    &.isnot-open {
+      @extend .btn-tertiary;
+      pointer-events: none !important;
+      outline: none;
+    }
+  }
 }

lms/templates/courseware/mktg_coming_soon.html

@@ -23,7 +23,7 @@
 
   <ul class="list-actions register">
     <li class="item">
-      <a class="action action-register is-registered" href="#">Coming Soon</a>
+      <a class="action action-register isnot-open" href="">Coming Soon</a>
     </li>
   </ul>
 

lms/templates/courseware/mktg_course_about.html

@@ -73,7 +73,7 @@
           %endif
         %else:
         <!-- not signed in -->
-            <a class="action action-register is-not-signedin" href="${reverse('register_user')}">Register for <strong>${course.number}</strong></a>
+            <a class="action action-register" href="${reverse('register_user')}">Register for <strong>${course.number}</strong></a>
         %endif
     </li>
   </ul>

lms/templates/mktg_iframe.html

@@ -24,6 +24,17 @@
   % if not course:
   <%include file="google_analytics.html" />
   % endif
+
+  <!-- repeated button styles needed for IE (copied from _shame.scss) -->
+  <style type="text/css" media="screen">
+
+    .view-partial-mktgregister{background:transparent}.view-partial-mktgregister .wrapper-view{overflow:hidden}.view-partial-mktgregister .btn,.view-partial-mktgregister .btn-primary,.view-partial-mktgregister .action.action-register,.view-partial-mktgregister .btn-secondary,.view-partial-mktgregister .action.is-registered,.view-partial-mktgregister .btn-tertiary,.view-partial-mktgregister .action.isnot-open{display:block;padding:10px 50px;text-transform:lowercase;color:#fff;letter-spacing:0.1rem;cursor:pointer;text-align:center;border:none !important;text-decoration:none;text-shadow:none;letter-spacing:0.1rem;font-size:17px;font-weight:300;box-shadow:0 !important}.view-partial-mktgregister .btn strong,.view-partial-mktgregister .btn-primary strong,.view-partial-mktgregister .action.action-register strong,.view-partial-mktgregister .btn-secondary strong,.view-partial-mktgregister .action.is-registered strong,.view-partial-mktgregister .btn-tertiary strong,.view-partial-mktgregister .action.isnot-open strong{font-weight:400}.view-partial-mktgregister .btn-primary,.view-partial-mktgregister .action.action-register{background-color:#4697ec;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(5%, #4697ec),color-stop(95%, #4880bb));background-image:-webkit-linear-gradient(top, #4697ec 5%,#4880bb 95%);background-image:-moz-linear-gradient(top, #4697ec 5%,#4880bb 95%);background-image:-ms-linear-gradient(top, #4697ec 5%,#4880bb 95%);background-image:-o-linear-gradient(top, #4697ec 5%,#4880bb 95%);background-image:linear-gradient(top, #4697ec 5%,#4880bb 95%)}.view-partial-mktgregister .btn-secondary,.view-partial-mktgregister .action.is-registered{background-color:#999;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(5%, #999),color-stop(95%, #666));background-image:-webkit-linear-gradient(top, #999 5%,#666 95%);background-image:-moz-linear-gradient(top, #999 5%,#666 95%);background-image:-ms-linear-gradient(top, #999 5%,#666 95%);background-image:-o-linear-gradient(top, #999 5%,#666 95%);background-image:linear-gradient(top, #999 5%,#666 95%)}.view-partial-mktgregister .btn-tertiary,.view-partial-mktgregister .action.isnot-open{background:#e6f5fc;color:#5597dd}.view-partial-mktgregister .list-actions{list-style:none;margin:0;padding:0}.view-partial-mktgregister .list-actions .item{margin:0}.view-partial-mktgregister .action.isnot-open{pointer-events:none !important;outline:none}
+
+
+
+
+
+  </style>
 </head>
 
 <body class="<%block name='bodyclass'></%block>">