cupboard 0.2.0

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

@@ -0,0 +1,96 @@
+// 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 {
+  .btn {
+    font-size: 13px;
+    display: none;
+  }
+
+  .material {
+    color: $card-basic-ingredient;
+    font-size: 13px;
+  }
+
+  &:hover {
+    .btn {
+      display: block;
+    }
+  }
+}
+
+// used in photo-card / list-card / recipes/show
+.btn-list {
+  @extend %card-button-basic;
+  @include icon("\f0c9");
+
+  background-color: $card-btn-list-bg;
+  color: $card-btn-list-text;
+  margin-left: 4px;
+
+  &::after {
+    border: 1px solid $card-btn-list-text;
+    border-radius: 12px;
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.btn-follow-recipe {
+  @extend %card-button-basic;
+  @include icon("\f08a");
+
+  &:hover,
+  &:focus {
+    background-color: $card-button-basic-bg-hover;
+    color: $white;
+  }
+
+  &.following {
+    background-color: $card-btn-following-bg;
+
+    &::before {
+      color: $card-btn-following-icon;
+      content: "\f004  已收";
+    }
+
+    &:hover::before {
+      content: "\f004  取消";
+    }
+
+    + .btn-list {
+      color: $card-btn-following-bg;
+
+      &::after {
+        border-color: $card-btn-following-bg;
+      }
+    }
+  }
+}
+

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

@@ -0,0 +1,206 @@
+@import "compass/typography/text/ellipsis";
+
+// --------------------------------
+// Cards - video card
+// --------------------------------
+
+/*doc
+---
+parent: 17_cards
+name: video_card
+title: Video card
+---
+
+<div class="ic-promoted-cards clearfix">
+  <div class="ic-promoted-card">
+    <div>video-card in TV</div>
+    <a class="video" href="/fruit-sparkling-water">
+      <div>
+        <div class="length">0:43</div>
+        <img alt="繽紛水果氣泡水" class="img-responsive" src="/images/recipe-default.png">
+        <div class="mask"></div>
+      </div>
+      <div class="info">
+        <div class="name" itemprop="name">繽紛水果氣泡水</div>
+        <div class="author">by <span>愛料理</span></div>
+      </div>
+    </a>
+  </div>
+
+  <div class="ic-promoted-card">
+    <div>card with label</div>
+    <a class="video" href="/fruit-sparkling-water">
+      <div>
+        <div class="feature-label">
+          <span>最新影片</span>
+            <div class="length">
+              <span>0:55</span>
+            </div>
+        </div>
+        <img alt="繽紛水果氣泡水" class="img-responsive" src="/images/recipe-default.png">
+        <div class="mask"></div>
+      </div>
+      <div class="info">
+        <div class="name" itemprop="name">繽紛水果氣泡水</div>
+        <div class="author">by <span>愛料理</span></div>
+      </div>
+    </a>
+  </div>
+</div>
+*/
+
+@import "compass/typography/text/ellipsis";
+
+$video-mask-bg: rgba(86, 78, 73, 0.4) !default;
+$video-length-bg: rgba(86, 78, 73, 0.8) !default;
+$video-card-author-by: #7c8783 !default;
+$video-card-author: #555 !default;
+
+.mask {
+  @include icon("\f04b");
+
+  background-color: $video-mask-bg;
+  color: $white;
+  display: none;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+
+  &::before {
+    border: 2px solid $white;
+    border-radius: 50%;
+    font-size: 20px;
+    height: 40px;
+    line-height: 1.7;
+    margin-right: 0;
+    padding-left: 3px;
+    position: relative;
+    top: 36%;
+    width: 40px;
+  }
+}
+
+.video {
+  background-color: $white;
+  display: block;
+  position: relative;
+
+  > div:first-child {
+    overflow: hidden;
+    position: relative;
+  }
+
+  &:hover {
+    text-decoration: none;
+
+    .mask {
+      display: block;
+    }
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .length {
+    background-color: $video-length-bg;
+    bottom: 10px;
+    color: $white;
+    font-size: 12px;
+    left: 10px;
+    padding: 3px 11px 2px;
+    position: absolute;
+    text-align: center;
+    z-index: 3;
+  }
+
+  .info {
+    padding: 10px;
+  }
+
+  .name,
+  .author {
+    @include ellipsis;
+
+    width: 100%;
+  }
+
+  .name {
+    color: $ic-brown;
+    font-size: 16px;
+    margin-bottom: 5px;
+  }
+
+  .author {
+    color: $video-card-author-by;
+
+    span {
+      color: $video-card-author;
+    }
+  }
+}
+
+.feature-label {
+  bottom: 10px;
+  left: 10px;
+  position: absolute;
+  z-index: 3;
+
+  > span,
+  .length {
+    display: inline-block;
+    float: left;
+  }
+
+  > span {
+    @include icon("\f04b");
+
+    background-color: $orange;
+    color: $white;
+    padding: 5px 6px;
+
+    &::before {
+      border: 1px solid $white;
+      border-radius: 50%;
+      color: $white;
+      font-size: 11px;
+      height: 18px;
+      line-height: 17px;
+      padding-left: 3px;
+      text-align: center;
+      vertical-align: top;
+      width: 18px;
+    }
+  }
+
+  .length {
+    bottom: auto;
+    float: left;
+    left: auto;
+
+    span {
+      display: block;
+      line-height: 25px;
+    }
+  }
+}
+
+.to-list > div {
+  padding-right: 0;
+  width: 24.5%;
+
+  + div {
+    padding-left: 16px;
+  }
+
+  .info {
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+

data/app/assets/stylesheets/components/comments/_comment-form.scss

@@ -0,0 +1,222 @@
+// ----------------------------------
+// Form components - recipe comment
+// ----------------------------------
+
+/*doc
+---
+title: Comment form
+name: 15_comment_form
+category: UI components
+---
+
+<div class="inner-block comments">
+  <h3>討論<span>共 0 則</span></h3>
+  <div class="recipe-comment-form">
+    <form class="form-horizontal">
+      <fieldset>
+        <div class="media">
+          <div class="pull-left hidden-xs">
+            <img src="./images/default-avatar.png" class="img-responsive img-circle user-img" alt="user_avatar">
+          </div>
+          <div class="media-body">
+            <div class="form-group required maxlen">
+              <label for="message" class="control-label required maxlen hidden"></label>
+              <textarea class="form-control required maxlen" placeholder="加入討論..." name="message" rows="2" cols="10" required="" maxlength="400"></textarea>
+              <div class="help-block">
+                <span>剩餘400個字</span>
+              </div>
+              <div class="help-block hidden">
+                <span></span></div>
+            </div>
+            <div class="form-actions clearfix">
+              <div class="pull-left">
+                <p class="notice">
+                  <span>發佈即代表已知悉並詳閱「</span><a href="http://newsroom.icook.tw/terms" target="_blank">愛料理服務條款</a><span>」之規範。</span>
+                </p>
+              </div>
+              <button type="submit" class="btn btn-login pull-right">確定送出</button>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </form>
+  </div>
+</div>
+
+*/
+
+$comments-title: $ic-brown !default;
+$comments-border: $ic-brown !default;
+$comments-title-small-text: #aaa !default;
+$comments-content-text: #888 !default;
+$comments-content-link: $orange !default;
+$comments-content-timestamp: #aaa !default;
+$comments-author: #5d4545 !default;
+$comments-load-more: $ic-brown !default;
+$comments-notice-text: #aa8f83 !default;
+$comments-help-block-text: #888 !default;
+$comments-help-block-notice: #333 !default;
+$comments-form-border: #efede8 !default;
+$comments-form-btn-bg: #53ade5 !default;
+$comments-user-img-bg: #efede8 !default;
+$comments-form-actions-text: #888 !default;
+
+// comments
+.comments {
+  h3 {
+    border-bottom: 1px solid $comments-border;
+    color: $comments-title;
+    font-size: 16px;
+    line-height: 20px;
+    margin-bottom: 18px;
+    margin-top: 0;
+    padding-bottom: 5px;
+
+    span {
+      color: $comments-title-small-text;
+      font-size: 14px;
+      font-weight: normal;
+      margin-left: 5px;
+    }
+  }
+
+  textarea {
+    border-radius: 0;
+    margin-bottom: 20px;
+  }
+
+  .media-body {
+    display: table-cell;
+    overflow: visible;
+    width: 10000px;
+  }
+
+  .body {
+    margin-bottom: 20px;
+    min-height: 1em;
+    word-break: break-all;
+  }
+
+  .message {
+    color: $comments-content-text;
+    font-size: 15px;
+    line-height: 24px;
+    margin: 0 auto 15px;
+
+    p {
+      margin-bottom: 0;
+    }
+
+    a {
+      color: $comments-content-link;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .timestamp {
+    color: $comments-content-timestamp;
+    font-size: 13px;
+  }
+
+  .author {
+    line-height: 14px;
+    margin-bottom: 10px;
+    position: relative;
+
+    a:not(.badge) {
+      color: $comments-author;
+      font-size: 16px;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .load-more {
+    @include icon("\e800");
+
+    color: $comments-load-more;
+    display: block;
+    font-size: 16px;
+    margin: 20px auto 0;
+    text-align: center;
+    width: 25%;
+
+    &::before {
+      font-family: "icookfont";
+      font-weight: bold;
+      margin-right: 10px;
+    }
+  }
+}
+
+.recipe-comment-form {
+  .form-group {
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  [type="submit"] {
+    background-color: $comments-form-btn-bg;
+    position: absolute;
+    right: 0;
+    top: -20px;
+    width: 120px;
+  }
+
+  .notice {
+    font-size: 13px;
+    padding-left: 0;
+    text-align: left;
+
+    a {
+      color: $comments-notice-text;
+      text-decoration: underline;
+    }
+  }
+}
+
+.recipe-comment-form,
+.comments {
+  .user-img {
+    background-color: $comments-user-img-bg;
+    display: block;
+    height: 50px;
+    margin: auto;
+    width: 50px;
+  }
+
+  .form-actions {
+    border-bottom: 1px solid $comments-form-border;
+    padding-bottom: 20px;
+    position: relative;
+
+    p {
+      color: $comments-form-actions-text;
+      margin-bottom: 0;
+    }
+  }
+
+  .help-block {
+    color: $comments-help-block-notice;
+    margin-bottom: 0;
+    margin-top: 0;
+
+    + .help-block {
+      color: $comments-help-block-text;
+      font-size: 13px;
+    }
+  }
+
+  > a {
+    display: block;
+    height: 50px;
+    width: 50px;
+  }
+}
+