Improve card UI

recipes/src/components/Button/styles.scss

@@ -9,7 +9,6 @@ button.mdc-icon-button.btn-small {
   height: 24px;
   padding: 6px;
   font-size: 12px;
-
   .material-icons {
     font-size: 12px;
   }
@@ -19,6 +18,7 @@ button.mdc-icon-button.btn-small {
 button.cbk-btn {
   @include button-reset();
   @include button();
+  white-space: nowrap;
   margin: 0 .5em;
   -webkit-font-smoothing: antialiased;
   outline: 0;

recipes/src/components/Card/index.tsx

@@ -30,13 +30,14 @@ type CBKCardProps = {
   }[],
   onClick: (event: React.MouseEvent) => void,
   className?: string,
+  highlight?: boolean,
 }
 
-const CBKCard: React.FunctionComponent<CBKCardProps> = ({ title, summary, icons, actions, onClick }) => {
+const CBKCard: React.FunctionComponent<CBKCardProps> = ({ title, summary, img, icons, actions, onClick, highlight }) => {
   return (
-    <div className="cbk-card">
+    <div className={`cbk-card ${highlight ? 'cbk-card--highlight' : ''}`}>
       <div className="cbk-card__header" onClick={onClick}>
-        <div className="cbk-card__header__media" style={{backgroundImage: `url(${sample_img})`}} onLoad={(e) => { console.log("loaded", e)}}></div>
+        <div className="cbk-card__header__media" style={{backgroundImage: `url(${img ? `${API}/${img}` : sample_img})`}}></div>
         <div className="cbk-card__header__main">
           <div className="cbk-card__header__main__title" title={title}>
             <h6>{title}</h6>

recipes/src/components/Card/styles.scss

@@ -62,4 +62,13 @@
   &:hover {
     @include shadow();
   }
+
+  &--highlight {
+    @include shadow($blue);
+    top: -4px;
+    left: -4px;
+    &:hover {
+      @include shadow($blue);
+    }
+  }
 }

recipes/src/components/RecipeCard/index.tsx

@@ -5,6 +5,7 @@ import Card, {
 } from "@material/react-card";
 import Icon from 'components/Icon';
 import { List as Ingredients } from 'components/Ingredient';
+import StrikeText from 'components/StrikeText';
 import moment from 'moment';
 
 import sample_img from "components/Card/sample.png";
@@ -16,12 +17,90 @@ type RecipeCardProps = {
   recipe: Recipe,
 }
 
-function CBKRecipeCard(props: RecipeCardProps) {
+const CBKRecipeCard: React.FunctionComponent<RecipeCardProps> = ({ recipe }) => {
+  const prepTime = moment.duration(recipe.details.preparationTime).humanize();
+  const cookTime = moment.duration(recipe.details.cookingTime).humanize();
+
+  return (
+    <div className="cbk-recipe-card">
+      <div className="cbk-recipe-card__header">
+        <div className="cbk-recipe-card__header__media" style={recipe.image ? {backgroundImage: `url(${API}/${recipe.image})`} : undefined}></div>
+        <div className="cbk-recipe-card__header__name">
+          <h4>
+            { recipe.name }
+          </h4>
+          <p>
+            { recipe.summary }
+          </p>
+        </div>
+        <div className="cbk-recipe-card__header__information">
+          <div className="cbk-recipe-card__header__information__author">
+            by { recipe.details.url ? (
+              <a href={recipe.details.url}>{ recipe.author.name }</a>
+            ) : (
+              <label>{recipe.author.name}</label>
+            )
+            }
+          </div>
+          <div className="cbk-recipe-card__header__information__recipe-data">
+            <ul>
+              {
+                prepTime && (
+                  <li>
+                    <Icon width={32} height={32} icon='preparation' />
+                    <label>{prepTime}</label>
+                  </li>
+                )
+              }
+              {
+                cookTime && (
+                  <li>
+                    <Icon width={32} height={32} icon='cooking' />
+                    <label>{cookTime}</label>
+                  </li>
+                )
+              }
+              {
+                recipe.details.servings && (
+                  <li>
+                    <Icon width={32} height={32} icon='servings' />
+                    <label>{recipe.details.servings}</label>
+                  </li>
+                )
+              }
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className="cbk-recipe-card__content">
+        <div className="cbk-recipe-card__content__ingredients">
+          <Ingredients ingredients={recipe.ingredients} />
+        </div>
+        <div className="cbk-recipe-card__content__instructions">
+          <ol>
+            {
+              recipe.instructions.map((instruction, i) => (
+                <li key={i}>
+                  <StrikeText>
+                    {instruction}
+                  </StrikeText>
+                </li>
+              ))
+            }            
+          </ol>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CBKRecipeCard2(props: RecipeCardProps) {
   const { recipe } = props;
   const prepTime = moment.duration(recipe.details.preparationTime).humanize();
   const cookTime = moment.duration(recipe.details.cookingTime).humanize();
   const servings = recipe.details.servings;
 
+
   return (
     <Card outlined className='cbk-recipe-card'>
       <div className='cbk-recipe-card__primary'>

recipes/src/components/RecipeCard/styles.scss

@@ -1,79 +1,149 @@
 @import 'styles/_variables.scss';
 
 .cbk-recipe-card {
-  border: 0px;
-  padding: $spacing-x-large;
-  
-  &__primary {
-    display: flex;
-    justify-content: space-between;
-
-    &__image.mdc-card__media {
-      flex-grow: 1;
-      flex-basis: 25%;
-      border-top-left-radius: 0px;
-      border-top-right-radius: 0px;
+  @include box();
+  &__header {
+    border-bottom: 3px solid $black;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: 2fr 1fr;
+    &__media {
+      background-size: cover;
+      background-position: center center;
+      grid-column: 1;
+      grid-row: 1 / span 2;
+      border-right: 3px solid black;
     }
-  
-    &__title {
-      flex-grow: 999;
-      flex-basis: 75%;
-      padding-left: $spacing-regular;
-      padding-top: $spacing-regular;
-      padding-bottom: $spacing-regular;
 
+    &__name {
+      grid-column: 2 / span 2;
+      padding: $spacing-small $spacing-xs $spacing-xs $spacing-xs;
       p {
-        color: $grey-500;
-        letter-spacing: 1px;
-        text-align: justify;
+        @include cursive();
       }
+    }
+
+    &__information {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 $spacing-xs $spacing-small $spacing-xs;
 
-      ul {
+      &__author {
+        @include cursive();
+        a {
+          @include link();
+        }
+      }
+      &__recipe-data ul {
         display: flex;
-        flex-direction: row;
         
         li {
           display: flex;
-          flex-direction: row;
+          flex-direction: column;
           align-items: center;
-          padding-right: $spacing-small;
-          color: $grey-500;
+          padding: 0px 4px;
+          font-size: $font-size-small;
+          color: $grey-600;
           .cbk-icon {
-            margin-right: 8px;
             svg > g path {
-              fill: $grey-500;
+              fill: $grey-600;
             }
           }
         }
       }
     }
   }
-
   &__content {
+    padding: $spacing-regular;
+    font-size: $font-size-large;
+
     &__ingredients {
-      margin: $spacing-regular 0px;
+      font-weight: $font-weight-bold;
     }
+
     &__instructions {
-      color: $grey-700;
       ol {
-        margin: 0px;
         padding-left: $spacing-small;
+      }
+      li {
+        font-family: $font-family-text;
+        margin-bottom: $spacing-small;
+        color: $grey-700;
         text-align: justify;
-
-        li {
-          margin: $spacing-small 0px;
-        }
       }
     }
   }
+  // &__primary {
+  //   display: flex;
+  //   justify-content: space-between;
 
-  @media #{$phone} {
-    padding: $spacing-small;
-    .cbk-recipe-card__primary {
-      flex-direction: column;
-    }
-    .cbk-recipe-card__primary__title {
-      padding: $spacing-regular 0;
-    }
-  }
+  //   &__image.mdc-card__media {
+  //     flex-grow: 1;
+  //     flex-basis: 25%;
+  //     border-top-left-radius: 0px;
+  //     border-top-right-radius: 0px;
+  //   }
+  
+  //   &__title {
+  //     flex-grow: 999;
+  //     flex-basis: 75%;
+  //     padding-left: $spacing-regular;
+  //     padding-top: $spacing-regular;
+  //     padding-bottom: $spacing-regular;
+
+  //     p {
+  //       color: $grey-500;
+  //       letter-spacing: 1px;
+  //       text-align: justify;
+  //     }
+
+  //     ul {
+  //       display: flex;
+  //       flex-direction: row;
+        
+  //       li {
+  //         display: flex;
+  //         flex-direction: row;
+  //         align-items: center;
+  //         padding-right: $spacing-small;
+  //         color: $grey-500;
+  //         .cbk-icon {
+  //           margin-right: 8px;
+  //           svg > g path {
+  //             fill: $grey-500;
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+
+  // &__content {
+  //   &__ingredients {
+  //     margin: $spacing-regular 0px;
+  //   }
+  //   &__instructions {
+  //     color: $grey-700;
+  //     ol {
+  //       margin: 0px;
+  //       padding-left: $spacing-small;
+  //       text-align: justify;
+
+  //       li {
+  //         margin: $spacing-small 0px;
+  //       }
+  //     }
+  //   }
+  // }
+
+  // @media #{$phone} {
+  //   padding: $spacing-small;
+  //   .cbk-recipe-card__primary {
+  //     flex-direction: column;
+  //   }
+  //   .cbk-recipe-card__primary__title {
+  //     padding: $spacing-regular 0;
+  //   }
+  // }
 }

recipes/src/components/StrikeText/index.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+
+import './styles.scss';
+
+type StrikeTextProps = {
+};
+
+const StrikeText: React.FunctionComponent<StrikeTextProps> = ({ children }) => {
+  const [ strike, toggleStrike ] = useState(false);
+  return (
+    <span className={`cbk-strike-text ${strike ? 'cbk-strike-text--strike' : ''}`} onClick={() => toggleStrike(!strike)}>
+      { children }
+    </span>
+  )
+}
+
+export default StrikeText;

recipes/src/components/StrikeText/styles.scss

@@ -0,0 +1,5 @@
+.cbk-strike-text {
+  &--strike {
+    text-decoration: line-through;
+  }
+}

recipes/src/containers/Recipes/List/index.tsx

@@ -29,7 +29,7 @@ import { UiState, Display } from "types/ui";
 interface RecipeListProps extends RouteComponentProps {
   data: DBRecipe[],
   isFetching: boolean,
-  selectedRecipe: any | undefined,
+  selectedRecipe: DBRecipe | undefined,
   ui: UiState,
   fetchRecipes: (query: string) => undefined,
   receiveRecipes: (recipes: DBRecipe[]) => undefined,
@@ -157,7 +157,7 @@ class RecipeList extends Component<RecipeListProps, {phoneDisplay: boolean, sear
         }
         <Grid>
           <Row>
-            <Cell columns={6} phoneColumns={4} tabletColumns={8}>
+            <Cell columns={4} phoneColumns={4} tabletColumns={8}>
               {
                 data.map((recipe, i) => {
                   return (
@@ -169,12 +169,13 @@ class RecipeList extends Component<RecipeListProps, {phoneDisplay: boolean, sear
                       actions={this.actions(recipe)}
                       icons={this.icons(recipe._id)}
                       img={recipe.image}
+                      highlight={selectedRecipe ? recipe._id === selectedRecipe._id : undefined}
                     />
                   )
                 })
               }
             </Cell>
-            <Cell columns={6} phoneColumns={4} tabletColumns={8}>
+            <Cell columns={8} phoneColumns={4} tabletColumns={8}>
               { selectedRecipe !== undefined && 
                 <RecipeCard 
                   recipe={selectedRecipe}

recipes/src/styles/_fonts.scss

@@ -43,9 +43,31 @@ $letter-spacing-enhanced: 0.5px;
   font-style: italic;
 }
 
-@mixin cursive() {
+@mixin cursive($size: $font-size-regular) {
   font-family: $font-family-text;
   color: $grey-600;
   font-style: italic;
+  font-size: $size;
+}
+
+@mixin link($color: $black, $bgColor: $yellow) {
+  color: $color;
+  background:
+     linear-gradient(
+       to bottom, $bgColor 0%,
+       $bgColor 100%
+     );
+  background-position: 0 100%;
+  background-repeat: repeat-x;
+  background-size: 4px 4px;
+  text-decoration: none;
+  transition: background-size .2s;
+  text-decoration: none;
+  font-family: $font-family-display;
   font-size: $font-size-regular;
+  letter-spacing: 0.075em;
+
+  &:hover {
+    background-size: 4px 50px;
+  }
 }