Added style for survey and survey button

static/css/marketing-ie.css

-/* line 1, sass/marketing-ie.scss */
-body {
-  margin: 0;
-  padding: 0; }
-
-/* line 6, sass/marketing-ie.scss */
-.wrapper, .subpage, section.copyright, section.tos, section.privacy-policy, section.honor-code, header.announcement div, section.index-content, footer {
-  margin: 0;
-  overflow: hidden; }
-
-/* line 12, sass/marketing-ie.scss */
-div#enroll form {
-  display: none; }
+body{margin:0;padding:0}.wrapper,.subpage,section.copyright,section.tos,section.privacy-policy,section.honor-code,header.announcement div,section.index-content,footer{margin:0;overflow:hidden}div#enroll form{display:none}

templates/profile.html

@@ -223,14 +223,20 @@ $(function() {
       <header>
         <h1>Course Progress</h1>
       </header>
-      
+
       %if settings.END_COURSE_ENABLED:
       <div id="grade">
         %if grade_sheet['grade']:
           <p>Final Grade: <strong>${grade_sheet['grade']}</strong></p>
-          
+
           %if not certificate_requested:
             <a rel="leanModal" class="cert_request_link" href="#cert_request">Request Certificate</a>
+          %if not took_survey:
+          <div class="survey_offer">
+            <a class="survey_link" rel="leanModal" href="#survey">Take the survey</a>.
+          </div>
+          %endif
+
           %elif certificate_download_url:
             <a href="${certificate_download_url}" target="_blank">Download Certificate</a>
           %else:
@@ -240,13 +246,7 @@ $(function() {
           <p> No letter grade has been earned for this course </p>
         %endif
       </div>
-      
-      %if not took_survey:
-      <div class="survey_offer">
-      Take the <a class="survey_link" rel="leanModal" href="#survey">survey</a>.
-      </div>
-      %endif
-      
+
       %endif
 
       <div id="grade-detail-graph"></div>
@@ -476,6 +476,3 @@ $(function() {
   </form>
 </div>
 %endif
-
-
-

templates/sass/_profile.scss

@@ -178,12 +178,13 @@ div.profile-wrapper {
         background-color: darken($cream, 10%);
         border: 1px solid darken($cream, 30%);
         @include border-radius(3px);
+        @include box-shadow(inset 0 1px 0 lighten($cream, 5%));
         display: block;
         float: right;
         font-weight: bold;
         line-height: 1em;
+        margin-left: 10px;
         margin-top: 9px;
-        @include box-shadow(inset 0 1px 0 lighten($cream, 5%));
         padding: 8px;
         text-shadow: 0 1px 0 lighten($cream, 5%);
       }

templates/sass/application.scss

@@ -3,7 +3,7 @@
 // Base layout
 @import "base/reset", "base/font-face";
 @import "base/variables", "base/functions", "base/extends", "base/base";
-@import "layout/layout", "layout/header", "layout/footer", "layout/calculator", "layout/leanmodal";
+@import "layout/layout", "layout/header", "layout/footer", "layout/calculator", "layout/leanmodal", "layout/survey";
 @import "plugins/jquery-ui-1.8.16.custom", "plugins/jquery.qtip.min";
 
 // pages

templates/sass/layout/_survey.scss

+fieldset#survey_fieldset {
+  > ul {
+    > li {
+      border-top: 1px solid #eee;
+      padding: lh() 0;
+      margin-bottom: 0;
+
+      ul {
+        li {
+          margin-bottom: 6px;
+
+          label {
+            display: block;
+
+            input {
+              margin-top: -1px;
+              margin-right: 6px;
+            }
+          }
+        }
+      }
+
+      h2 {
+        margin-top: 0;
+      }
+
+      &.survey_short_field {
+        label {
+          font-weight: bold;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+          margin-bottom: 6px;
+        }
+      }
+    }
+  }
+}

templates/survey_fields.html

@@ -3,26 +3,37 @@
 
 <%def name="survey_radio(question_name, label, choices)">
   <li class="survey_radio">
-    <label>${label}</label><br/>
-    %for choice in choices:
-      <input type="radio" name="${question_name}" value="${choice}" align="BASELINE"/>${choice}<br>
-    %endfor
+    <h2>${label}</h2>
+    <ul>
+      %for choice in choices:
+      <li>
+        <label>
+          <input type="radio" name="${question_name}" value="${choice}" align="BASELINE"/>${choice}
+        </label>
+      </li>
+      %endfor
+    </ul>
   </li>
 </%def>
 
 <%def name="survey_select_many(question_name, label, choices)">
   <li class="survey_select_many">
-    <label>${label}</label><br/>
-    %for choice in choices:
-      <input type="checkbox" name="${question_name}" value="${choice}" align="BASELINE"/>${choice}<br>
-    %endfor
+    <h2>${label}</h2>
+    <ul>
+      %for choice in choices:
+      <li>
+        <label>
+          <input type="checkbox" name="${question_name}" value="${choice}" align="BASELINE"/>${choice}
+        </label>
+      </li>
+      %endfor
+    </ul>
   </li>
 </%def>
 
 <%def name="survey_checkbox(question_name, label)">
   <li class="survey_checkbox">
-    <input type="checkbox" name="${question_name}" value="true"/>
-    <label>${label}</label>
+    <label><input type="checkbox" name="${question_name}" value="true"/> ${label}</label>
   </li>
 </%def>