diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-12-18 22:24:00 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-12-18 22:24:00 +1100 |
| commit | 6a21aa07c0bd6f601206cc12e659ebd6319364b6 (patch) | |
| tree | 64f8ffa61d526583f7e636c9eb6edf190fbd18fb /src/components/BaseLine.vue | |
| parent | 5db4ecc36e7409dcb1a91879ed6510bc74f6caa4 (diff) | |
Make BaseLine spans more visible
Increase min-length to 3px, add margin around BaseLine
Fix non-visibility on startup
Diffstat (limited to 'src/components/BaseLine.vue')
| -rw-r--r-- | src/components/BaseLine.vue | 11 |
1 files changed, 8 insertions, 3 deletions
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> |