started styling section date pickers

cms/static/js/base.js

@@ -734,7 +734,7 @@ function saveSetSectionScheduleDate(e) {
     id = $(this).closest("section.courseware-section").data("id");
     var $_this = $(this);
 
-        // call into server to commit the new order
+    // call into server to commit the new order
     $.ajax({
         url: "/save_item",
         type: "POST",

cms/static/sass/_courseware.scss

@@ -28,14 +28,45 @@ input.courseware-unit-search-input {
 
 	&.collapsed {
 		padding-bottom: 0;
+	}
 
-		header {
-			height: 47px;
-		}
-		
-		h4 {
-			display: none !important;
-		}
+	label {
+		float: left;
+		line-height: 29px;
+	}
+
+	.datepair {
+		float: left;
+		margin-left: 10px;
+	}
+
+	.section-published-date {
+		position: absolute;
+		top: 12px;
+		right: 90px;
+		width: 250px;
+		font-size: 13px;
+	}
+
+	.datepair .date,
+	.datepair .time {
+		padding-left: 0;
+		padding-right: 0;
+		border: none;
+		background: none;
+		@include box-shadow(none);
+		font-size: 13px;
+		font-weight: 700;
+		color: $blue;
+		cursor: pointer;
+	}
+
+	.datepair .date {
+		width: 80px;
+	}
+
+	.datepair .time {
+		width: 65px;
 	}
 
 	&.collapsed .subsection-list,
@@ -45,11 +76,11 @@ input.courseware-unit-search-input {
 	}
 
 	header {
-		height: 67px;
+		height: 55px;
 
 		.item-details {
 			float: left;
-			padding: 10px 0 0;
+			padding: 15px 0 0;
 		}
 
 		.item-actions {			
@@ -64,7 +95,7 @@ input.courseware-unit-search-input {
 
 		.expand-collapse-icon {
 			float: left;
-			margin: 16px 6px 16px 16px;
+			margin: 20px 6px 16px 16px;
 			@include transition(none);
 		}
 

cms/templates/overview.html

@@ -74,24 +74,19 @@
                   <a href="#" class="save-button edit-section-name-save">Save</a><a href="#" class="cancel-button edit-section-name-cancel">Cancel</a>
                 </div>
               </h3>
-              <h4 class='section-published-date'>
+              <div class="section-published-date">
+                <label>Release Date:</label>
                 <%
                   start_date = datetime.fromtimestamp(mktime(section.start)) if section.start is not None else None
                   start_date_str = start_date.strftime('%m/%d/%Y') if start_date is not None else ''
                   start_time_str = start_date.strftime('%H:%M') if start_date is not None else ''
                 %>
-                %if start_date is None:
-                  <strong>Unscheduled:</strong> 
-                  <a href="#" class="set-publish-date">click here to set</a>
-                %else:
-                  <strong>${start_date_str} at ${start_time_str}</strong> <a href="#" class="set-publish-date">click here to edit</a>
-                %endif
-              </h4>
-              <div class="datepair" data-language="javascript" style="display: none">
-                <input type="text" name="start_date" value="${start_date_str}" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
-                <input type="text" name="start_time" value="${start_time_str}" placeholder="HH:MM" class="time" size='10' autocomplete="off"/> 
-                <a href="#" class="save-button edit-section-start-save">Save</a><a href="#" class="cancel-button edit-section-start-cancel">Cancel</a>
-              </div>
+                <div class="datepair" data-language="javascript">
+                  <input type="text" name="start_date" value="${start_date_str}" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
+                  <input type="text" name="start_time" value="${start_time_str}" placeholder="HH:MM" class="time" size='10' autocomplete="off"/> 
+                  <!--<a href="#" class="save-button edit-section-start-save">Save</a><a href="#" class="cancel-button edit-section-start-cancel">Cancel</a>-->
+                </div>
+              </div>              
             </div>
             <div class="item-actions">
               <a href="#" class="delete-button delete-section-button"><span class="delete-icon"></span></a>