feat: add dynamic dialog max width to ModalDialog component
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Has been cancelled
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Has been cancelled
This commit is contained in:
@@ -4,6 +4,7 @@
|
|||||||
:imageUrl="reward.image_url"
|
:imageUrl="reward.image_url"
|
||||||
:title="reward.name"
|
:title="reward.name"
|
||||||
:subtitle="reward.points_needed === 0 ? 'Reward Ready!' : reward.points_needed + ' more points'"
|
:subtitle="reward.points_needed === 0 ? 'Reward Ready!' : reward.points_needed + ' more points'"
|
||||||
|
dialogMaxWidth="760px"
|
||||||
@backdrop-click="$emit('cancel')"
|
@backdrop-click="$emit('cancel')"
|
||||||
>
|
>
|
||||||
<div class="modal-message">
|
<div class="modal-message">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="modal-backdrop" @click.self="$emit('backdrop-click')">
|
<div class="modal-backdrop" @click.self="$emit('backdrop-click')">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog" :style="{ maxWidth: dialogMaxWidth }">
|
||||||
<div class="modal-heading">
|
<div class="modal-heading">
|
||||||
<img v-if="imageUrl" :src="imageUrl" alt="Dialog Image" class="modal-image" />
|
<img v-if="imageUrl" :src="imageUrl" alt="Dialog Image" class="modal-image" />
|
||||||
<div class="modal-details">
|
<div class="modal-details">
|
||||||
@@ -18,6 +18,7 @@ defineProps<{
|
|||||||
imageUrl?: string | null | undefined
|
imageUrl?: string | null | undefined
|
||||||
title?: string
|
title?: string
|
||||||
subtitle?: string | null | undefined
|
subtitle?: string | null | undefined
|
||||||
|
dialogMaxWidth?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
defineEmits<{
|
defineEmits<{
|
||||||
|
|||||||
Reference in New Issue
Block a user