Loading modal update

This commit is contained in:
Chloe Herd 2023-09-14 09:19:47 -04:00
parent f90e0007e7
commit 390fd0ffb4

View file

@ -1,7 +1,7 @@
<template> <template>
<div v-if="isModalVisible"> <div v-if="isModalVisible">
<div class="dimmer-overlay"></div> <div v-if="notFullScreen" class="dimmer-overlay"></div>
<div class="container-fluid modal-loader" :class="layoutClass"> <div class="modal-loader" :class="layoutClass">
<div class="row g-2 h-100 d-flex align-items-center"> <div class="row g-2 h-100 d-flex align-items-center">
<div class="container-fluid overflow-hidden"> <div class="container-fluid overflow-hidden">
<div class="row h-100"> <div class="row h-100">
@ -69,7 +69,7 @@ export default {
}, },
computed: { computed: {
layoutClass() { layoutClass() {
return this.notFullScreen ? "card-layout" : "full-screen"; return this.notFullScreen ? "card-layout" : "full-screen container-fluid";
}, },
}, },
methods: { methods: {
@ -123,12 +123,20 @@ export default {
} }
&.card-layout { &.card-layout {
height: 186px; position: fixed;
width: calc(100% - 3rem); top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
position: absolute;
top: calc(50% - 93px); & .text-container {
left: 1.5rem; display: none;
}
& .mb-4 {
margin-bottom: 0;
}
} }
.tagbg { .tagbg {