Merge pull request #15147 from code-dot-org/projects-gallery-style-po…

…lish Projects gallery style polish
code-dot-org · May 17, 2017 · 1a46ebf · 1a46ebf
2 parents bb876f5 + 3909330
commit 1a46ebf
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 44 deletions.
diff --git a/apps/src/templates/projects/ProjectAppTypeArea.jsx b/apps/src/templates/projects/ProjectAppTypeArea.jsx
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react';
 import ProjectCard from './ProjectCard';
 import {projectPropType} from './projectConstants';
 import color from "../../util/color";
+import ProgressButton from "../progress/ProgressButton";
 
 const styles = {
   grid: {
@@ -10,23 +11,28 @@ const styles = {
   },
   card: {
     display: "inline-block",
-    padding: 10
+    paddingTop: 10,
+    paddingBottom: 20,
+    paddingRight: 18,
+    paddingLeft: 10
   },
   labHeading: {
     textAlign: "left",
     fontSize: 24,
     color: color.charcoal,
     marginLeft: 10,
-    marginRight: 50,
-    paddingBottom: 10,
+    marginBottom: 0,
+    paddingBottom: 0,
     paddingTop: 40,
     float: 'left'
   },
   viewMore: {
     color: color.light_teal,
     float: 'right',
     marginTop: 75,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    marginRight: 22,
+    fontFamily: '"Gotham 5r", sans-serif'
   }
 };
 
@@ -81,12 +87,23 @@ const ProjectAppTypeArea = React.createClass({
 
   renderViewMoreButtons() {
     return (
-      <div style={{float: "right"}}>
+      <div style={{float: "right", marginRight: 22}}>
         {
           this.state.maxNumProjects >= this.state.numProjects &&
-          <button onClick={this.loadMore} style={{cursor: 'pointer'}} >View more</button>
+          <ProgressButton
+            onClick={this.loadMore}
+            color={ProgressButton.ButtonColor.gray}
+            icon="plus-circle"
+            text="View more"
+            style={{marginRight: 20}}
+          />
         }
-        <a href="#gallery-switcher"><button>Back to top</button></a>
+        <ProgressButton
+          href="#gallery-switcher"
+          color={ProgressButton.ButtonColor.gray}
+          icon="chevron-circle-up"
+          text="Back to top"
+        />
       </div>
     );
   },
@@ -95,7 +112,11 @@ const ProjectAppTypeArea = React.createClass({
     return (
       <div style={styles.grid}>
         <h2 style={styles.labHeading}> {this.props.labName} </h2>
-        <span style={styles.viewMore} onClick={this.viewMore}> {this.props.labViewMoreString} </span>
+        <span style={styles.viewMore} onClick={this.viewMore}>
+          {this.props.isDetailView && <i className="fa fa-angle-left" style={{paddingRight: 6}} ></i>}
+          {this.props.labViewMoreString}
+          {!this.props.isDetailView && <i className="fa fa-angle-right" style={{paddingLeft: 6}} ></i>}
+        </span>
         <div style={{clear: 'both'}}></div>
         {this.renderProjectCardList(this.props.projectList, this.state.numProjects)}
         {this.props.isDetailView && this.renderViewMoreButtons()}

diff --git a/apps/src/templates/projects/ProjectCard.jsx b/apps/src/templates/projects/ProjectCard.jsx
@@ -8,60 +8,70 @@ const styles = {
   card: {
     border: '1px solid #bbbbbb',
     borderRadius: 2,
-    width: 215,
+    width: 220,
     backgroundColor: color.white
   },
   title: {
     paddingLeft: 15,
     paddingRight: 10,
-    paddingTop: 10,
+    paddingTop: 18,
     paddingBottom: 5,
     fontSize: 16,
     fontFamily: '"Gotham 5r", sans-serif',
-    backgroundColor: color.white,
-    color: color.gray,
-    minHeight: 18
+    color: color.charcoal,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    height: 18
+  },
+  titleLink: {
+    color: color.charcoal
   },
   lastEdit: {
     paddingLeft: 15,
     paddingRight: 10,
     paddingBottom: 10,
-    fontSize: 12,
+    fontSize: 11,
     fontFamily: '"Gotham", sans-serif',
-    backgroundColor: color.white,
-    color: color.gray
+    color: color.charcoal
   },
   studentName: {
     paddingLeft: 15,
     paddingRight: 10,
     paddingTop: 5,
-    fontSize: 12,
+    fontSize: 11,
     fontFamily: '"Gotham", sans-serif',
-    backgroundColor: color.white,
-    color: color.gray
+    color: color.charcoal
   },
   ageRange: {
     paddingLeft: 10,
     paddingTop: 5,
-    fontSize: 12,
+    fontSize: 11,
     fontFamily: '"Gotham", sans-serif',
-    backgroundColor: color.white,
-    color: color.gray
+    color: color.charcoal
   },
   firstInitial: {
     paddingTop: 5,
-    fontSize: 12,
+    fontSize: 11,
     paddingLeft: 15,
     fontFamily: '"Gotham", sans-serif',
-    backgroundColor: color.white,
-    color: color.gray
+    color: color.charcoal
   },
   arrowIcon: {
     paddingRight: 8
   },
   thumbnail: {
-    width: 215,
-    height: 150
+    width: 220,
+    height: 150,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden'
+  },
+  image:{
+    flexShrink: 0,
+    minWidth: '100%',
+    minHeight: '100%'
   },
   actionBox: {
     width: 160,
@@ -75,19 +85,22 @@ const styles = {
     position: "absolute"
   },
   actionText: {
-    fontSize: 12,
+    fontSize: 11,
     fontFamily: '"Gotham", sans-serif',
     color: color.gray
   },
   delete: {
     color: color.red,
     borderTop: '1px solid lightGray',
     paddingTop: 10,
-    fontSize: 12
+    fontSize: 11
   },
   xIcon: {
     paddingRight: 5
   },
+  bold: {
+    fontFamily: '"Gotham 5r", sans-serif'
+  }
 };
 
 const ProjectCard = React.createClass({
@@ -115,7 +128,8 @@ const ProjectCard = React.createClass({
     if (this.props.currentGallery === 'class'){
       return this.props.projectData.studentName && (
         <div style={styles.studentName}>
-          {i18n.by()}: {this.props.projectData.studentName}
+          {i18n.by()}:
+          <span style={styles.bold} > {this.props.projectData.studentName}</span>
         </div>
       );
     }
@@ -127,7 +141,8 @@ const ProjectCard = React.createClass({
       // public gallery for privacy reasons.
       return this.props.projectData.studentName && (
           <span style={styles.firstInitial}>
-          {i18n.by()}: {this.props.projectData.studentName}
+          {i18n.by()}:
+          <span style={styles.bold} > {this.props.projectData.studentName}</span>
         </span>
         );
     }
@@ -138,7 +153,8 @@ const ProjectCard = React.createClass({
     if (this.props.currentGallery === 'public') {
       return studentAgeRange && (
         <span style={styles.ageRange}>
-          {i18n.age()}: {studentAgeRange}
+          {i18n.age()}:
+          <span style={styles.bold} > {studentAgeRange}</span>
         </span>
       );
     }
@@ -188,27 +204,34 @@ const ProjectCard = React.createClass({
     }
   },
 
-  renderProjectName() {
-    const {type, channel, name} = this.props.projectData;
-    const url = `/projects/${type}/${channel}/view`;
-    return <a href={url} target="_blank">{name}</a>;
+  renderProjectName(url, name) {
+    return (
+      <a style={styles.titleLink} href={url} target="_blank">
+        <div style={styles.title}>{name}</div>
+      </a>
+    );
   },
 
   render() {
     const { projectData } = this.props;
 
+    const {type, channel, name} = this.props.projectData;
+    const url = `/projects/${type}/${channel}/view`;
+
     return (
       <div>
         <div style={styles.card}>
-          <img
-            src={projectData.thumbnailUrl || placeholderImage}
-            style={styles.thumbnail}
-          />
-
-          <div style={styles.title}>
-            {this.renderProjectName()}
+          <div style={styles.thumbnail} >
+            <a href={url} style={{width: '100%'}}>
+              <img
+                src={projectData.thumbnailUrl || placeholderImage}
+                style={styles.image}
+              />
+            </a>
           </div>
 
+          {this.renderProjectName(url, name)}
+
           {this.renderStudentName()}
 
           <span>
@@ -218,7 +241,8 @@ const ProjectCard = React.createClass({
 
           <div style={styles.lastEdit}>
             {this.renderArrowIcon()}
-            {i18n.published()}: {this.dateFormatter(projectData.publishedAt)} at {this.timeFormatter(projectData.publishedAt)}
+            {i18n.published()}:
+            <span style={styles.bold} > {this.dateFormatter(projectData.publishedAt)} at {this.timeFormatter(projectData.publishedAt)}</span>
           </div>
         </div>