diff options
| author | Terry Truong <terry06890@gmail.com> | 2023-01-14 11:26:10 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2023-01-14 11:26:10 +1100 |
| commit | 21b5e5ee7bb933fa8235430aa63382b70dbe3d1b (patch) | |
| tree | e73cd119db59ce7a885273d455675d008cfd252d /src/components | |
| parent | 3029a2f866b240856518cfa944b9e00ef37455db (diff) | |
Improve date display in info modal
Make desc field of EventInfo optional
Don't require desc in type=info result
Fix image not showing in info modal
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/InfoModal.vue | 13 | ||||
| -rw-r--r-- | src/components/TimeLine.vue | 4 |
2 files changed, 10 insertions, 7 deletions
diff --git a/src/components/InfoModal.vue b/src/components/InfoModal.vue index 3e03187..d2ac425 100644 --- a/src/components/InfoModal.vue +++ b/src/components/InfoModal.vue @@ -57,7 +57,8 @@ </template> </s-collapsible> </div> - <div>{{eventInfo.desc}}</div> + <div v-if="eventInfo.desc != null">{{eventInfo.desc}}</div> + <div v-else class="text-center text-stone-500 text-sm">(No description found)</div> <div class="text-sm text-right"> <a :href="'https://en.wikipedia.org/?curid=' + eventInfo.wikiId" target="_blank">From Wikipedia</a> (via <a :href="'https://www.wikidata.org/wiki/Q' + event.id" target="_blank">Wikidata</a>) @@ -74,7 +75,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} from '../lib'; +import {EventInfo, boundedDateToStr, getImagePath} from '../lib'; import {useStore} from '../store'; // Refs @@ -93,7 +94,9 @@ const emit = defineEmits(['close']); // For data display const event = computed(() => props.eventInfo.event) const datesDisplayStr = computed(() => { - return event.value.start.toString() + (event.value.end == null ? '' : ' to ' + event.value.end.toString()) + 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); }); function licenseToUrl(license: string){ license = license.toLowerCase().replaceAll('-', ' '); @@ -143,9 +146,9 @@ const imgStyles = computed(() => { return { width: '200px', height: '200px', - //backgroundImage: + backgroundImage: `url(${getImagePath(event.value.imgId)})`, backgroundColor: store.color.bgDark, - //backgroundSize: 'cover', + backgroundSize: 'cover', borderRadius: store.borderRadius + 'px', }; }); diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index 6d0f632..8aeb883 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -43,7 +43,7 @@ x="0" y="0" :text-anchor="vert ? 'start' : 'middle'" dominant-baseline="middle" :fill="store.color.textDark" :style="tickLabelStyles(tick)" class="text-sm animate-fadein cursor-default select-none"> - {{tick.date.toDisplayString()}} + {{tick.date.toTickString()}} </text> </template> </svg> @@ -1289,7 +1289,7 @@ function eventImgStyles(eventId: number){ width: store.eventImgSz + 'px', height: store.eventImgSz + 'px', backgroundImage: `url(${getImagePath(event.imgId)})`, - backgroundColor: 'black', + backgroundColor: store.color.bgDark, backgroundSize: 'cover', borderColor: color, borderWidth: '1px', |