aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-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
6 files changed, 52 insertions, 42 deletions
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;
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 14:55:13 +0000