Merge pull request #1233 from Safelite/defect/CSR-1469

Added point-events: all to ensure that the loader button captures all…
This commit is contained in:
Leah Schumann 2023-07-14 14:58:18 -04:00 committed by GitHub
commit c5e015d824
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 7 deletions

View file

@ -26,6 +26,7 @@
badgeText
}}</span>
<loader v-if="isLoaderDisplayed" :class="['left', 'no-block']" />
<!-- no-block allows the user to click between shops while availability indicators are loading -->
</div>
</div>
<div class="row-two">

View file

@ -3,7 +3,7 @@
class="loader"
role="alert"
aria-label="Loading new page"
v-bind:class="[this.loaderColor, this.loaderPosition, this.blockUi]"></div>
v-bind:class="[this.loaderColor, this.loaderPosition]"></div>
</template>
<script>
@ -19,11 +19,6 @@ export default {
loaderPosition: {
type: String,
},
/* Controls whether we block the UI when the loader is active or now, defaults to true*/
blockUi: {
type: Boolean,
default: true,
},
},
};
</script>
@ -31,6 +26,7 @@ export default {
<style lang="scss">
.loader {
display: flex;
pointer-events: all;
//Open an overlay to prevent page interaction
&:before {
@ -87,7 +83,7 @@ export default {
&.black:after {
background-color: $black;
}
//no-block to enable clicking on certain buttons with loaders while the loader is actives
&.no-block::before {
z-index: -1;
}