studio - revising design, interaction, and FED of help sock

cms/static/js/base.js

@@ -460,15 +460,29 @@ function onKeyUp(e) {
 
 function toggleSock(e) {
    e.preventDefault();
-   $body.toggleClass('sock-is-shown');
+
+   var $btnLabel = $(this).find('.copy');
+   var $sock = $('.wrapper-sock');
+   var $sockContent = $sock.find('.wrapper-inner');
+
+   $sock.toggleClass('is-shown');
+   $sockContent.toggle('fast');
 
    $.smoothScroll({ 
        offset: -200, 
        easing: 'swing', 
        speed: 1000,
        scrollElement: null,
-       scrollTarget: $('.wrapper-sock')
+       scrollTarget: $sock
    });
+
+   if($sock.hasClass('is-shown')) {
+    $btnLabel.text('Hide Studio Help');
+   }
+
+   else {
+    $btnLabel.text('Looking for Help with Studio?');
+   }
 }
 
 function toggleSubmodules(e) {

cms/static/sass/elements/_footer.scss

@@ -4,7 +4,7 @@
 .wrapper-footer {
   position: relative;
   width: 100%;
-  margin: ($baseline*1.5) 0 $baseline 0;
+  margin: 0 0 $baseline 0;
   padding: $baseline;
 
   footer.primary {
@@ -14,8 +14,6 @@
     min-width: $fg-min-width;
     width: flex-grid(12);
     margin: 0 auto;
-    border-top: 1px solid $gray-l4;
-    padding: $baseline 0 0 0;
     color: $gray-l1;
 
     .colophon {

cms/static/sass/elements/_sock.scss

@@ -2,29 +2,44 @@
 // ====================
 
 .wrapper-sock {
-  @include transition(background 0.25s ease-in-out);
   @include clearfix();
   position: relative;
-  width: 100%;
-  margin: ($baseline*2.5) 0;
-  padding: 0 $baseline;
+  margin: ($baseline*2) 0 0 0;
   border-top: 1px solid $gray-l4;
+  width: 100%;
 
-  // actions
+  .wrapper-inner {
+    @include linear-gradient($gray-d3 0%, $gray-d3 94%, $black 100%);
+    @extend .depth0;
+    display: none;
+    width: 100% !important;
+    border-bottom: 1px solid $white;
+    padding: 0 $baseline !important;
+  }
+
+  // sock - actions
   .list-cta {
-    position: relative;
-    top: -($baseline);
+    @extend .depth1;
+    position: absolute;
+    top: -($baseline*0.75);
+    width: 100%;
     margin: 0 auto;
     text-align: center;
 
     .cta-show-sock {
-      @extend .btn-secondary-gray;
+      @extend .btn-pill;
       @extend .t-action3;
       background: $gray-l5;
       padding: ($baseline/2) $baseline;
+      color: $gray;
 
       .icon {
-        @include font-size(17);
+        @include font-size(16);
+      }
+
+      &:hover {
+        background: $blue-s1;
+        color: $white;
       }
     }
   }
@@ -33,21 +48,18 @@
   .sock {
     @include clearfix();
     @extend .t-copy-sub2;
-    display: none;
-    opacity: 0.0;
-    pointer-events: none;
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
     margin: 0 auto;
+    padding: ($baseline*2) 0;
     color: $gray-l3;
 
     // support body
     header {
 
       .title {
-        @extend .t-title-3;
-        margin-bottom: ($baseline/2);
+        @extend .t-title-2;
       }
 
       .ss-icon {
@@ -63,6 +75,7 @@
       .title {
         @extend .t-title-3;
         color: $white;
+        margin-bottom: ($baseline/2);
       }
 
       .copy {
@@ -125,28 +138,15 @@
       }
     }
   }
-}
-
-// case: sock content is shown
-.sock-is-shown {
-
-  .wrapper-sock {
-    @include linear-gradient($gray-d4 0%, $gray-d3 2%, $gray-d3 98%, $gray-d4 100%);
-    border-bottom: 1px solid $white;
-    border-top: 1px solid $white;
-    padding-bottom: ($baseline*2);
-    padding-top: ($baseline*2);
 
-    .cta-show-sock {
-      display: none;
-      opacity: 0.0;
-      pointer-events: none;
-    }
+  // case: sock content is shown
+  &.is-shown {
+    border-color: $gray-d3;
 
-    .sock {
-      display: block;
-      opacity: 1.0;
-      pointer-events: auto;
+    .list-cta .cta-show-sock {
+      background: $gray-d3;
+      border-color: $gray-d3;
+      color: $white;
     }
   }
 }
\ No newline at end of file

cms/templates/widgets/footer.html

@@ -15,7 +15,7 @@
         </li> -->
         % if user.is_authenticated():
         <li class="nav-item nav-peripheral-feedback">
-          <a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback"><i class="ss-icon ss-symbolicons-block icon icon-feedback">&#xE398;</i> Contact Us</a>
+          <a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback">Contact Us</a>
         </li>
         % endif    
       </ol>

cms/templates/widgets/sock.html

@@ -2,10 +2,11 @@
 <div class="wrapper-sock wrapper">
   <ul class="list-actions list-cta">
     <li class="action-item">
-      <a href="#sock" class="cta cta-show-sock"><i class="ss-icon ss-symbolicons-block icon icon-inline icon-help">&#x2753;</i> Need Help with Studio?</a>
+      <a href="#sock" class="cta cta-show-sock"><i class="ss-icon ss-symbolicons-block icon icon-inline icon-help">&#x2753;</i> <span class="copy">Looking for Help with Studio?</span></a>
     </li>
   </ul>
   
+  <div class="wrapper-inner wrapper">
     <section class="sock" id="sock">
       <header>
         <h2 class="title sr"><i class="ss-icon ss-symbolicons-block icon icon-inline icon-help">&#x2753;</i> edX Studio Help</h2>
@@ -35,7 +36,7 @@
       </div>
       
       <div class="feedback">
-      <h3 class="title">Share Feedback on Studio</h3>
+        <h3 class="title">Contact edX about Studio</h3>
         
         <div class="copy">
            <p>Have questions or thoughts about using Studio? We're here to help and listen to feedback you want to share.</p>
@@ -44,9 +45,10 @@
         <ul class="list-actions">
           <li class="action-item">
             
-          <a href="http://help.edge.edx.org/discussion/new" class="action action-primary show-tender" title="Use our feedback tool, Tender, to share your feedback"><i class="ss-icon ss-symbolicons-block icon icon-inline icon-feedback">&#xE398;</i> Share Studio Feedback</a>
+            <a href="http://help.edge.edx.org/discussion/new" class="action action-primary show-tender" title="Use our feedback tool, Tender, to share your feedback"><i class="ss-icon ss-symbolicons-block icon icon-inline icon-feedback">&#xE398;</i> Contact Us</a>
           </li>
         </ul>
       </div>
     </section>
+  </div>  
 </div>
\ No newline at end of file