cupboard 0.2.1 → 0.2.2

data/app/assets/stylesheets/components/cards/_list-card.scss

@@ -1,5 +1,3 @@
-@import "compass/typography/text/ellipsis";
-
 // --------------------------------
 // Cards - list card
 // --------------------------------
@@ -12,134 +10,101 @@ title: List card
 ---
 
 <div class="media recipe-card list-card">
-  <a class="visible-xs" style="display:block;height:100%;width:100%;position:absolute;z-index:2" href="/recipes/157559"></a>
-  <div class="actions hidden-xs hidden-sm recipe-funcs">
-    <div>
-      <a class="btn btn-follow-recipe" href="#">收藏</a>
-      <a class="btn btn-list" href="#">清單</a>
+  <a class="visible-xs" style="display:block;height:100%;width:100%;position:absolute;z-index:2;left:0;top:0;" href="/recipes/157559"></a>
+  <div class="pull-left">
+    <div class="actions hidden-xs hidden-sm recipe-funcs">
+      <div>
+        <a class="btn btn-follow-recipe" href="#">
+          <span class="fa"></span>
+        </a>
+        <a class="btn btn-list" href="#">
+          <span class="fa fa-bars"></span>
+          <span>清單</span>
+        </a>
+      </div>
     </div>
+    <a title="酥烤香甜吐司-快速抹醬" class="pull-left" href="/recipes/157559">
+      <img alt="酥烤香甜吐司-快速抹醬" class="img-responsive" src="/images/recipe-default.png">
+    </a>
   </div>
-  <a title="酥烤香甜吐司-快速抹醬" class="pull-left" href="/recipes/157559">
-    <img alt="酥烤香甜吐司-快速抹醬" class="img-responsive" src="/images/recipe-default.png">
-  </a>
   <div class="media-body card-info">
-    <a title="酥烤香甜吐司-快速抹醬" data-title="酥烤香甜吐司-快速抹醬" itemprop="name" href="/recipes/157559">酥烤香甜吐司-快速抹醬</a>
+    <a title="酥烤香甜吐司-快速抹醬" data-title="酥烤香甜吐司-快速抹醬" itemprop="name" href="/recipes/157559" class="recipe-title">酥烤香甜吐司-快速抹醬</a>
+    <p class="user-name">by <a href="#">iCook 愛料理</a></p>
+    <p itemprop="description" class="hidden-xs description">簡單、快速、香甜烤吐司吃膩了一般果醬試試這微酥口感的快速抹醬吧～小孩會很喜歡喔！</p>
+    <p class="material">食材：吐司、低筋麵粉、無鹽奶油、自製煉乳或市售</p>
     <ul class="meta clearfix">
       <li class="fav-count recipe-favorites" data-isround="true"><span class="" data-reactid=".f">2,029</span></li>
       <li class="comments-count" data-title="1 則留言">1</li>
       <li class="dishes-count" data-title="1 人做過">1</li>
     </ul>
-    <p itemprop="description" class="hidden-xs description">簡單、快速、香甜烤吐司吃膩了一般果醬試試這微酥口感的快速抹醬吧～小孩會很喜歡喔！</p>
-    <p class="material">食材：吐司、低筋麵粉、無鹽奶油、自製煉乳或市售</p>
   </div>
 </div>
 
 */
 
-@import "compass/typography/text/ellipsis";
-
-$list-card-bg: $white !default;
-$list-card-border: #ebe5e1 !default;
-$list-card-stats: #888 !default;
-$list-card-title: #5c4545 !default;
-$list-card-text: #888 !default;
-$list-card-ingredient: #aa8f83 !default;
-$author-list-card-border: #ede5e1 !default;
+$list-card-description: $brown-light10 !default;
+$author-list-card-border: $basic-border !default;
 
 .list-card {
-  background-color: $list-card-bg;
-  border-bottom: 1px solid $list-card-border;
-  margin-top: 0;
-  padding-bottom: 20px;
-  padding-top: 20px;
-  position: relative;
-  width: 100%;
+  border-radius: 3px;
+  border: 1px solid $basic-border;
+  margin-bottom: 15px;
+  padding: 15px;
 
-  .actions {
-    bottom: 30px;
-    left: 11px;
-    position: absolute;
-    z-index: 2;
-  }
-
-  &.pinned .pr {
-    display: block;
+  img {
+    border-radius: 3px;
+    height: 158px;
+    width: 200px;
   }
 
-  &:last-child {
-    margin-bottom: 15px;
+  .actions {
+    margin-left: -72px;
   }
 
-  > .pull-left {
-    position: relative;
+  .card-info {
+    line-height: 1;
   }
 
-  > a,
-  img {
-    height: 120px;
-    width: 160px;
+  .recipe-title {
+    font-size: 20px;
   }
 
-  .meta {
-    margin-bottom: 5px;
+  .user-name {
+    line-height: 1.2;
   }
 
-  ul {
-    padding-left: 0;
+  .description {
+    color: $list-card-description;
+    height: 3em;
+    line-height: 20px;
+    overflow: hidden;
+    word-break: break-word;
   }
 
-  li {
-    color: $list-card-stats;
-    float: left;
+  .meta li {
     font-size: 12px;
-    list-style-type: none;
-
-    &.fav-count::before {
-      margin-right: 0;
-    }
   }
 
-  .card-info {
-    height: 100%;
-
-    > a {
-      @include ellipsis;
-
-      color: $list-card-title;
-      display: block;
-      font-size: 18px;
-      margin-bottom: 5px;
-      width: 100%;
+  .material {
+    max-height: 2.5em;
+    overflow: hidden;
+	}
 
-      &:hover {
-        text-decoration: underline;
-      }
-    }
+  .badge-vip {
+    float: left;
+    margin-right: 4px;
 
-    p {
-      line-height: 20px;
-      margin-bottom: 0;
-      max-height: 3em;
-      overflow: hidden;
-      word-break: break-word;
+    &::after {
+      position: relative;
+      top: 3px;
     }
 
-    .sponsor {
-      color: $list-card-stats;
-      font-size: 12px;
-      margin-bottom: 5px;
-
-      a {
-        color: $brown;
-      }
+    + .recipe-name {
+      display: inline-block;
+      max-width: 90%;
     }
   }
 
-  .description {
-    color: $list-card-text;
-    font-size: 14px;
-  }
-
   &.author + .text-center {
     border-top: 1px solid $author-list-card-border;
   }
@@ -153,10 +118,6 @@ $author-list-card-border: #ede5e1 !default;
       width: 120px;
     }
 
-    .breadcrumb + & {
-      padding-top: 0;
-    }
-
     .dishes-count {
       margin-right: 0;
     }
@@ -167,3 +128,34 @@ $author-list-card-border: #ede5e1 !default;
   }
 }
 
+@media only screen and (min-width: 641px) {
+  .list-card .badge-vip + .recipe-name {
+    max-width: 83%;
+  }
+}
+
+@media only screen and (max-width: 640px) {
+  .list-card {
+    img {
+      height: 100%;
+      width: 160px;
+    }
+
+    .badge-vip + .recipe-name {
+      max-width: 75%;
+    }
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .list-card {
+    img {
+      width: 120px;
+    }
+
+    .badge-vip + .recipe-name {
+      max-width: 70%;
+    }
+  }
+}
+

data/app/assets/stylesheets/components/cards/_photo-card.scss

@@ -1,8 +1,6 @@
-@import "compass/typography/text/ellipsis";
-
-// --------------------------------
-// Cards - photo card
-// --------------------------------
+// ----------------------------------
+// Components - Cards - photo card
+// ----------------------------------
 
 /*doc
 ---
@@ -11,122 +9,80 @@ name: 1_photo_card
 title: Photo card
 ---
 
-<div class="media recipe-card photo-card">
-  <a class="visible-xs visible-sm" style="display:block;height:100%;width:100%;position:absolute;z-index:2" href="#"></a>
-  <div class="actions hidden-xs hidden-sm recipe-funcs">
-    <div>
-      <a class="btn btn-follow-recipe" href="#">收藏</a>
-      <a class="btn btn-list" href="#">清單</a>
+<div class="ic-photo-card clearfix">
+  <div class="media recipe-card photo-card">
+    <a class="visible-xs visible-sm" style="display:block;height:100%;width:100%;position:absolute;z-index:2;left:0;top:0;" href="#"></a>
+    <div class="pull-left">
+      <div class="actions hidden-xs hidden-sm recipe-funcs">
+        <div>
+          <a class="btn btn-follow-recipe" href="#">
+            <span class="fa"></span>
+          </a>
+          <a class="btn btn-list" href="#">
+            <span class="fa fa-bars"></span>
+            <span>清單</span>
+          </a>
+        </div>
+      </div>
+      <a href="#">
+        <div class="img">
+          <img class="img-responsive" src="/images/recipe-default.png" alt="400x300">
+        </div>
+      </a>
     </div>
-  </div>
-  <a href="#">
-    <div class="img">
-      <img class="img-responsive" src="/images/recipe-default.png" alt="400x300">
+    <div class="media-body card-info">
+      <a href="#" class="recipe-title">5分鐘酒蒸蛤蜊</a>
+      <ul class="clearfix meta">
+        <li class="fav-count">6615</span>
+        <li class="comments-count">87</span>
+        <li class="dishes-count">25</span>
+      </ul>
+      <p class="material visible-xs visible-sm">食材：食材：蛤蜊、蒜末、蔥花、無鹽奶油、米酒、醬油、辣椒</p>
+      <p class="user-name visible-md visible-lg">by <a href="#">iCook 愛料理</a></p>
     </div>
-    <p><span class="recipe-name">5分鐘酒蒸蛤蜊</span></p>
-  </a>
-  <div class="media-body">
-    <a href="#">
-      <span class="recipe-name">5分鐘酒蒸蛤蜊</span>
-    </a>
-    <p>
-      <span class="fav-count">6615</span>
-      <span class="comments-count">87</span>
-      <span class="dishes-count">25</span>
-    </p>
-    <p class="material visible-xs visible-sm">食材：食材：蛤蜊、蒜末、蔥花、無鹽奶油、米酒、醬油、辣椒</p>
-    <p class="user-name visible-md visible-lg">by <a href="#">iCook 愛料理</a></p>
   </div>
 </div>
 
 */
 
-@import "compass/typography/text/ellipsis";
-
-$photo-card-title: $ic-brown !default;
-$photo-card-text: #a5a5a5 !default;
-$photo-card-user-name: #777 !default;
-$photo-card-border: #ebe5e1 !default;
-$photo-card-ingredient: #aa8f83 !default;
+$photo-card-border: $basic-border !default;
 
 .photo-card {
   display: inline-block;
-  // float: left;
+  float: left;
   margin-top: 0;
   max-width: 172px;
   position: relative;
-  width: 32%;
-
-  .actions {
-    left: 22px;
-    position: absolute;
-    top: 90px;
-    z-index: 2;
-  }
 
-  .media-body > a {
-    color: $photo-card-title;
-    display: block;
-  }
-
-  .img {
+  img {
     height: 129px;
     max-width: 172px;
-    overflow: hidden;
+  }
 
-    + p {
-      display: none;
-    }
+  .pull-left {
+    padding-right: 0;
   }
 
-  img {
-    width: 100%;
+  .actions {
+    margin-left: -67px;
   }
 
-  .recipe-name {
+  .card-info {
     display: block;
-    font-size: 16px;
-    line-height: 1;
-    margin-bottom: 10px;
-    margin-top: 15px;
     width: 100%;
   }
 
-  p {
-    color: $photo-card-text;
-    overflow: hidden;
-    word-break: break-word;
+  .recipe-title {
+    font-size: 16px;
+    margin-top: 15px;
   }
 
   .user-name {
     margin-bottom: 0;
 
     a {
-      color: $photo-card-user-name;
-      display: inline-block;
       font-size: 13px;
-      line-height: 14px;
       max-width: 85%;
-      vertical-align: text-bottom;
-    }
-  }
-
-  .recipe-name,
-  .user-name a {
-    @include ellipsis;
-  }
-}
-
-
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
-  .photo-card {
-    .actions {
-      left: 8px;
-      top: 70px;
-    }
-
-    .img {
-      height: 110px;
     }
   }
 }
@@ -137,24 +93,25 @@ $photo-card-ingredient: #aa8f83 !default;
     padding-bottom: 20px;
     width: 100%;
 
-    > a {
+    + .photo-card {
+      border-top: 1px solid $photo-card-border;
+      margin-left: 0;
+      padding-top: 20px;
+    }
+
+    .pull-left {
       margin-right: 10px;
-      width: 172px;
     }
 
-    .fav-count,
-    .views-count,
-    .dishes-count {
-      margin-right: 1px;
+    .card-info {
+      width: auto;
     }
 
-    + .photo-card {
-      border-top: 1px solid $photo-card-border;
-      margin-left: 0;
-      padding-top: 20px;
+    .meta li {
+      margin-right: 1px;
     }
 
-    .recipe-name {
+    .recipe-title {
       margin-top: 0;
     }
 
@@ -167,8 +124,7 @@ $photo-card-ingredient: #aa8f83 !default;
 
 @media only screen and (max-width: 767px) {
   .photo-card {
-    > a,
-    .img {
+    img {
       height: 90px;
       width: 120px;
     }

data/app/assets/stylesheets/components/cards/_product-card.scss

@@ -1,5 +1,3 @@
-@import "compass/typography/text/ellipsis";
-
 // --------------------------------
 // Cards - product card
 // --------------------------------
@@ -30,7 +28,7 @@ title: Market product card
     <div>card with label</div>
     <a class="product-card" href="/products/antipodes">
       <div>
-        <span class="label-limit">限時</span>
+        <span class="label-limit">限時<i class="fa fa-shopping-cart"></i></span>
         <img alt="愛料理購物袋" class="img-responsive" src="/images/recipe-default.png">
       </div>
       <div class="info">
@@ -57,7 +55,7 @@ $product-card-subtitle: #777 !default;
   }
 
   img {
-    height: 19.3em;
+    min-height: 19.3em;
     width: 100%;
   }
 
@@ -71,7 +69,7 @@ $product-card-subtitle: #777 !default;
   }
 
   .title {
-    color: $ic-brown;
+    color: $brown;
     font-size: 16px;
     margin-bottom: 5px;
     width: 100%;
@@ -84,10 +82,8 @@ $product-card-subtitle: #777 !default;
 }
 
 .label-limit {
-  @include icon-b("\f07a");
-
   background-color: $black;
-  border-right: 10px solid $orange;
+  border-right: 10px solid $orange-red;
   color: $white;
   line-height: 1;
   padding: 10px 25px;
@@ -95,6 +91,10 @@ $product-card-subtitle: #777 !default;
   right: 15px;
   top: 15px;
   width: 110px;
+
+  i {
+    margin-left: 5px;
+  }
 }
 
 @media only screen and (max-width: 767px) {

data/app/assets/stylesheets/components/cards/_recipe-card.scss

@@ -1,94 +1,113 @@
 // base styles for photo-card, list-card and dish-card
-$card-button-basic-bg: rgba(86, 78, 74, 0.8) !default;
-$card-button-basic-bg-hover: rgba(86, 78, 74, 0.7) !default;
-$card-button-basic-border: $white !default;
-$card-button-basic-text: $white !default;
-$card-basic-ingredient: #aa8f83 !default;
-$card-btn-list-bg: $white !default;
-$card-btn-list-text: $ic-brown !default;
-$card-btn-following-bg: $orange !default;
-$card-btn-following-icon: $white !default;
-
-%card-button-basic {
-  background-color: $card-button-basic-bg;
-  border: 2px solid $card-button-basic-border;
-  border-radius: 13px;
-  color: $card-button-basic-text;
-  float: left;
-  font-size: inherit;
-  padding: 4px 6px;
-  position: relative;
-  text-align: center;
-  width: 62px;
-}
+$recipe-card-title: $brown !default;
+$recipe-card-following-bg: $orange-red !default;
+$recipe-card-ingredient: $brown-light30 !default;
+$recipe-card-meta: $brown-light20 !default;
+$recipe-card-byline: $brown-light20 !default;
+$recipe-card-user-name: $brown !default;
 
 .recipe-card {
-  .btn {
-    font-size: 13px;
-    display: none;
-  }
-
-  .material {
-    color: $card-basic-ingredient;
-    font-size: 13px;
-  }
+  background-color: $white;
+  position: relative;
 
   &:hover {
     .btn {
       display: block;
     }
   }
-}
 
-// used in photo-card / list-card / recipes/show
-.btn-list {
-  @extend %card-button-basic;
-  @include icon("\f0c9");
+  img {
+    width: 100%;
+  }
 
-  background-color: $card-btn-list-bg;
-  color: $card-btn-list-text;
-  margin-left: 4px;
+  .pull-left {
+    position: relative;
+  }
 
-  &::after {
-    border: 1px solid $card-btn-list-text;
-    border-radius: 12px;
-    bottom: 0;
-    content: "";
-    display: block;
-    left: 0;
+  .actions {
+    bottom: 10px;
+    left: 50%;
     position: absolute;
-    right: 0;
-    top: 0;
+    z-index: 2;
   }
-}
 
-.btn-follow-recipe {
-  @extend %card-button-basic;
-  @include icon("\f08a");
+  .btn {
+    border: 2px solid $white;
+    display: none;
+    font-size: 13px;
+    padding: 4px 6px;
+    width: 62px;
 
-  &:hover,
-  &:focus {
-    background-color: $card-button-basic-bg-hover;
-    color: $white;
+    + .btn {
+      margin-left: 10px;
+    }
   }
 
-  &.following {
-    background-color: $card-btn-following-bg;
+  .recipe-title {
+    @include ellipsis;
 
-    &::before {
-      color: $card-btn-following-icon;
-      content: "\f004  已收";
+    display: block;
+    color: $recipe-card-title;
+    margin-bottom: 10px;
+    width: 100%;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .user-name {
+    color: $recipe-card-byline;
+
+    a {
+      @include ellipsis;
+
+      color: $recipe-card-user-name;
+      display: inline-block;
+      line-height: 14px;
+      vertical-align: text-bottom;
+    }
+  }
+
+  .meta {
+    list-style: none;
+    padding-left: 0;
+
+    li {
+      color: $recipe-card-meta;
+      display: inline-block;
+      float: left;
+      list-style: none;
+
+      + li {
+        margin-left: 5px;
+      }
     }
+  }
+
+  .material {
+    color: $recipe-card-ingredient;
+    font-size: 13px;
+  }
 
-    &:hover::before {
-      content: "\f004  取消";
+  .btn-follow-recipe {
+    .fa::before {
+      content: "\f08a  收藏";
+      font-family: Fontawesome;
     }
 
-    + .btn-list {
-      color: $card-btn-following-bg;
+    &.following {
+      .fa::before {
+        content: "\f004  已收";
+      }
+
+      &:hover .fa::before {
+        content: "\f004  取消";
+      }
 
-      &::after {
-        border-color: $card-btn-following-bg;
+      + .btn-list {
+        background-color: $card-btn-following-bg;
+        color: $white;
       }
     }
   }