diff options
| author | Terry Truong <terry06890@gmail.com> | 2023-01-14 14:31:14 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2023-01-14 14:31:14 +1100 |
| commit | 05dd46c2f36787e71f4a3a3d7ac0febf3c6f9309 (patch) | |
| tree | 455532064b6d2374d3c16a684c6ed87a5bdb6d51 /src/components | |
| parent | 21b5e5ee7bb933fa8235430aa63382b70dbe3d1b (diff) | |
Extend info modal date display
Show combined descriptions for certain (imprecise) starts and ends.
Conditionally display start and end separately.
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/InfoModal.vue | 18 |
1 files changed, 11 insertions, 7 deletions
diff --git a/src/components/InfoModal.vue b/src/components/InfoModal.vue index d2ac425..0b46be0 100644 --- a/src/components/InfoModal.vue +++ b/src/components/InfoModal.vue @@ -7,7 +7,14 @@ <h1 class="text-center text-xl font-bold pt-2 pb-1 md:text-2xl md:pt-3 md:pb-1"> {{event.title}} </h1> - <p class="text-center text-sm md:text-base">{{datesDisplayStr}}</p> + <!-- Time Display --> + <div class="text-center text-sm md:text-base"> + {{datesDisplayStrs.length == 1 ? 'Time' : 'Start'}}: {{datesDisplayStrs[0]}} + </div> + <div v-if="datesDisplayStrs.length > 1" class="text-center text-sm md:text-base"> + End: {{datesDisplayStrs[1]}} + </div> + <!-- Main content --> <div class="border-t border-stone-400 p-2 md:p-3"> <div class="mt-1 mr-2 md:mb-2 md:mr-4 md:float-left"> <!-- Image --> @@ -75,7 +82,7 @@ import SCollapsible from './SCollapsible.vue'; import CloseIcon from './icon/CloseIcon.vue'; import DownIcon from './icon/DownIcon.vue'; import ExternalLinkIcon from './icon/ExternalLinkIcon.vue'; -import {EventInfo, boundedDateToStr, getImagePath} from '../lib'; +import {EventInfo, eventDatesToStrings, getImagePath} from '../lib'; import {useStore} from '../store'; // Refs @@ -93,11 +100,8 @@ const emit = defineEmits(['close']); // For data display const event = computed(() => props.eventInfo.event) -const datesDisplayStr = computed(() => { - const startStr = boundedDateToStr(event.value.start, event.value.startUpper); - const endStr = event.value.end == null ? null : boundedDateToStr(event.value.end, event.value.endUpper); - return 'Start: ' + startStr + (endStr == null ? '' : ', End: ' + endStr); -}); +const datesDisplayStrs = computed( + () => eventDatesToStrings(event.value.start, event.value.startUpper, event.value.end, event.value.endUpper)); function licenseToUrl(license: string){ license = license.toLowerCase().replaceAll('-', ' '); if (license == 'cc0'){ |