Index: style updates, Events: European dates, CV/works_list: grey year headers
This commit is contained in:
parent
a2bccf7871
commit
7bb9cf6dea
|
|
@ -381,8 +381,8 @@ useHead({
|
|||
|
||||
.year-header {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
color: #7F7F7F;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,10 +40,12 @@
|
|||
<div class="px-5">
|
||||
<p class="text-lg">lectures</p>
|
||||
|
||||
<div class="leading-tight py-2 ml-3 text-sm" v-for="item in lectures">
|
||||
<div v-for="yearGroup in lecturesByYear" :key="yearGroup.year">
|
||||
<p class="text-sm font-semibold mt-4 text-[#7F7F7F]">{{ yearGroup.year }}</p>
|
||||
<div class="leading-tight py-2 ml-3 text-sm" v-for="item in yearGroup.talks">
|
||||
<div class="gap-1">
|
||||
<div>
|
||||
{{ item.formatted_date }}: {{item.location}}
|
||||
{{item.location}}
|
||||
<div v-for="talk in item.talks" class="ml-4 text-[#7F7F7F]">
|
||||
{{ talk.title }}
|
||||
</div>
|
||||
|
|
@ -52,6 +54,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
|
@ -60,13 +63,13 @@
|
|||
transform: (events) => {
|
||||
for (const event of events) {
|
||||
let date = new Date(event.start_date)
|
||||
event.formatted_date = ("0" + (date.getMonth() + 1)).slice(-2) + "." + ("0" + date.getDate()).slice(-2) + "." + date.getFullYear()
|
||||
event.formatted_date = ("0" + date.getDate()).slice(-2) + "." + ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear()
|
||||
}
|
||||
return events.sort((a,b) => new Date(b.start_date) - new Date(a.start_date))
|
||||
}
|
||||
})
|
||||
|
||||
const { data: lectures } = await useFetch('/api/talks', {
|
||||
const { data: talksData } = await useFetch('/api/talks', {
|
||||
transform: (events) => {
|
||||
for (const event of events) {
|
||||
let date = new Date(event.date)
|
||||
|
|
@ -85,6 +88,24 @@
|
|||
}
|
||||
})
|
||||
|
||||
const lecturesByYear = computed(() => {
|
||||
if (!talksData.value) return []
|
||||
|
||||
const byYear = {}
|
||||
for (const talk of talksData.value) {
|
||||
const year = talk.date ? talk.date.getFullYear() : 'Unknown'
|
||||
if (!byYear[year]) byYear[year] = []
|
||||
byYear[year].push(talk)
|
||||
}
|
||||
|
||||
return Object.keys(byYear)
|
||||
.sort((a, b) => b - a)
|
||||
.map(year => {
|
||||
const talks = byYear[year].sort((a, b) => new Date(b.date) - new Date(a.date))
|
||||
return { year, talks }
|
||||
})
|
||||
})
|
||||
|
||||
useHead({
|
||||
titleTemplate: 'Michael Winter - Events - Performances and Lectures'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
<p class="text-lg">pieces</p>
|
||||
|
||||
<div class="py-2 ml-3" v-for="item in works">
|
||||
<p class="font-thin">{{ item.year }}</p>
|
||||
<p class="text-sm font-semibold mt-4 text-[#7F7F7F]">{{ item.year }}</p>
|
||||
<div class="leading-tight py-1 ml-3" v-for="work in item.works">
|
||||
<div class="grid grid-cols-[65%,30%] gap-1 font-thin items-start">
|
||||
<div class="italic text-sm">{{ work.title }}</div>
|
||||
<div class="grid grid-cols-[65%,30%] gap-1 items-start">
|
||||
<span v-html="work.title" class="italic text-sm"></span>
|
||||
<div class="inline-flex mt-[-4px]">
|
||||
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ function formatDate(dateStr) {
|
|||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
if (isNaN(date)) return dateStr
|
||||
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
|
||||
return ("0" + date.getDate()).slice(-2) + "." + ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear()
|
||||
}
|
||||
|
||||
useHead({
|
||||
|
|
@ -134,13 +134,13 @@ useHead({
|
|||
|
||||
.cv-section h4 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #222;
|
||||
color: #7F7F7F;
|
||||
}
|
||||
|
||||
.intro {
|
||||
|
|
|
|||
Loading…
Reference in a new issue