Finished merge Isabella and Ignacio

microsoft · Feb 13, 2019 · 442c4c8 · 442c4c8
1 parent 2f53b21
commit 442c4c8
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 36 deletions.
diff --git a/website/deep-art/src/ExplorePage/ExplorePage.jsx b/website/deep-art/src/ExplorePage/ExplorePage.jsx
@@ -2,12 +2,8 @@ import React, { Component } from "react";
 
 import GenArt from "./GenArt.jsx";
 import ExplorePalette from "./ExplorePalette.jsx";
-import InfoArt from "./InfoArt.jsx";
-
-import { Box, Grid, Paragraph } from "grommet";
 
 import MapExploreContainer from "../MapExploreContainer/MapExploreContainer.jsx";
-import ArtworkInfo from "../MapExploreContainer/ArtworkInfo.jsx";
 
 /**
  * Page for the Exploring feature
@@ -50,7 +46,6 @@ export default class ExplorePage extends Component {
       Http.onreadystatechange = e => {
         if (Http.readyState === 4) {
           try {
-            //console.log(Http.response);
             this.setState(oldState => {
               return oldState.imgObjectsExplore.push({
                 img: btoa(

diff --git a/website/deep-art/src/ExplorePage/GenArt.jsx b/website/deep-art/src/ExplorePage/GenArt.jsx
@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-import { Box, Image } from "grommet";
 import { saveAs } from "file-saver";
 import CircularProgress from "@material-ui/core/CircularProgress";
 
@@ -69,9 +68,10 @@ export default class GenArt extends Component {
       this.props.image === undefined ? (
         <CircularProgress style={{ color: "#6A6A6A" }} />
       ) : (
-        <Image
+        <img
           src={"data:image/jpeg;base64," + this.props.image}
           fit='cover'
+          alt={this.props.image.id}
           style={{ zIndex: "-1" }}
         />
       );

diff --git a/website/deep-art/src/ExplorePage/InfoArt.jsx b/website/deep-art/src/ExplorePage/InfoArt.jsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { Box, Image} from 'grommet';
 
 /**
  * The box containing the normal art Image
@@ -8,20 +7,8 @@ import { Box, Image} from 'grommet';
 export default class InfoArt extends Component {
 
     render(){
-
-        const ImageBox = () => (
-            <Box
-                height="small"
-                width="small"
-                round="small"
-                style={{ padding: "0px", marginTop: "10px", marginLeft: "10px",}}
-            >
-                <Image src={this.props.image} fit="cover" style={{ height: "100%", zIndex: "-1"}} />
-            </Box>
-          );
-
         return(
-            <img src={this.props.image}/> 
+            <img src={this.props.image}/>
         );
     }
-}
+}
diff --git a/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx b/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx
@@ -13,14 +13,14 @@ const ArtworkInfo = ({ apiData, t }) => {
       />
       <div className='original__content'>
         <p className='original__description'>{title}</p>
-        <p className='original__data'>
-          <span className='original__title'>{t("map.time")}:</span>
-          <span className='original__text'>{artistDisplayName || "Unknown"}</span>
-        </p>
         <time className='original__data'>
           <div className='original__title'>{t("map.date")}: </div>
           <div className='original__text'>{objectDate || "Unknown"}</div>
         </time>
+        <p className='original__data'>
+          <span className='original__title'>{t("map.artist")}:</span>
+          <span className='original__text'>{artistDisplayName || "Unknown"}</span>
+        </p>
       </div>
     </div>
   );

diff --git a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx
@@ -42,7 +42,7 @@ class MapExploreContainer extends Component {
       }
     }
   }
-  
+
   generatePath = (page) => {
     const pathname = this.props.location.pathname.split('/')[2]
     return `/${page}/${pathname}`
@@ -51,18 +51,20 @@ class MapExploreContainer extends Component {
   renderHeader = () => {
     const getClass = (page, isMapPage) => {
       if (page === 'map' && isMapPage) {
-        return "map-explore__tab is-active"
+        return "map__tab is-active"
       } else if (page === 'explore' && !isMapPage) {
-        return "map-explore__tab is-active"
+        return "map__tab is-active"
       } else {
-        return "map-explore__tab"
+        return "map__tab"
       }
     }
     return (
       <React.Fragment>
-        <div className="map-explore__header">
-          <button onClick={this.generatePath} id='map' className={getClass('map', this.props.map)}><NavLink to={this.generatePath('map')}>Map</NavLink></button>
-          <button onClick={this.generatePath} id='explore' className={getClass('explore', this.props.map)}><NavLink to={this.generatePath('explore')}>Explore</NavLink></button>
+        <div className="map__header">
+          {/* <button onClick={this.generatePath} id='map' className={getClass('map', this.props.map)}><NavLink to={this.generatePath('map')}>Map</NavLink></button>
+          <button onClick={this.generatePath} id='explore' className={getClass('explore', this.props.map)}><NavLink to={this.generatePath('explore')}>Explore</NavLink></button> */}
+          <NavLink onClick={this.generatePath} id='map' className={getClass('map', this.props.map)} to={this.generatePath('map')}>Map</NavLink>
+          <NavLink onClick={this.generatePath} id='explore' className={getClass('explore', this.props.map)} to={this.generatePath('explore')}>Explore</NavLink>
         </div>
       </React.Fragment>
     )
@@ -73,7 +75,7 @@ class MapExploreContainer extends Component {
       <ArtworkInfo
         t={t}
         apiData={this.state.apiData}
-      /> 
+      />
     )
   }
 
@@ -98,4 +100,4 @@ class MapExploreContainer extends Component {
   }
 }
 
-export default MapExploreContainer;
+export default MapExploreContainer;
diff --git a/website/deep-art/src/assets/locales/translation.json b/website/deep-art/src/assets/locales/translation.json
@@ -13,7 +13,7 @@
       "map.title": "Gan",
       "map.description": "A trained GAN (Generative Adversarial Network) contains a model of a shared feature space underlying a collection of images. Based on given artworks from The Met collection, the GAN allows you to explore and visualize the spaces in between selected artworks from The Met’s Open Access collection.",
       "map.explore": "Explore the map to discover new objects in the space between existing Met artworks",
-      "map.time": "Time",
+      "map.artist": "Artist",
       "map.date": "Date",
 
       "foo.desc": "Gen Studio is a prototype concepts which was created over a two-day hackathon with collaborators across The Met, Microsoft, and MIT.",

diff --git a/website/deep-art/src/styles/pages/_map.scss b/website/deep-art/src/styles/pages/_map.scss
@@ -18,8 +18,10 @@
     background-color: $color-shade-light;
     border: none;
     color: $color-primary;
+    display: inline-block;
     padding: $space-m;
     text-align: center;
+    text-decoration: none;
 
     &:hover {
       cursor: pointer;