From fd2c30fea2ef89babdd96afca87920bdbd83aa96 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 2 Apr 2021 18:03:47 +0200 Subject: map on essay --- frontend/site/projects/museum/constants.js | 24 + frontend/site/projects/museum/icons.js | 680 +++++++++++++++++++++++++- frontend/site/projects/museum/views/essay.css | 32 +- frontend/site/projects/museum/views/essay.js | 23 + 4 files changed, 750 insertions(+), 9 deletions(-) (limited to 'frontend/site/projects') diff --git a/frontend/site/projects/museum/constants.js b/frontend/site/projects/museum/constants.js index 84ec482..4a91c3a 100644 --- a/frontend/site/projects/museum/constants.js +++ b/frontend/site/projects/museum/constants.js @@ -3,31 +3,55 @@ export const ARTISTS = { name: "Nora Al-Badri", location: "C-Base, Berlin, Germany", start: "nora-1", + globePosition: { + top: "15.1%", + left: "47.7%", + }, }, leite: { name: "Juliana Cerqueria Leite", location: "Santa Ifigênia, São Paolo, Brazil", start: "leite-chapter-1", + globePosition: { + top: "59%", + left: "32%", + }, }, foreshew: { name: "Nicole Foreshew", location: "Australia", start: "foreshew-1", + globePosition: { + top: "68%", + left: "83%", + }, }, stankievech: { name: "Charles Stankievech", location: "Canada", start: "stankievech-1", + globePosition: { + top: "15%", + left: "22%", + }, }, nilthamrong: { name: "Jakrawal Nilthamrong", location: "Thailand", start: "nilthamrong-home", + globePosition: { + top: "39%", + left: "72%", + }, }, opoku: { name: "Zohra Opoku", location: "Mortuary (Unfinished), Accra, Ghana", start: "opoku-1-hail-to-you", + globePosition: { + top: "44%", + left: "44.4%", + }, } } diff --git a/frontend/site/projects/museum/icons.js b/frontend/site/projects/museum/icons.js index 210a371..fbaa1b0 100644 --- a/frontend/site/projects/museum/icons.js +++ b/frontend/site/projects/museum/icons.js @@ -1,20 +1,19 @@ import React from 'react' export const ArrowLeft = ( - + ) export const ArrowRight = ( - + ) - export const BerlinIcon = ( - + @@ -78,7 +77,7 @@ export const BerlinIcon = ( ) export const HatjeCantz = ( - + @@ -93,9 +92,678 @@ export const HatjeCantz = ( ) export const ATB = ( - + ) + + +export const Globe = ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) diff --git a/frontend/site/projects/museum/views/essay.css b/frontend/site/projects/museum/views/essay.css index 1f5248a..e648471 100644 --- a/frontend/site/projects/museum/views/essay.css +++ b/frontend/site/projects/museum/views/essay.css @@ -3,8 +3,34 @@ justify-content: flex-start; } .page-essay .page-subtitle { - margin: 0rem 0 2rem 0; + margin: 0rem 0 2vw 0; } .page-essay p { - margin: 0 0 1rem 0; -} \ No newline at end of file + margin: 0 0 2vw 0; + font-size: 1.7vw; + line-height: 1.4; +} +.globe { + width: 100%; + margin-bottom: 2vw; +} +.globe svg { + width: 100%; +} +.globe path { + stroke: rgb(255, 121, 13); + stroke-miterlimit: 10; + stroke-linecap: round; + stroke-linejoin: round; + fill: transparent +} +.globe .globe-image { + position: relative; +} +.globe .globe-image .number { + position: absolute; + font-family: 'Druk Wide', sans-serif; + text-transform: uppercase; + font-size: 2vw; + cursor: pointer; +} diff --git a/frontend/site/projects/museum/views/essay.js b/frontend/site/projects/museum/views/essay.js index 589a859..b0bd996 100644 --- a/frontend/site/projects/museum/views/essay.js +++ b/frontend/site/projects/museum/views/essay.js @@ -3,6 +3,11 @@ import actions from 'site/actions' import "./essay.css" +import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants" +import { Globe } from "site/projects/museum/icons" + +import { history } from "site/store" + export default class Artists extends Component { constructor(props) { super(props) @@ -28,6 +33,7 @@ export default class Artists extends Component {

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis mauris tristique diam venenatis ultricies ut sit amet justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec efficitur tortor elit, non suscipit turpis commodo ut. Phasellus imperdiet nunc sit amet nulla ultricies maximus. Vivamus bibendum eu nunc ut ultricies. Quisque tempor turpis sem, ac ullamcorper mi congue et. Sed nec interdum sapien. Pellentesque laoreet mauris in orci fermentum, ut consectetur elit fermentum. Nam nec suscipit neque. In aliquet vitae ligula in mattis. Donec iaculis massa sed augue eleifend imperdiet. Fusce tempor euismod facilisis. Etiam in lobortis ante, eu varius enim. Mauris mattis suscipit faucibus. Sed posuere augue eget tortor pharetra, eget fermentum lacus accumsan. Mauris viverra vulputate magna, non blandit odio congue vel.

+

Pellentesque sem lacus, maximus ac efficitur id, mollis convallis eros. Sed faucibus, velit vel consectetur dignissim, leo lectus consectetur odio, et congue nunc massa id metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nibh tortor, aliquam sed massa eu, tincidunt dignissim libero. Morbi ullamcorper in lorem sit amet ultrices. Suspendisse nec ante a ex eleifend condimentum. Curabitur porta sem sed diam lacinia, id egestas augue feugiat. Aenean non odio facilisis, consectetur mauris quis, ultricies lorem. Maecenas bibendum risus sapien, in semper tellus dignissim fringilla. Suspendisse tempor ligula augue, nec rutrum mauris rutrum quis. Pellentesque tristique dolor nec lectus imperdiet convallis. Phasellus eleifend ligula id nunc cursus fermentum. Etiam pellentesque libero at vestibulum placerat. Aenean vitae condimentum turpis. Curabitur vel leo et ipsum ultricies gravida vel eget lacus.

@@ -69,3 +75,20 @@ export default class Artists extends Component { ) } } + +const ArtistGlobe = () => ( +
+
+ {Globe} + {ARTIST_ORDER.map((key, index) => { + const artist = ARTISTS[key] + console.log(artist.name) + return ( +
history.push(`/last-museum/${artist.start}`)}> + {index + 1} +
+ ) + })} +
+
+) -- cgit v1.2.3-70-g09d2