Removing unnecessary CSS and readding required styles for instructor …

…support call form in BEM style #1450
ucdavis · Jan 16, 2018 · 5fad212 · 5fad212
1 parent 57223bf
commit 5fad212
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 394 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -420,6 +420,7 @@ module.exports = function (grunt) {
 									'teaching-call-modal.css', 'teaching-call-status.css', 'teaching-call.css',
 									'teachingCallResponseReport.css', 'workgroup.css', 'instructionalSupportCallConfig.css',
 									'instructionalSupportCallStatus.css', 'workgroupSummary.css',
+									'instructorSupportCallForm.css',
 									'adminApp.js', 'assignmentApp.js', 'budgetApp.js', 'courseApp.js', 'registrarReconciliationReportApp.js',
 									'scheduleSummaryReportApp.js', 'schedulingApp.js', 'sharedApp.js', 'summaryApp.js',
 									'teachingCallApp.js', 'teachingCallResponseReportApp.js', 'workgroupApp.js',

diff --git a/app/instructionalSupport/instructionalSupport.html b/app/instructionalSupport/instructionalSupport.html
@@ -21,12 +21,6 @@
 	<link rel="stylesheet" href="/css/neon-forms.css">
 	<link rel="stylesheet" href="/css/shared.css">
 
-	<link rel="stylesheet" href="/css/instructionalSupportAssignment.css">
-	<link rel="stylesheet" href="/css/instructionalSupportCallStatus.css">
-	<link rel="stylesheet" href="/css/instructorSupportCallForm.css">
-	<link rel="stylesheet" href="/css/instructorSupportCallFormModal.css">
-	<link rel="stylesheet" href="/css/instructionalSupportCallConfig.css">
-
 	<!-- Student Support Call Form -->
 	<link rel="stylesheet" href="/css/studentComments.css">
 	<link rel="stylesheet" href="/css/studentPreferences.css">
@@ -37,6 +31,11 @@
 	<link rel="stylesheet" href="/css/studentFormReview.css">
 	<link rel="stylesheet" href="/css/confirmEligible.css">
 
+<!-- Instructor Support Call Form -->
+<link rel="stylesheet" href="/css/instructorSupportCallForm.css">
+<link rel="stylesheet" href="/css/instructorPreferenceSelector.css">
+<link rel="stylesheet" href="/css/instructorComment.css">
+
 	<script src="/js/lib.js"></script>
 </head>
 <body class="page-body ng-cloak" ng-app="instructionalSupportApp" ng-cloak ng-controller="SharedCtrl">

diff --git a/.../templates/InstructorSupportCallForm.html → ...rtCallForm/InstructorSupportCallForm.html b/.../templates/InstructorSupportCallForm.html → ...rtCallForm/InstructorSupportCallForm.html
@@ -34,7 +34,7 @@
 			<h5>Please indicate your preferences:</h5>
 		</div>
 		<div class="col-md-6">
-			<div class="pull-right" tooltip-placement="left"
+			<div class="pull-right instructor-support-call-form__preference-hint" tooltip-placement="left"
 			uib-tooltip="Clicking the Add button will show you a list of all courses currently in the schedule (Use the comment box below
 			to request courses not on the list). Once you've added your preferences you can rank them by dragging and dropping them into the
 			preferred order">
@@ -95,9 +95,9 @@ <h5>Please indicate your preferences:</h5>
 	<!-- Comments and submission area -->
 	<div class="input-box-container">
 		<div class="instructor-comment-container">
-			<div class="input-box-area">
+			<div class="instructor-comment__area">
 				<h5>Comments:</h5>
-				<textarea class="form-control"
+				<textarea class="instructor-comment__text"
 				ng-model="view.state.supportCallResponse.generalComments"
 				auto-input on-blur="updateSupportCallResponse()"></textarea>
 			</div>

diff --git a/...ionalSupport/instructorSupportCallForm/directives/instructorComment/instructorComment.css b/...ionalSupport/instructorSupportCallForm/directives/instructorComment/instructorComment.css
@@ -0,0 +1,24 @@
+.instructor-comment {
+	flex: 1 0 auto;
+}
+
+.instructor-comment__text {
+	border: 1px solid #ebebeb;
+	height: 180px;
+	display: block;
+	width: 100%;
+	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;
+	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+.instructor-comment__area {
+	flex: 0 1 47.5%;
+	margin-bottom: 35px;
+}
diff --git a/...mplates/InstructorPreferenceSelector.html → ...elector/InstructorPreferenceSelector.html b/...mplates/InstructorPreferenceSelector.html → ...elector/InstructorPreferenceSelector.html
@@ -1,4 +1,4 @@
-<div class="student-preference-selector">
+<div class="instructor-preference-selector">
 	<div class="clickable assignment-description" style="height: 20px; width: 100%; text-align: center; color: #303641;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		Add Preference...
 	</div>

diff --git a/...rSupportCallForm/directives/instructorPreferenceSelector/instructorPreferenceSelector.css b/...rSupportCallForm/directives/instructorPreferenceSelector/instructorPreferenceSelector.css
@@ -0,0 +1,10 @@
+.instructor-preference-selector {
+	margin-left: 20px;
+	width: 200px;
+	position: relative;
+	height: 30px;
+	border: 1px solid #ebebeb;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+}
diff --git a/...irectives/instructorPreferenceSelector.js → ...eSelector/instructorPreferenceSelector.js b/...irectives/instructorPreferenceSelector.js → ...eSelector/instructorPreferenceSelector.js
@@ -1,7 +1,7 @@
 /**
  * Provides the main course table in the Courses View
  */
-instructionalSupportApp.directive("instructorPreferenceSelector", this.instructorPreferenceSelector = function ($rootScope, instructionalSupportAssignmentActionCreators) {
+instructionalSupportApp.directive("instructorPreferenceSelector", this.instructorPreferenceSelector = function ($rootScope) {
 	return {
 		restrict: 'E',
 		templateUrl: 'InstructorPreferenceSelector.html',

diff --git a/app/instructionalSupport/instructorSupportCallForm/instructorSupportCallForm.css b/app/instructionalSupport/instructorSupportCallForm/instructorSupportCallForm.css
@@ -1,155 +1,15 @@
-.tacall-instructor-header {
-    text-align: center;
-    padding-bottom: 5px;
-    border-bottom: 2px solid rgb(235, 235, 235);
-    padding-bottom: 25px;
-}
-
-.main-content {
-    display: block !important;
-}
-
-.ta-selector {
-    width: 65%;
-    margin-bottom: 17px;
-    align-self: center;
-}
-
-.add-new-slot {
-    width: 65%;
-    margin-bottom: 20px;
-    position: relative;
-    height: 30px;
-    padding: 6px;
-    border: 1px solid #ebebeb;
-    align-self: center;
-}
-
-.ta-info {
-    font-size: 8pt;
-    line-height: 20px;
-    width: 300px;
-    padding-left: 0px;
-    list-style: outside none none;
-}
-
-.ta-slot-remove {
-    position: absolute;
-    right: 0;
-    top: 0;
-    color: #000;
-}
-
-.ta-slot {
-    width: 65%;
-    align-self: center;
-    text-align: center;
-    position: relative;
-    height: 30px;
-    padding: 6px;
-    margin-bottom: 25px;
-}
-
-.instructor-application {
-    display: flex;
-    flex-direction: row;
-}
-
-.instructor-course-section {
-    margin-top: 10px;
-    display: flex;
-    flex: 1 1 20%;
-    flex-direction: column;
-}
-
-.ta-section {
-    flex-direction: column;
-    display: flex;
-}
-
-.instructor-application_title {
-    margin-top: 15px;
-    margin-bottom: 40px;
-    align-self: center;
-}
-
-.move-ta-icon {
-    position: absolute;
-    left: -30px;
-    font-size: 15pt;
-    color: #373e4a;
-    cursor: pointer;
-}
-
-.submit-application {
-    display: flex;
-    justify-content: center;
-}
-
-.row {
-    margin-left: 0px;
-    margin-right: 0px;
-}
-
-.btn-default p {
-    text-align: center;
-}
-
-.popover-content {
-    color: gray;
-}
-
-.selectboxit .selectboxit-option-icon-container {
-    margin-left: 25% !important;
-}
-
-.page-body .select2-container .select2-choice {
-    /* adjust selector's height and padding-left */
-    height: 30px;
-    line-height: 30px;
-    padding-left: 65px;
-}
-
-
-/* Comments btn */
-
-.instructor-comments-btn {
-    margin-left: 30px;
-}
-
-.instructor-comments-btn i {
-    font-size: 12pt;
-    color: #95989A;
-}
-
-.instructor-comments-btn span {
-    color: #95989A;
-}
-
-.instructor-comment-container {
-	flex: 1 0 auto;
+.instructor-support-call-form {
+	padding-left: 6%;
+	padding-right:6%;
 }
 
-h4, .h4 {
-	font-size: 15px;
+.instructor-support-call-form__preference-hint {
+	color: #949494;
 }
 
-.instructor-preference-selector {
-	width: 65%;
-	align-self: center;
-	text-align: center;
-	position: relative;
-	height: 30px;
-	border: 1px solid #ebebeb;
-	border-radius: 4px;
-	display: flex;
-	align-items: center;
-}
-
-/* Properly isolated styles */
-.instructor-support-call-form {
-	padding-left: 6%;
-	padding-right:6%;
+.instructor-support-call-form .row {
+	margin-left: 0;
+	margin-right: 0;
 }
 
 .instructor-support-call-form .section-group-header {

diff --git a/app/instructionalSupport/instructorSupportCallForm/instructorSupportCallFormModal.css b/app/instructionalSupport/instructorSupportCallForm/instructorSupportCallFormModal.css
diff --git a/...Form/directives/studentPreferences/studentPreferenceSelector/studentPreferenceSelector.js b/...Form/directives/studentPreferences/studentPreferenceSelector/studentPreferenceSelector.js
@@ -1,4 +1,4 @@
-instructionalSupportApp.directive("studentPreferenceSelector", this.studentPreferenceSelector = function ($rootScope, instructionalSupportAssignmentActionCreators) {
+instructionalSupportApp.directive("studentPreferenceSelector", this.studentPreferenceSelector = function ($rootScope) {
 	return {
 		restrict: 'E',
 		templateUrl: 'studentPreferenceSelector.html',