[B] Fix project thumbnail usage and style

[Fixes #378]
ManifoldScholar · Jun 2, 2017 · fb5107a · fb5107a
1 parent 168008a
commit fb5107a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/client/src/components/frontend/Project/Cover.js b/client/src/components/frontend/Project/Cover.js
@@ -10,15 +10,26 @@ export default class ProjectCover extends Component {
   };
 
   renderCoverImage(project) {
-    if (!project.attributes.avatarStyles.small) return null;
+    if (!project.attributes.coverStyles.small) return null;
     return (
       <img
-        src={project.attributes.avatarStyles.small}
+        src={project.attributes.coverStyles.small}
         alt={`Click to view ${project.attributes.title}`}
       />
     );
   }
 
+  renderAvatarImage(project) {
+    if (!project.attributes.avatarStyles.small) return null;
+    const avatarUrl = project.attributes.avatarStyles.small;
+    return (
+      <div
+        style={{ backgroundImage: `url(${avatarUrl})` }}
+        className="project-avatar"
+      />
+    );
+  }
+
   renderPlaceholderImage(project) {
     if (!project.attributes.avatarColor) return null;
     return (
@@ -28,13 +39,20 @@ export default class ProjectCover extends Component {
     );
   }
 
+  renderProjectImage(project) {
+    if (project.attributes.coverStyles.small) return this.renderCoverImage(project);
+    return this.renderAvatarImage(project);
+  }
+
   render() {
     const project = this.props.project;
     if (!project) return null;
+    const projectImage = project.attributes.avatarStyles.small ||
+      project.attributes.coverStyles.small;
 
     return (
-      project.attributes.avatarStyles.small ?
-        this.renderCoverImage(project)
+       projectImage ?
+        this.renderProjectImage(project)
         : this.renderPlaceholderImage(project)
     );
   }

diff --git a/client/src/theme/Components/browse/project-list/_grid-project.scss b/client/src/theme/Components/browse/project-list/_grid-project.scss
@@ -100,6 +100,21 @@
         }
       }
 
+      .project-avatar {
+        position: absolute;
+        top: 4px;
+        left: 0;
+        // Relative z-index
+        z-index: 0;
+        width: 35vw;
+        height: 35vw;
+        max-width: 161px;
+        max-height: 161px;
+        background-position: center center;
+        background-repeat: no-repeat;
+        border: 4px solid transparent;
+      }
+
       svg {
         border: 0;
       }
@@ -118,7 +133,7 @@
     &:hover {
       background-color: $neutral10;
 
-      img {
+      img, .project-avatar {
         border-color: $accentPrimary;
       }