summaryrefslogtreecommitdiff
path: root/frontend/site
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/site')
-rw-r--r--frontend/site/projects/museum/views/artists.css19
-rw-r--r--frontend/site/projects/museum/views/artists.js11
-rw-r--r--frontend/site/projects/museum/views/counter.css22
-rw-r--r--frontend/site/projects/museum/views/counter.js68
-rw-r--r--frontend/site/projects/museum/views/nav.overlay.js11
5 files changed, 121 insertions, 10 deletions
diff --git a/frontend/site/projects/museum/views/artists.css b/frontend/site/projects/museum/views/artists.css
index fb3a863..a98d619 100644
--- a/frontend/site/projects/museum/views/artists.css
+++ b/frontend/site/projects/museum/views/artists.css
@@ -10,7 +10,7 @@
text-transform: uppercase;
font-style: italic;
font-size: 2.5vh;
- margin: 1.5vh 0 0.5vh;
+ margin: 1.5vh 0 0vh;
cursor: default;
user-select: none;
}
@@ -19,7 +19,6 @@
font-family: 'Druk';
font-style: italic;
text-transform: uppercase;
- font-size: 14.5vh;
text-align: center;
line-height: 0.9;
white-space: nowrap;
@@ -27,10 +26,21 @@
user-select: none;
transition: color 0.1s;
}
+.page-artists .artist-big-name {
+ font-size: 15.5vh;
+}
.page-artists .artist-big-name:hover {
/*color: white;*/
text-shadow: 0 0 5px #FF790D;
}
+.page-artists .artist-list {
+ display: flex;
+ justify-content: space-around;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ padding-bottom: 1rem;
+}
/* artist sub-pages */
@@ -64,12 +74,13 @@
}
.page-artists .artist-detail-name {
+ font-size: 14.5vh;
position: absolute;
top: 2vh;
left: 0;
width: 100%;
text-shadow: 0 0 5px #FF790D;
- pointer-events: none;
+ cursor: pointer;
}
.page-artists .nav-arrow {
transform: translateZ(0);
@@ -109,7 +120,7 @@
background-position: center right;
width: 50vw;
height: 100vh;
- background: blue;
+ background: #222222;
pointer-events: none;
}
.page-artists .artist-location {
diff --git a/frontend/site/projects/museum/views/artists.js b/frontend/site/projects/museum/views/artists.js
index 989d3f7..20345d0 100644
--- a/frontend/site/projects/museum/views/artists.js
+++ b/frontend/site/projects/museum/views/artists.js
@@ -9,7 +9,7 @@ import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
export default class Artists extends Component {
state = {
currentIndex: 0,
- detail: true,
+ detail: false,
}
constructor(props) {
@@ -49,7 +49,7 @@ export default class Artists extends Component {
{ARTIST_ORDER.map((key, index) => {
const artist = ARTISTS[key]
return (
- <div key={key} className="artist-big-name" onClick={() => this.showArtist(currentIndex)}>
+ <div key={key} className="artist-big-name" onClick={() => this.showArtist(index)}>
{artist.name}
</div>
)
@@ -61,7 +61,8 @@ export default class Artists extends Component {
artist={ARTISTS[key]}
key={key}
index={index}
- isCurrent={currentIndex === index}
+ isCurrent={detail && currentIndex === index}
+ onClose={() => this.setState({ detail: false })}
/>
))}
<div className="nav-arrow arrow-left" onClick={this.previousArtist}>{ArrowLeft}</div>
@@ -72,7 +73,7 @@ export default class Artists extends Component {
}
}
-const ArtistDetail = ({ artist, index, isCurrent }) => {
+const ArtistDetail = ({ artist, index, isCurrent, onClose }) => {
return (
<div className={isCurrent ? "artist-detail visible" : "artist-detail"}>
<div className="artist-right" style={{ backgroundImage: `url(${artist.image})`}} />
@@ -81,7 +82,7 @@ const ArtistDetail = ({ artist, index, isCurrent }) => {
<span dangerouslySetInnerHTML={{ __html: artist.bio }} />
</div>
</div>
- <div className="artist-detail-name">
+ <div className="artist-detail-name" onClick={onClose}>
{artist.name}
</div>
<div className="artist-location">{artist.location}</div>
diff --git a/frontend/site/projects/museum/views/counter.css b/frontend/site/projects/museum/views/counter.css
new file mode 100644
index 0000000..5b182f3
--- /dev/null
+++ b/frontend/site/projects/museum/views/counter.css
@@ -0,0 +1,22 @@
+.counter {
+ position: absolute;
+ top: 0;
+ left: 25%;
+ width: 50%;
+ text-align: center;
+
+ font-family: 'Druk Wide', sans-serif;
+ text-transform: uppercase;
+ font-size: 2.5vh;
+ margin: 0.5vh 0 0vh;
+ cursor: default;
+ user-select: none;
+ color: #FF790D;
+}
+.counter .description {
+ opacity: 0;
+ transition: opacity 0.2s;
+}
+.counter:hover .description {
+ opacity: 1;
+} \ No newline at end of file
diff --git a/frontend/site/projects/museum/views/counter.js b/frontend/site/projects/museum/views/counter.js
new file mode 100644
index 0000000..270e61f
--- /dev/null
+++ b/frontend/site/projects/museum/views/counter.js
@@ -0,0 +1,68 @@
+import React, { Component, createRef } from 'react'
+
+import "./counter.css"
+
+export default class Counter extends Component {
+ constructor(props) {
+ super(props)
+ this.ref = createRef()
+ this.update = this.update.bind(this)
+ }
+
+ componentDidMount() {
+ this.update()
+ }
+
+ componentWillUnmount() {
+ clearTimeout(this.timeout)
+ }
+
+ update() {
+ this.timeout = setTimeout(this.update, 250)
+ const population = getPopulation()
+ if (this.ref.current) {
+ this.ref.current.innerHTML = commatize(population)
+ }
+ }
+
+ render() {
+ return (
+ <div className="counter">
+ <div className="countValue" ref={this.ref} />
+ <div className="description">
+ CURRENT GLOBAL POPULATION
+ </div>
+ </div>
+ )
+ }
+}
+
+const aprilFirst = new Date(2021, 3, 1)
+
+function getPopulation() {
+ const popAprilFirst = 7855013899
+ const popChangePerDay = 219251.934066
+ const secondsDelta = (new Date() - aprilFirst) / 86400000 // april = month 3
+ const population = popAprilFirst + secondsDelta * popChangePerDay
+ return Math.round(population)
+}
+
+const commatize = (n, radix) => {
+ radix = radix || -1
+ var nums = [], i, counter = 0, r = Math.floor
+ if (radix !== -1 && n > radix) {
+ n /= radix
+ nums.unshift(r((n * 10) % 10))
+ nums.unshift(".")
+ }
+ do {
+ i = r(n % 10)
+ n = r(n / 10)
+ counter += 1
+ if (n && ! (counter % 3))
+ { i = ',' + r(i) }
+ nums.unshift(i)
+ }
+ while (n)
+ return nums.join("")
+}
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index 6cc3e7b..01050b0 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -8,11 +8,14 @@ import { ARTISTS, ARTIST_ORDER, PROJECT_PAGE_SET } from "site/projects/museum/co
import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
import { history } from "site/store"
+import Counter from './counter'
+
export default class NavOverlay extends Component {
state = {
showHome: false,
showFooter: false,
showArtist: false,
+ showCounter: false,
artist: {},
}
@@ -44,6 +47,7 @@ export default class NavOverlay extends Component {
showHome: false,
showFooter: true,
showArtist: false,
+ showCounter: false,
currentArtist: null,
artist: {},
})
@@ -53,6 +57,7 @@ export default class NavOverlay extends Component {
showHome: true,
showFooter: false,
showArtist: false,
+ showCounter: false,
})
}
else if (pathkey in ARTISTS) {
@@ -60,12 +65,15 @@ export default class NavOverlay extends Component {
showHome: true,
showFooter: true,
showArtist: true,
+ showCounter: pathkey === 'nilthamrong',
currentArtist: pathkey,
artist: ARTISTS[pathkey],
})
} else {
this.setState({
+ showHome: false,
showFooter: false,
+ showCounter: false,
showArtist: false,
currentArtist: null,
artist: {},
@@ -96,7 +104,7 @@ export default class NavOverlay extends Component {
}
render() {
- const { showArtist, showHome, showFooter, artist } = this.state
+ const { showArtist, showHome, showCounter, showFooter, artist } = this.state
return (
<div className="museum-nav">
{showHome && (
@@ -104,6 +112,7 @@ export default class NavOverlay extends Component {
Home
</div>
)}
+ {showCounter && <Counter />}
{showFooter && (
showArtist ? (
<div className="footer with-artist">
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 15:21:36 +0000