From 5fad212e7fbe6b3ddf5468b66bf899882e5ff244 Mon Sep 17 00:00:00 2001 From: Lloyd Wheeler Date: Wed, 29 Nov 2017 18:05:39 -0800 Subject: [PATCH] Removing unnecessary CSS and readding required styles for instructor support call form in BEM style #1450 --- Gruntfile.js | 1 + .../instructionalSupport.html | 11 +- .../InstructorSupportCallForm.html | 6 +- .../instructorComment/instructorComment.css | 24 ++ .../InstructorPreferenceSelector.html | 2 +- .../instructorPreferenceSelector.css | 10 + .../instructorPreferenceSelector.js | 2 +- .../instructorSupportCallForm.css | 156 +------------ .../instructorSupportCallFormModal.css | 27 --- .../studentPreferenceSelector.js | 2 +- .../instructionalSupportCallStatus.css | 206 ++++++++++++++++++ .../instructorSupportCallForm.css | 205 ----------------- app/supportAssignment/supportAssignment.html | 2 - 13 files changed, 260 insertions(+), 394 deletions(-) rename app/instructionalSupport/instructorSupportCallForm/{templates => }/InstructorSupportCallForm.html (96%) create mode 100644 app/instructionalSupport/instructorSupportCallForm/directives/instructorComment/instructorComment.css rename app/instructionalSupport/instructorSupportCallForm/{templates => directives/instructorPreferenceSelector}/InstructorPreferenceSelector.html (96%) create mode 100644 app/instructionalSupport/instructorSupportCallForm/directives/instructorPreferenceSelector/instructorPreferenceSelector.css rename app/instructionalSupport/instructorSupportCallForm/directives/{ => instructorPreferenceSelector}/instructorPreferenceSelector.js (74%) delete mode 100644 app/instructionalSupport/instructorSupportCallForm/instructorSupportCallFormModal.css delete mode 100644 app/supportAssignment/instructorSupportCallForm.css diff --git a/Gruntfile.js b/Gruntfile.js index 1efdd503c..2c0a880a8 100644 --- 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 index 530fb8b6c..8f45eee1a 100644 --- a/app/instructionalSupport/instructionalSupport.html +++ b/app/instructionalSupport/instructionalSupport.html @@ -21,12 +21,6 @@ - - - - - - @@ -37,6 +31,11 @@ + + + + + diff --git a/app/instructionalSupport/instructorSupportCallForm/templates/InstructorSupportCallForm.html b/app/instructionalSupport/instructorSupportCallForm/InstructorSupportCallForm.html similarity index 96% rename from app/instructionalSupport/instructorSupportCallForm/templates/InstructorSupportCallForm.html rename to app/instructionalSupport/instructorSupportCallForm/InstructorSupportCallForm.html index 65f95699b..d178060fe 100644 --- a/app/instructionalSupport/instructorSupportCallForm/templates/InstructorSupportCallForm.html +++ b/app/instructionalSupport/instructorSupportCallForm/InstructorSupportCallForm.html @@ -34,7 +34,7 @@
Please indicate your preferences:
-
@@ -95,9 +95,9 @@
Please indicate your preferences:
-
+
Comments:
-
diff --git a/app/instructionalSupport/instructorSupportCallForm/directives/instructorComment/instructorComment.css b/app/instructionalSupport/instructorSupportCallForm/directives/instructorComment/instructorComment.css new file mode 100644 index 000000000..a296a5681 --- /dev/null +++ b/app/instructionalSupport/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; +} \ No newline at end of file diff --git a/app/instructionalSupport/instructorSupportCallForm/templates/InstructorPreferenceSelector.html b/app/instructionalSupport/instructorSupportCallForm/directives/instructorPreferenceSelector/InstructorPreferenceSelector.html similarity index 96% rename from app/instructionalSupport/instructorSupportCallForm/templates/InstructorPreferenceSelector.html rename to app/instructionalSupport/instructorSupportCallForm/directives/instructorPreferenceSelector/InstructorPreferenceSelector.html index 9e466d1bc..38f5970dd 100644 --- a/app/instructionalSupport/instructorSupportCallForm/templates/InstructorPreferenceSelector.html +++ b/app/instructionalSupport/instructorSupportCallForm/directives/instructorPreferenceSelector/InstructorPreferenceSelector.html @@ -1,4 +1,4 @@ -
+
diff --git a/app/instructionalSupport/instructorSupportCallForm/directives/instructorPreferenceSelector/instructorPreferenceSelector.css b/app/instructionalSupport/instructorSupportCallForm/directives/instructorPreferenceSelector/instructorPreferenceSelector.css new file mode 100644 index 000000000..e2fead2ae --- /dev/null +++ b/app/instructionalSupport/instructorSupportCallForm/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; +} \ No newline at end of file diff --git a/app/instructionalSupport/instructorSupportCallForm/directives/instructorPreferenceSelector.js b/app/instructionalSupport/instructorSupportCallForm/directives/instructorPreferenceSelector/instructorPreferenceSelector.js similarity index 74% rename from app/instructionalSupport/instructorSupportCallForm/directives/instructorPreferenceSelector.js rename to app/instructionalSupport/instructorSupportCallForm/directives/instructorPreferenceSelector/instructorPreferenceSelector.js index b299a9e93..ce5013cf1 100644 --- a/app/instructionalSupport/instructorSupportCallForm/directives/instructorPreferenceSelector.js +++ b/app/instructionalSupport/instructorSupportCallForm/directives/instructorPreferenceSelector/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 index 3ccd5cf90..c6c48181e 100644 --- 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 deleted file mode 100644 index 10d956a9f..000000000 --- a/app/instructionalSupport/instructorSupportCallForm/instructorSupportCallFormModal.css +++ /dev/null @@ -1,27 +0,0 @@ -.instructor-modal-header_style { - background: #303641; -} - -.instructor-modal-header_style h4 { - color: white; -} - -.instructor-modal-header_style button { - /*assign style to "x" button */ - color: white; - opacity: 1; -} - -.instructor-modal-modal-footer { - background-color: rgb(248, 248, 248); -} - -.modal .modal-header .close { - background: none; - display: inline-block; - padding: 0px 5px; - line-height: 1; - color: white; - zoom: 1; - opacity: 1 !important; -} diff --git a/app/instructionalSupport/studentSupportCallForm/directives/studentPreferences/studentPreferenceSelector/studentPreferenceSelector.js b/app/instructionalSupport/studentSupportCallForm/directives/studentPreferences/studentPreferenceSelector/studentPreferenceSelector.js index b12bf1395..438649ce4 100644 --- a/app/instructionalSupport/studentSupportCallForm/directives/studentPreferences/studentPreferenceSelector/studentPreferenceSelector.js +++ b/app/instructionalSupport/studentSupportCallForm/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', diff --git a/app/supportAssignment/instructionalSupportCallStatus.css b/app/supportAssignment/instructionalSupportCallStatus.css index 5f3f5ce62..9a7045ea6 100644 --- a/app/supportAssignment/instructionalSupportCallStatus.css +++ b/app/supportAssignment/instructionalSupportCallStatus.css @@ -338,4 +338,210 @@ body .support-call-status { .add-support-call-modal .instructor-list { height: 200px; +} + +.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; +} + +h4, .h4 { + font-size: 15px; +} + +.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 .section-group-header { + border-right: 1px solid; + border-color: rgb(235, 235, 235); + color: rgb(51, 51, 51); + background-color: rgb(245, 245, 246); + font-size: 14px; + height: 34px; + display: flex; + justify-content: center; + align-items: center; + border-top: 1px solid rgb(235, 235, 235); + border-left: 1px solid rgb(235, 235, 235); +} + +.instructor-support-call-form .preferences-container { + border-top: 1px solid rgb(235, 235, 235); + border-left: 1px solid rgb(235, 235, 235); + border-bottom: 1px solid rgb(235, 235, 235); + padding-bottom: 10px; + height: 100%; + list-style: none; +} + +.instructor-support-call-form .section-group-container:last-child { + border-right: 1px solid rgb(235, 235, 235); +} + + +.instructor-support-call-form .preference-box { + border-radius: 4px; + border: 1px solid #adadad; + background-color: white; + display: flex; + justify-content: space-between; + width: 200px; + align-items: center; + padding: 10px; +} + +.instructor-support-call-form .instructor-preference { + display: flex; + align-items: center; + justify-content: center; + padding-top: 10px; + color: black; + cursor: pointer; +} + +.instructor-support-call-form .ui-sortable-handle { + cursor: move; } \ No newline at end of file diff --git a/app/supportAssignment/instructorSupportCallForm.css b/app/supportAssignment/instructorSupportCallForm.css deleted file mode 100644 index 3ccd5cf90..000000000 --- a/app/supportAssignment/instructorSupportCallForm.css +++ /dev/null @@ -1,205 +0,0 @@ -.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; -} - -h4, .h4 { - font-size: 15px; -} - -.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 .section-group-header { - border-right: 1px solid; - border-color: rgb(235, 235, 235); - color: rgb(51, 51, 51); - background-color: rgb(245, 245, 246); - font-size: 14px; - height: 34px; - display: flex; - justify-content: center; - align-items: center; - border-top: 1px solid rgb(235, 235, 235); - border-left: 1px solid rgb(235, 235, 235); -} - -.instructor-support-call-form .preferences-container { - border-top: 1px solid rgb(235, 235, 235); - border-left: 1px solid rgb(235, 235, 235); - border-bottom: 1px solid rgb(235, 235, 235); - padding-bottom: 10px; - height: 100%; - list-style: none; -} - -.instructor-support-call-form .section-group-container:last-child { - border-right: 1px solid rgb(235, 235, 235); -} - - -.instructor-support-call-form .preference-box { - border-radius: 4px; - border: 1px solid #adadad; - background-color: white; - display: flex; - justify-content: space-between; - width: 200px; - align-items: center; - padding: 10px; -} - -.instructor-support-call-form .instructor-preference { - display: flex; - align-items: center; - justify-content: center; - padding-top: 10px; - color: black; - cursor: pointer; -} - -.instructor-support-call-form .ui-sortable-handle { - cursor: move; -} \ No newline at end of file diff --git a/app/supportAssignment/supportAssignment.html b/app/supportAssignment/supportAssignment.html index 38d227a0c..fba226155 100644 --- a/app/supportAssignment/supportAssignment.html +++ b/app/supportAssignment/supportAssignment.html @@ -22,9 +22,7 @@ - -