From 756f75951dca8311ff0d642af2ef3abddbf2c9b3 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Wed, 27 Mar 2013 16:28:49 -0400
Subject: [PATCH] studio - in progress work on help UI

---
 cms/static/client_templates/checklist.html |  2 +-
 cms/static/sass/_base.scss                 |  3 +-
 cms/static/sass/_variables.scss            |  2 +-
 cms/static/sass/base-style.scss            |  2 +
 cms/static/sass/elements/_sock.scss        | 95 +++++++++++++++++++++-
 cms/static/sass/views/_account.scss        |  2 +-
 cms/templates/howitworks.html              |  4 +-
 cms/templates/widgets/footer.html          |  5 +-
 cms/templates/widgets/sock.html            | 41 +++++++++-
 9 files changed, 143 insertions(+), 13 deletions(-)

diff --git a/cms/static/client_templates/checklist.html b/cms/static/client_templates/checklist.html
index ec6ff4e892..6884b0e9c9 100644
--- a/cms/static/client_templates/checklist.html
+++ b/cms/static/client_templates/checklist.html
@@ -44,7 +44,7 @@
 
                 <% if (item['action_text'] !== '' && item['action_url'] !== '') { %>
                 <ul class="list-actions task-actions">
-                    <li>
+                    <li class="action-item">
                         <a href="<%= item['action_url'] %>" class="action action-primary"
                         <% if (item['action_external']) { %>
                         rel="external" title="This link will open in a new browser window/tab"
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 5901b19306..5ce131288e 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -357,7 +357,8 @@ h1 {
 // layout - grandfathered
 .main-wrapper {
   position: relative;
-  margin: 40px;
+  margin: ($baseline*2);
+  padding-bottom: $footer-primary-height;
 }
 
 .inner-wrapper {
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index ccbd3ed7b0..ffa99e3fc6 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -155,7 +155,7 @@ $shadow-l1: rgba(0,0,0,0.1);
 $shadow-d1: rgba(0,0,0,0.4);
 
 // colors - inherited 
-$baseFontColor: #3c3c3c;
+$baseFontColor: $gray-d2;
 $offBlack: #3c3c3c;
 $green: #108614;
 $lightGrey: #edf1f5;
diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss
index bc6638bf14..e1afa45804 100644
--- a/cms/static/sass/base-style.scss
+++ b/cms/static/sass/base-style.scss
@@ -21,6 +21,8 @@
 @import 'base';
 
 // elements
+@import 'elements/typography';
+@import 'elements/icons';
 @import 'elements/header';
 @import 'elements/sock';
 @import 'elements/footer';
diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss
index e1b147b849..e8fbcc3ef2 100644
--- a/cms/static/sass/elements/_sock.scss
+++ b/cms/static/sass/elements/_sock.scss
@@ -9,10 +9,101 @@
 
   .sock {
     @include clearfix();
-    @include font-size(13);
+    @extend .t-copy-sub2;
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
-    margin: 0 auto ($baseline*2) auto;
+    margin: 0 auto $baseline auto;
+
+    header {
+
+      .title {
+        @extend .t-title-3;
+      }
+
+      .ss-icon {
+        @extend .t-icon-inline;
+      }
+    }
+
+    // shared elements
+    .support, .feedback {
+      @include box-sizing(border-box);
+
+      .title {
+
+      }
+
+      .copy {
+        margin: 0 0 $baseline 0;
+      }
+
+      .list-actions {
+        @include clearfix();
+
+        .action-item {
+          float: left;
+          margin-right: ($baseline/2);
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          .action {
+            display: block;
+
+            .ss-icon {
+              @include transition(color .25s ease-in-out);
+              @include font-size(15);
+              @extend .t-icon-inline;
+              @extend .icon-inline;
+              margin-right: ($baseline/4);
+              color: $blue-l2;
+            }
+
+            &:hover, &:active {
+
+              .ss-icon {
+                color: $white;
+              }
+            }
+          }
+
+          .tip {
+            @extend .sr;
+          }
+        }
+
+        .action-primary {
+          @include blue-button;
+          @include transition(all .15s);
+          @include font-size(13);
+          font-weight: 500;
+          padding: ($baseline/4) ($baseline/2);
+          text-align: center;
+        }
+      }
+    }
+
+    // studio support content
+    .support {
+      width: flex-grid(8,12);
+      float: left;
+      margin-right: flex-gutter();
+
+      .action-item {
+        width: flexgrid(4,8);
+      }
+    }
+
+    // studio feedback content
+    .feedback {
+      width: flex-grid(4,12);
+      float: left;
+
+      .action-item {
+        width: flexgrid(4,4);
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index 1206db5e76..2be94a81ea 100644
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -71,7 +71,7 @@ body.signup, body.signin {
           @include blue-button;
           @include transition(all .15s);
           @include font-size(15);
-          display:block;
+          display: block;
           width: 100%;
           padding: ($baseline*0.75) ($baseline/2);
           font-weight: 600;
diff --git a/cms/templates/howitworks.html b/cms/templates/howitworks.html
index 7a819fceba..6c0029c425 100644
--- a/cms/templates/howitworks.html
+++ b/cms/templates/howitworks.html
@@ -134,10 +134,10 @@
     </header>
     
     <ul class="list-actions">
-      <li>
+      <li class="action-item">
         <a href="${reverse('signup')}" class="action action-primary">Sign Up &amp; Start Making an edX Course</a>
       </li>
-      <li>
+      <li class="action-item">
         <a href="${reverse('login')}" class="action action-secondary">Already have a Studio Account? Sign In</a>
       </li>
     </ul>
diff --git a/cms/templates/widgets/footer.html b/cms/templates/widgets/footer.html
index 18ecf2bc39..c00bf0187a 100644
--- a/cms/templates/widgets/footer.html
+++ b/cms/templates/widgets/footer.html
@@ -20,12 +20,9 @@
         </li>
         % if user.is_authenticated():
         <li class="nav-item nav-peripheral-feedback">
-          <a class="show-tender" href="http://help.edge.edx.org/discussion/new" title="Use our feedback tool, Tender, to share your feedback"><i class="ss-icon ss-symbolicons-block icon-feedback">&#xE398;</i> Provide Feedback</a>
+          <a class="show-tender" href="http://help.edge.edx.org/discussion/new" title="Use our feedback tool, Tender, to share your feedback"><i class="ss-icon ss-symbolicons-block icon-feedback">&#xE398;</i> Contact Us</a>
         </li>
         % endif    
-        <li class="nav-item nav-peripheral-contact">
-          <a href="https://www.edx.org/contact" rel="external"><i class="ss-icon ss-symbolicons-block icon-contact">&#x2709;</i> Contact edX</a>
-        </li>
       </ol>
     </nav>
   </footer>
diff --git a/cms/templates/widgets/sock.html b/cms/templates/widgets/sock.html
index ff5f9c9ad4..d8d191a773 100644
--- a/cms/templates/widgets/sock.html
+++ b/cms/templates/widgets/sock.html
@@ -2,7 +2,46 @@
 % if user.is_authenticated():
 <div class="wrapper-sock wrapper">
   <section class="sock">
-    <h2>Sock!</h2>
+    <header>
+      <h2 class="title"><i class="ss-icon ss-symbolicons-block icon-help">&#xEE11;</i> Studio Support</h2>
+    </header>
+    
+    <div class="support">
+      <h3 class="sr title">Studio Support</h3>
+      
+      <div class="copy">
+         <p>Need help getting started with Studio? Want to know how to manage a particular part of your course using Studio? Take advantage of our documentation, help forums, as well as our edX101 introduction course for course authors.</p>
+      </div>
+      
+    <ul class="list-actions">
+      <li class="action-item">
+        <a href="" class="action action-primary"><i class="ss-icon ss-symbolicons-block icon-download">&#xEB02;</i> Download Studio Documentation</a>
+        <span class="tip">How to use Studio to build your course</span>
+      </li>
+      <li class="action-item">
+        <a href="" class="action action-primary"><i class="ss-icon ss-symbolicons-block icon-enroll">&#x1F393;</i> Studio Help Center</a>
+        <span class="tip"><i class="ss-icon ss-symbolicons-block icon-help">&#xEE11;</i> Studio Help Center</span>
+      </li>
+      <li class="action-item">
+        <a href="" class="action action-primary"><i class="ss-icon ss-symbolicons-block icon-enroll">&#x1F393;</i> Enroll in edX101</a>
+        <span class="tip">How to use Studio to build your course</span>
+      </li>
+    </ul>
+    </div>
+    
+    <div class="feedback">
+      <h3 class="sr title">Share Feedback on 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>
+      </div>
+      
+      <ul class="list-actions">
+        <li class="action-item">
+          <a href="" class="action action-primary"><i class="ss-icon ss-symbolicons-block icon-feedback">&#xE398;</i> Share Studio Feedback</a>
+        </li>
+      </ul>
+    </div>
   </section>
 </div>
 % endif
\ No newline at end of file