replace the marquee

4 files changed, 74 insertions, 14 deletions

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 (
       <div className="marquee-container">
+        <Marquee>
+          <span className="marquee-text">
+            {this.state.message[language]}
+          </span>
+        </Marquee>
+      </div>
+    )
+  }
+}
+
+/*
         <Marquee
           direction="left"
           speed={112}
@@ -45,7 +56,4 @@ export default class MarqueeContainer extends Component {
             {this.state.message[language]}
           </span>
         </Marquee>
-      </div>
-    )
-  }
-}
+*/
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 (
       <div className="museum-nav">
         <JakrawalLinks location={this.props.location} match={this.props.match} />
@@ -193,6 +205,13 @@ class NavOverlay extends Component {
             <div className="footer no-artist" ref={this.footerRef} />
           )
         )}
+        {showHomeFooterLinks && (
+          <div className="home-footer">
+            <Link to="/last-museum/credits">CREDITS</Link>
+            <Link to="/last-museum/artists">ARTISTS</Link>
+            <Link to="/last-museum/essay">TEXTS</Link>
+          </div>
+        )}
         <Marquee location={this.props.location} match={this.props.match} language={this.props.language} />
         <TitlesOverlay location={this.props.location} match={this.props.match} />
         <div className="home-corner">