fixed positioning of card titles vs icons #32

package.json

@@ -14,19 +14,11 @@
     "immutable": "3.8.2",
     "keymirror": "0.1.1",
     "office-ui-fabric-react": "2.34.2",
-<<<<<<< HEAD
-    "prop-types": "^15.6.0",
-    "react": "^15.6.2",
-    "react-dom": "^15.6.2",
-    "react-masonry-component": "^5.0.7",
-    "shuffle": "git+https://www.github.com/codegard1/node-shuffle#rebase"
-=======
     "prop-types": "^15.0.0",
     "react": "^15.0.0",
     "react-dom": "^15.0.0",
     "react-masonry-component": "5.0.7",
     "shuffle": "git+https://github.com/codegard1/node-shuffle.git"
->>>>>>> 6e1a04cc612f2271b5d495b16184e482abc50c9a
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",
@@ -42,4 +34,4 @@
     "eject": "react-scripts eject"
   },
   "false": {}
-}
+}

src/CardContainer.css

@@ -52,35 +52,58 @@ div.card.clubs p.card-title {
     color: #555;
 }
 
+div.card p {
+    /* flex-grow: 1; */
+    text-align: center;
+    /* border:1px solid fuchsia; */
+}
+
 /* style card titles */
 div.card p.card-title {
     display: inline-block;
     flex-grow: 0;
     /* color:#333; */
+    min-width:1rem;
 }
 
-div.card p {
-    flex-grow: 1;
-    text-align: center;
-    /* border:1px solid fuchsia; */
-}
-
-
+/* style card bottommost title and icon */
 div.card p.card-title.bottom {
     align-self: flex-end;
     text-align: right;
     /* border: 1px solid rgb(19, 18, 12); */
 }
 
+/* style topmost title and icon */
 div.card p.card-title.top {
     align-self: flex-start;
     text-align: left;
     /* border: 1px solid gold; */
 }
 
+/* icon appears after the number on top */
+div.card p.card-title.top::after {
+    content: attr(data-cardIcon);
+}
+
+/* number appears before the icon on top */
+div.card p.card-title.top::before {
+    content: attr(data-cardTitle);
+}
+
+/* icon appears after the number on bottom */
+div.card p.card-title.bottom::before {
+    content: attr(data-cardIcon);
+}
+
+/* number appears before the icon on bottom */
+div.card p.card-title.bottom::after {
+    content: attr(data-cardTitle);
+}
+
 /* style cards that have been selected */
 div.card.selected {
     border: 1px solid blue;
+    box-shadow: 4px 4px 10px rgba(25, 25, 25, 0.2);
 }
 
 /* style cards that cannot be selected */

src/CardContainer.js

@@ -45,41 +45,42 @@ class CardContainer extends BaseComponent {
     let cardTitle = "";
     switch (this.props.sort) {
       case 14:
-        cardTitle = "A ";
+        cardTitle = "A";
         break;
 
       case 13:
-        cardTitle = "K ";
+        cardTitle = "K";
         break;
 
       case 12:
-        cardTitle = "Q ";
+        cardTitle = "Q";
         break;
 
       case 11:
-        cardTitle = "J ";
+        cardTitle = "J";
         break;
 
       default:
         cardTitle = this.props.sort;
         break;
     }
 
+    let cardIcon = "";
     switch (this.props.suit) {
       case "Heart":
-        cardTitle += "\u2665";
+        cardIcon += "\u2665";
         break;
 
       case "Spade":
-        cardTitle += "\u2660";
+        cardIcon += "\u2660";
         break;
 
       case "Diamond":
-        cardTitle += "\u2666";
+        cardIcon += "\u2666";
         break;
 
       case "Club":
-        cardTitle += "\u2663";
+        cardIcon += "\u2663";
         break;
 
       default:
@@ -98,9 +99,9 @@ class CardContainer extends BaseComponent {
         className={cardClass}
         onClick={this.props.isSelectable && this._toggleSelect}
       >
-        <p className="ms-font-xl card-title top">{cardTitle}</p>
+        <p className="ms-font-xl card-title top" data-cardTitle={cardTitle} data-cardIcon={cardIcon} />
         {this.props.isDescVisible && <p className="ms-font-m card-description" data-p={description} />}
-        <p className="ms-font-xl card-title bottom">{cardTitle}</p>
+        <p className="ms-font-xl card-title bottom" data-cardTitle={cardTitle} data-cardIcon={cardIcon} />
         {this.props.isBackFacing && <div className="card-back" />}
       </div>
     );