settings/style - general UI clean up - wip

cms/djangoapps/contentstore/views.py

@@ -995,7 +995,7 @@ def get_course_settings(request, org, course, name):
     course_details = CourseDetails.fetch(location)
     
     return render_to_response('settings.html', {
-        'active_tab': 'settings-tab', 
+        'active_tab': 'settings', 
         'context_course': course_module,
         'course_details' : json.dumps(course_details, cls=CourseSettingsEncoder)
     })

cms/static/client_templates/course_grade_policy.html

@@ -64,6 +64,6 @@
                     <span class="tip tip-inline">total exercises that won't be graded</span>
 			</div>
 		</div>
-	</div> <a href="#" class="remove-item remove-grading-data"><span
-		class="delete-icon"></span> Delete Assignment Type</a>
+	</div>		
+		<a href="#" class="delete-button remove-item remove-grading-data"><span class="delete-icon"></span>Delete</a>
 </li>

cms/static/sass/_base.scss

@@ -77,13 +77,14 @@ footer {
 
 input[type="text"],
 input[type="email"],
-input[type="password"] {
+input[type="password"],
+textarea.text {
     padding: 6px 8px 8px;
     @include box-sizing(border-box);
     border: 1px solid $mediumGrey;
     border-radius: 2px;
-    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
-    background-color: #edf1f5;
+    @include linear-gradient($lightGrey, tint($lightGrey, 90%));
+    background-color: $lightGrey;
     @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
     font-family: 'Open Sans', sans-serif;
     font-size: 11px;
@@ -95,6 +96,11 @@ input[type="password"] {
     &:-ms-input-placeholder {
         color: #979faf;
     }
+
+    &:focus {
+      @include linear-gradient($paleYellow, tint($paleYellow, 90%));
+      outline: 0;
+    }
 }
 
 input.search {

cms/static/sass/_header.scss

@@ -31,10 +31,18 @@ body.no-header {
 		@include active;
 	}
 
+	&.active-tab-settings #settings-tab {
+		@include active;
+	}
+
 	&.active-tab-import #import-tab {
 		@include active;
 	}
 
+	&.active-tab-export #export-tab {
+		@include active;
+	}
+
 	.drop-icon {
 		margin-left: 5px;
 		font-size: 11px;

cms/static/sass/_settings.scss

@@ -144,19 +144,21 @@
         min-width: 75px !important;
       }
 
-      &:focus {
-        @include linear-gradient(tint($blue, 80%), tint($blue, 90%));
-        border-color: $blue;
-        outline: 0;
-      }
-
       &:disabled {
-        border-color: $mediumGrey;
-        color: $mediumGrey;
+        border: none;
+        @include box-shadow(none);
+        padding: 0;
+        color: $darkGrey;
+        font-weight: bold;
         background: #fff;
       }
     }
 
+    textarea.tinymce {
+      border: 1px solid $darkGrey;
+      height: 300px;
+    }
+
     input[type="checkbox"], input[type="radio"] {
 
     }
@@ -241,7 +243,7 @@
           &.multi {
             display: block;
             background: tint($lightGrey, 50%);
-            padding: 20px 15px;
+            padding: 20px;
             @include border-radius(4px);
             @include box-sizing(border-box);
 

cms/static/sass/_variables.scss

@@ -13,8 +13,10 @@ $body-line-height: golden-ratio(.875em, 1);
 $pink: rgb(182,37,104);
 $error-red: rgb(253, 87, 87);
 
-$offBlack: #3c3c3c;
 $baseFontColor: #3c3c3c;
+$offBlack: #3c3c3c;
+$black: rgb(0,0,0);
+$white: rgb(255,255,255);
 $blue: #5597dd;
 $orange: #edbd3c;
 $red: #b20610;

cms/templates/settings.html

@@ -93,7 +93,6 @@ from contentstore import utils
                 <div class="field">
                   <div class="input">
                     <input type="text" class="short" id="course-number" value="[Course No.]" disabled="disabled">
-                    <span class="tip tip-inline">e.g. 101x</span>
                     <span class="tip tip-stacked">This is used in <a href="${utils.get_lms_link_for_item(context_course.location, True)}">your course URL</a>, and cannot be changed</span>
                   </div>
                 </div>
@@ -231,8 +230,8 @@ from contentstore import utils
                   </div>
 
                   <div class="input">
-                    <input type="text" class="new-item new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="speed:id,speed:id" autocomplete="off">
-                    <span class="tip tip-inline">Video restrictions go here</span>          
+                    <input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="speed:id,speed:id" autocomplete="off">
+                    <span class="tip tip-stacked">Video restrictions go here</span>
                   </div>
                 </div>
               </div>
@@ -251,7 +250,7 @@ from contentstore import utils
                 <div class="field">
                   <div class="input">
                     <input type="text" class="short time" id="course-effort" placeholder="HH:MM">
-                    <span class="tip tip-stacked">Time students should spend on all course work</span>
+                    <span class="tip tip-stacked">Time spent on all course work</span>
                   </div>
                 </div>
               </div>
@@ -421,8 +420,8 @@ from contentstore import utils
                   <ul class="input-list course-grading-assignment-list">
                   </ul>
 
-                  <a href="#" class="new-item new-course-grading-item add-grading-data">
-                    <span class="plus-icon"></span>New Assignment Type
+                  <a href="#" class="new-button new-course-grading-item add-grading-data">
+                    <span class="plus-icon white"></span>New Assignment Type
                   </a>
                   </div>
                 </div>
@@ -727,4 +726,5 @@ from contentstore import utils
       </article>
     </div>
   </div>
+  <footer></footer>
 </%block>