Adjust frontend coding style

1 files changed, 19 insertions, 8 deletions

diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
index f3a9e93..3cca6d7 100644
--- a/src/components/BaseLine.vue
+++ b/src/components/BaseLine.vue
@@ -1,11 +1,13 @@
 <template>
 <div class="flex relative" :class="{'flex-col': vert}"
 	:style="{color: store.color.text}" ref="rootRef">
+	<!-- Time periods -->
 	<div v-for="p in periods" :key="p.label" class="relative" :style="periodStyles(p)">
 		<div :style="labelStyles">{{p.label}}</div>
 		<div v-if="props.vert" class="absolute bottom-0 w-full h-6"
 			style="background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1))"></div>
 	</div>
+	<!-- Timeline spans -->
 	<TransitionGroup name="fade" v-if="mounted">
 		<div v-for="(state, idx) in timelines" :key="state.id" class="absolute" :style="spanStyles(idx)"></div>
 	</TransitionGroup>
@@ -17,20 +19,19 @@ import {ref, computed, onMounted, PropType, Ref} from 'vue';
 import {MIN_DATE, MAX_DATE, SCALES, MONTH_SCALE, DAY_SCALE, WRITING_MODE_HORZ, TimelineState, stepDate} from '../lib';
 import {useStore} from '../store';
 
-// Refs
 const rootRef = ref(null as HTMLElement | null);
 
-// Global store
 const store = useStore();
 
-// Props
 const props = defineProps({
 	vert: {type: Boolean, required: true},
 	timelines: {type: Object as PropType<TimelineState[]>, required: true},
 });
 
-// Static time periods
+// ========== Static time periods ==========
+
 type Period = {label: string, len: number};
+
 const periods: Ref<Period[]> = ref([
 	{label: 'Pre Hadean', len: 8},
 	{label: 'Hadean', len: 1},
@@ -39,20 +40,24 @@ const periods: Ref<Period[]> = ref([
 	{label: 'Phanerozoic', len: 0.5},
 ]);
 
-// For skipping transitions on startup
+// ========== For skipping transitions on startup ==========
+
 const skipTransition = ref(true);
 onMounted(() => setTimeout(() => {skipTransition.value = false}, 100));
 
-// For size and mount-status tracking
+// ========== For size and mount-status tracking ==========
+
 const width = ref(0);
 const height = ref(0);
 const mounted = ref(false);
+
 onMounted(() => {
 	let rootEl = rootRef.value!;
 	width.value = rootEl.offsetWidth;
 	height.value = rootEl.offsetHeight;
 	mounted.value = true;
 })
+
 const resizeObserver = new ResizeObserver((entries) => {
 	for (const entry of entries){
 		if (entry.contentBoxSize){
@@ -64,7 +69,8 @@ const resizeObserver = new ResizeObserver((entries) => {
 });
 onMounted(() => resizeObserver.observe(rootRef.value as HTMLElement));
 
-// Styles
+// ========== For styles ==========
+
 function periodStyles(period: Period){
 	return {
 		backgroundColor: store.color.bgDark2,
@@ -73,17 +79,20 @@ function periodStyles(period: Period){
 		overflow: 'hidden',
 	};
 }
+
 const labelStyles = computed((): Record<string, string> => ({
 	transform: props.vert ? 'rotate(90deg) translate(50%, 0)' : 'none',
 	whiteSpace: 'nowrap',
 	width: props.vert ? '40px' : 'auto',
 	padding: props.vert ? '0' : '4px',
 }));
+
 function spanStyles(stateIdx: number){
 	const state = props.timelines[stateIdx];
 	let styles: Record<string,string>;
 	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'};
@@ -95,6 +104,7 @@ function spanStyles(stateIdx: number){
 		stepDate(start, 1, {forward: false, count: Math.floor(state.startOffset * scale), inplace: true});
 		stepDate(end, 1, {count: Math.floor(state.endOffset * scale), inplace: true});
 	}
+
 	// Determine positions in full timeline (only uses year information)
 	let startFrac = (start.year - MIN_DATE.year) / (MAX_DATE.year - MIN_DATE.year);
 	let lenFrac = (end.year - start.year) / (MAX_DATE.year - MIN_DATE.year);
@@ -104,10 +114,11 @@ function spanStyles(stateIdx: number){
 		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',