diff options
| author | Terry Truong <terry06890@gmail.com> | 2023-01-25 18:41:15 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2023-01-25 18:41:15 +1100 |
| commit | 56abab8390a50b026433793befc67587c08d5a21 (patch) | |
| tree | 398a8d3d1cab60b13d6be5509f78df19388278fd /src/components/TimeLine.vue | |
| parent | 60db779891bee02dc209bd98d1bc409f043fa6ec (diff) | |
Tweak styling
Highlight current timeline when there are multiple
Make 'From Wikipedia' info-modal label grayer
make horizontal tick labels closer to mainline
Diffstat (limited to 'src/components/TimeLine.vue')
| -rw-r--r-- | src/components/TimeLine.vue | 5 |
1 files changed, 3 insertions, 2 deletions
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index 18ae107..e767074 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -2,7 +2,8 @@ <div class="relative overflow-hidden z-0" ref="rootRef" @pointerdown="onPointerDown" @pointermove="onPointerMove" @pointerup="onPointerUp" @pointercancel="onPointerUp" @pointerout="onPointerUp" @pointerleave="onPointerUp" - @wheel.exact="onWheel" @wheel.shift.exact="onShiftWheel"> + @wheel.exact="onWheel" @wheel.shift.exact="onShiftWheel" + :style="{backgroundColor: !current && closeable ? 'rgba(0,0,0,0.3)' : store.color.bg}"> <!-- Event density indicators --> <template v-if="store.showEventCounts"> @@ -229,7 +230,7 @@ function initScale(){ // ========== Tick data ========== -const tickLabelMargin = computed(() => vert.value ? 20 : 30); // Distance from label to mainline +const tickLabelMargin = computed(() => vert.value ? 20 : 18); // Distance from label to mainline const tickLabelSpan = computed( // Leftover breadth in half-mainline-area for tick label () => store.mainlineBreadth - store.largeTickLen / 2 - tickLabelMargin.value); |