cupboard 0.2.0

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

@@ -0,0 +1,168 @@
+@import "compass/typography/text/ellipsis";
+
+// --------------------------------
+// Cards - list card
+// --------------------------------
+
+/*doc
+---
+parent: 17_cards
+name: list_card
+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>
+    </div>
+  </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>
+    <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 {
+  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%;
+
+  .actions {
+    bottom: 30px;
+    left: 11px;
+    position: absolute;
+    z-index: 2;
+  }
+
+  &.pinned .pr {
+    display: block;
+  }
+
+  &:last-child {
+    margin-bottom: 15px;
+  }
+
+  > .pull-left {
+    position: relative;
+  }
+
+  > a,
+  img {
+    height: 120px;
+    width: 160px;
+  }
+
+  .meta {
+    margin-bottom: 5px;
+  }
+
+  ul {
+    padding-left: 0;
+  }
+
+  li {
+    color: $list-card-stats;
+    float: left;
+    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%;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    p {
+      line-height: 20px;
+      margin-bottom: 0;
+      max-height: 3em;
+      overflow: hidden;
+      word-break: break-word;
+    }
+
+    .sponsor {
+      color: $list-card-stats;
+      font-size: 12px;
+      margin-bottom: 5px;
+
+      a {
+        color: $brown;
+      }
+    }
+  }
+
+  .description {
+    color: $list-card-text;
+    font-size: 14px;
+  }
+
+  &.author + .text-center {
+    border-top: 1px solid $author-list-card-border;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .list-card {
+    > a,
+    img {
+      height: 90px;
+      width: 120px;
+    }
+
+    .breadcrumb + & {
+      padding-top: 0;
+    }
+
+    .dishes-count {
+      margin-right: 0;
+    }
+
+    .views-count {
+      display: none;
+    }
+  }
+}
+

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

@@ -0,0 +1,244 @@
+@import "compass/typography/text/ellipsis";
+
+// --------------------------------
+// Cards - photo card
+// --------------------------------
+
+/*doc
+---
+parent: 17_cards
+name: 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>
+  </div>
+  <a href="#">
+    <div class="img">
+      <img class="img-responsive" src="/images/recipe-default.png" alt="400x300">
+    </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 {
+  display: inline-block;
+  // 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 {
+    height: 129px;
+    max-width: 172px;
+    overflow: hidden;
+
+    + p {
+      display: none;
+    }
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .recipe-name {
+    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;
+  }
+
+  .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;
+    }
+  }
+
+  .feature-spot {
+    height: 864px;
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .photo-card {
+    max-width: 100%;
+    padding-bottom: 20px;
+    width: 100%;
+
+    > a {
+      margin-right: 10px;
+      width: 172px;
+    }
+
+    .fav-count,
+    .views-count,
+    .dishes-count {
+      margin-right: 1px;
+    }
+
+    + .photo-card {
+      border-top: 1px solid $photo-card-border;
+      margin-left: 0;
+      padding-top: 20px;
+    }
+
+    .recipe-name {
+      margin-top: 0;
+    }
+
+    .material {
+      margin-bottom: 0;
+      max-height: 2.7em;
+    }
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .photo-card {
+    > a,
+    .img {
+      height: 90px;
+      width: 120px;
+    }
+
+    .fav-count,
+    .dishes-count {
+      &::before {
+        margin-right: 4px;
+      }
+    }
+
+    .views-count {
+      display: none;
+    }
+  }
+}
+
+// stat icons
+$stat-icon: #999 !default;
+$stat-icon-following: $ic-red !default;
+
+.fav-count {
+  @include icon("\f004");
+
+  &.active::before {
+    color: $stat-icon-following;
+  }
+}
+
+.views-count {
+  @include icon("\f06e");
+
+  &::before {
+    margin-right: -2px;
+  }
+}
+
+.dishes-count {
+  @include icon("\f030");
+}
+
+.search-score {
+  @include icon("\f080");
+}
+
+.comments-count {
+  @include icon("\e805");
+
+  &::before {
+    font-family: "icookfont";
+    font-weight: bold;
+  }
+}
+
+.fav-count span,
+.dishes-count,
+.comments-count,
+.search-score {
+  margin-left: 5px;
+
+  &::before {
+    color: $stat-icon;
+    font-size: 12px;
+    margin-right: 3px;
+    width: 12px;
+  }
+}
+

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

@@ -0,0 +1,104 @@
+@import "compass/typography/text/ellipsis";
+
+// --------------------------------
+// Cards - product card
+// --------------------------------
+
+/*doc
+---
+parent: 17_cards
+name: product_card
+title: Product card
+---
+
+<div class="ic-promoted-cards clearfix">
+  <div class="ic-promoted-card">
+    <div>product-card in Market</div>
+    <a class="product-card" href="/products/antipodes">
+      <div>
+        <img alt="愛料理購物袋" class="img-responsive" src="/images/recipe-default.png">
+      </div>
+      <div class="info">
+        <div class="title" itemprop="name">愛料理購物袋</div>
+        <div class="subtitle" itemprop="description"><span>自有品牌商品 大小款獨家發售中</span>
+        </div>
+      </div>
+    </a>
+  </div>
+
+  <div class="ic-promoted-card">
+    <div>card with label</div>
+    <a class="product-card" href="/products/antipodes">
+      <div>
+        <span class="label-limit">限時</span>
+        <img alt="愛料理購物袋" class="img-responsive" src="/images/recipe-default.png">
+      </div>
+      <div class="info">
+        <div class="title" itemprop="name">愛料理購物袋</div>
+        <div class="subtitle" itemprop="description"><span>自有品牌商品 大小款獨家發售中</span>
+        </div>
+      </div>
+    </a>
+    </div>
+  </div>
+*/
+
+$product-card-subtitle: #777 !default;
+
+.product-card {
+  background-color: $white;
+  display: block;
+  margin: 15px 0;
+  position: relative;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  img {
+    height: 19.3em;
+    width: 100%;
+  }
+
+  .info {
+    padding: 12px 10px;
+  }
+
+  .title,
+  .subtitle {
+    @include ellipsis;
+  }
+
+  .title {
+    color: $ic-brown;
+    font-size: 16px;
+    margin-bottom: 5px;
+    width: 100%;
+  }
+
+  .subtitle {
+    color: $product-card-subtitle;
+    height: 20px;
+  }
+}
+
+.label-limit {
+  @include icon-b("\f07a");
+
+  background-color: $black;
+  border-right: 10px solid $orange;
+  color: $white;
+  line-height: 1;
+  padding: 10px 25px;
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  width: 110px;
+}
+
+@media only screen and (max-width: 767px) {
+  .product-card img {
+    height: auto;
+  }
+}
+