StudentSupportCallForm: Adding basic layout styling #1450

app/instructionalSupport/instructionalSupport.html

@@ -13,7 +13,6 @@
 
 	<title></title>
 
-
 	<link rel="stylesheet" href="/css/entypo.css">
 	<link rel="stylesheet" href="/css/lib.css">
 	<link rel="stylesheet" href="/css/neon-core.css">
@@ -22,9 +21,10 @@
 	<link rel="stylesheet" href="/css/shared.css">
 
 	<!-- Student Support Call Form -->
+	<link rel="stylesheet" href="/css/studentSupportCallForm.css">
 	<link rel="stylesheet" href="/css/studentComments.css">
 	<link rel="stylesheet" href="/css/studentPreferences.css">
-	<link rel="stylesheet" href="/css/teachingQualifications.css">
+	<link rel="stylesheet" href="/css/studentQualifications.css">
 	<link rel="stylesheet" href="/css/studentAvailabilities.css">
 	<link rel="stylesheet" href="/css/crnAvailable.css">
 	<link rel="stylesheet" href="/css/gridAvailable.css">

app/instructionalSupport/studentSupportCallForm/StudentSupportCallForm.html

@@ -4,30 +4,40 @@
 <ipa-header page-title="Support Call"></ipa-header>
 
 <div class="student-support-call-form">
-	<spinner ng-if="!view.state"
-		size="20" style="padding-top: 200px;">
+	<spinner
+		class="student-support-call-form__loading-spinner"
+		ng-if="!view.state"
+		size="20">
 	</spinner>
 
 	<!-- handle lack of access -->
 	<div ng-if="view.state && !view.state.supportCallResponse">
-		<div class="jumbotron" style="text-align: center; height: 100%; background-color: white;">
+		<div class="jumbotron student-support-call-form__no-access">
 			<p class="lead">You have not been invited to a support call in this term.</p>
 			<br />
 			<p class="lead">If you feel this is in error please contact the Academic Planner for {{ sharedState.workgroup.name }}.</p>
 		</div>
 	</div>
 
-	<div ng-if="view.state && view.state.supportCallResponse">
+	<div ng-if="view.state && view.state.supportCallResponse" class="student-support-call-form__container">
 		<!-- Modals -->
 		<ipa-modal
 			is-visible="view.state.isPreferenceCommentModalOpen"
 			header-text="Add Preference Comment">
 				<modal-proference-comments ng-if="view.state.openAddBudgetScenario" state="view.state"></modal-proference-comments>
 		</ipa-modal>
 
-		<!-- Page modules -->
-		<student-comments ng-if="view.state.supportCallResponse.collectGeneralComments"></student-comments>
-		<teaching-qualifications ng-if="view.state.supportCallResponse.collectTeachingQualifications"></teaching-qualifications>
-
+		<div class="student-support-call-form__page">
+			<div class="student-support-call-form__main">
+				<confirm-eligible support-call-response="view.state.supportCallResponse"></confirm-eligible>
+				<student-availabilities state="view.state"></student-availabilities>
+				<student-preferences state="view.state"></student-preferences>
+				<student-qualifications support-call-response="view.state.supportCallResponse"></student-qualifications>
+				<student-comments support-call-response="view.state.supportCallResponse"></student-comments>
+			</div>
+			<div class="student-support-call-form__sidebar">
+				<student-form-review state="view.state"></student-form-review>
+			</div>
+		</div>
 	</div>
 </div>

app/instructionalSupport/studentSupportCallForm/directives/confirmEligible/confirmEligible.html

@@ -1,4 +1,4 @@
-<div class="student-requirement" ng-show="props.supportCallResponse.collectEligibilityConfirmation">
+<div class="confirm-eligible" ng-if="supportCallResponse.collectEligibilityConfirmation">
 	<h4>TA Eligibility Requirements</h4>
 	<div>
 		<p>
@@ -8,7 +8,7 @@ <h4>TA Eligibility Requirements</h4>
 	<div class="checkbox religibility-checkbox">
 		<div role="menuitem" ng-click="toggleEligibilityConfirmed()">
 			<div class="checkbox checkbox-replace color-primary neon-cb-replacement"
-				ng-class="{ 'checked': props.supportCallResponse.eligibilityConfirmed }">
+				ng-class="{ 'checked': supportCallResponse.eligibilityConfirmed }">
 				<label class="cb-wrapper">
 					<div class="checked"></div>
 				</label>

app/instructionalSupport/studentSupportCallForm/directives/confirmEligible/confirmEligible.js

@@ -7,23 +7,13 @@ instructionalSupportApp.directive("confirmEligible", this.confirmEligible = func
 			state: '<'
 		},
 		link: function (scope, element, attrs) {
-			$rootScope.$on('supportStaffFormStateChanged', function (event, data) {
-				scope.mapStateToProps(data);
-			});
-
-			scope.mapStateToProps = function(state) {
-				scope.props.supportCallResponse = state.supportCallResponse;
-				scope.props.supportCallResponse.eligibilityConfirmed = Boolean(scope.props.supportCallResponse.eligibilityConfirmed);
-			};
+			// Intentionally blank
 
 			scope.toggleEligibilityConfirmed = function() {
 				scope.props.supportCallResponse.eligibilityConfirmed = !scope.props.supportCallResponse.eligibilityConfirmed;
 
 				studentActions.updateSupportCallResponse(scope.props.supportCallResponse);
 			};
-
-			scope.props = {};
-			scope.mapStateToProps(scope.state);
 		}
 	};
 });

app/instructionalSupport/studentSupportCallForm/directives/modalPreferenceComments/modalPreferenceComments.js

@@ -1,22 +1,13 @@
-instructionalSupportApp.directive("confirmEligible", this.confirmEligible = function () {
+instructionalSupportApp.directive("modalPreferenceComments", this.modalPreferenceComments = function () {
 	return {
 		restrict: 'E',
-		templateUrl: 'confirmEligible.html',
+		templateUrl: 'modalPreferenceComments.html',
 		replace: true,
 		scope: {
 			state: '<'
 		},
 		link: function (scope, element, attrs) {
-			scope.props = {};
-			scope.mapStateToProps(scope.state);
-
-			$rootScope.$on('supportStaffFormStateChanged', function (event, data) {
-				scope.mapStateToProps(data);
-			});
-
-			scope.mapStateToProps = function(state) {
-				return state;
-			};
+			// Intentionally blank
 
 			scope.submit = function () {
 				supportStaffFormActionCreators.updatePreference(scope.state.misc.scheduleId, scope.preference);

app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/crnAvailable/crnAvailable.html

@@ -0,0 +1,2 @@
+<div class="crn-available">
+</div>

app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/crnAvailable/crnAvailable.js

@@ -8,15 +8,16 @@ instructionalSupportApp.directive("crnAvailable", this.crnAvailable = function (
 		},
 		link: function (scope, element, attrs) {
 			scope.props = {};
-			scope.mapStateToProps(scope.state);
 
-			$rootScope.$on('supportStaffFormStateChanged', function (event, data) {
-				scope.mapStateToProps(data);
+			scope.$watch('state',function() {
+				scope.mapStateToProps(scope.state);
 			});
 
 			scope.mapStateToProps = function(state) {
-				return state;
+				scope.props.state = state;
 			};
+
+			scope.mapStateToProps(scope.state);
 		}
 	};
 });

app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.html

@@ -0,0 +1,2 @@
+<div class="grid-available">
+</div>

app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.js

@@ -8,15 +8,16 @@ instructionalSupportApp.directive("gridAvailable", this.gridAvailable = function
 		},
 		link: function (scope, element, attrs) {
 			scope.props = {};
-			scope.mapStateToProps(scope.state);
 
-			$rootScope.$on('supportStaffFormStateChanged', function (event, data) {
-				scope.mapStateToProps(data);
+			scope.$watch('state',function() {
+				scope.mapStateToProps(scope.state);
 			});
 
 			scope.mapStateToProps = function(state) {
-				return state;
+				scope.props.state = state;
 			};
+
+			scope.mapStateToProps(scope.state);
 		}
 	};
 });

app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/studentAvailabilities.html

@@ -0,0 +1,2 @@
+<div class="student-availabilities">
+</div>

app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/studentAvailabilities.js

@@ -7,16 +7,7 @@ instructionalSupportApp.directive("studentAvailabilities", this.studentAvailabil
 			state: '<'
 		},
 		link: function (scope, element, attrs) {
-			scope.props = {};
-			scope.mapStateToProps(scope.state);
-
-			$rootScope.$on('supportStaffFormStateChanged', function (event, data) {
-				scope.mapStateToProps(data);
-			});
-
-			scope.mapStateToProps = function(state) {
-				return state;
-			};
+			// Intentionally blank
 		}
 	};
 });

app/instructionalSupport/studentSupportCallForm/directives/studentComments/studentComments.css

@@ -1,3 +1,17 @@
 .student-comments {
 
+}
+
+.student-comments__text {
+	display: block;
+	width: 100%;
+	height: 180px;
+	padding: 6px 12px;
+	font-size: 12px;
+	line-height: 1.42857143;
+	color: #555;
+	background-color: #fff;
+	background-image: none;
+	border: 1px solid #ebebeb;
+	border-radius: 3px;
 }

app/instructionalSupport/studentSupportCallForm/directives/studentComments/studentComments.html

@@ -1,8 +1,8 @@
-<div class="student-comments">
-	<div class="input-box-area">
-		<h5 class="pull-left">Comments</h5>
-		<textarea class="form-control"
-		ng-model="view.params.supportCallResponse.generalComments"
-		auto-input on-blur="updateSupportCallResponse()"></textarea>
-	</div>
+<div class="student-comments" ng-if="supportCallResponse.collectGeneralComments">
+	<h5>Comments</h5>
+	<textarea
+		class="student-comments__text"
+		ng-model="supportCallResponse.generalComments"
+		auto-input on-change="updateSupportCallResponse()" on-change-delay="500">
+	</textarea>
 </div>

app/instructionalSupport/studentSupportCallForm/directives/studentComments/studentComments.js

@@ -4,18 +4,11 @@ instructionalSupportApp.directive("studentComments", this.studentComments = func
 		templateUrl: 'studentComments.html',
 		replace: true,
 		scope: {
-			state: '<'
+			supportCallResponse: '<'
 		},
 		link: function (scope, element, attrs) {
-			scope.props = {};
-			scope.mapStateToProps(scope.state);
-
-			$rootScope.$on('supportStaffFormStateChanged', function (event, data) {
-				scope.mapStateToProps(data);
-			});
-
-			scope.mapStateToProps = function(state) {
-				return state;
+			scope.updateSupportCallResponse = function() {
+				studentActions.updateSupportCallResponse($scope.props.state.supportCallResponse);
 			};
 		}
 	};

app/instructionalSupport/studentSupportCallForm/directives/studentFormReview/studentFormReview.js

@@ -7,16 +7,7 @@ instructionalSupportApp.directive("studentFormReview", this.studentFormReview =
 			state: '<'
 		},
 		link: function (scope, element, attrs) {
-			scope.props = {};
-			scope.mapStateToProps(scope.state);
-
-			$rootScope.$on('supportStaffFormStateChanged', function (event, data) {
-				scope.mapStateToProps(data);
-			});
-
-			scope.mapStateToProps = function(state) {
-				return state;
-			};
+			// Intentionally blank
 		}
 	};
 });

app/instructionalSupport/studentSupportCallForm/directives/studentPreferences/studentPreferences.html

@@ -57,7 +57,7 @@
 				</div>
 			</li>
 		</ul>
-		<student-preference-selector ng-if="view.state">
+		<student-preference-selector>
 		</student-preference-selector>
 
 	</div>

app/instructionalSupport/studentSupportCallForm/directives/studentPreferences/studentPreferences.js

@@ -7,16 +7,7 @@ instructionalSupportApp.directive("studentPreferences", this.studentPreferences
 			state: '<'
 		},
 		link: function (scope, element, attrs) {
-			scope.props = {};
-			scope.mapStateToProps(scope.state);
-
-			$rootScope.$on('supportStaffFormStateChanged', function (event, data) {
-				scope.mapStateToProps(data);
-			});
-
-			scope.mapStateToProps = function(state) {
-				return state;
-			};
+			// Intentionally blank
 		}
 	};
 });

app/instructionalSupport/studentSupportCallForm/directives/studentQualifications/studentQualifications.css

@@ -0,0 +1,17 @@
+.student-qualifications {
+
+}
+
+.student-qualifications__text {
+	display: block;
+	width: 100%;
+	height: 180px;
+	padding: 6px 12px;
+	font-size: 12px;
+	line-height: 1.42857143;
+	color: #555;
+	background-color: #fff;
+	background-image: none;
+	border: 1px solid #ebebeb;
+	border-radius: 3px;
+}

app/instructionalSupport/studentSupportCallForm/directives/studentQualifications/studentQualifications.html

@@ -0,0 +1,8 @@
+<div class="student-qualifications" ng-if="supportCallResponse.collectTeachingQualifications">
+	<h5>Teaching Qualification</h5>
+	<textarea
+		class="student-qualifications__text"
+		ng-model="supportCallResponse.teachingQualifications"
+		auto-input on-change="updateSupportCallResponse()" on-change-delay="500">
+	</textarea>
+</div>

app/instructionalSupport/studentSupportCallForm/directives/studentQualifications/studentQualifications.js

@@ -0,0 +1,15 @@
+instructionalSupportApp.directive("studentQualifications", this.studentQualifications = function (studentActions) {
+	return {
+		restrict: 'E',
+		templateUrl: 'studentQualifications.html',
+		replace: true,
+		scope: {
+			supportCallResponse: '<'
+		},
+		link: function (scope, element, attrs) {
+			scope.updateSupportCallResponse = function() {
+				studentActions.updateSupportCallResponse($scope.props.state.supportCallResponse);
+			};
+		}
+	};
+});