Changes during the mini-hackathon mob programming session. Might need…

package.json

@@ -10,8 +10,8 @@
     "axios": "^0.19.2",
     "emotion": "^10.0.23",
     "globalize": "^1.4.2",
-    "moment": "^2.29.1",
     "jshint": "^2.12.0",
+    "moment": "^2.29.1",
     "query-string": "^6.12.1",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",

src/App.css

@@ -167,11 +167,21 @@ h2 {
 }
 
 .project-summary {
-  margin: 25px;
-  padding-left: 10px;
-  border: 2px;
-  border-style: groove;
-  max-width: 500px;
+    display: grid;
+    max-width: 1250px;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.project-page{
+  display:block;
+}
+
+.project-card {
+  border: 2px solid red;
+  padding: 5px;
+  align-items: start;
 }
 
 .project-summary:hover {
@@ -189,6 +199,7 @@ h2 {
   border-color: #61dafb;
 }
 
+
 .centered-text {
   text-align: center;
   display: block;

src/Components/Pages/Project/AddProjectButton.jsx

@@ -9,15 +9,13 @@ const AddProjectButton = ({text, action}) => {
   return (
     <div>
     <Button
-      style={{float: 'left',
-              margin: '20px' }}
       type="primary"
       onClick={action}
       disabled={!global.user}
       >
       {text}
     </Button>
-    {!global.user && <a style={{float: 'left', margin: '20px' }} href={'/login'}>Login to create a project</a>}
+    {!global.user && <a href={'/login'}>Login to create a project</a>}
     </div>
   )
 

src/Components/Pages/Project/ProjectList.jsx

@@ -43,7 +43,7 @@ class ProjectList extends React.Component {
       return <div>Loading...</div>;
     } else {
       return (
-        <div style={{marginBottom: '25px'}}>
+        <div className='project-summary' style={{marginBottom: '25px'}}>
           {projects.map(project => <ProjectSummary style={style} props={project} key={project.id} /> )}
         </div>
       )

src/Components/Pages/ProjectPage.js

@@ -109,6 +109,7 @@ class ProjectPage extends React.Component {
     console.log(this.state);
     const { project, comments } = this.state;
     return (
+
       <div style={{maxWidth: "1250px", margin: 'auto'}}>
         <div>
         <h1> {project.name} </h1>

src/Components/Pages/ProjectSummary.js

@@ -10,9 +10,9 @@ const ProjectSummary = (props) => {
   let history = useHistory();
 
   return (
-    <div onClick={() => projectClicked(history, project.id)} className={'project-summary'} style={props.style}>
+    <div onClick={() => projectClicked(history, project.id)} className='project-card' style={props.style}>
       <h3 className={'centered-text'}><b>{project.name}</b></h3>
-      <p> {project.description} </p>
+      <p> {project.description.length > 250 ? project.description.substring(0,250) + '...' : project.description} </p>
       <TechStack techStackAsString={stack}></TechStack>
       <br/>
     </div>

src/Components/Pages/Projects.js

@@ -49,6 +49,7 @@ class Projects extends React.Component {
 
   render() {
     return (
+      <div className='project-page'>
       <div>
         <ProjectForm
           onSubmit={this.handleAddProject}
@@ -59,14 +60,16 @@ class Projects extends React.Component {
         <AddProjectButton
           action={() => {this.setState({ showProjectForm: !this.state.showProjectForm })}}
           text={ this.state.showProjectForm ? 'Cancel' : 'Add new project' }
-        />
-        <br/>
-        <br/>
-        <ProjectList
+        />     
+      </div>
+      <div>
+         <ProjectList
           onProjectLoaded={projects => this.setState({projects})}
           projects={this.state.projects}
         />
       </div>
+
+      </div>
     );
   }
 }