From 3a97d69b84fa762313c0af3779e031c2234afbaf Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 22 Apr 2021 19:52:03 +0200 Subject: replace the marquee --- frontend/site/app/revisions.js | 14 +++++++++ frontend/site/app/roadblock.css | 20 +++++++++++++ frontend/site/index.js | 2 -- frontend/site/projects/museum/app/revisions.js | 24 ++++++++++++++++ frontend/site/projects/museum/app/roadblock.css | 10 ++++--- frontend/site/projects/museum/constants.js | 4 +++ frontend/site/projects/museum/views/marquee.css | 4 +-- frontend/site/projects/museum/views/marquee.js | 18 ++++++++---- frontend/site/projects/museum/views/mobile.css | 33 ++++++++++++++++++++++ frontend/site/projects/museum/views/nav.overlay.js | 33 +++++++++++++++++----- frontend/site/site.css | 20 ------------- frontend/site/site/site.reducer.js | 6 ++-- package.json | 1 + yarn.lock | 5 ++++ 14 files changed, 152 insertions(+), 42 deletions(-) create mode 100644 frontend/site/app/revisions.js create mode 100644 frontend/site/app/roadblock.css create mode 100644 frontend/site/projects/museum/app/revisions.js delete mode 100644 frontend/site/site.css diff --git a/frontend/site/app/revisions.js b/frontend/site/app/revisions.js new file mode 100644 index 0000000..8d3b16e --- /dev/null +++ b/frontend/site/app/revisions.js @@ -0,0 +1,14 @@ +/** + * In case you need to, you can make last-minute modifications to the + * graph before it's loaded. This might be preferable in case there + * are certain edits that need to be applied conditionally. + */ + +import { isMobile } from "app/utils" + +export default function reviseGraph (graph) { + if (isMobile) { + // + } + return graph +} diff --git a/frontend/site/app/roadblock.css b/frontend/site/app/roadblock.css new file mode 100644 index 0000000..0597514 --- /dev/null +++ b/frontend/site/app/roadblock.css @@ -0,0 +1,20 @@ +.roadblock { + position: fixed; + top: 0; left: 0; + display: flex; + width: 100vw; + height: 100vh; + justify-content: center; + align-items: center; + cursor: pointer; +} +.roadblock div { + display: inline-block; + text-align: center; +} +.roadblock h2 { + font-style: italic; +} +.roadblock button { + padding: 0.5rem; +} diff --git a/frontend/site/index.js b/frontend/site/index.js index 6d80528..a945659 100644 --- a/frontend/site/index.js +++ b/frontend/site/index.js @@ -2,8 +2,6 @@ import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' -import './site.css' - import App from './APP_TARGET' import { store, history } from 'site/store' diff --git a/frontend/site/projects/museum/app/revisions.js b/frontend/site/projects/museum/app/revisions.js new file mode 100644 index 0000000..9aa66a7 --- /dev/null +++ b/frontend/site/projects/museum/app/revisions.js @@ -0,0 +1,24 @@ + +import { isMobile } from "app/utils" + +export default function reviseSite (graph) { + console.log(graph) + if (!isMobile) { + return graph + } + graph.pages['/last-museum/home'].tiles = ( + graph.pages['/last-museum/home'].tiles + .filter(tile => tile.type !== 'text') + ) + Object.keys(graph.pages).forEach(path => { + const page = graph.pages[path] + if (path.match("opoku")) { + page.tiles.forEach(tile => { + if (tile.type === 'image') { + tile.settings.scale /= 2 + } + }) + } + }) + return graph +} diff --git a/frontend/site/projects/museum/app/roadblock.css b/frontend/site/projects/museum/app/roadblock.css index 73102af..6b2cf40 100644 --- a/frontend/site/projects/museum/app/roadblock.css +++ b/frontend/site/projects/museum/app/roadblock.css @@ -1,15 +1,17 @@ .roadblock { - background: #111; - color: #ff790d; - position: absolute; - top: 0; left: 0; + position: fixed; + top: 0; + left: 0; width: 100vw; height: 100vh; + background: #111; + color: #ff790d; padding: 1rem 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; + z-index: 2; } .roadblock-byline { font-family: "Druk Wide"; diff --git a/frontend/site/projects/museum/constants.js b/frontend/site/projects/museum/constants.js index c14fa25..4d983f0 100644 --- a/frontend/site/projects/museum/constants.js +++ b/frontend/site/projects/museum/constants.js @@ -378,6 +378,10 @@ export const MARQUEES = { 'opoku-1-hail-to-you': { en: 'Hail to you, lords of truth, free from wrongdoing, who exist forever and forever. I have reached you because I am an akh with my forms. I am powerful through my magic. Going forth by day / Papyrus of Sobekmose / Book of the Dead ...', de: 'Seid gegrüßt, ihr Herren der Wahrheit, frei von Unrecht, die ihr für immer und ewig existiert. Ich habe euch erreicht, weil ich mit meinen Formen ein akh bin. Ich bin mächtig durch meine Magie. Weitergehen bei Tag / Papyrus des Sobekmose / Totenbuch ...', + }, + 'opoku-9-to-me-belongs-yesterday': { + en: 'To me belongs yesterday which is pregnant with tomorrow. Its births will rise on another occasion of his. (I am) the one whose ba is secret, who made the gods, who gives offerings to the protector of the west (side) of the sky, the steering rudder of the east, lord of two faces whose rays are seen, lord of the elevations who goes forth at twilight, manifestations … / Solar Text. Coming forth by day and not preventing the BA / Papyrus of Sobekmose / Book of the Dead', + de: 'To me belongs yesterday which is pregnant with tomorrow. Its births will rise on another occasion of his. (I am) the one whose ba is secret, who made the gods, who gives offerings to the protector of the west (side) of the sky, the steering rudder of the east, lord of two faces whose rays are seen, lord of the elevations who goes forth at twilight, manifestations … / Solar Text. Coming forth by day and not preventing the BA / Papyrus of Sobekmose / Book of the Dead', } } diff --git a/frontend/site/projects/museum/views/marquee.css b/frontend/site/projects/museum/views/marquee.css index 2fcfd5a..adec4b5 100644 --- a/frontend/site/projects/museum/views/marquee.css +++ b/frontend/site/projects/museum/views/marquee.css @@ -8,8 +8,8 @@ .marquee-text { white-space: nowrap; padding-left: 100vw; - width: 6500px; + width: 8500px; font-family: "Druk Wide", sans-serif; - font-size: 30px; + font-size: 26px; color: #fff; } diff --git a/frontend/site/projects/museum/views/marquee.js b/frontend/site/projects/museum/views/marquee.js index 6cd2818..bd47b39 100644 --- a/frontend/site/projects/museum/views/marquee.js +++ b/frontend/site/projects/museum/views/marquee.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import Marquee from "react-fast-marquee" +import Marquee from "react-smooth-marquee" import "./marquee.css" @@ -36,6 +36,17 @@ export default class MarqueeContainer extends Component { if (!this.state.message) return null return (
+ + + {this.state.message[language]} + + +
+ ) + } +} + +/* - - ) - } -} +*/ diff --git a/frontend/site/projects/museum/views/mobile.css b/frontend/site/projects/museum/views/mobile.css index b195911..ab84f1b 100644 --- a/frontend/site/projects/museum/views/mobile.css +++ b/frontend/site/projects/museum/views/mobile.css @@ -1,3 +1,23 @@ +.home-footer { + position: absolute; + bottom: 0; + left: 0; + width: 96%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; +} +.home-footer a { + display: inline-block; + padding: 0.375rem ​1rem; + color: #ff790d; + font-family: "Druk Wide", sans-serif; + font-size: 1.2rem; + font-style: italic; + text-decoration: none; +} + @media only screen and (max-device-height: 500px) { /* site container */ .container { @@ -66,6 +86,9 @@ } /* artist pages */ + .page-artists .artist-detail-name { + text-shadow: 0 0 3px #ff790d; + } .page-artists .artist-location { bottom: 0.5rem; } @@ -85,6 +108,7 @@ bottom: 0; background: #111111; padding: 0.75rem; + font-size: 0.675rem; margin: 0; } @@ -102,6 +126,7 @@ font-size: 1.1rem; } .page-essay.page-artists .page-title { + text-shadow: 0 0 3px #000; margin: 1rem 0; } @@ -152,4 +177,12 @@ .text-overlay { padding: 10vw; } + + /* zohra */ + .marquee-text { + font-size: 12px; + } + .marquee-container { + bottom: 3rem; + } } \ No newline at end of file diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js index 6d06fc3..3e3b8dc 100644 --- a/frontend/site/projects/museum/views/nav.overlay.js +++ b/frontend/site/projects/museum/views/nav.overlay.js @@ -1,21 +1,23 @@ import React, { Component } from 'react' import { connect } from 'react-redux' +import { Link } from 'react-router-dom' import actions from 'site/actions' import "./nav.css" -import TextOverlay from './text.overlay' -import JakrawalLinks from './jakrawal.links' -import TitlesOverlay from './titles.overlay' -import Flash from './flash' -import Marquee from './marquee' -import LandscapeWarning from './landscape.warning' import { ARTISTS, ARTIST_ORDER, PROJECT_PAGE_SET, BACK_TO_KW } from "site/projects/museum/constants" import { ArrowLeft, ArrowRight } from "site/projects/museum/icons" import MuteButton from "site/audio/mute.button" import { history } from "site/store" +import { isMobile } from "app/utils" +import LandscapeWarning from './landscape.warning' +import TextOverlay from './text.overlay' +import JakrawalLinks from './jakrawal.links' +import TitlesOverlay from './titles.overlay' +import Flash from './flash' +import Marquee from './marquee' import Counter from './counter' class NavOverlay extends Component { @@ -27,6 +29,7 @@ class NavOverlay extends Component { showCounter: false, showMuteButton: false, isProjectPage: false, + showHomeFooterLinks: false, showClose: false, orangeClose: false, artist: {}, @@ -68,6 +71,7 @@ class NavOverlay extends Component { currentArtist: null, showMuteButton: false, isProjectPage: false, + showHomeFooterLinks: false, showClose: true, orangeClose: false, artist: {}, @@ -83,6 +87,7 @@ class NavOverlay extends Component { currentArtist: null, showMuteButton: true, isProjectPage: false, + showHomeFooterLinks: isMobile, showClose: true, orangeClose: true, artist: {}, @@ -96,6 +101,7 @@ class NavOverlay extends Component { showArtist: false, showCounter: false, showMuteButton: false, + showHomeFooterLinks: false, isProjectPage: true, showClose: false, orangeClose: false, @@ -110,6 +116,7 @@ class NavOverlay extends Component { showArtist: true, showMuteButton: true, isProjectPage: false, + showHomeFooterLinks: false, showClose: false, orangeClose: false, showCounter: pathkey === 'nilthamrong' && path_chapter !== "home", @@ -125,6 +132,7 @@ class NavOverlay extends Component { showArtist: false, showMuteButton: false, isProjectPage: false, + showHomeFooterLinks: false, showClose: false, orangeClose: false, currentArtist: null, @@ -172,7 +180,11 @@ class NavOverlay extends Component { render() { const { language } = this.props - const { showArtist, showHome, showLanguage, showMuteButton, showCounter, showFooter, showClose, orangeClose, isProjectPage, artist } = this.state + const { + showHome, showLanguage, showMuteButton, + showFooter, showHomeFooterLinks, showClose, orangeClose, + showArtist, isProjectPage, artist, showCounter + } = this.state return (
@@ -193,6 +205,13 @@ class NavOverlay extends Component {
) )} + {showHomeFooterLinks && ( +
+ CREDITS + ARTISTS + TEXTS +
+ )}
diff --git a/frontend/site/site.css b/frontend/site/site.css deleted file mode 100644 index 0597514..0000000 --- a/frontend/site/site.css +++ /dev/null @@ -1,20 +0,0 @@ -.roadblock { - position: fixed; - top: 0; left: 0; - display: flex; - width: 100vw; - height: 100vh; - justify-content: center; - align-items: center; - cursor: pointer; -} -.roadblock div { - display: inline-block; - text-align: center; -} -.roadblock h2 { - font-style: italic; -} -.roadblock button { - padding: 0.5rem; -} diff --git a/frontend/site/site/site.reducer.js b/frontend/site/site/site.reducer.js index faf7aae..aceb6d5 100644 --- a/frontend/site/site/site.reducer.js +++ b/frontend/site/site/site.reducer.js @@ -1,5 +1,7 @@ import * as types from 'site/types' +import reviseSite from '../APP_TARGET/revisions' + const initialState = { siteTitle: 'swimmer', ready: false, @@ -24,7 +26,7 @@ export default function siteReducer(state = initialState, action) { case types.site.loaded: return { ...state, - graph: action.data.graph, + graph: reviseSite(action.data.graph), cursors: buildCursors(action.data.graph), } @@ -72,4 +74,4 @@ function buildCursors(graph) { accumulator[item.id] = item return accumulator }, {}) -} \ No newline at end of file +} diff --git a/package.json b/package.json index c1a1c7b..a092c43 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "react-redux": "^7.2.0", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", + "react-smooth-marquee": "^1.0.0", "react-sortablejs": "^2.0.11", "react-stl-obj-viewer": "^1.2.0", "redux": "^4.0.5", diff --git a/yarn.lock b/yarn.lock index e2fd8bd..7752b39 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6088,6 +6088,11 @@ react-router@5.2.0, react-router@^5.1.2: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" +react-smooth-marquee@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/react-smooth-marquee/-/react-smooth-marquee-1.0.0.tgz#b29f8eb7b2fc9fea71ae9ebddb04d42b6e675670" + integrity sha1-sp+Ot7L8n+pxrp692wTUK25nVnA= + react-sortablejs@^2.0.11: version "2.1.0" resolved "https://registry.yarnpkg.com/react-sortablejs/-/react-sortablejs-2.1.0.tgz#8c7d68df11a056b11d2a5b06433a13daf4930f01" -- cgit v1.2.3-70-g09d2