Merge branch 'feature/cdodge/auto-forum-provision' into fix/cdodge/studio-forum-improvements

cms/djangoapps/contentstore/views.py

@@ -13,6 +13,7 @@ from xmodule.modulestore.xml_exporter import export_to_xml
 from tempfile import mkdtemp
 from django.core.servers.basehttp import FileWrapper
 from django.core.files.temp import NamedTemporaryFile
+from util.forum_util import seed_permissions_roles
 
 # to install PIL on MacOSX: 'easy_install http://dist.repoze.org/PIL-1.1.6.tar.gz'
 from PIL import Image
@@ -1508,6 +1509,9 @@ def create_new_course(request):
 
     create_all_course_groups(request.user, new_course.location)
 
+    # provision the forum
+    seed_permissions_roles(new_course.location.course_id)
+
     return HttpResponse(json.dumps({'id': new_course.location.url()}))
 
 

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"

cms/static/js/base.js

@@ -37,11 +37,11 @@ $(document).ready(function () {
         $(this).select();
     });
 
+    $('body').addClass('js');
+
     $('.unit .item-actions .delete-button').bind('click', deleteUnit);
     $('.new-unit-item').bind('click', createNewUnit);
 
-    $('body').addClass('js');
-
     // lean/simple modal
     $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' });
     $('a.action-modal-close').click(function(e){
@@ -89,6 +89,9 @@ $(document).ready(function () {
     // tender feedback window scrolling
     $('a.show-tender').bind('click', smoothScrollTop);
 
+    // toggling footer additional support
+    $('.cta-show-sock').bind('click', toggleSock);
+
     // toggling overview section details
     $(function () {
         if ($('.courseware-section').length > 0) {
@@ -470,6 +473,33 @@ function onKeyUp(e) {
     }
 }
 
+function toggleSock(e) {
+    e.preventDefault();
+
+    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: $sock
+    });
+
+    if($sock.hasClass('is-shown')) {
+        $btnLabel.text('Hide Studio Help');
+    }
+
+    else {
+        $btnLabel.text('Looking for Help with Studio?');
+    }
+}
+
 function toggleSubmodules(e) {
     e.preventDefault();
     $(this).toggleClass('expand').toggleClass('collapse');

cms/static/sass/_base.scss

@@ -22,7 +22,7 @@ body, input {
 a {
   text-decoration: none;
   color: $blue;
-  @include transition(color .15s);
+  @include transition(color 0.25s ease-in-out);
 
   &:hover {
     color: #cb9c40;
@@ -52,7 +52,6 @@ h1 {
 
 // layout - basic page header
 .wrapper-mast {
-  margin: 0;
   padding: 0 $baseline;
   position: relative;
   
@@ -63,7 +62,7 @@ h1 {
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
-    margin: 0 auto $baseline auto;
+    margin: ($baseline*1.5) auto $baseline auto;
     color: $gray-d2;
   }
 
@@ -272,19 +271,17 @@ h1 {
   }
 
   .title-1 {
-
+    @extend .t-title-1;
   }
 
   .title-2 {
-    @include font-size(24);
+    @extend .t-title-2;
     margin: 0 0 ($baseline/2) 0;
-    font-weight: 600;
   }
 
   .title-3 {
-    @include font-size(16);
+    @extend .t-title-3;
     margin: 0 0 ($baseline/2) 0;
-    font-weight: 600;
   }
 
   .title-4 {
@@ -351,7 +348,7 @@ h1 {
 // layout - grandfathered
 .main-wrapper {
   position: relative;
-  margin: 40px;
+  margin: 0 ($baseline*2);
 }
 
 .inner-wrapper {

cms/static/sass/_cms_mixins.scss

 // studio - utilities - mixins and extends
 // ====================
 
+// mixins - utility
 @mixin clearfix {
 	&:after {
 		content: '';
@@ -11,6 +12,7 @@
 	}
 }
 
+// mixins - grandfathered
 @mixin button {
 	display: inline-block;
 	padding: 4px 20px 6px;
@@ -110,6 +112,21 @@
 	}
 }
 
+@mixin gray-button {
+	@include button;
+	border: 1px solid $gray-d1;
+	border-radius: 3px;
+	@include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
+	background-color: $gray-d2;
+	@include box-shadow(0 1px 0 $white-t1 inset);
+	color: $gray-l3;
+
+	&:hover {
+		background-color: $gray-d3;
+		color: $white;
+	}
+}
+
 @mixin green-button {
 	@include button;
 	border: 1px solid $darkGreen;
@@ -279,20 +296,97 @@
 	}
 }
 
-@mixin sr-text {
-  border: 0; 
-  clip: rect(0 0 0 0); 
-  height: 1px; 
-  margin: -1px; 
-  overflow: hidden; 
-  padding: 0; 
-  position: absolute; 
-  width: 1px;
-}
-
 @mixin active {
 	@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
 	background-color: rgba(255, 255, 255, .3);
 	@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-}
+}
\ No newline at end of file
+
+// ====================
+
+// extends - buttons
+.btn {
+  @include box-sizing(border-box);
+  @include transition(color 0.25s ease-in-out, border-color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
+  display: inline-block;
+  cursor: pointer;
+
+  &:hover, &:active {
+
+  }
+
+  &.disabled, &[disabled] {
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .icon-inline {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: ($baseline/4);
+  }
+}
+
+// pill button
+.btn-pill {
+	@include border-radius($baseline/5);
+}
+
+.btn-rounded {
+	@include border-radius($baseline/2);
+}
+
+// primary button
+.btn-primary {
+  @extend .btn;
+  @extend .btn-pill;
+  padding:($baseline/2) $baseline;
+  border-width: 1px;
+  border-style: solid;
+  line-height: 1.5em;
+  text-align: center;
+
+  &:hover, &:active {
+    @include box-shadow(0 2px 1px $shadow-l1);
+  }
+
+  &.current, &.active {
+  	@include box-shadow(inset 1px 1px 2px $shadow-d1);
+
+  	&:hover, &:active {
+  		@include box-shadow(inset 1px 1px 1px $shadow-d1);
+  	}
+  }
+}
+
+// secondary button
+.btn-secondary {
+	@extend .btn;
+	@extend .btn-pill;
+	border-width: 1px;
+  border-style: solid;
+	padding:($baseline/2) $baseline;
+  background: transparent;
+  line-height: 1.5em;
+  text-align: center;
+
+	&:hover, &:active {
+
+	}
+
+	&.current, &.active {
+
+	}
+}
+
+// ====================
+
+// extends - depth levels
+.depth0 { z-index: 0; }
+.depth1 { z-index: 10; }
+.depth2 { z-index: 100; }
+.depth3 { z-index: 1000; }
+.depth4 { z-index: 10000; }
+.depth5 { z-index: 100000; }
\ No newline at end of file

cms/static/sass/_reset.scss

 // studio - utilities - reset
 // ====================
 
+// not ready for this yet, but this should be done as things get cleaner
 // * {
 // 	@include box-sizing(border-box);
 // }
@@ -26,6 +27,10 @@ time, mark, audio, video {
 	vertical-align: baseline;
 }
 
+html,body {
+  height: 100%;
+}
+
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
 	display: block;

cms/static/sass/_variables.scss

@@ -57,6 +57,10 @@ $blue-s3: saturate($blue,45%);
 $blue-u1: desaturate($blue,15%);
 $blue-u2: desaturate($blue,30%);
 $blue-u3: desaturate($blue,45%);
+$blue-t0: rgba(85, 151, 221,0.125);
+$blue-t1: rgba(85, 151, 221,0.25);
+$blue-t2: rgba(85, 151, 221,0.50);
+$blue-t3: rgba(85, 151, 221,0.75);
 
 $pink: rgb(183, 37, 103);
 $pink-l1: tint($pink,20%);
@@ -148,7 +152,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;
@@ -163,4 +167,4 @@ $disabledGreen: rgb(124, 206, 153);
 $darkGreen: rgb(52, 133, 76);
 $lightBluishGrey: rgb(197, 207, 223);
 $lightBluishGrey2: rgb(213, 220, 228);
-$error-red: rgb(253, 87, 87);
+$error-red: rgb(253, 87, 87);
\ No newline at end of file

cms/static/sass/base-style.scss

@@ -21,9 +21,13 @@
 @import 'base';
 
 // elements
+@import 'elements/typography';
+@import 'elements/icons';
+@import 'elements/controls';
+@import 'elements/navigation';
 @import 'elements/header';
 @import 'elements/footer';
-@import 'elements/navigation';
+@import 'elements/sock';
 @import 'elements/forms';
 @import 'elements/modal';
 @import 'elements/alerts';

cms/static/sass/elements/_controls.scss

+// studio - elements - UI controls
+// ====================
+
+// gray primary button
+.btn-primary-gray {
+  @extend .btn-primary;
+  background: $gray-l1;
+  border-color: $gray-l2;
+  color: $white;
+
+  &:hover, &:active {
+    border-color: $gray-l1;
+    background: $gray;
+  }
+
+  &.current, &.active {
+    background: $gray-d1;
+    color: $gray-l1;
+
+    &:hover, &:active {
+      background: $gray-d1;
+    }
+  }
+}
+
+// blue primary button
+.btn-primary-blue {
+  @extend .btn-primary;
+  background: $blue;
+  border-color: $blue-s1;
+  color: $white;
+
+  &:hover, &:active {
+    background: $blue-s2;
+    border-color: $blue-s2;
+  }
+
+  &.current, &.active {
+    background: $blue-d1;
+    color: $blue-l4;
+    border-color: $blue-d2;
+
+    &:hover, &:active {
+      background: $blue-d1;
+    }
+  }
+}
+
+// green primary button
+.btn-primary-green {
+  @extend .btn-primary;
+  background: $green;
+  border-color: $green;
+  color: $white;
+
+  &:hover, &:active {
+    background: $green-s1;
+    border-color: $green-s1;
+  }
+
+  &.current, &.active {
+    background: $green-d1;
+    color: $green-l4;
+    border-color: $green-d2;
+
+    &:hover, &:active {
+      background: $green-d1;
+    }
+  }
+}
+
+// gray secondary button
+.btn-secondary-gray {
+  @extend .btn-secondary;
+  border-color: $gray-l3;
+  color: $gray-l1;
+
+  &:hover, &:active {
+    background: $gray-l3;
+    color: $gray-d2;
+  }
+
+  &.current, &.active {
+    background: $gray-d2;
+    color: $gray-l5;
+
+    &:hover, &:active {
+      background: $gray-d2;
+    }
+  }
+}
+
+// blue secondary button
+.btn-secondary-blue {
+  @extend .btn-secondary;
+  border-color: $blue-l3;
+  color: $blue;
+
+  &:hover, &:active {
+    background: $blue-l3;
+    color: $blue-s2;
+  }
+
+  &.current, &.active {
+    border-color: $blue-l3;
+    background: $blue-l3;
+    color: $blue-d1;
+
+    &:hover, &:active {
+
+    }
+  }
+}
+
+// green secondary button
+.btn-secondary-green {
+  @extend .btn-secondary;
+  border-color: $green-l4;
+  color: $green-l2;
+
+  &:hover, &:active {
+    background: $green-l4;
+    color: $green-s1;
+  }
+
+  &.current, &.active {
+    background: $green-s1;
+    color: $green-l4;
+
+    &:hover, &:active {
+      background: $green-s1;
+    }
+  }
+}
+
+// ====================
+
+// layout-based buttons
+
+// ====================
+
+// calls-to-action
+

cms/static/sass/elements/_footer.scss

@@ -2,10 +2,10 @@
 // ====================
 
 .wrapper-footer {
-  margin: ($baseline*1.5) 0 $baseline 0;
-  padding: $baseline;
   position: relative;
   width: 100%;
+  margin: 0 0 $baseline 0;
+  padding: $baseline;
 
   footer.primary {
     @include clearfix();
@@ -14,9 +14,7 @@
     min-width: $fg-min-width;
     width: flex-grid(12);
     margin: 0 auto;
-    padding-top: $baseline;
-    border-top: 1px solid $gray-l4;
-    color: $gray-l2;
+    color: $gray-l1;
 
     .colophon {
       width: flex-grid(4, 12);
@@ -24,6 +22,14 @@
       margin-right: flex-gutter(2);
     }
 
+    a {
+      color: $gray;
+
+      &:hover, &:active {
+        color: $gray-d2;
+      }
+    }
+
     .nav-peripheral {
       width: flex-grid(6, 12);
       float: right;
@@ -36,14 +42,33 @@
         &:last-child {
           margin-right: 0;
         }
-      }
-    }
 
-    a {
-      color: $gray-l1;
+        a {
+          @include border-radius(2px);
+          padding: ($baseline/2) ($baseline*0.75);
+          background: transparent;
 
-      &:hover, &:active {
-        color: $blue;
+          .ss-icon {
+            @include transition(top .25s ease-in-out .25s);
+            @include font-size(15);
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: ($baseline/4);
+            color: $gray-l1;
+          }
+
+          &:hover, &:active {
+            color: $gray-d2;
+
+            .ss-icon {
+              color: $gray-d2;
+            }
+          }
+
+          &.is-active {
+            color: $gray-d2;
+          }
+        }
       }
     }
   }

cms/static/sass/elements/_header.scss

@@ -2,7 +2,7 @@
 // ====================
 
 .wrapper-header {
-  margin: 0 0 ($baseline*1.5) 0;
+  margin: 0;
   padding: $baseline;
   border-bottom: 1px solid $gray;
   @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));

cms/static/sass/elements/_icons.scss

+// studio - elements - icons
+// ====================
+
+.icon {
+
+}
+
+.ss-icon {
+  
+}
+
+.icon-inline {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: ($baseline/4);
+}
\ No newline at end of file

cms/static/sass/elements/_sock.scss

+// studio - elements - support sock
+// ====================
+
+.wrapper-sock {
+  @include clearfix();
+  position: relative;
+  margin: ($baseline*2) 0 0 0;
+  border-top: 1px solid $gray-l4;
+  width: 100%;
+
+  .wrapper-inner {
+    @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
+    @extend .depth0;
+    display: none;
+    width: 100% !important;
+    border-bottom: 1px solid $white;
+    padding: 0 $baseline !important;
+  }
+
+  // sock - actions
+  .list-cta {
+    @extend .depth1;
+    position: absolute;
+    top: -($baseline*0.75);
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+
+    .cta-show-sock {
+      @extend .btn-pill;
+      @extend .t-action3;
+      background: $gray-l5;
+      padding: ($baseline/2) $baseline;
+      color: $gray;
+
+      .icon {
+        @include font-size(16);
+      }
+
+      &:hover {
+        background: $blue;
+        color: $white;
+      }
+    }
+  }
+
+  // sock - additional help
+  .sock {
+    @include clearfix();
+    @extend .t-copy-sub2;
+    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-2;
+      }
+
+      .ss-icon {
+        @extend .t-icon;
+        @extend .icon-inline;
+      }
+    }
+
+    // shared elements
+    .support, .feedback {
+      @include box-sizing(border-box);
+
+      .title {
+        @extend .t-title-3;
+        color: $white;
+        margin-bottom: ($baseline/2);
+      }
+
+      .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;
+
+            .icon {
+              @include font-size(18);
+            }
+
+            &:hover, &:active {
+
+            }
+          }
+
+          .tip {
+            @extend .sr;
+          }
+        }
+
+        .action-primary {
+          @extend .btn-primary-blue;
+          @extend .t-action3;
+        }
+      }
+    }
+
+    // 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);
+      }
+    }
+  }
+
+  // case: sock content is shown
+  &.is-shown {
+    border-color: $gray-d3;
+
+    .list-cta .cta-show-sock {
+      background: $gray-d3;
+      border-color: $gray-d3;
+      color: $white;
+    }
+  }
+}
\ No newline at end of file

cms/static/sass/elements/_typography.scss

+// studio - elements - typography
+// ====================
+
+// headings/titles
+.t-title-1, .t-title-2, .t-title-3, .t-title-4, .t-title-5, .t-title-5 {
+  color: $gray-d3;
+}
+
+.t-title-1 {
+  @include font-size(36);
+}
+
+.t-title-2 {
+  @include font-size(24);
+  font-weight: 600;
+}
+
+.t-title-3 {
+  @include font-size(16);
+  font-weight: 600;
+}
+
+.t-title-4 {
+
+}
+
+.t-title-5 {
+
+}
+
+// ====================
+
+// copy
+.t-copy-base {
+  @include font-size(16);
+}
+
+.t-copy-lead1 {
+  @include font-size(18);
+}
+
+.t-copy-lead2 {
+  @include font-size(20);
+}
+
+.t-copy-sub1 {
+  @include font-size(14);
+}
+
+.t-copy-sub2 {
+  @include font-size(13);
+}
+
+.t-copy-sub3 {
+  @include font-size(12);
+}
+
+// ====================
+
+// actions/labels
+.t-action1 {
+  @include font-size(14);
+  font-weight: 600;
+}
+
+.t-action2 {
+  @include font-size(13);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.t-action3 {
+  @include font-size(13);
+}
+
+.t-action4 {
+  @include font-size(12);
+}
+
+// ====================
+
+// misc
+.t-icon {
+  line-height: 0;
+}
\ No newline at end of file

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;

cms/static/sass/views/_index.scss

@@ -9,17 +9,6 @@ body.index {
       margin-bottom: 0;
     }
 
-    .wrapper-footer {
-      margin: 0;
-      border-top: 2px solid $gray-l3;
-
-      footer.primary {
-        border: none;
-        margin-top: 0;
-        padding-top: 0;
-      }
-    }
-
     .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta {
       @include box-sizing(border-box);
       margin: 0;
@@ -199,7 +188,7 @@ body.index {
           img {
             display: block;
             width: 100%;
-            height: 100%;
+            height: auto;
           }
         }
 
@@ -306,8 +295,8 @@ body.index {
 
     // call to action content
     .wrapper-content-cta {
-      padding-bottom: ($baseline*2);
-      padding-top: ($baseline*2);
+      position: relative;
+      padding: ($baseline*2) 0;
       background: $white;
     }
 

cms/templates/base.html

@@ -29,9 +29,7 @@
   </head>
 
   <body class="<%block name='bodyclass'></%block> hide-wip">
-    <%include file="widgets/header.html" />
     <%include file="courseware_vendor_js.html"/>
-
     <script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script>
@@ -55,7 +53,14 @@
           document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
     </script>
 
+    <%include file="widgets/header.html" />
+    
     <%block name="content"></%block>
+    
+    % if user.is_authenticated():
+    <%include file="widgets/sock.html" />
+    % endif
+    
     <%include file="widgets/footer.html" />
     <%include file="widgets/tender.html" />
     <%block name="jsextra"></%block>
@@ -63,5 +68,3 @@
 
   <%include file="widgets/qualaroo.html" />
 </html>
-
-

cms/templates/course_info.html

@@ -80,5 +80,4 @@
       </div>
     </div>
   </div>
-  </div>
 </%block>
\ No newline at end of file

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>

cms/templates/overview.html

@@ -104,20 +104,6 @@
 </%block>
 
 <%block name="content">
-  <div class="edit-subsection-publish-settings">
-    <div class="settings">
-      <h3>Section Release Date</h3>
-      <div class="picker datepair">
-        <input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
-        <input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
-        <div class="description">
-          <p>On the date set above, this section – <strong class="section-name"></strong> – will be released to students. Any units marked private will only be visible to admins.</p>
-        </div>
-      </div>
-      <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
-    </div>
-  </div>
-
   <div class="wrapper-mast wrapper">
     <header class="mast has-actions has-subtitle">
       <div class="title">
@@ -216,4 +202,18 @@
     </div>
   </div>
   <footer></footer>
+  
+  <div class="edit-subsection-publish-settings">
+    <div class="settings">
+      <h3>Section Release Date</h3>
+      <div class="picker datepair">
+        <input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
+        <input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
+        <div class="description">
+          <p>On the date set above, this section – <strong class="section-name"></strong> – will be released to students. Any units marked private will only be visible to admins.</p>
+        </div>
+      </div>
+      <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
+    </div>
+  </div>
 </%block>

cms/templates/settings_advanced.html

@@ -19,6 +19,12 @@ from contentstore import utils
 <script type="text/javascript">
 $(document).ready(function () {
 
+    $("form :input").focus(function() {
+      $("label[for='" + this.id + "']").addClass("is-focused");
+    }).blur(function() {
+      $("label").removeClass("is-focused");
+    });
+
     // proactively populate advanced b/c it has the filtered list and doesn't really follow the model pattern
     var advancedModel = new CMS.Models.Settings.Advanced(${advanced_dict | n}, {parse: true});
     advancedModel.url = "${reverse('course_advanced_settings_updates', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}";

cms/templates/widgets/footer.html

 <%! from django.core.urlresolvers import reverse %>
-
-<div class="wrapper-footer wrapper">
+<div class="wrapper-footer wrapper">  
   <footer class="primary" role="contentinfo">
     <div class="colophon">
       <p>&copy; 2013 <a href="http://www.edx.org" rel="external">edX</a>. All rights reserved.</p>
@@ -14,15 +13,11 @@
         <li class="nav-item nav-peripheral-pp">
           <a href="#">Privacy Policy</a>
         </li> -->
-        
-        <li class="nav-item nav-peripheral-help">
-          <a href="http://help.edge.edx.org/" rel="external">edX Studio Help</a>
-        </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">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
+        % endif    
       </ol>
     </nav>
   </footer>

cms/templates/widgets/sock.html

+<%! from django.core.urlresolvers import reverse %>
+<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> <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>
+      </header>
+      
+      <div class="support">
+        <h3 class="title">Studio Support</h3>
+        
+        <div class="copy">
+           <p>Need help with Studio? Creating a course is complex, so we're here to help? Take advantage of our documentation, help center, as well as our edX101 introduction course for course authors.</p>
+        </div>
+        
+      <ul class="list-actions">
+        <li class="action-item">
+          <a href="http://files.edx.org/Getting_Started_with_Studio.pdf" class="action action-primary" title="This is a PDF Document"><i class="ss-icon icon ss-symbolicons-block icon icon-inline icon-pdf">&#xEC00;</i> Download Studio Documentation</a>
+          <span class="tip">How to use Studio to build your course</span>
+        </li>
+        <li class="action-item">
+          <a href="http://help.edge.edx.org/" rel="external" class="action action-primary"><i class="ss-icon icon ss-symbolicons-block icon icon-inline icon-help">&#xEE11;</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="https://edge.edx.org/courses/edX/edX101/How_to_Create_an_edX_Course/about" rel="external" class="action action-primary"><i class="ss-icon icon ss-symbolicons-block icon icon-inline 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="title">Contact us about Studio</h3>
+        
+        <div class="copy">
+           <p>Have problems, questions, or suggestions about Studio? We're here to help and listen to any feedback you want to share.</p>
+        </div>
+        
+        <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> Contact Us</a>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </div>  
+</div>
\ No newline at end of file

common/djangoapps/util/forum_util.py

+from django_comment_client.models import Permission, Role
+
+def seed_permissions_roles(course_id):
+    administrator_role = Role.objects.get_or_create(name="Administrator", course_id=course_id)[0]
+    moderator_role = Role.objects.get_or_create(name="Moderator", course_id=course_id)[0]
+    community_ta_role = Role.objects.get_or_create(name="Community TA", course_id=course_id)[0]
+    student_role = Role.objects.get_or_create(name="Student", course_id=course_id)[0]
+
+    for per in ["vote", "update_thread", "follow_thread", "unfollow_thread",
+                   "update_comment", "create_sub_comment", "unvote", "create_thread",
+                   "follow_commentable", "unfollow_commentable", "create_comment", ]:
+        student_role.add_permission(per)
+
+    for per in ["edit_content", "delete_thread", "openclose_thread",
+                    "endorse_comment", "delete_comment", "see_all_cohorts"]:
+        moderator_role.add_permission(per)
+
+    for per in ["manage_moderator"]:
+        administrator_role.add_permission(per)
+
+    moderator_role.inherit_permissions(student_role)
+
+    # For now, Community TA == Moderator, except for the styling.
+    community_ta_role.inherit_permissions(moderator_role)
+
+    administrator_role.inherit_permissions(moderator_role)
\ No newline at end of file

lms/djangoapps/django_comment_client/management/commands/seed_permissions_roles.py

 from django.core.management.base import BaseCommand, CommandError
-from django_comment_client.models import Permission, Role
+from util.forum_util import seed_permissions_roles
 
 
 class Command(BaseCommand):
@@ -12,26 +12,5 @@ class Command(BaseCommand):
         if len(args) > 1:
             raise CommandError("Too many arguments")
         course_id = args[0]
-        administrator_role = Role.objects.get_or_create(name="Administrator", course_id=course_id)[0]
-        moderator_role = Role.objects.get_or_create(name="Moderator", course_id=course_id)[0]
-        community_ta_role = Role.objects.get_or_create(name="Community TA", course_id=course_id)[0]
-        student_role = Role.objects.get_or_create(name="Student", course_id=course_id)[0]
 
-        for per in ["vote", "update_thread", "follow_thread", "unfollow_thread",
-                       "update_comment", "create_sub_comment", "unvote", "create_thread",
-                       "follow_commentable", "unfollow_commentable", "create_comment", ]:
-            student_role.add_permission(per)
-
-        for per in ["edit_content", "delete_thread", "openclose_thread",
-                        "endorse_comment", "delete_comment", "see_all_cohorts"]:
-            moderator_role.add_permission(per)
-
-        for per in ["manage_moderator"]:
-            administrator_role.add_permission(per)
-
-        moderator_role.inherit_permissions(student_role)
-
-        # For now, Community TA == Moderator, except for the styling.
-        community_ta_role.inherit_permissions(moderator_role)
-
-        administrator_role.inherit_permissions(moderator_role)
+        seed_permissions_roles(course_id)