From 4404b650d136382097aba6f471b80cc96c4bd787 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 21 Jan 2023 20:06:29 +1100
Subject: Adjust coloring and spacing

---
 src/App.vue                      | 10 +++++-----
 src/components/BaseLine.vue      |  6 +++---
 src/components/HelpModal.vue     |  6 +++---
 src/components/InfoModal.vue     | 35 +++++++++++++++++++++++------------
 src/components/SearchModal.vue   |  4 +++-
 src/components/SettingsModal.vue | 24 ++++++++++++------------
 src/components/TimeLine.vue      | 19 ++++++++-----------
 src/store.ts                     | 26 ++++++++++++--------------
 8 files changed, 69 insertions(+), 61 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6369751..0eb07d8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,8 +2,8 @@
 <div class="absolute left-0 top-0 w-screen h-screen overflow-hidden flex flex-col">
 	<!-- Title bar -->
 	<div class="flex gap-2 p-2" :style="{backgroundColor: store.color.bgDark2}">
-		<h1 class="my-auto sm:ml-2 text-3xl sm:text-4xl hover:cursor-pointer" :style="{color: store.color.altDark}"
-			@click="onReset" title="Reset Timeline">Histplorer</h1>
+		<h1 class="my-auto ml-2 sm:ml-2 text-4xl hover:cursor-pointer" :style="{color: store.color.altDark}"
+			@click="onReset" title="Reset Timeline">Chrona</h1>
 		<div class="mx-auto"/> <!-- Spacer -->
 		<!-- Icons -->
 		<icon-button :size="45" :style="buttonStyles" @click="helpOpen = true" title="Show help info">
@@ -25,13 +25,13 @@
 	<div class="grow min-h-0 flex" :class="{'flex-col': !vert}"
 			:style="{backgroundColor: store.color.bg}" ref="contentAreaRef">
 		<time-line v-for="(state, idx) in timelines" :key="state.id"
-			:vert="vert" :initialState="state" :closeable="timelines.length > 1"
-			:eventTree="eventTree" :unitCountMaps="unitCountMaps" :current="idx == currentTimelineIdx && !modalOpen"
+			:vert="vert" :closeable="timelines.length > 1" :current="idx == currentTimelineIdx && !modalOpen"
+			:initialState="state" :eventTree="eventTree" :unitCountMaps="unitCountMaps"
 			:searchTarget="searchTargets[idx]" :reset="resetFlags[idx]"
 			class="grow basis-full min-h-0 outline outline-1"
 			@close="onTimelineClose(idx)" @state-chg="onTimelineChg($event, idx)" @event-display="onEventDisplay"
 			@info-click="onInfoClick" @pointerenter="currentTimelineIdx = idx"/>
-		<base-line v-if="store.showBaseLine" :vert="vert" :timelines="timelines" class='m-1 sm:m-2'/>
+		<base-line v-if="store.showBaseLine" :vert="vert" :timelines="timelines" class='m-2'/>
 	</div>
 
 	<!-- Modals -->
diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
index 53ab6bd..f8227dc 100644
--- a/src/components/BaseLine.vue
+++ b/src/components/BaseLine.vue
@@ -4,6 +4,7 @@
 	<!-- Time periods -->
 	<div v-for="p in periods" :key="p.label" class="relative" :style="periodStyles(p)">
 		<div :style="labelStyles">{{p.label}}</div>
+		<!-- Fade-out div for overflowing text -->
 		<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>
@@ -86,7 +87,7 @@ function periodStyles(period: Period){
 const labelStyles = computed((): Record<string, string> => ({
 	transform: props.vert ? 'rotate(90deg) translate(50%, 0)' : 'none',
 	whiteSpace: 'nowrap',
-	width: props.vert ? '40px' : 'auto',
+	width: props.vert ? '40px' : 'auto', // Chose vertical value to roughly match height in horizontal mode
 	padding: props.vert ? '0' : '4px',
 }));
 
@@ -140,11 +141,10 @@ function spanStyles(stateIdx: number){
 	return {
 		...styles,
 		transition: skipTransition.value ? 'none' : 'all 300ms ease-out',
-		color: 'black',
 		backgroundColor: store.color.alt,
 		opacity: 0.6,
 		borderWidth: '1px',
-		borderColor: store.color.bg,
+		borderColor: store.color.bgDark2,
 	};
 }
 </script>
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index ab1c73d..d0fc57a 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -4,7 +4,7 @@
 		w-[90%] max-w-[16cm] max-h-[80%] overflow-auto" :style="styles">
 		<close-icon @click.stop="onClose" ref="closeRef"
 			class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/>
-		<h1 class="text-center text-xl font-bold pt-2 pb-1">Help</h1>
+		<h1 class="text-center text-xl sm:text-2xl font-bold pt-2 pb-1">Help</h1>
 		<p class="px-4">
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
 		</p>
@@ -121,7 +121,7 @@ function onClose(evt: Event){
 // ========== For styles ==========
 
 const scClasses = 'border border-stone-400 rounded';
-const scSummaryClasses = 'relative text-center p-1 bg-stone-300 hover:brightness-90 hover:bg-yellow-200 md:p-2';
+const scSummaryClasses = 'relative text-center p-1 bg-stone-300 hover:brightness-90 hover:bg-amber-200 md:p-2';
 const downIconClasses = 'absolute w-6 h-6 my-auto mx-1 transition-transform duration-300';
 const downIconExpandedClasses = computed(() => downIconClasses + ' -rotate-90');
 const contentClasses = 'py-2 px-2 text-sm md:text-base';
@@ -132,6 +132,6 @@ const styles = computed(() => ({
 }));
 
 const aStyles = computed(() => ({
-	color: store.color.altDark,
+	color: store.color.altDark2,
 }));
 </script>
diff --git a/src/components/InfoModal.vue b/src/components/InfoModal.vue
index 6b32ed0..25a1d36 100644
--- a/src/components/InfoModal.vue
+++ b/src/components/InfoModal.vue
@@ -2,18 +2,23 @@
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose" ref="rootRef">
 	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
 		max-w-[80%] w-2/3 min-w-[8cm] md:w-[14cm] lg:w-[16cm] max-h-[80%]" :style="styles">
+		<!-- Close button -->
 		<close-icon @click.stop="onClose" ref="closeRef"
 			class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/>
-		<h1 class="text-center text-xl font-bold pt-2 pb-1 md:text-2xl md:pt-3 md:pb-1">
+
+		<!-- Title -->
+		<h1 class="text-center text-xl font-bold pt-2 pb-1 md:text-2xl md:pt-3">
 			{{event.title}}
 		</h1>
 
 		<!-- Time Display -->
-		<div class="text-center text-sm md:text-base">
-			Start: {{datesDisplayStrs[0]}}
-		</div>
-		<div v-if="datesDisplayStrs[1] != null" class="text-center text-sm md:text-base">
-			End: {{datesDisplayStrs[1]}}
+		<div class="flex justify-evenly pb-1 md:pb-2">
+			<div class="text-center text-sm md:text-base">
+				<span class="font-bold">Start:</span> {{datesDisplayStrs[0]}}
+			</div>
+			<div v-if="datesDisplayStrs[1] != null" class="text-center text-sm md:text-base">
+				<span class="font-bold">End:</span> {{datesDisplayStrs[1]}}
+			</div>
 		</div>
 
 		<!-- Main content -->
@@ -35,20 +40,20 @@
 						<ul class="rounded overflow-x-auto p-1"
 							:style="{backgroundColor: store.color.bg, color: store.color.text}">
 							<li>
-								<span :style="{color: store.color.altDark}">Source: </span>
+								<span :style="sourceLabelStyles">Source: </span>
 								<a :href="eventInfo.imgInfo.url" target="_blank">Link</a>
 								<external-link-icon class="inline-block w-3 h-3 ml-1"/>
 							</li>
 							<li class="whitespace-nowrap">
-								<span :style="{color: store.color.altDark}">Artist: </span>
+								<span :style="sourceLabelStyles">Artist: </span>
 								{{eventInfo.imgInfo.artist}}
 							</li>
 							<li v-if="eventInfo.imgInfo.credit != ''" class="whitespace-nowrap">
-								<span :style="{color: store.color.altDark}">Credits: </span>
+								<span :style="sourceLabelStyles">Credits: </span>
 								{{eventInfo.imgInfo.credit}}
 							</li>
 							<li>
-								<span :style="{color: store.color.altDark}">License: </span>
+								<span :style="sourceLabelStyles">License: </span>
 								<template v-if="licenseToUrl(eventInfo.imgInfo.license) != null">
 									<a :href="licenseToUrl(eventInfo.imgInfo.license)!" target="_blank">
 										{{eventInfo.imgInfo.license}}
@@ -58,12 +63,12 @@
 								<span v-else>{{eventInfo.imgInfo.license}}</span>
 							</li>
 							<li>
-								<span :style="{color: store.color.altDark}">Obtained via: </span>
+								<span :style="sourceLabelStyles">Obtained via: </span>
 								<a href="https://www.wikipedia.org/">Wikipedia</a>
 								<external-link-icon class="inline-block w-3 h-3 ml-1"/>
 							</li>
 							<li>
-								<span :style="{color: store.color.altDark}">Changes: </span>
+								<span :style="sourceLabelStyles">Changes: </span>
 								Cropped and resized
 							</li>
 						</ul>
@@ -171,4 +176,10 @@ const imgStyles = computed(() => {
 		borderRadius: store.borderRadius + 'px',
 	};
 });
+
+const sourceLabelStyles = computed(() => {
+	return {
+		color: store.color.altDark,
+	};
+});
 </script>
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 38aff76..25e262a 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -20,7 +20,9 @@
 				@click="resolveSearch(sugg)">
 				<div class="grow overflow-hidden whitespace-nowrap text-ellipsis">
 					<span>{{suggDisplayStrings[idx][0]}}</span>
-					<span class="font-bold text-yellow-600">{{suggDisplayStrings[idx][1]}}</span>
+					<span class="font-bold" :style="{color: store.color.altDark2}">
+						{{suggDisplayStrings[idx][1]}}
+					</span>
 					<span>{{suggDisplayStrings[idx][2]}}</span>
 				</div>
 				<info-icon class="hover:cursor-pointer my-auto w-5 h-5"
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 2c4a0df..bc4e980 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,15 +1,15 @@
 <template>
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose" ref="rootRef">
 	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
-		min-w-[8cm] max-w-[80%] max-h-[80%] overflow-auto" :style="styles">
+		min-w-[8cm] sm:min-w-[9cm] max-w-[80%] max-h-[80%] overflow-auto" :style="styles">
 		<close-icon @click.stop="onClose" ref="closeRef"
 			class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer" />
 		<h1 class="text-xl md:text-2xl font-bold text-center py-2" :class="borderBClasses">Settings</h1>
 
 		<!-- Categories -->
-		<div class="pb-2" :class="borderBClasses">
+		<div class="pb-2 sm:pb-3" :class="borderBClasses">
 			<h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Categories</h2>
-			<ul class="px-2 grid grid-cols-3">
+			<ul class="px-2 grid grid-cols-3 sm:px-4">
 				<!-- Row 1 -->
 				<li> <label> <input type="checkbox" v-model="store.ctgs.event" :disabled="lastCtg == 'event'"
 					@change="onSettingChg('ctgs.event')"/> Event </label> </li>
@@ -28,26 +28,26 @@
 		</div>
 
 		<!-- Display settings -->
-		<div class="pb-2" :class="borderBClasses">
+		<div class="pb-2 sm:pb-3" :class="borderBClasses">
 			<h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Display</h2>
-			<div class="grid grid-cols-2">
-				<div class="px-2 col-span-2">
+			<div class="grid grid-cols-2 px-2 sm:px-4">
+				<div class="col-span-2">
 					<label> <input type="checkbox" v-model="store.reqImgs"
 						@change="onSettingChg('reqImgs')"/> Only events with images </label>
 				</div>
-				<div class="px-2">
+				<div>
 					<label> <input type="checkbox" v-model="store.showMinorTicks"
 						@change="onSettingChg('showMinorTicks')"/> Minor tick text </label>
 				</div>
-				<div class="px-2">
+				<div>
 					<label> <input type="checkbox" v-model="store.showEventLines"
 						@change="onSettingChg('showEventLines')"/> Event lines </label>
 				</div>
-				<div class="px-2">
+				<div>
 					<label> <input type="checkbox" v-model="store.showEventCounts"
 						@change="onSettingChg('showEventCounts')"/> Event density </label>
 				</div>
-				<div class="px-2">
+				<div>
 					<label> <input type="checkbox" v-model="store.showBaseLine"
 						@change="onSettingChg('showBaseLine')"/> Baseline </label>
 				</div>
@@ -57,11 +57,11 @@
 		<!-- Input settings -->
 		<div v-if="store.touchDevice == false" class="pb-2" :class="borderBClasses">
 			<h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Input</h2>
-			<div class="px-2">
+			<div class="px-2 sm:px-4 pb-1">
 				<label> <input type="checkbox" v-model="store.disableShortcuts"
 					@change="onSettingChg('disableShortcuts')"/> Disable keyboard shortcuts </label>
 			</div>
-			<div class="grid grid-cols-[100px_minmax(0,1fr)_65px] gap-1 w-fit mx-auto px-2 md:px-3">
+			<div class="grid grid-cols-[100px_minmax(0,1fr)_30px] gap-1 w-fit mx-auto px-2 sm:px-4">
 				<!-- Row 1 -->
 				<label for="scrollRatio" @click="onResetOne('scrollRatio')" :class="rLabelClasses">
 					Scroll ratio
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 9cfa5cf..ee2afcd 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -7,15 +7,15 @@
 	<!-- Event density indicators -->
 	<template v-if="store.showEventCounts">
 		<div v-for="[tickIdx, count] in tickToCount.entries()" :key="ticks[tickIdx].date.toInt()"
-			:style="countDivStyles(tickIdx, count)" class="absolute animate-fadein"></div>
+			:style="densityIndStyles(tickIdx, count)" class="absolute animate-fadein"></div>
 	</template>
 
 	<!-- SVG area -->
 	<svg :viewBox="`0 0 ${width} ${height}`" class="relative z-10" ref="svgRef">
 		<defs>
 			<linearGradient id="eventLineGradient">
-				<stop offset="5%" stop-color="#a3691e"/>
-				<stop offset="95%" stop-color="gold"/>
+				<stop offset="5%" :stop-color="store.color.altDark3"/>
+				<stop offset="95%" :stop-color="store.color.altDark"/>
 			</linearGradient>
 		</defs>
 
@@ -68,8 +68,8 @@
 	</div>
 
 	<!-- Timeline position label -->
-	<div class="absolute top-1 left-2 z-20 text-lg" :class="[current ? 'text-yellow-300' : 'text-stone-50']"
-		style="text-shadow: 0px 0px 5px black">
+	<div class="absolute top-1 left-2 z-20 text-lg"
+		style="text-shadow: 0px 0px 5px black" :style="{color: current ? store.color.alt : store.color.text}">
 		{{timelinePosStr}}
 	</div>
 
@@ -1442,9 +1442,6 @@ const mainlineStyles = computed(() => {
 		transform: props.vert ?
 			`translate(${mainlineOffset.value}px, 0) rotate(90deg) scale(${availLen.value},1)` :
 			`translate(0, ${mainlineOffset.value}px) rotate(0deg) scale(${availLen.value},1)`,
-		transitionProperty: skipTransition.value ? 'none' : 'transform',
-		transitionDuration: store.transitionDuration + 'ms',
-		transitionTimingFunction: 'ease-out',
 	};
 });
 
@@ -1534,7 +1531,7 @@ function eventStyles(eventId: number){
 		height: h + 'px',
 		transitionProperty: (skipTransition.value || idsToSkipTransition.value.has(eventId)) ? 'none' : 'all',
 		transitionDuration: store.transitionDuration + 'ms',
-		transitionTimingFunction: 'ease-out',
+		transitionTimingFunction: 'linear',
 	};
 }
 
@@ -1560,11 +1557,11 @@ function eventLineStyles(eventId: number){
 		transform: `translate(${x}px, ${y}px) rotate(${a}deg)`,
 		transitionProperty: (skipTransition.value || idsToSkipTransition.value.has(eventId)) ? 'none' : 'transform',
 		transitionDuration: store.transitionDuration + 'ms',
-		transitionTimingFunction: 'ease-out',
+		transitionTimingFunction: 'linear',
 	};
 }
 
-function countDivStyles(tickIdx: number, count: number): Record<string,string> {
+function densityIndStyles(tickIdx: number, count: number): Record<string,string> {
 	let tick = ticks.value[tickIdx];
 	let numMajorUnits = getNumDisplayUnits();
 	let pxOffset = tick.offset / numMajorUnits * availLen.value;
diff --git a/src/store.ts b/src/store.ts
index 5bbf584..370f2b9 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -58,13 +58,12 @@ export type StoreState = {
 		textDark: string,
 		textDark2: string,
 		bg: string,
-		bgLight: string,
 		bgDark: string,
-		bgLight2: string,
 		bgDark2: string,
 		alt: string,
 		altDark: string,
 		altDark2: string,
+		altDark3: string,
 		altBg: string,
 		bgAlt: string,
 		bgAltDark: string,
@@ -78,20 +77,19 @@ function getDefaultState(): StoreState {
 	const breakpoint = getBreakpoint();
 	const color = {
 		text: '#fafaf9',      // stone-50
-		textDark: '#a8a29e',  // stone-400
-		textDark2: '#68625d', // darker version of stone-500
+		textDark: '#a8a29e',  // stone-400 (for major tick labels)
+		textDark2: '#68625d', // darker version of stone-500 (for minor tick labels)
 		bg: '#292524',        // stone-800
-		bgLight: '#44403c',   // stone-700
-		bgDark: '#1c1917',    // stone-900
-		bgLight2: '#57534e',  // stone-600
-		bgDark2: '#0e0c0b',   // darker version of stone-900
+		bgDark: '#1c1917',    // stone-900 (for no-img events)
+		bgDark2: '#0e0c0b',   // darker version of stone-900 (for title bar and baseline)
 		alt: '#fde047',       // yellow-300
-		altDark: '#eab308',   // yellow-500
-		altDark2: '#ca8a04',  // yellow-600
-		altBg: '#6a5e2e',
-		bgAlt: '#f5f5f4',     // stone-100
-		bgAltDark: '#d6d3d1', // stone-300
-		accent: '#2563eb',    // blue-600
+		altDark: '#eab308',   // yellow-500 (for title and event borders)
+		altDark2: '#ca8a04',  // yellow-600 (for buttons and link text)
+		altDark3: '#a3691e',  // darker version of yellow-700 (for dark end of event lines)
+		altBg: '#6a5e2e',     // 'grayish yellow' (for event density indicators)
+		bgAlt: '#f5f5f4',     // stone-100 (for modal content backgrounds)
+		bgAltDark: '#d6d3d1', // stone-300 (for search suggestion backgrounds)
+		accent: '#2563eb',    // blue-600 (for 'discovery' event borders)
 	};
 	return {
 		// Device info
-- 
cgit v1.2.3