edx.org - added in isolated register button styling/states for <iframe>-based registration fix

lms/static/sass/_shame.scss

+// edX LMS - shame
+// shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
+// ====================
+
+// marketing site - registration iframe band-aid (poor form enough to isolate out)
+.view-partial-mktgregister {
+
+  // dimensions needed for course about page on marketing site
+  .wrapper-view {
+    width: 301px; // taken from bad marketing grid
+    overflow: hidden;
+  }
+
+  // button elements - not a better place to put these, sadly
+  .btn {
+    display: block;
+    padding: $baseline/2 $baseline*2.5;
+    text-transform: lowercase;
+    color: $white;
+    letter-spacing: 0.1rem;
+    cursor: pointer;
+    text-align: center;
+    border: none !important;
+    text-shadow: none;
+    letter-spacing: 0.1rem;
+    font-size: 17px;
+    font-weight: 300;
+    box-shadow: 0 !important;
+
+    strong {
+      font-weight: 400;
+    }
+  }
+
+  .btn-primary {
+    @extend .btn;
+    @include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%);
+
+    // no hover state conventions to follow from marketing :/
+    &:hover, &:active {
+
+    }
+  }
+
+  .btn-secondary {
+    @extend .btn;
+    @include linear-gradient($m-gray 5%, $m-gray-d1 95%);
+
+    // no hover state conventions to follow from marketing :/
+    &:hover, &:active {
+
+    }
+  }
+
+  // nav list
+  [class|="list"] {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    .item {
+      margin: 0;
+    }
+  }
+
+  // register actions
+  .action {
+
+    // not registered (default)
+    &.action-register {
+      @extend .btn-primary;
+    }
+
+    // not signed in
+    &.is-not-signedin {
+      @extend .btn-primary;
+    }
+
+    // already registered
+    &.is-registered {
+      @extend .btn-secondary;
+    }
+  }
+}

lms/static/sass/application.scss

@@ -34,3 +34,5 @@
 
 @import 'discussion';
 @import 'news';
+
+@import 'shame';

lms/templates/courseware/mktg_course_about.html

@@ -7,6 +7,11 @@
 
 <%inherit file="../mktg_iframe.html" />
 
+<%block name="title"><title>About ${course.number}</title></%block>
+
+<%block name="bodyclass">view-partial-mktgregister</%block>
+
+
 <%block name="headextra">
   <%include file="../google_analytics.html" />
 </%block>
@@ -53,46 +58,21 @@
   <script src="${static.url('js/course_info.js')}"></script>
 </%block>
 
-
-<%block name="title"><title>About ${course.number}</title></%block>
-
-<section class="course-info">
-  <header class="course-profile">
-    <div class="intro-inner-wrapper">
-        <div class="main-cta">
-        %if user.is_authenticated():
-            %if registered:
-	              %if show_courseware_link:
-                    <a href="${course_target}">
-                %endif
-                <span class="register disabled">You are registered for this course (${course.number})</span>
-                %if show_courseware_link:
-                    <strong>View Courseware</strong>
-                    </a>
-                %endif
-            %else:
-               <a href="#" class="register">Register for ${course.number}</a>
-	             <div id="register_message"></div>
-            %endif
+<%block name="content">
+  <ul class="list-actions register">
+    <li class="item">
+      %if user.is_authenticated():
+        %if registered:
+          <!-- signed in, registered -->
+          <a class="action action-register is-registered" href="${course_target}">Registered for <strong>${course.number}</strong></a>
         %else:
-            <a href="/login" class="register">Register for ${course.number}</a>
+        <!-- signed in, not registered -->
+           <a class="action action-register" href="[register path next view]">Register for <strong>${course.number}</strong></a>
         %endif
-        </div>
-
-  </header>
-</section>
-
-%if not registered:
-  <div style="display: none;">
-    <form id="class_enroll_form" method="post" data-remote="true" action="${reverse('change_enrollment')}">
-      <fieldset class="enroll_fieldset">
-        <input name="course_id" type="hidden" value="${course.id}">
-        <input name="enrollment_action" type="hidden" value="enroll">
-      </fieldset>
-      <div class="submit">
-        <input name="submit" type="submit" value="enroll">
-      </div>
-    </form>
-  </div>
-%endif
-
+      %else:
+      <!-- not signed in -->
+        <a class="action action-register is-not-signedin" href="[signin view]">Register for <strong>${course.number}</strong></a>
+      %endif
+    </li>
+  </ul>
+</%block>

lms/templates/mktg_iframe.html

@@ -2,36 +2,39 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <%block name="title"><title>edX</title></%block>
+  <%block name="title"></%block>
 
   <link rel="icon" type="image/x-icon" href="${static.url('images/favicon.ico')}" />
+  <meta name="path_prefix" content="${MITX_ROOT_URL}" />
+  <meta name="google-site-verification" content="_mipQ4AtZQDNmbtOkwehQDOgCxUUV2fb_C0b6wbiRHY" />
 
   <%static:css group='application'/>
-
   <%static:js group='main_vendor'/>
-  <%block name="headextra"/>
+
 
   <!--[if lt IE 9]>
-  <script src="${static.url('js/html5shiv.js')}"></script>
+    <script src="${static.url('js/html5shiv.js')}"></script>
   <![endif]-->
 
   <!--[if lte IE 9]>
-  <%static:css group='ie-fixes'/>
+    <%static:css group='ie-fixes'/>
   <![endif]-->
-  <meta name="path_prefix" content="${MITX_ROOT_URL}">
-  <meta name="google-site-verification" content="_mipQ4AtZQDNmbtOkwehQDOgCxUUV2fb_C0b6wbiRHY" />
+
+  <%block name="headextra"/>
 
   % if not course:
   <%include file="google_analytics.html" />
   % endif
-
 </head>
 
-<body>
+<body class="<%block name='bodyclass'></%block>">
+
+  <!-- view -->
+  <div class="wrapper wrapper-view">
+
+    <%block name="content"></%block>
+  </div>
 
-  ${self.body()}
-  <%static:js group='application'/>
-  <%static:js group='module-js'/>
-  <%block name="js_extra"/>
+  <%block name="jsextra"></%block>
 </body>
 </html>