summaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/app/views/graph/graph.css1
-rw-r--r--frontend/app/views/page/page.css1
-rw-r--r--frontend/app/views/tile/forms/tile.form.hyperlink.js5
-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
8 files changed, 127 insertions, 11 deletions
diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
index 280ce58..c796d3f 100644
--- a/frontend/app/views/graph/graph.css
+++ b/frontend/app/views/graph/graph.css
@@ -279,6 +279,7 @@ button.box_corner:hover {
.cursorList .cursors img {
max-width: 50px;
max-height: 50px;
+ user-select: none;
}
/* Graph handles */
diff --git a/frontend/app/views/page/page.css b/frontend/app/views/page/page.css
index 8e6e156..1db3930 100644
--- a/frontend/app/views/page/page.css
+++ b/frontend/app/views/page/page.css
@@ -178,6 +178,7 @@
/* sample cursor */
.sampleCursor {
+ cursor: pointer;
max-width: 50px;
max-height: 50px;
}
diff --git a/frontend/app/views/tile/forms/tile.form.hyperlink.js b/frontend/app/views/tile/forms/tile.form.hyperlink.js
index 4d3e0b5..b9fb038 100644
--- a/frontend/app/views/tile/forms/tile.form.hyperlink.js
+++ b/frontend/app/views/tile/forms/tile.form.hyperlink.js
@@ -11,6 +11,9 @@ import {
NO_POPUP, OPEN_POPUP_LINK, CLOSE_POPUP_LINK
} from './tile.constants'
+import { dispatch } from 'app/store'
+import { toggleCursorList } from 'app/views/page/page.actions'
+
export default function TileHyperlinkForm({ tile, pageList, popupList, cursors, parent }) {
const isExternalLink = tile.target_page_id === EXTERNAL_LINK
// const isPopupLink = (
@@ -43,7 +46,7 @@ export default function TileHyperlinkForm({ tile, pageList, popupList, cursors,
/>
</div>
{cursor && (
- <img src={cursor.url} className="sampleCursor" />
+ <img src={cursor.url} className="sampleCursor" onClick={() => toggleCursorList(true)(dispatch)} />
)}
{isExternalLink && (
<div>
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 18:25:17 +0000