fix: adjust approve/reject modals

bcgov · Jan 8, 2024 · ed907e3 · ed907e3
1 parent aff09d9
commit ed907e3
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 72 deletions.
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -1296,6 +1296,10 @@ Useful for scrolling to the *start* of an HTML element without having it covered
   display: unset;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
 /* Small (up to 671px) */
 @media screen and (max-width: 671px) {
   .content-landing {
@@ -1340,11 +1344,6 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     padding-bottom: 1rem;
   }
 
-  cds-modal#reject-modal cds-modal-body.grouping-12,
-  cds-modal#approve-modal cds-modal-body {
-    margin-bottom: 3rem;
-  }
-
   .screen {
     padding: 1.5rem 1rem 2.5rem 1rem;
     flex-direction: column;
@@ -1548,27 +1547,6 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     width: 40%;
   }
 
-  cds-modal#reject-modal::part(dialog),
-  cds-modal#approve-modal::part(dialog) {
-    width: 95%;
-  }
-
-  cds-modal#reject-modal cds-modal-body.grouping-12,
-  cds-modal#approve-modal cds-modal-body {
-    margin-bottom: 3rem;
-  }
-
-  cds-modal#reject-modal cds-modal-body.grouping-12 {
-    height: 19rem;
-  }
-
-  cds-modal#reject-modal cds-modal-footer,
-  cds-modal#approve-modal cds-modal-footer {
-    height: 6rem;
-    margin: -2rem 0 -2rem 0;
-    padding: 0 1rem 1rem 1rem !important;
-  }
-
   .mg-sd-25 {
     margin: 0rem 2.5rem 2rem 2rem;
   }
@@ -1635,17 +1613,6 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     height: 16rem;
   }
 
-  cds-modal#reject-modal cds-modal-body.grouping-12 {
-    margin: 1rem 1rem 3rem 1rem;
-    height: 19rem;
-  }
-  cds-modal#reject-modal cds-modal-footer,
-  cds-modal#approve-modal cds-modal-footer {
-    height: 6rem;
-    margin: -2rem 0 -2rem 0;
-    padding: 0 1rem 1rem 1rem !important;
-  }
-
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-02,
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-03 {
     width: auto;
@@ -1702,17 +1669,6 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     height: 22rem;
   }
 
-  cds-modal#reject-modal cds-modal-body.grouping-12 {
-    margin: 1rem 1rem 3rem 1rem;
-    height: 19rem;
-  }
-  cds-modal#reject-modal cds-modal-footer,
-  cds-modal#approve-modal cds-modal-footer {
-    height: 6rem;
-    margin: -2rem 0 -2rem 0;
-    padding: 0 1rem 1rem 1rem !important;
-  }
-
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-02,
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-03 {
     width: auto;
@@ -1748,17 +1704,6 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     height: 29.8125rem;
   }
 
-  cds-modal#reject-modal cds-modal-body.grouping-12 {
-    margin: 1rem 1rem 3rem 1rem;
-    height: 19rem;
-  }
-  cds-modal#reject-modal cds-modal-footer,
-  cds-modal#approve-modal cds-modal-footer {
-    height: 6rem;
-    margin: -2rem 0 -2rem 0;
-    padding: 0 1rem 1rem 1rem !important;
-  }
-
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-02,
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-03 {
     width: auto;
@@ -1795,17 +1740,6 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     height: 31.375rem;
   }
 
-  cds-modal#reject-modal cds-modal-body.grouping-12 {
-    margin: 1rem 1rem 3rem 1rem;
-    height: 19rem;
-  }
-  cds-modal#reject-modal cds-modal-footer,
-  cds-modal#approve-modal cds-modal-footer {
-    height: 6rem;
-    margin: -2rem 0 -2rem 0;
-    padding: 0 1rem 1rem 1rem !important;
-  }
-
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-02,
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-03 {
     width: auto;

diff --git a/frontend/src/components/forms/TextInputComponent.vue b/frontend/src/components/forms/TextInputComponent.vue
@@ -120,7 +120,7 @@ const selectValue = (event: any) => {
 </script>
 
 <template>
-  <div class="grouping-02" v-if="enabled">
+  <div v-if="enabled" class="grouping-02" :class="$attrs.class">
     <div class="input-group">
       <div class="cds--text-input__label-wrapper">
         <label :id="id + 'Label'" 

diff --git a/frontend/src/pages/SubmissionReviewPage.vue b/frontend/src/pages/SubmissionReviewPage.vue
@@ -551,7 +551,7 @@ const matchingData = computed(() => {
             @update:selected-value="event => selectedRejectReasons = event"        
           />
           <text-input-component
-            v-if="showClientNumberField"
+            :class="{invisible: !showClientNumberField}"
             id="reject_reason_message"
             label="Matching client number"
             placeholder=""