aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.vue10
-rw-r--r--src/components/BaseLine.vue6
-rw-r--r--src/components/HelpModal.vue6
-rw-r--r--src/components/InfoModal.vue35
-rw-r--r--src/components/SearchModal.vue4
-rw-r--r--src/components/SettingsModal.vue24
-rw-r--r--src/components/TimeLine.vue19
-rw-r--r--src/store.ts26
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
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 14:59:30 +0000