jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/INSR-2206

Browse source
This commit is contained in:
Katie Kroell 2025-12-11 13:28:44 -05:00
commit f19287c162
3 changed files with 121 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/img/heritage-loader-blue.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

183
src/iss-components/loading-modal/loading-modal.vue
View file

@ -2,20 +2,24 @@
<div <div
v-if="showModalContent" v-if="showModalContent"
class="container-fluid modal-loader"> class="container-fluid modal-loader">
<div class="row g-2 h-100 d-flex align-items-center"> <div class="modal-loader-background"></div>
<div class="container-fluid overflow-hidden"> <div class="modal-loader-content">
<div class="row h-100"> <div class="modal-loader-content-container">
<div class="col text-center tagbg mb-4"> <div class="modal-loader-spinner-container">
<div <div class="modal-loader-text">
class="spinner-border text-danger" Processing...
role="status"> </div>
<span class="visually-hidden">Loading...</span> <div
</div> class="modal-loader-spinner"
role="status">
<img
src="~@/assets/img/heritage-loader-blue.gif"
alt="Loading spinner" />
</div> </div>
</div> </div>
<div <div
v-if="showTextCarouselContent" v-if="showTextCarouselContent"
class="row"> class="row modal-loader-text-container">
<div class="col"> <div class="col">
<div class="text-container slide"> <div class="text-container slide">
<p <p
@ -94,71 +98,116 @@ export default {
@import "@/styles/ux-variables-svg-strings.scss"; @import "@/styles/ux-variables-svg-strings.scss";
.modal-loader { .modal-loader {
position: fixed; .modal-loader-background,
top: 0; .modal-loader-content {
left: 0; position: fixed;
right: 0; top: 0;
bottom: 0; left: 0;
z-index: 1057; right: 0;
width: 100%; bottom: 0;
height: 100%; width: 100%;
overflow-x: hidden; height: 100%;
overflow-y: auto; overflow-x: hidden;
outline: 0; overflow-y: auto;
background: $gray-100; outline: 0;
}
.tagbg { .modal-loader-background {
background-image: url($svg-loading-modal-image); z-index: 1057;
background-repeat: no-repeat; background: #000;
background-position: center center; opacity: 0.5;
background-size: 96px; }
.modal-loader-content {
z-index: 1058;
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
} flex-direction: column;
@include media-breakpoint-up(xs) {
.spinner-border { padding-top: 5rem;
width: 6.5rem;
height: 6.5rem;
border: 0.45em solid currentColor;
border-right-color: transparent;
}
.text-container {
display: flex;
width: 350px;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
position: relative;
&:after {
content: "";
background: rgb(245, 245, 245);
background: linear-gradient(
270deg,
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 5%,
rgba(245, 245, 245, 0) 95%,
rgba(245, 245, 245, 1) 100%
);
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
} }
&.slide p { @include media-breakpoint-up(md) {
animation: slide-in 20s ease-in-out 1s forwards 1; padding-top: 7rem;
} }
p { .modal-loader-content-container {
margin: 0 175px; min-width: 15rem; // 240px
transform: translateX(180px); min-height: 15rem; // 240px
font-weight: 600;
padding: 1rem 0;
display: flex;
align-items: flex-start;
justify-content: center;
background-color: #fff;
background-clip: padding-box;
outline: 0;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 0.375rem;
box-shadow: 0 .375rem 11rem rgba(0, 0, 0, .5);
.modal-loader-spinner-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #1574a1;
font-weight: 600;
.modal-loader-spinner {
margin-top: 0.75rem;
}
}
}
.tagbg {
background-image: url($svg-loading-modal-image);
background-repeat: no-repeat;
background-position: center center;
background-size: 96px;
display: flex;
justify-content: center;
align-items: center;
}
.text-container {
display: flex;
width: 350px;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
position: relative;
&:after {
content: "";
background: rgb(245, 245, 245);
background: linear-gradient(
270deg,
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 5%,
rgba(245, 245, 245, 0) 95%,
rgba(245, 245, 245, 1) 100%
);
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&.slide p {
animation: slide-in 20s ease-in-out 1s forwards 1;
}
p {
margin: 0 175px;
transform: translateX(180px);
}
} }
} }
} }
</style> </style>

5
src/iss-components/site-footer/site-footer.vue
View file

@ -49,6 +49,7 @@
<script> <script>
import textLink from '@/ux-components/text-link/text-link.vue'; import textLink from '@/ux-components/text-link/text-link.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue'; import buttonMain from '@/ux-components/button-main/button-main.vue';
import showIssLoadingModal from '@/helpers/loading-modal-helper';
export default { export default {
name: 'site-footer', name: 'site-footer',
@ -97,6 +98,10 @@ export default {
buttonClick() { buttonClick() {
// prevent keyboard input after button click // prevent keyboard input after button click
document.onkeydown = () => false; document.onkeydown = () => false;
if ((!this.disableForwardAction && !this.isForwardActionDisabled)) {
showIssLoadingModal(true);
}
this.$emit('forwardClicked'); this.$emit('forwardClicked');
}, },
linkClick() { linkClick() {