Add cells to card and tidy up

src/components/Card.jsx

@@ -139,7 +139,7 @@ class Card extends React.Component {
           {this.renderTimestamp()}
           {this.renderLocation()}
         </div>
-        {this.renderCategory()}        
+        {this.renderCategory()}
         {this.renderSummary()}
       </div>
     );

src/components/presentational/CardCategory.js

@@ -1,11 +1,13 @@
 import React from 'react';
 
+import { capitalizeFirstLetter } from '../../js/data/utilities.js';
+
 const CardCategory = ({ categoryTitle, categoryLabel, color }) => (
-  <div className="card-cell category">
+  <div className="card-row card-cell category">
     <h4>{categoryTitle}</h4>
     <p>
+      {capitalizeFirstLetter(categoryLabel)}
       <span className='color-category' style={{ background: color }}/>
-      {categoryLabel}
     </p>
   </div>
 );

src/components/presentational/CardLocation.js

@@ -7,22 +7,22 @@ const CardLocation = ({ language, location }) => {
 
   if (isNotNullNorUndefined(location)) {
     return (
-      <p className="card-cell location">
+      <div className="card-cell location">
         <p>
           <i className="material-icons left">location_on</i>
           {location}
         </p>
-      </p>
+      </div>
     );
   } else {
     const unknown = copy[language].cardstack.unknown_location;
     return (
-      <p className="card-cell location">
+      <div className="card-cell location">
         <p>
           <i className="material-icons left">location_on</i>
           {unknown}
         </p>
-      </p>
+      </div>
     );
   }
 }

src/components/presentational/CardNarrative.js

@@ -3,10 +3,12 @@ import React from 'react';
 import CardNarrativeLink from './CardNarrativeLink';
 
 const CardNarrative = (props) => (
-  <div className="card-cell">
+  <div className="card-row">
     <h4>Connected events</h4>
-    <p>Next: <CardNarrativeLink {...props} event={props.next}/></p>
-    <p>Previous: <CardNarrativeLink {...props} event={props.prev} /></p>
+    <div className="card-cell">
+      <p>&larr; <CardNarrativeLink {...props} event={props.next}/></p>
+      <p>&rarr; <CardNarrativeLink {...props} event={props.prev} /></p>
+    </div>
   </div>
 );
 

src/components/presentational/CardSource.js

@@ -4,10 +4,11 @@ import copy from '../../js/data/copy.json';
 
 const CardSource = ({ source, language }) => {
   const source_lang = copy[language].cardstack.source;
+  if (!source) source = copy[language].cardstack.unknown_source;
 
   return (
-    <div className="card-cell source">
-      <h4>{source_lang}</h4>
+    <div className="card-row card-cell source">
+      <h4>{source_lang}: </h4>
       <p>{source}</p>
     </div>
   );

src/components/presentational/CardSummary.js

@@ -8,9 +8,11 @@ const CardSummary = ({ language, description, isHighlighted }) => {
   const descriptionText = (isHighlighted) ? description : `${description.substring(0, 40)}...`;
 
   return (
-    <div className="card-cell summary">
-      <h4>{summary}</h4>
-      <p>{descriptionText}</p>
+    <div className="card-row summary">
+      <div className="card-cell">
+        <h4>{summary}</h4>
+        <p>{descriptionText}</p>
+      </div>
     </div>
   );
 }

src/components/presentational/CardTags.js

@@ -8,8 +8,8 @@ const CardTags = ({ tags, language }) => {
 
   if (tags.length > 0) {
     return (
-      <div className="card-cell tags">
-        <h4>{tags_lang}</h4>
+      <div className="card-row card-cell tags">
+        <h4>{tags_lang}:</h4>
         <p>
           {tags.map((tag, idx) => {
               return (
@@ -26,7 +26,7 @@ const CardTags = ({ tags, language }) => {
     );
   }
   return (
-    <div className="card-cell tags">
+    <div className="card-row card-cell tags">
       <h4>{tags_lang}</h4>
       <p>{no_tags_lang}</p>
     </div>

src/js/data/copy.json

@@ -137,6 +137,7 @@
       "tags": "Tags",
       "notags": "No known tags for this event.",
       "source": "Source",
+      "unknown_source": "Unknown source. The relability of this event cannot be confirmed.",
       "category": "Category",
       "communication": "Communication",
       "transmitter": "Transmitter",

src/js/utilities.js

@@ -36,6 +36,14 @@ export function isNotNullNorUndefined(variable) {
   return (typeof variable !== 'undefined' && variable !== null);
 }
 
+/*
+* Capitalizes _only_ the first letter of a string
+* Taken from: https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript
+*/
+export function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
 /**
 * Return a Date object given a datetime string of the format: "2016-09-10T07:00:00"
 * @param {string} datetime

src/scss/_colors.scss

@@ -1,6 +1,7 @@
 $event_default: red;
 
 $offwhite: #efefef;
+$lightwhite: #dfdfdf;
 $midwhite: #a0a0a0;
 $darkwhite: darken($midwhite, 15%);
 $yellow: #ffd800;

src/scss/card.scss

@@ -10,43 +10,18 @@
   box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
   font-size: $large;
   line-height: $xxlarge;
-  transition: 0.2s ease;
   height: auto;
+  opacity: 0.9;
+  transition: opacity 0.2s ease;
 
   &:hover {
-    border: 1px solid $yellow;
-  }
-
-  .material-icons {
-    font-size: $normal;
-    color: $darkwhite;
-    margin-right: 5px;
-  }
-
-  .card-row {
-    display: flex;
-    flex-direction: row;
-    border-bottom: 1px solid $midwhite;
-    margin-bottom: 10px;
-
-    .card-cell {
-      flex: 1;
-    }
-  }
-
-  .card-bottomhalf {
-    transition: 0.4s ease;
-    height: auto;
-
-    &.folded {
-      transition: 0.4s ease;
-      height: 0;
-      overflow: hidden;
-    }
+    opacity: 1;
+    transition: opacity 0.2s ease;
   }
 
   h4 {
     margin-bottom: 0;
+    margin-right: 5px;
     text-transform: uppercase;
     font-size: $xsmall;
     color: $darkwhite;
@@ -61,19 +36,58 @@
     margin: 0;
   }
 
-  .card-cell {
-    margin-bottom: 10px;
+  .material-icons {
+    font-size: $normal;
+    color: $darkwhite;
+    margin-right: 5px;
+  }
 
+  .card-row {
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1px solid $lightwhite;
+    margin: 5px 0 10px 0;
+    padding-bottom: 10px;
+
+    .card-cell {
+      flex: 1;
+    }
+
+    h4 {
+      min-width: 80px;
+      max-width: 80px;
+    }
+  }
+
+  .card-cell {
+    a {
+      font-weight: bold;
+      transition: color 0.2s;
+    }
     a:hover {
-      color: $red;
+      color: $darkwhite;
       cursor: pointer;
+      transition: color 0.2s;
     }
     a.disabled {
       color: $midgrey;
+      font-weight: normal;
       cursor: default;
     }
   }
 
+
+  .card-bottomhalf {
+    transition: 0.4s ease;
+    height: auto;
+
+    &.folded {
+      transition: 0.4s ease;
+      height: 0;
+      overflow: hidden;
+    }
+  }
+
   .card-toggle p {
     text-align: center;
     cursor: pointer;
@@ -126,28 +140,19 @@
   }
 
   .category {
+    margin-bottom: 5px;
+
     .color-category {
       width: 12px;
       height: 12px;
       border-radius: 20px;
       display: inline-block;
-      margin: 0px 5px 0 0;
+      margin: 0 0 0 5px;
     }
-  }
 
-  .event-type {
-    margin: 0 0 10px 0;
-
-    span {
-      display: inline-block;
-      margin: 0 5px 2px 0;
-      color: $darkgrey;
-
-      &.flagged {
-        background: $red;
-        color: $offwhite;
-        padding: 0 5px;
-      }
+    p {
+      text-align: right;
+      flex: 1;
     }
   }
 

src/scss/timeline.scss

@@ -78,7 +78,7 @@
         &:first-child {
           text-transform: none;
           font-size: $normal;
-          letter-spacing: 0.05;
+          letter-spacing: 0.05em;
         }
       }
     }