cupboard 0.2.0 → 0.2.1

data/app/assets/stylesheets/components/{navigations/_recipe-nav.scss → recipes/_recipe-navi.scss}

@@ -1,12 +1,12 @@
 // --------------------------------
-// Navigation - recipes
+// Components - Recipe navi
 // --------------------------------
 
 /*doc
 ---
-parent: 08_navigations
-title: Recipe navigation
-name: recipe_navigations
+parent: 08_recipes
+name: 04_recipe-navi
+title: Navi
 ---
 
 <div><p>in recipes/show</p></div>
@@ -93,7 +93,11 @@ $category-tag-icon: #ac8c85 !default;
       }
     }
 
-    & + li {
+    &:last-child {
+      margin-right: 0;
+    }
+
+    + li {
       @include icon("\f054");
 
       &:before {
@@ -104,9 +108,5 @@ $category-tag-icon: #ac8c85 !default;
         width: 12px;
       }
     }
-
-    &:last-child {
-      margin-right: 0;
-    }
   }
 }

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

@@ -1,12 +1,12 @@
 // --------------------------------
-// Recipe components - steps
+// Components - Recipe steps
 // --------------------------------
 
 /*doc
 ---
-name: 23_recipe_steps
-title: Recipe steps
-category: UI components
+parent: 08_recipes
+name: 02_steps
+title: Steps
 ---
 
 <div class="recipe-detail">
@@ -55,7 +55,7 @@ category: UI components
 			</li>
 		</ul>
 		<div>
-			<p>group name in step</p>
+			<h4>group name in step</h4>
 			<span class="group-1">醃料</span>
 			<span class="group-2">醃料</span>
 			<span class="group-3">醃料</span>

data/app/assets/stylesheets/{widgets/brands/_pr-ingredients.scss → components/sidebars/_brand-ingredients.scss}

@@ -1,15 +1,15 @@
 @import "compass/typography/text/ellipsis";
 @import "compass/css3/images";
 
-// ---------------------------------------
-// Brand sidebar widgets - pr ingredients
-// ---------------------------------------
+// --------------------------------------------
+// Components - Sidebars - brand ingredients
+// --------------------------------------------
 
 /*doc
 ---
-parent: 06_brand_sidebar_widgets
-title: Pr ingredients
-name: pr_ingredients
+parent: 17_sidebars
+title: Brand ingredients
+name: 09_brand_ingredients
 ---
 
 <div class="row">
@@ -61,7 +61,6 @@ name: pr_ingredients
             </a>
           </li>
         </ul>
-        </ul>
       </div>
     </div>
   </div>
@@ -76,11 +75,7 @@ $pr-ingredients-tag-text: #5c4545 !default;
 $pr-ingredients-tag-border: #ccc !default;
 
 .pr-ingredients {
-  @include background-image(image-url("/images/section_bg.jpg"));
-
   background-repeat: repeat;
-  border: 1px solid $pr-ingredients-border;
-  padding: 10px;
 
   span {
     @include icon("\f111");
@@ -111,7 +106,7 @@ $pr-ingredients-tag-border: #ccc !default;
   ul {
     background-color: $pr-ingredients-bg;
     margin-bottom: 0;
-    padding: 10px 10px 0;
+    padding: 0 5px;
   }
 
   li {

data/app/assets/stylesheets/{widgets/sidebar-widgets/_popular-recipe-lists.scss → components/sidebars/_brand-popular-lists.scss}

@@ -1,66 +1,48 @@
-// ---------------------------------------
-// Sidebar widgets - popular recipe lists
-// ---------------------------------------
+// ----------------------------------------------
+// Components - Sidebars - brand popular lists
+// ----------------------------------------------
 
 /*doc
 ---
-parent: 04_sidebar_widgets
-title: Popular recipe lists
-name: popular_recipe_lists
+parent: 17_sidebars
+title: Brand popular lists
+name: 07_brand_popular_lists
 ---
 
 <div class="row">
   <div class="col-xs-12 col-sm-6">
     <div class="inner-block widget">
       <div class="popular-recipe-lists">
-        <h4 class="title">推薦分類</h4>
-        <ol>
-          <li class="clearfix">
-            <a class="media clearfix" href="#">
+        <h4 class="title">精選清單</h4>
+        <ul>
+          <li>
+            <a class="media clearfix" href="/brands/wumu/lists/1772072?ref=sidebar">
               <span class="media-body">
-                <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
-                <span>提拉米蘇</span>
+							  <img src="/images/recipe-default.png" alt="愛料理食驗室" class="pull-left img-responsive">
+                <span>愛料理食驗室</span>
               </span>
-              <span class="text-right pull-right">158 道食譜</span>
+              <span class="text-right pull-right">34 道食譜</span>
             </a>
           </li>
-          <li class="clearfix">
-            <a class="media clearfix" href="#">
+          <li>
+            <a class="media clearfix" href="/brands/wumu/lists/946095?ref=sidebar">
               <span class="media-body">
-                <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
-                <span>熊貓料理</span>
+								<img src="/images/recipe-default.png" alt="愛料理廚房" class="pull-left img-responsive">
+                <span>愛料理廚房</span>
               </span>
-              <span class="text-right pull-right">28 道食譜</span>
+              <span class="text-right pull-right">8 道食譜</span>
             </a>
           </li>
-          <li class="clearfix">
-            <a class="media clearfix" href="#">
+          <li>
+            <a class="media clearfix" href="/brands/wumu/lists/946095?ref=sidebar">
               <span class="media-body">
-                  <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
-                <span>蓋飯</span>
+								<img src="/images/recipe-default.png" alt="電鍋好味道" class="pull-left img-responsive">
+                <span>電鍋好味道</span>
               </span>
-              <span class="text-right pull-right">389 道食譜</span>
+              <span class="text-right pull-right">186 道食譜</span>
             </a>
           </li>
-          <li class="clearfix">
-            <a class="media clearfix" href="#">
-              <span class="media-body">
-                <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
-                <span>奶酪</span>
-              </span>
-              <span class="text-right pull-right">166 道食譜</span>
-            </a>
-          </li>
-          <li class="clearfix">
-            <a class="media clearfix" href="#">
-              <span class="media-body">
-                  <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
-                <span>寶寶副食品</span>
-              </span>
-              <span class="text-right pull-right">426 道食譜</span>
-            </a>
-          </li>
-        </ol>
+        </ul>
       </div>
     </div>
   </div>
@@ -74,11 +56,16 @@ $popular-recipe-lists-text: #aa8f83 !default;
 $popular-recipe-lists-icon-bg: $white !default;
 $popular-recipe-lists-icon-text: $orange !default;
 
-// brands 精選清單 / popular 推薦分類
-// popular-recipe-lists
+// brands 精選清單
 .popular-recipe-lists {
   li {
+		padding-bottom: 10px;
     position: relative;
+
+    + li {
+      border-top: 1px solid $basic-border;
+			padding-top: 10px;
+    }
   }
 
   a {

data/app/assets/stylesheets/{widgets/brands/_pr-recent.scss → components/sidebars/_brand-recent-events.scss}

@@ -1,12 +1,12 @@
-// -----------------------------------
-// Brand sidebar widgets - pr recent
-// -----------------------------------
+//-----------------------------------------------
+// Components - Sidebars - brand recent events
+// ----------------------------------------------
 
 /*doc
 ---
-parent: 06_brand_sidebar_widgets
-title: Pr recent
-name: pr_recent
+parent: 17_sidebars
+title: Brand recent events
+name: 08_brand_recent_events
 ---
 
 <div class="row">
@@ -33,7 +33,12 @@ $pr-recent-title: #888 !default;
 
 .pr-recent {
   li {
-    padding-top: 10px;
+    padding-bottom: 10px;
+
+    + li {
+      border-top: 1px solid $basic-border;
+      padding-top: 10px;
+    }
   }
 
   a {

data/app/assets/stylesheets/{widgets/brands/_pr-video.scss → components/sidebars/_brand-video.scss}

@@ -1,12 +1,12 @@
-// -----------------------------------
-// Brand sidebar widgets - pr video
-// -----------------------------------
+// ----------------------------------------------
+// Components - Sidebars - brand video
+// ----------------------------------------------
 
 /*doc
 ---
-parent: 06_brand_sidebar_widgets
-title: Pr video
-name: pr_video
+parent: 17_sidebars
+title: Brand video
+name: 10_brand_video
 ---
 
 <div class="row">

data/app/assets/stylesheets/{widgets/sidebar-widgets → components/sidebars}/_business-kitchen.scss

@@ -1,15 +1,15 @@
-// -----------------------------------
-// Sidebar widgets - business kitchen
-// -----------------------------------
+// -------------------------------------------
+// Components - Sidebars - business kitchen
+// -------------------------------------------
 
 /*doc
 ---
-parent: 04_sidebar_widgets
+parent: 17_sidebars
 title: Business kitchen
-name: business_kitchen
+name: 01_business_kitchen
 ---
 <div class="row">
-  <div class="col-xs-12 col-sm-5">
+  <div class="col-xs-12 col-sm-6">
     <div class="inner-block widget business-accounts">
       <h3 class="title">品牌廚房<a rel="nofollow" class="link-to-more pull-right" href="#">更多</a></h3>
       <ul>
@@ -85,6 +85,7 @@ $recipes-business-accounts-brand-name: #777 !default;
 
 .business-accounts {
   li {
+    margin-top: 0;
     padding: 10px 0;
 
     > .media-left a {
@@ -93,16 +94,20 @@ $recipes-business-accounts-brand-name: #777 !default;
       width: 88px;
     }
 
+    + li {
+      border-top: 1px solid $basic-border;
+    }
+
+    &:first-child {
+      padding-top: 0;
+    }
+
     img {
       background-color: $recipes-business-accounts-bg;
       width: 100%;
     }
   }
 
-  .title {
-    margin-bottom: 10px;
-  }
-
   .recipe-title,
   .brand-name {
     @include ellipsis;

data/app/assets/stylesheets/components/sidebars/_hot-categories.scss

@@ -0,0 +1,212 @@
+// -----------------------------------------
+// Components - Sidebars - hot categories
+// -----------------------------------------
+
+/*doc
+---
+parent: 17_sidebars
+title: Hot categories
+name: 03_hot_categories
+---
+
+<div class="row">
+  <div class="col-xs-12 col-sm-6">
+    <div class="hot-categories">
+      <div class="title">精選主題分類</div>
+      <ul class="clearfix">
+        <li>
+          <a title="羊肉" href="#">
+            <div class="img">
+              <img alt="羊肉" src="/images/recipe-default.png">
+            </div>
+            <span>羊肉</span>
+          </a>
+        </li>
+        <li>
+          <a title="芒果" href="#">
+            <div class="img">
+              <img alt="芒果" src="/images/recipe-default.png">
+            </div>
+            <span>芒果</span>
+          </a>
+        </li>
+        <li>
+          <a title="餃子鍋貼" href="#">
+            <div class="img">
+                <img alt="餃子鍋貼" src="/images/recipe-default.png">
+            </div>
+            <span>餃子鍋貼</span>
+          </a>
+        </li>
+        <li>
+          <a title="餛飩抄手" href="#">
+            <div class="img">
+              <img alt="餛飩抄手" src="/images/recipe-default.png">
+            </div>
+            <span>餛飩抄手</span>
+          </a>
+        </li>
+        <li>
+          <a title="苦瓜" href="#">
+            <div class="img">
+              <img alt="苦瓜" src="/images/recipe-default.png">
+            </div>
+            <span>苦瓜</span>
+          </a>
+        </li>
+        <li>
+          <a title="草莓" href="#">
+            <div class="img">
+              <img alt="草莓" src="/images/recipe-default.png">
+            </div>
+            <span>草莓</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+*/
+
+$hot-categories-title-bg: #f9f7f2 !default;
+$hot-categories-link: #888 !default;
+$hot-categories-link-hover: $ic-brown !default;
+
+.hot-categories {
+  background-color: $white;
+  border: 1px solid $basic-border;
+  margin-bottom: 20px;
+
+  .title {
+    background-color: $hot-categories-title-bg;
+    border-bottom: 1px solid $basic-border;
+    color: $ic-brown;
+    line-height: 1;
+    margin-bottom: 0;
+    padding: 14px 15px;
+    text-align: left;
+  }
+
+  ul {
+    background-color: $white;
+    display: -ms-flexbox; // IE10
+    display: -webkit-flex; //safari
+    display: box; //for only support old ver. browsers...
+    display: flex;
+    -ms-flex-pack: center;
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+    margin-bottom: 0;
+    padding: 15px 15px 0;
+  }
+
+  li {
+    -ms-flex: none;
+    -webkit-flex: none;
+    border-bottom: 0;
+    flex: none;
+    list-style: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    padding-top: 0;
+    width: 48%;
+
+    a {
+      color: $hot-categories-link;
+      display: block;
+
+      &:hover {
+        color: $hot-categories-link-hover;
+      }
+    }
+  }
+
+  .img {
+    border-radius: 3px;
+    overflow: hidden;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  span {
+    @include ellipsis;
+
+    color: $ic-brown;
+    display: block;
+    font-size: 16px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    text-align: left;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .hot-categories {
+    li {
+      &:first-child {
+        margin-left: -1em;
+      }
+
+      &:last-child {
+        margin-right: -1em;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .hot-categories {
+    ul {
+      -ms-flex-wrap: nowrap;
+      -webkit-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+		}
+
+    li {
+      width: 19%;
+
+      + li {
+        margin-left: 0.6em;
+			}
+		}
+
+    .img {
+      height: 100%;
+		}
+	}
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .hot-categories {
+    li:last-child {
+      display: none;
+    }
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .hot-categories {
+    ul {
+      display: block;
+		}
+
+    li {
+      float: left;
+      width: 48%;
+
+      + li {
+        margin-left: 0;
+			}
+
+      &:nth-child(even) {
+        float: right;
+			}
+		}
+	}
+}

data/app/assets/stylesheets/{widgets/sidebar-widgets → components/sidebars}/_icook-video.scss

@@ -1,14 +1,14 @@
 @import "compass/typography/text/ellipsis";
 
-// ------------------------------
-// Sidebar widgets - icook video
-// ------------------------------
+// --------------------------------------
+// Components - Sidebars - icook video
+// --------------------------------------
 
 /*doc
 ---
-parent: 04_sidebar_widgets
+parent: 17_sidebars
 title: iCook video
-name: icook_video
+name: 06_icook_video
 ---
 
 <div class="row">

data/app/assets/stylesheets/{widgets/sidebar-widgets → components/sidebars}/_popular-recipes.scss

@@ -1,12 +1,12 @@
-// ----------------------------------
-// Sidebar widgets - popular recipes
-// ----------------------------------
+// ------------------------------------------
+// Components - Sidebars - popular recipes
+// ------------------------------------------
 
 /*doc
 ---
-parent: 04_sidebar_widgets
+parent: 17_sidebars
 title: Popular recipes
-name: popular_recipes
+name: 04_popular_recipes
 ---
 
 <div class="row">