add position and remove unused code

argilla-io · Nov 11, 2022 · cfe4e04 · keithCuniah · Nov 11, 2022 · cfe4e04
1 parent e32daf6
commit cfe4e04
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 21 deletions.
diff --git a/frontend/components/base/BaseModal.vue b/frontend/components/base/BaseModal.vue
@@ -30,7 +30,6 @@
             ></svgicon>
             {{ modalTitle }}
           </p>
-          <div v-if="!modalCustom" />
           <slot />
         </div>
       </div>
@@ -54,10 +53,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    modalCustom: {
-      type: Boolean,
-      default: false,
-    },
     modalClass: {
       type: String,
       default: "modal-info",
@@ -80,7 +75,7 @@ export default {
     },
     modalPosition: {
       type: String,
-      default: "modal-bottom",
+      default: "modal-center",
     },
   },
   data: () => ({}),
@@ -124,30 +119,39 @@ export default {
 }
 
 .modal-wrapper {
-  display: table-cell;
-  vertical-align: middle;
-  &.modal-bottom {
-    vertical-align: bottom;
-    padding-bottom: 3em;
-    padding-left: 30%;
+  display: flex;
+  height: 100vh;
+  &.modal-bottom-right {
+    align-items: flex-end;
+    padding-bottom: 6em;
+    .modal-container {
+      margin-right: 6em;
+    }
+  }
+  &.modal-top-right {
+    align-items: flex-start;
+    padding-bottom: 6em;
+    .modal-container {
+      margin-right: 6em;
+    }
   }
   &.modal-center {
-    vertical-align: middle;
+    align-items: center;
   }
 }
 
 .modal-container {
+  position: relative;
   max-width: 460px;
   margin: 0px auto;
   padding: $base-space * 4;
   background-color: palette(white);
+  color: $black-87;
   border-radius: $border-radius;
   box-shadow: $shadow;
   transition: $swift-ease-in-out;
-  position: relative;
   text-align: left;
   pointer-events: all;
-  color: $black-54;
 }
 .modal-primary {
   box-shadow: $shadow;
@@ -183,8 +187,6 @@ export default {
   @include font-size(16px);
   font-weight: 600;
   margin-top: 0;
-  margin-right: 2em;
-  color: $black-87;
 }
 
 .modal-enter {

diff --git a/frontend/components/base/table/BaseTableInfo.vue b/frontend/components/base/table/BaseTableInfo.vue
@@ -161,7 +161,6 @@
                   :modal-custom="true"
                   :prevent-body-scroll="true"
                   modal-class="modal-secondary"
-                  modal-position="modal-center"
                   :modal-title="deleteModalContent.title"
                   :modal-visible="visibleModalId === item.id"
                   @close-modal="$emit('close-modal')"

diff --git a/frontend/components/commons/results/ResultsList.vue b/frontend/components/commons/results/ResultsList.vue
@@ -72,7 +72,6 @@
     </div>
     <lazy-base-modal
       modal-class="modal-secondary"
-      modal-position="modal-center"
       :modal-custom="true"
       :prevent-body-scroll="true"
       :modal-visible="selectedRecord !== undefined"

diff --git a/frontend/components/text-classifier/sidebar/TextClassificationViewInfo.vue b/frontend/components/text-classifier/sidebar/TextClassificationViewInfo.vue
@@ -19,11 +19,10 @@
   <div class="view-info">
     <lazy-base-modal
       modal-class="modal-secondary"
-      modal-position="modal-center"
+      modal-position="modal-bottom-right"
       modal-title="Info"
       modal-icon="info"
       :modal-custom="true"
-      :prevent-body-scroll="true"
       :modal-visible="visibleViewInfo"
       @close-modal="closeModal"
     >