cupboard 0.2.0

data/app/assets/stylesheets/components/recipes/_notes.scss

@@ -0,0 +1,60 @@
+// --------------------------------
+// Recipe components - notes
+// --------------------------------
+
+/*doc
+---
+name: 24_recipe_notes
+title: Recipe notes
+category: UI components
+---
+
+<div class="notes">
+  <h3 class="title">小撇步</h3>
+  <div>
+    <p>1. 蓋鍋悶到8成蛤蜊都開了就可掀蓋，煮太久蛤蜊肉會縮小，就不多汁了。</p>
+    <p>2. 奶油融化就可關火。</p>
+    <p>這裡可以看更多喲~<a href="#" rel="nofollow">http://icook.tw/categories?ref=feature-categories</a></p>
+  </div>
+</div>
+
+*/
+
+$recipe-notes-bg: #fefee5 !default;
+$recipe-notes-border: #fee59a !default;
+$recipe-notes-text: #666 !default;
+
+.notes {
+  background-color: $recipe-notes-bg;
+  border-top: 4px solid $recipe-notes-border;
+  margin-top: 15px;
+  padding: 20px 30px;
+
+  .title {
+    border-bottom: 0;
+    color: $ic-brown;
+    font-size: 20px;
+    line-height: 22px;
+    padding-bottom: 20px;
+  }
+
+  p {
+    color: $recipe-notes-text;
+    font-size: 16px;
+    margin-bottom: 0;
+    word-wrap: break-word;
+  }
+
+  a {
+    color: $orange;
+    text-decoration: underline;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .notes {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+

data/app/assets/stylesheets/components/recipes/_steps.scss

@@ -0,0 +1,153 @@
+// --------------------------------
+// Recipe components - steps
+// --------------------------------
+
+/*doc
+---
+name: 23_recipe_steps
+title: Recipe steps
+category: UI components
+---
+
+<div class="recipe-detail">
+	<div class="steps">
+		<ul itemprop="recipeInstructions">
+			<li class="step">
+				<div class="media">
+					<div class="step-img media-left">
+						<a href="#">
+							<img alt="step1" src="http:/images/step-placeholder.jpg">
+						</a>
+					</div>
+					<div class="media-body">
+						<big>1</big>
+						備料：蛤蜊需吐沙，蒜頭切末，青蔥切花，奶油切小塊放室溫回軟。
+					</div>
+				</div>
+			</li>
+			<li class="step">
+				<div class="media">
+					<div class="step-img media-left">
+						<a href="#">
+							<img alt="step2" src="/images/step-placeholder.jpg">
+						</a>
+					</div>
+					<div class="media-body">
+						<big>2</big>
+					</div>
+				</div>
+			</li>
+			<li class="step">
+				<div class="media">
+					<div class="media-body">
+						<big>3</big>
+						放入蛤蜊，加入米酒，轉中火，蓋上鍋蓋悶煮約3-5分鐘，至蛤蜊打開就可掀蓋。
+					</div>
+				</div>
+			</li>
+			<li class="step">
+				<div class="media">
+					<div class="media-body">
+						<big>4</big>
+						加入奶油、醬油等<span class="group-1">醃料</span>，大火拌炒至奶油融化就可關火（煮太久蛤蜊肉會縮），最後撒上蔥花就可以盛盤。
+					</div>
+				</div>
+			</li>
+		</ul>
+		<div>
+			<p>group name in step</p>
+			<span class="group-1">醃料</span>
+			<span class="group-2">醃料</span>
+			<span class="group-3">醃料</span>
+			<span class="group-4">醃料</span>
+			<span class="group-5">醃料</span>
+			<span class="group-6">醃料</span>
+			<span class="group-7">醃料</span>
+			<span class="group-8">醃料</span>
+		</div>
+	</div>
+</div>
+*/
+
+$recipe-steps-border: #969696 !default;
+$recipe-steps-order: $ic-brown !default;
+$recipe-step-border: $basic-border !default;
+$recipe-step-text: #666 !default;
+
+.recipe-detail {
+  big {
+    color: $recipe-steps-order;
+    display: block;
+    font-size: 30px;
+    font-weight: bold;
+    line-height: 1;
+    margin: 5px 0 15px;
+	}
+
+  .recipe-steps {
+    border-top: 1px solid $recipe-steps-border;
+    margin-bottom: 20px;
+    margin-top: 15px;
+  }
+
+  .steps {
+    ul {
+      padding-left: 0;
+		}
+
+    .group_1,
+		.group_2,
+		.group_3,
+		.group_4,
+		.group_5 {
+      padding: 0 4px;
+		}
+  }
+
+  .step {
+    border-bottom: 1px solid $recipe-step-border;
+    min-height: 90px;
+    overflow: hidden;
+    padding: 15px 0;
+    word-wrap: break-word;
+  }
+
+  .step-img {
+    overflow: hidden;
+    padding: 0;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .media-body {
+    color: $recipe-step-text;
+    font-size: 18px;
+    line-height: 30px;
+    width: auto;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .steps {
+    .step-img {
+      height: 165px;
+      padding-right: 15px;
+      width: 30.4%;
+    }
+
+    img {
+      height: 165px;
+    }
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .step-img {
+    display: block;
+    margin-bottom: 10px;
+    margin-right: 0;
+    width: 100%;
+  }
+}

data/app/assets/stylesheets/components/single_comment/_single-comment.scss

@@ -0,0 +1,251 @@
+// --------------------------
+// Single comment
+// --------------------------
+
+/*doc
+---
+title: Single comment
+name: 16_single_comment
+category: UI components
+---
+
+<div class="inner-block comments">
+  <div class="panel-group recipe-comments" id="accordion">
+    <div class="panel">
+      <div class="panel-heading">
+        <a href="#collapseComments" class="visible-xs visible-sm collapsed collapse in" data-toggle="collapse" data-parent="#accordion" id="more-comment" aria-expanded="true">看更多留言</a>
+      </div>
+      <div class="panel-collapse" id="collapseComments" aria-expanded="false">
+        <div class="panel-body">
+          <div>
+            <div class="media comment clearfix">
+              <a href="#" target="_blank" class="pull-left">
+                <img class="img-responsive img-circle user-img" src="/images/default-avatar.png" alt="user_avatar">
+              </a>
+              <div class="media-body">
+                <div class="info">
+                  <div class="author">
+                    <a href="#" target="_blank">料理貓</a>
+                  </div>
+                  <div class="body">
+                    <div class="message">
+                      <p>這種的保存方式，可以不需要冰嗎？<br/>因為我在找尋可以不用冰的自製辣椒醬</p>
+                    </div>
+                    <span class="timestamp">3天前</span>
+                  </div>
+                  <button class="report-msg" data-original-title="" title=""></button>
+                </div>
+                <div class="media comment reply-comment">
+                  <a href="#" class="pull-left">
+                    <img class="img-responsive img-circle user-img" alt="user_avatar" src="/images/default-avatar.png">
+                  </a>
+                  <div class="media-body">
+                    <div class="info">
+                      <div class="author">作者回覆</div>
+                      <div class="body">
+                        <div class="message">
+                          <p>自製的不用冰真的比較困難~因沒添加防腐~利用的是油鹽做保存~所以需要冰</p>
+                        </div>
+                        <span class="timestamp">2天前</span>
+                      </div>
+                    </div>
+                  </div>
+                  <button class="report-msg" data-original-title="" title=""></button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+*/
+
+$reply-comment-border: $basic-border !default;
+$reply-comment-author: $orange !default;
+$comments-form-actions-border: $basic-border !default;
+$comment-border: $basic-border !default;
+$comment-form-text: #777 !default;
+$comment-func-text: #aaa !default;
+$comment-delete: #aa0000 !default;
+$recipe-comments-bg: $white !default;
+$recipe-comments-title: #666 !default;
+
+.comment {
+  margin-top: 0;
+  overflow: visible;
+  padding-top: 20px;
+  position: relative;
+
+  &:last-child {
+    border-bottom: 1px solid $comment-border;
+
+    .info {
+      border-bottom: 0;
+    }
+
+    .reply-comment {
+      border-bottom: 0;
+      border-top: 1px solid $comment-border;
+    }
+
+    .delete-msg {
+      margin-bottom: -1px;
+    }
+  }
+
+  .pull-left {
+    margin-right: 15px;
+    padding-right: 0;
+    position: relative;
+  }
+
+  form {
+    position: relative;
+
+    > .pull-right {
+      bottom: 0;
+      position: absolute;
+      right: 0;
+    }
+
+    a {
+      color: $comment-form-text;
+      margin-right: 10px;
+    }
+  }
+
+  .func {
+    color: $comment-func-text;
+
+    a {
+      color: $comment-func-text;
+      font-size: 13px;
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+
+    .delete:hover {
+      color: $comment-delete;
+    }
+
+    .edit {
+      @include icon("|");
+
+      &::before {
+        width: 7px;
+      }
+    }
+  }
+
+  .info {
+    border-bottom: 1px solid $comment-border;
+    display: inline-block;
+    position: relative;
+    width: 100%;
+  }
+
+  .badge {
+    margin-left: 6px;
+    margin-top: -2px;
+  }
+
+  .report-msg {
+    bottom: 20px;
+    display: none;
+    position: absolute;
+    right: 0;
+    z-index: 3;
+  }
+
+  // .tooltip.top .tooltip-inner {
+  //   width: 120px;
+  // }
+}
+
+.reply-comment {
+  border-bottom: 1px solid $reply-comment-border;
+  margin-top: 0;
+  position: relative;
+
+  .pull-left {
+    // margin-right: 10px;
+
+    &::after {
+      border-top: 1px solid $reply-comment-author;
+      content: "";
+      left: 30px;
+      position: absolute;
+      top: 15px;
+      width: 15px;
+    }
+  }
+
+  .user-img,
+  > a {
+    height: 30px;
+    width: 30px;
+  }
+
+  .form-group {
+    margin-bottom: 20px;
+  }
+
+  .author {
+    border: 1px solid $reply-comment-author;
+    border-radius: 30px;
+    color: $reply-comment-author;
+    display: inline-block;
+    padding: 4px 8px;
+    top: 3px;
+  }
+
+  &.edit {
+    .info {
+      margin-bottom: 0;
+    }
+
+    .help-block {
+      color: $comments-help-block-notice;
+    }
+  }
+
+  .help-block:last-child {
+    color: $comments-help-block-text;
+    font-size: 13px;
+  }
+}
+
+.recipe-comments {
+  margin-bottom: 0;
+
+  .panel {
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .panel-heading {
+    background-color: $recipe-comments-bg;
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+
+    a {
+      @include icon("\f0d7");
+
+      color: $recipe-comments-title;
+      display: block;
+      margin-bottom: -5px;
+      padding: 10px 15px 0;
+      text-align: center;
+    }
+
+    + .panel-collapse > .panel-body {
+      border-top: 0;
+      padding: 0;
+    }
+  }
+}
+