Merge pull request #106 from akroon3r/sprint_4_update_exams

Edit/Return Exam Modal Styling
sjrumsby · Jan 21, 2019 · a9f66f6 · a9f66f6
2 parents 78e152e + cb493d6
commit a9f66f6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/frontend/src/assets/css/q.css b/frontend/src/assets/css/q.css
@@ -5,7 +5,7 @@
   top: 20%;
   width: 50%;
   height: 60%;
-  overflow: auto;
+  overflow: hidden;
   transition: display 1s;
   border: 10px solid white;
   border-radius: 25px;
@@ -40,7 +40,7 @@
   top: 35%;
   width: 30%;
   height: 22%;
-  overflow: auto;
+  overflow: hidden;
   transition: display 1s;
   border: 10px solid white;
   border-radius: 25px;
@@ -55,7 +55,22 @@
   top: 35%;
   width: 22%;
   height: 22%;
-  overflow: auto;
+  overflow: hidden;
+  transition: display 1s;
+  border: 10px solid white;
+  border-radius: 25px;
+  padding-left: 10px;
+}
+
+.exam-modal-content-message-failure {
+  background-color: #fefefe;
+  position: fixed;
+  z-index: 3;
+  left: 35%;
+  top: 35%;
+  width: 35%;
+  height: 20%;
+  overflow: hidden;
   transition: display 1s;
   border: 10px solid white;
   border-radius: 25px;
@@ -103,11 +118,11 @@
 .return-exam-modal {
   position: fixed;
   z-index: 3;
-  left: 25%;
-  top: 25%;
-  width: 50%;
+  left: 35%;
+  top: 35%;
+  width: 40%;
   height: 33%;
-  overflow: auto;
+  overflow: hidden;
   transition: display 1s;
   border: 10px solid white;
   border-radius: 25px;

diff --git a/frontend/src/exams/return-exam-form-modal.vue b/frontend/src/exams/return-exam-form-modal.vue
@@ -1,7 +1,8 @@
 <template v-if="showExamEditModalVisible">
   <div id ="examBackground" class="edit-exam-modal-background">
-    <div id="examModal" v-bind:class="{'return-exam-modal': !editExamSuccess,
-                                       'exam-modal-content-message': editExamSuccess || editExamFailure }">
+    <div id="examModal" v-bind:class="{'return-exam-modal': !editExamSuccess && !editExamFailure,
+                                       'exam-modal-content-message': editExamSuccess,
+                                       'exam-modal-content-message-failure': editExamFailure }">
       <div v-bind:class="{ 'edit-exam-modal-content': !editExamSuccess, 'exam-modal-content-message': editExamSuccess }">
         <div class="modal_header" v-if="!editExamSuccess && !editExamFailure">
           <div>
@@ -13,15 +14,15 @@
               </b-row>
               <b-row class="my-1">
                 <b-col sm="4"><label>Exam Returned: </label></b-col>
-                <b-col sm="6">
+                <b-col sm="7">
                   <select class="form-control" name="examReturned" v-model=selectedReturned>
                     <option v-for="returned in examReturnedOptions" :value="returned.value">{{ returned.value }}</option>
                   </select>
                 </b-col>
               </b-row>
               <b-row>
                 <b-col sm="4"><label>Tracking Number: </label></b-col>
-                <b-col sm="6"><b-form-input id="trackingNumber" type="text" v-model=fields.exam_returned_tracking_number></b-form-input></b-col>
+                <b-col sm="7"><b-form-input id="trackingNumber" type="text" v-model=fields.exam_returned_tracking_number></b-form-input></b-col>
               </b-row>
             </b-container>
           </div>