Skip to content

Commit

Permalink
add bg and preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@huiua
huiua committed Nov 30, 2023
1 parent aa3a019 commit 8053321
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 63 deletions.
Binary file added public/images/bg_arch.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 48 additions & 29 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
<template>
<main class="px-28">
<div class="snap-end">
<div class="flex justify-center text-center pt-3">
<h2 class="max-w-[500px] my-6">{{ TITLE }}</h2>
<main class="overscroll-none" style="background-image: url('./images/bg_arch.png'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover;">
<div class="px-28 bg-white bg-opacity-80 pb-4 backdrop-blur-sm">
<div class="snap-end">
<div class="flex justify-center text-center pt-3">
<h2 class="max-w-[500px] my-6">{{ TITLE }}</h2>
</div>
<div v-for="line in INTRO_TEXT" class="max-w-[750px] text-center text-base italic leading-5 mb-3 mx-auto">{{ line }}</div>
</div>
<div v-for="line in INTRO_TEXT" class="max-w-[750px] text-center italic text-slate-500 text-base leading-5 mb-3 mx-auto">{{ line }}</div>
</div>

<!-- Timeline section -->
<div class="relative">
<div class="bg-white text-center mt-8 pb-4 mb-24">
<!-- Timeline section -->
<div class="text-center mt-8">
<div class="text-lg font-bold rounded border-2 border-brand-midblue text-brand-midblue hover:text-white hover:bg-brand-midblue cursor-pointer mx-auto w-fit px-4 py-2" @click="scrollToSection">Scroll / Click to Begin</div>
</div>
<div :id="'era-'+ era.id" v-for="era in ERA_DATA" class="text-center z-10" :style="{paddingBottom: era.gapAfter * 50 + 'px'}">
<div v-if="!era.isSubEra" class="text-center bg-white">
<i class="fas fa-triangle rotate-180 text-gray-200 text-lg align-top mb-auto -mt-1.5" />
<div class="relative mt-4">
<div class="absolute left-1/2 top-0 -translate-x-1/2 w-1 h-full bg-brand-midblue" />
<div class="text-center pt-12">
<i class="fas fa-triangle rotate-180 text-brand-midblue text-lg align-top mb-auto translate-y-3" />
</div>
</div>
<div v-if="!era.isSubEra" class="bg-white pb-6 pt-2 snap-start">
</div>
<div :id="'era-'+ era.id" v-for="era in ERA_DATA" class="text-center z-10 relative">
<div v-if="!era.isSubEra" class="pb-6 snap-start mt-6">
<div class="w-full bg-brand-darkblue text-white py-3 px-6">
<div class="flex justify-between">
<div class="text-2xl font-bold my-2">{{ era.name }}</div>
Expand All @@ -25,44 +28,60 @@
<p v-for='paragraph in era.summary' v-html="paragraph" class="text-left italic text-base text-slate-200 leading-[22px] mb-3" />
</div>
</div>
<div v-else class="snap-start">
<hr class="border-2 border-dashed border-gray-200" />
<div v-else class="snap-start pt-12">
<hr class="border-2 border-dashed border-brand-midblue" />
<div class="w-1/2 py-3 px-6">
<div class="text-right text-2xl font-bold my-2">{{ era.name }}</div>
<p v-for='paragraph in era.summary' class="text-right italic text-base leading-5 mb-3">{{ paragraph }}</p>
<p v-for='paragraph in era.summary' v-html="paragraph" class="text-right italic text-base leading-5 mb-3" />
</div>
</div>

<!-- Inserted video for stolen generations only -->
<div v-for="(year, index) in YEAR_DATA.filter(y => y.eraId === era.id)" class="pb-1">
<div v-if="year.standalone" :id="`year-${era.id}-${index}`" class="w-4/5 mx-auto pb-2 bg-white snap-start">
<div v-if="year.standalone" :id="`year-${era.id}-${index}`" class="w-4/5 mx-auto mb-2 snap-start">
<div class="relative pb-[56.25%] h-0">
<iframe title="YouTube video player" src="https://www.youtube.com/embed/iQMZZ8ng7oI" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" class="absolute w-[100%] h-[100%] top-0 left-0"></iframe>
</div>
</div>
<div v-else :id="`year-${era.id}-${index}`" class="relative flex w-1/2 py-1 snap-start" :class="index%2 ? 'flex-row-reverse justify-start ml-[50%] pl-2' : 'text-right justify-end ml-[50%] -translate-x-full pr-2'" :style="{marginTop: year.gap * 10 + 'px'}">
<div class="w-full bg-brand-midblue bg-opacity-10 rounded-xl p-3" :class="index%2 ? 'text-left' : 'text-right'">
<div class="flex text-2xl" :class="index%2 ? '' : 'flex-row-reverse'">
<div class="font-bold text-brand-midblue">{{ year.yearText }}</div>
<i v-if="year.media" class="fad text-xl text-brand-gold my-auto mx-2 cursor-pointer" :class="`fa-${year.media.type}`" @click="openMediaModal(year.media)" />
<div class="w-full bg-white rounded-xl">
<div class="w-full bg-brand-midblue bg-opacity-30 rounded-xl p-3" :class="index%2 ? 'text-left' : 'text-right'">
<div class="flex text-2xl relative" :class="index%2 ? '' : 'flex-row-reverse'">
<div class="font-bold text-brand-midblue">{{ year.yearText }}</div>
<div v-if="year.media" class="absolute -top-16 w-24 h-24 z-30 cursor-pointer" :class="index%2 ? 'right-0' : 'left-0'" @click="openMediaModal(year.media)">
<div class="w-full h-full relative group">
<img :src="year.media.type === 'image' ? year.media.src : year.media.thumbnail" alt="" class="w-full h-full object-cover rounded-lg">
<div class="absolute top-0 left-0 w-full h-full opacity-0 group-hover:opacity-100">
<div class="flex justify-center bg-black bg-opacity-50 w-full h-full rounded-lg">
<i class="my-auto text-white opacity-80 text-3xl" :class="year.media.type === 'image' ? 'far fa-search-plus' : 'fas fa-play-circle'" />
</div>
</div>
<div class="absolute opacity-100 group-hover:opacity-0 bottom-0 w-6 h-6 bg-white" :class="index%2 ? 'left-0 rounded-tr-2xl' : 'right-0 rounded-tl-2xl'">
<div class="flex w-full h-full bg-brand-midblue bg-opacity-30" :class="index%2 ? 'rounded-tr-2xl justify-start' : 'rounded-tl-2xl justify-end'">
<i class="text-sm mt-auto" :class="`fa-${year.media.type} ${year.media.type === 'image' ? 'fas text-brand-midblue' : 'fab text-brand-red'}`" />
</div>
</div>
</div>
</div>
</div>
<p v-for="line in year.details" v-html="line" class="text-base leading-5 mt-2" />
</div>
<p v-for="line in year.details" v-html="line" class="text-base leading-5 mt-2" />
</div>
<div class="h-0.5 w-[100px] bg-black my-auto mx-2"></div>
<div class="absolute top-1/2 -translate-y-1/2 text-center text-xl" :class="index%2 ? '-left-[10px]' : '-right-[10px]'">
<i class="fad fa-circle" /></div>
</div>
</div>
</div>

<div class="absolute left-1/2 top-0 -z-10 -translate-x-1/2 w-1 h-full bg-gray-200" />
<div class="text-center bg-white">
<i class="fas fa-triangle rotate-180 text-gray-200 text-lg align-top mb-auto -mt-1.5" />
<div class="absolute left-1/2 top-0 -z-10 -translate-x-1/2 w-1 h-full bg-brand-midblue" />
<div v-if="era.gapAfter" class="text-center" :style="{paddingTop: era.gapAfter * 50 + 'px'}">
<i class="fas fa-triangle rotate-180 text-brand-midblue text-lg align-top mb-auto translate-y-3" />
</div>
</div>
</div>

<!-- side nav -->
<div class="fixed flex flex-col justify-between top-[10%] left-0 w-24 px-2 py-4 rounded-xl text-center text-white font-bold text-base bg-black bg-opacity-70">
<div class="fixed flex flex-col justify-between top-[10%] left-0 w-24 px-2 py-4 rounded-xl text-center text-white font-bold text-base bg-black bg-opacity-60">
<div class="mb-1">BCE 65,000</div>
<div class="relative h-[40vh] my-1">
<input id="VerticalSlider" v-model="currentSection" type="range" min="0" :max="mappedSections.length - 1" step="1" class="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 left-1/2 w-[40vh] h-1 bg-gray-100 rounded-lg appearance-none cursor-pointer rotate-90" @change="scrollToSection">
Expand Down Expand Up @@ -96,7 +115,7 @@
</header>
<div class="flex justify-center">
<img v-if="currentMedia && currentMedia.type === 'image'" :src="currentMedia.src" alt="" class="w-10/12 max-w-max max-h-[70vh]">
<div v-if="currentMedia && currentMedia.type === 'play-circle'" class="relative pb-[56.25%] h-0 w-[100%]">
<div v-if="currentMedia && currentMedia.type === 'youtube'" class="relative pb-[56.25%] h-0 w-[100%]">
<iframe title="YouTube video player" :src="`https://www.youtube.com/embed/${currentMedia.src}`" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" class="absolute w-[95%] h-[95%] top-0 left-1/2 -translate-x-1/2" />
</div>
</div>
Expand Down
84 changes: 50 additions & 34 deletions src/assets/data.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const TITLE = 'A Timeline of Colonisation of the First Nations of Australia'
export const TITLE = 'A timeline of colonisation of the First Nations of Australia'

export const INTRO_TEXT = [
'The process of British colonisation, dispossession, and genocide against the Aboriginal and Torres Strait Islanders was long and complex. This timeline is an attempt to introduce readers to a general overview of colonisation and is not intended to be comprehensive or definitive.'
Expand All @@ -7,7 +7,7 @@ export const INTRO_TEXT = [
export const ERA_DATA = [
{
id: 'bce',
name: 'Aboriginal Land',
name: 'Aboriginal land',
yearText: 'BCE 65,000 - 1770',
isSubEra: false,
gapAfter: 3,
Expand All @@ -18,10 +18,10 @@ export const ERA_DATA = [
},
{
id: 'invasion',
name: 'Invasion and Colonisation',
name: 'Invasion and colonisation',
yearText: '1770-1890',
isSubEra: false,
gapAfter: 1,
gapAfter: 0,
summary: [
'There were over 250 distinct Aboriginal and Torres Strait Islander language groups when Lieutenant James Cook first arrived on the continent.',
'Early colonisers could not understand the Aboriginal peoples’ sustainable, harmonious connection to the land. This justified the settlers’ wrongful concept of ‘terra nullius’, or ‘land belonging to nobody’ -- land that was ripe for colonisation.',
Expand All @@ -36,12 +36,13 @@ export const ERA_DATA = [
gapAfter: 1,
summary: [
'\'Frontier Wars\' refer to all the massacres, wars, and instances of resistance beginning from the arrival of colonists and ending roughly around 1934.',
'Below is a map of all the recorded colonial frontier massacres in Australia in this period.'
'Below is a map of all the recorded colonial frontier massacres in Australia in this period.',
'[<a href="https://c21ch.newcastle.edu.au/colonialmassacres/map.php" class="text-brand-midblue underline hover:text-brand-darkblue" target="_blank" rel="noopener noreferrer">Map</a>]'
]
},
{
id: 'segregation',
name: '"Protection" and Segregation',
name: '"Protection" and segregation',
yearText: '1860-1900',
isSubEra: false,
gapAfter: 1,
Expand Down Expand Up @@ -77,7 +78,7 @@ export const ERA_DATA = [
},
{
id: 'activism',
name: 'Activism and Integration',
name: 'Activism and integration',
yearText: '1960s-1990s',
isSubEra: false,
gapAfter: 1,
Expand All @@ -88,7 +89,7 @@ export const ERA_DATA = [
},
{
id: 'reconciliation',
name: 'Reconciliation and Self-Determination',
name: 'Reconciliation and self-determination',
yearText: '1991-present',
isSubEra: false,
gapAfter: 1,
Expand All @@ -103,7 +104,7 @@ export const ERA_DATA = [
export const YEAR_DATA = [
{
eraId: 'bce',
gap: 2,
gap: 4,
yearText: 'BCE 65,000',
name: '',
details: ['Earliest known evidence of Aboriginal civilisation.'],
Expand All @@ -121,7 +122,12 @@ export const YEAR_DATA = [
yearText: '1770',
name: '',
details: ['James Cook arrives at Botany Bay and claims possession of Australia for Britain.'],
media: { type: 'play-circle', src: 'q_cOJgpk4ko?start=85&end=120', text: [] }
media: {
type: 'youtube',
src: 'q_cOJgpk4ko?start=85&end=120',
thumbnail: 'https://i.ytimg.com/vi/q_cOJgpk4ko/maxresdefault.jpg',
text: []
}

},
{
Expand All @@ -148,21 +154,6 @@ export const YEAR_DATA = [
}
},

{
eraId: 'wars',
gap: 3,
yearText: '1824-1830',
name: '',
details: ['Tasmanian \'Black War\'. Aboriginal population forcibly located to Flinders Island, where most die due to poor conditions.']
},
{
eraId: 'wars',
gap: -5,
yearText: '1838',
name: '',
details: ['Myall Creek massacre. 28 Aboriginal people, mostly women and children, are murdered by white stockmen.']
},

{
eraId: 'segregation',
gap: 3,
Expand Down Expand Up @@ -236,12 +227,17 @@ export const YEAR_DATA = [
yearText: '',
name: '',
details: [],
media: { type: 'play-circle', src: 'ao7GOymvhsw', text: [] }
media: {
type: 'youtube',
src: 'iQMZZ8ng7oI',
thumbnail: 'https://i.ytimg.com/vi/iQMZZ8ng7oI/maxresdefault.jpg',
text: []
}
},

{
eraId: 'activism',
gap: 3,
gap: 4,
yearText: '1966',
name: '',
details: [
Expand All @@ -250,18 +246,23 @@ export const YEAR_DATA = [
'“Vincent Lingiari, I solemnly hand to you these deeds as proof, in Australian law, that these lands belong to the Gurindji people".',
'This moment has been celebrated through song, most recently by Electric Fields.'
],
media: { type: 'play-circle', src: 'ao7GOymvhsw', text: [] }
media: {
type: 'youtube',
src: 'ao7GOymvhsw',
thumbnail: 'https://i.ytimg.com/vi/ao7GOymvhsw/maxresdefault.jpg',
text: []
}
},
{
eraId: 'activism',
gap: -16,
gap: -18,
yearText: '1967',
name: '',
details: ['Over 90% of Australians vote YES in referendum to amend the Constitution. Aboriginal and Torres Strait Islander people included in Census for the first time.']
},
{
eraId: 'activism',
gap: 3,
gap: 10,
yearText: '1985',
name: '',
details: ['Uluru handed back to the Anangu people after decades of lobbying.'],
Expand All @@ -282,7 +283,7 @@ export const YEAR_DATA = [

{
eraId: 'reconciliation',
gap: 3,
gap: 4,
yearText: '1992',
name: '',
details: ['High Court of Australia\'s Mabo decision formally recognises native title and renders terra nullius a legal fiction.'],
Expand All @@ -299,23 +300,38 @@ export const YEAR_DATA = [
yearText: '1997',
name: '',
details: ['\'Bringing Them Home\' report released by the National Inquiry into the Separation of Aboriginal and Torres Strait Island Children from Their Families. Most of its 54 recommendations are ignored.'],
media: { type: 'play-circle', src: 'JWwCQ21hT7U', text: [] }
media: {
type: 'youtube',
src: 'JWwCQ21hT7U',
thumbnail: 'https://i.ytimg.com/vi/JWwCQ21hT7U/maxresdefault.jpg',
text: []
}
},
{
eraId: 'reconciliation',
gap: 3,
yearText: '2008',
name: '',
details: ['Prime Minister Kevin Rudd formally apologises on behalf of the Government for creating the Stolen Generations.'],
media: { type: 'play-circle', src: 'RThkO3XBThs', text: [] }
media: {
type: 'youtube',
src: 'RThkO3XBThs',
thumbnail: 'https://i.ytimg.com/vi/RThkO3XBThs/hqdefault.jpg',
text: []
}
},
{
eraId: 'reconciliation',
gap: 1,
yearText: '2017',
name: '',
details: ['Uluru Statement from the Heart born from a series of regional dialogues held across the country.'],
media: { type: 'play-circle', src: 'YJrHStMY1Gg', text: [] }
media: {
type: 'youtube',
src: 'YJrHStMY1Gg',
thumbnail: 'https://i.ytimg.com/vi/YJrHStMY1Gg/maxresdefault.jpg',
text: []
}
},
{
eraId: 'reconciliation',
Expand Down

0 comments on commit 8053321

Please sign in to comment.