Merge branch 'frontend-update' into backend-update

2 files changed, 21 insertions, 18 deletions

diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
index 8730d90..6d31287 100644
--- a/src/components/BaseLine.vue
+++ b/src/components/BaseLine.vue
@@ -5,9 +5,7 @@
 		<div :style="labelStyles">{{p.label}}</div>
 	</div>
 	<TransitionGroup name="fade" v-if="mounted">
-		<div v-for="state in timelines" :key="state.id" class="absolute" :style="spanStyles(state)">
-			{{state.id}}
-		</div>
+		<div v-for="(state, idx) in timelines" :key="state.id" class="absolute" :style="spanStyles(idx)"></div>
 	</TransitionGroup>
 </div>
 </template>
@@ -79,9 +77,11 @@ const labelStyles = computed((): Record<string, string> => ({
 	width: props.vert ? '40px' : 'auto',
 	padding: props.vert ? '0' : '4px',
 }));
-function spanStyles(state: TimelineState){
+function spanStyles(stateIdx: number){
+	const state = props.timelines[stateIdx];
 	let styles: Record<string,string>;
-	let availLen = props.vert ? height.value : width.value;
+	const availLen = props.vert ? height.value : width.value;
+	const availBreadth = props.vert ? width.value : height.value;
 	// Determine start/end date
 	if (state.startOffset == null || state.endOffset == null || state.scaleIdx == null){
 		return {display: 'none'};
@@ -102,19 +102,22 @@ function spanStyles(state: TimelineState){
 		lenPx = 3;
 		startPx -= Math.max(0, startPx + lenPx - availLen);
 	}
+	// Account for multiple timelines
+	const breadth = availBreadth / props.timelines.length;
+	const sidePx = breadth * stateIdx;
 	//
 	if (props.vert){
 		styles = {
 			top: startPx + 'px',
-			left: '0',
+			left: sidePx + 'px',
 			height: lenPx + 'px',
-			width: '100%',
+			width: breadth + 'px',
 		}
 	} else {
 		styles = {
-			top: '0',
+			top: sidePx + 'px',
 			left: startPx + 'px',
-			height: '100%',
+			height: breadth + 'px',
 			width: lenPx + 'px',
 		}
 	}
@@ -123,7 +126,9 @@ function spanStyles(state: TimelineState){
 		transition: skipTransition.value ? 'none' : 'all 300ms ease-out',
 		color: 'black',
 		backgroundColor: store.color.alt,
-		opacity: 0.4,
+		opacity: 0.6,
+		borderWidth: '1px',
+		borderColor: store.color.bg,
 	};
 }
 </script>
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index c869aa3..b9e8197 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -48,7 +48,7 @@
 	<!-- Events -->
 	<div v-for="id in idToPos.keys()" :key="id" class="absolute animate-fadein z-20" :style="eventStyles(id)">
 		<!-- Image -->
-		<div class="rounded-full border border-yellow-500" :style="eventImgStyles(id)"></div>
+		<div class="rounded-full" :style="eventImgStyles(id)"></div>
 		<!-- Label -->
 		<div class="text-center text-stone-100 text-sm whitespace-nowrap text-ellipsis overflow-hidden">
 			{{idToEvent.get(id)!.title}}
@@ -102,7 +102,6 @@ const width = ref(0);
 const height = ref(0);
 const availLen = computed(() => props.vert ? height.value : width.value);
 const availBreadth = computed(() => props.vert ? width.value : height.value);
-const prevVert = ref(props.vert); // Previous 'vert' value, used for skipping transitions on horz/vert swap
 const mounted = ref(false);
 onMounted(() => {
 	let rootEl = rootRef.value!;
@@ -118,11 +117,8 @@ const resizeObserver = new ResizeObserver((entries) => {
 			width.value = WRITING_MODE_HORZ ? boxSize.inlineSize : boxSize.blockSize;
 			height.value = WRITING_MODE_HORZ ? boxSize.blockSize : boxSize.inlineSize;
 			// Check for horz/vert swap
-			if (props.vert != prevVert.value){
-				skipTransition.value = true;
-				setTimeout(() => {skipTransition.value = false}, 100); // Note: Using nextTick() doesn't work
-				prevVert.value = props.vert;
-			}
+			skipTransition.value = true;
+			setTimeout(() => {skipTransition.value = false}, 100); // Note: Using nextTick() doesn't work
 		}
 	}
 });
@@ -1104,7 +1100,7 @@ function onShiftWheel(evt: WheelEvent){
 // For bound-change signalling
 function onStateChg(){
 	emit('state-chg', new TimelineState(
-		ID, firstDate.value, lastDate.value, startOffset.value, endOffset.value, scaleIdx.value
+		ID, startDate.value, endDate.value, startOffset.value, endOffset.value, scaleIdx.value
 	));
 }
 watch(firstDate, onStateChg);
@@ -1172,6 +1168,8 @@ function eventImgStyles(eventId: number){
 		height: store.eventImgSz + 'px',
 		backgroundImage: `url(${getImagePath(event.imgId)})`,
 		backgroundSize: 'cover',
+		borderColor: event.ctg == 'discovery' ? store.color.alt2 : store.color.altDark,
+		borderWidth: '1px',
 	};
 }
 function eventLineStyles(eventId: number){