diff options
| -rw-r--r-- | src/App.vue | 2 | ||||
| -rw-r--r-- | src/components/BaseLine.vue | 11 | ||||
| -rw-r--r-- | src/components/TimeLine.vue | 6 |
3 files changed, 13 insertions, 6 deletions
diff --git a/src/App.vue b/src/App.vue index f0eb9bb..e50c980 100644 --- a/src/App.vue +++ b/src/App.vue @@ -23,7 +23,7 @@ class="grow basis-full min-h-0 outline outline-1" @remove="onTimelineRemove(idx)" @state-chg="onTimelineChg($event, idx)" @event-req="onEventReq" @event-display="onEventDisplay($event, idx)"/> - <base-line :vert="vert" :timelines="timelines"/> + <base-line :vert="vert" :timelines="timelines" class='m-1 sm:m-2'/> </div> </div> </template> diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue index 0187b20..8730d90 100644 --- a/src/components/BaseLine.vue +++ b/src/components/BaseLine.vue @@ -1,6 +1,6 @@ <template> <div class="flex relative" :class="{'flex-col': vert}" - :style="{color: store.color.text, backgroundColor: store.color.bgDark}" ref="rootRef"> + :style="{color: store.color.text}" ref="rootRef"> <div v-for="p in periods" :key="p.label" :style="periodStyles(p)"> <div :style="labelStyles">{{p.label}}</div> </div> @@ -67,8 +67,10 @@ onMounted(() => resizeObserver.observe(rootRef.value as HTMLElement)); // Styles function periodStyles(period: Period){ return { + backgroundColor: store.color.bgDark2, outline: '1px solid gray', flexGrow: period.len, + overflow: 'hidden', }; } const labelStyles = computed((): Record<string, string> => ({ @@ -96,7 +98,10 @@ function spanStyles(state: TimelineState){ let lenFrac = (end.year - start.year) / (MAX_DATE.year - MIN_DATE.year); let startPx = Math.max(0, availLen * startFrac); // Prevent negatives due to end-padding let lenPx = Math.min(availLen - startPx, availLen * lenFrac); - lenPx = Math.max(1, lenPx); // Prevent zero length + if (lenPx < 3){ // Prevent zero length + lenPx = 3; + startPx -= Math.max(0, startPx + lenPx - availLen); + } // if (props.vert){ styles = { @@ -118,7 +123,7 @@ function spanStyles(state: TimelineState){ transition: skipTransition.value ? 'none' : 'all 300ms ease-out', color: 'black', backgroundColor: store.color.alt, - opacity: 0.3, + opacity: 0.4, }; } </script> diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index 7d37ca8..413c163 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -172,6 +172,7 @@ function initScale(){ // Initialises to smallest usable scale } } } + onStateChg(); } function getYearlyScale(startDate: HistDate, endDate: HistDate, availLen: number){ // Get the smallest yearly scale that divides a date range, without making ticks too close @@ -905,11 +906,12 @@ function onShiftWheel(evt: WheelEvent){ } // For bound-change signalling -watch(startDate, () => { +function onStateChg(){ emit('state-chg', new TimelineState( ID, startDate.value, endDate.value, startOffset.value, endOffset.value, scaleIdx.value )); -}); +} +watch(startDate, onStateChg); // For skipping transitions on startup (and on horz/vert swap) const skipTransition = ref(true); |