cupboard 0.2.0 → 0.2.1

data/app/assets/stylesheets/components/modals/_recipe-list-modal.scss

@@ -0,0 +1,169 @@
+// ----------------------------------------
+// Components - Modals - Recipe list modal
+// ----------------------------------------
+
+/*doc
+---
+parent: 16_modals
+title: Recipe list modal
+name: 01_recipe_list_modal
+---
+
+<div class="modal-inner list-recipe-modal">
+  <div class="modal-dialog model-content clearfix">
+    <div class="modal-header">加入我的清單</div>
+    <div class="modal-body">
+      <div class="lists-info">
+        <div class="list-info">
+          <div class="list-type">收藏食譜清單</div>
+          <ul>
+            <li><label class="list-name"><input type="checkbox" value="on">魚</label></li>
+            <li><label class="list-name"><input type="checkbox" value="on">牛排</label></li>
+            <li><label class="list-name"><input type="checkbox" value="on">義大利麵</label></li>
+          </ul>
+        </div>
+        <div class="list-info">
+          <div class="list-type">發表食譜清單</div>
+            <ul>
+              <li><label class="list-name"><input type="checkbox" value="on">愛料理食譜</label></li>
+            </ul>
+          </div>
+        <div class="list-info">
+          <div class="list-type">商品清單</div>
+          <ul>
+            <li><label class="list-name"><input type="checkbox" value="on">愛料理市集</label></li>
+            <li><label class="list-name"><input type="checkbox" value="on">Test</label></li>
+          </ul>
+        </div>
+      </div>
+      <div class="recipe-info hidden-xs">
+        <img src="/images/recipe-default.png">
+      </div>
+    </div>
+    <div class="modal-footer">
+      <a class="list-setting" href="#">清單管理</a>
+      <button class="btn btn-link btn-cancel">取消</button>
+      <button class="btn btn-submit">儲存</button>
+    </div>
+  </div>
+</div>
+
+*/
+
+$list-recipe-modal-text: #666 !default;
+$list-recipe-modal-list-name: #888 !default;
+$list-recipe-modal-btn-submit-bg: #9fbe4c !default;
+
+.list-recipe-modal {
+  .modal-header {
+    background-color: $orange;
+    color: $white;
+    font-size: 16px;
+    padding: 9px 30px;
+    text-align: center;
+  }
+
+  .modal-body {
+    background-color: $basic-bg;
+    font-size: 14px;
+    height: 330px;
+    padding: 15px;
+
+    ul {
+      list-style-type: none;
+    }
+
+    .list-type {
+      background-color: $basic-bg;
+      color: $list-recipe-modal-text;
+      margin: 0;
+      padding: 8px;
+    }
+  }
+
+  .recipe-info {
+    display: inline-block;
+    float: left;
+    margin-left: 15px;
+    width: 220px;
+
+    img {
+      height: 165px;
+      width: 100%;
+    }
+  }
+
+  .lists-info {
+    background-color: $white;
+    display: inline-block;
+    float: left;
+    height: 290px;
+    overflow-y: scroll;
+    padding: 15px;
+    width: 260px;
+
+    ul {
+      padding: 15px 20px;
+    }
+
+    .list-name {
+      color: $list-recipe-modal-list-name;
+    }
+
+    input {
+      margin-right: 5px;
+    }
+  }
+
+  .modal-footer {
+    background-color: $basic-bg;
+    margin-top: 0;
+    padding: 0 20px 15px;
+
+    .btn-cancel {
+      color: $list-recipe-modal-list-name;
+      margin: 0;
+      padding: 0;
+
+    }
+
+    .btn-submit {
+      background-color: $list-recipe-modal-btn-submit-bg;
+      color: $white;
+      margin-left: 15px;
+      padding: 8px;
+      width: 120px;
+    }
+  }
+
+  .list-setting {
+    @include btn-icon("\f040", 14px, $ic-brown, transparent);
+
+    bottom: 45px;
+    color: $ic-brown;
+    left: 15px;
+    position: absolute;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .list-recipe-modal {
+    .modal-dialog {
+      width: 526px;
+    }
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .list-recipe-modal {
+    .modal-dialog {
+      margin: 30px auto;
+      width: 290px;
+    }
+  }
+}
+

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

@@ -1,12 +1,12 @@
-// --------------------------------
-// Navigation - blog
-// --------------------------------
+// ---------------------------------
+// Components - Navigations - blog
+// ---------------------------------
 
 /*doc
 ---
-parent: 08_navigations
+parent: 09_navigations
 title: Blog navigation
-name: blog_navigation
+name: 03_blog_navi
 ---
 
 ```html_example

data/app/assets/stylesheets/components/navigations/{_brand-tabs-nav.scss → _brand-tabs-navi.scss}

@@ -1,40 +1,16 @@
-// --------------------------------
-// Navigation - brand tabs
-// --------------------------------
+// --------------------------------------
+// Components - Navigations - Brand tabs
+// --------------------------------------
 
 /*doc
 ---
-parent: 08_navigations
+parent: 09_navigations
 title: Brand navigation
-name: brand_navigation
+name: 02_brand_tabs_navi
 ---
 
 <div><p>brands tabs</p></div>
-<div>
-  <ul class="brand-tabs">
-    <li class="brand-tab active">
-      <a href="#"><span>食譜</span></a>
-    </li>
-    <li class="brand-tab">
-      <a href="#"><span>收藏</span></a>
-    </li>
-    <li class="brand-tab">
-      <a href="#"><span>料理</span></a>
-    </li>
-    <li class="brand-tab">
-      <a href="#"><span>商品</span></a>
-    </li>
-    <li class="brand-tab">
-      <a href="#"><span>專欄</span></a>
-    </li>
-    <li id="brand-campaigns">
-      <a href="#"><span>活動</span></a>
-    </li>
-    <li class="brand-tab">
-      <a href="#"><span>草稿</span></a>
-    </li>
-  </ul>
-</div>
+
 ```html_example
 <div>
   <ul class="brand-tabs">

data/app/assets/stylesheets/components/navigations/{_categories-nav-responsive.scss → _categories-navi-responsive.scss}

@@ -1,8 +1,6 @@
-//
-// Navigation - categories
-//
-// --------------------------
-//
+// --------------------------------------
+// Components - Navigations - categories
+// --------------------------------------
 // categories navigation responsive
 @media only screen and (min-width: 769px) and (max-width: 991px) {
   .mega-menu {
@@ -39,11 +37,11 @@
     ul,
     li {
       margin-bottom: 0;
-      padding: 0;     
+      padding: 0;
     }
 
     ul {
-      background-color: #fff;
+      background-color: $white;
       border: 0;
     }
 
@@ -61,7 +59,7 @@
         border-bottom: 0 !important;
       }
     }
-  
+
     .list-title:before {
       top: 8px;
     }
@@ -82,7 +80,7 @@
     button {
       @include icon-b("\f0d8");
 
-      color: #564e4a;
+      color: $ic-brown;
       display: block;
       font-size: 13px;
       margin: 0;

data/app/assets/stylesheets/components/navigations/_categories-navi.scss

@@ -0,0 +1,203 @@
+// ---------------------------------------
+// Components - Navigations - Categories
+// ---------------------------------------
+
+/*doc
+---
+parent: 09_navigations
+title: Category navigation
+name: 01_category_navi
+---
+
+in categories/index
+
+```html_example
+<div class="entries mega-menu">
+  <ul class="main-menu clearfix">
+    <li class="list-group-item">
+      <div class="panel-group">
+        <div class="img hidden-xs hidden-sm">
+          <a href="#"><img alt="" src="http://placehold.it/80x60" width="80"></a>
+        </div>
+        <a class="list-title" href="#">五穀雜糧</a>
+        <ul class="list-group hidden-xs">
+          <li class="list-group-item"><a href="#">玉米</a></li>
+          <li class="list-group-item"><a href="#">藜麥</a></li>
+        </ul>
+      </div>
+    </li>
+  </ul>
+</div>
+```
+
+*/
+
+// categories/index
+$mega-menu-icon: #aa8f83 !default;
+
+.mega-menu {
+  background-color: $white;
+  border-width: 0 0 1px;
+  margin-bottom: 0;
+
+  .list-title {
+    @include icon("\f0da");
+
+    display: block;
+    color: $ic-brown;
+    font-size: 16px;
+    padding-left: 10px;
+    position: relative;
+
+    &::before {
+      color: $mega-menu-icon;
+      font-size: 18px;
+      left: 0;
+      margin-right: 0;
+      position: absolute;
+      top: 4px;
+      width: 12px;
+    }
+  }
+
+  .list-group-item {
+    border-radius: 0;
+    border: 0;
+    margin-bottom: 0;
+    padding: 0;
+
+    &:hover > .accordion-heading > .list-title {
+      color: $ic-brown;
+    }
+
+    &.active a {
+      color: $ic-brown;
+      text-decoration: underline;
+    }
+  }
+
+  .main-menu {
+    margin-bottom: 0;
+    padding-left: 0;
+    padding-top: 20px;
+
+    > .list-group-item {
+      border-right: 1px solid $basic-border;
+      float: left;
+      margin-bottom: 20px;
+      padding-left: 15px;
+      padding-right: 5px;
+      width: 16.6%;
+
+      &:nth-child(6n) {
+        border-right: 0;
+      }
+
+      > .list-title {
+        border-bottom: 1px solid $basic-border;
+        color: $ic-brown;
+        font-size: 16px;
+        margin-bottom: 5px;
+        padding-bottom: 5px;
+        padding-left: 10px;
+      }
+    }
+  }
+
+  .panel-group {
+    margin-bottom: 0;
+
+    .list-group-item {
+      padding: 3px 0 0 10px;
+    }
+  }
+
+  .list-group {
+    margin-bottom: 0;
+
+    .list-group-item {
+      margin-left: 10px;
+      padding-left: 0;
+    }
+
+    a {
+      color: #888;
+      display: block;
+      line-height: 26px;
+      padding: 0;
+    }
+
+    &:hover {
+      color: #999;
+    }
+  }
+
+  .main-menu > .list-group-item,
+  .panel-group > .list-group-item {
+    > .list-title {
+      color: #5c4545;
+    }
+  }
+
+  .img {
+    background-color: #eeede8;
+    height: 60px;
+    margin-bottom: 15px;
+    overflow: hidden;
+    width: 80px;
+  }
+}
+
+// categories/show
+.cate-menu {
+  padding: 0;
+
+  .navbar-collapse {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .panel-group {
+    margin-left: 5px;
+  }
+
+  .main-menu {
+    padding-top: 0;
+
+    & > .list-group-item {
+      border-right: 0;
+      float: none;
+      padding-left: 25px;
+      padding-right: 0;
+      width: 100%;
+
+      a {
+        line-height: 26px;
+      }
+
+      .list-title {
+        font-size: 14px;
+        margin-left: 15px;
+        padding-left: 0;
+
+        &:before {
+          left: -12px;
+        }
+      }
+    }
+  }
+
+  .list-group .list-group-item {
+    margin-left: 15px;
+  }
+
+  .title {
+    background-color: #f7f6f3;
+    padding: 5px 10px;
+    margin-bottom: 10px;
+
+    a {
+      color: #564e4a;
+    }
+  }
+}

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

@@ -1,53 +1,14 @@
 // --------------------------------
-// Navigation - tv
+// Components - Navigations - tv
 // --------------------------------
 
 /*doc
 ---
-parent: 08_navigations
+parent: 09_navigations
 title: TV navigation
-name: tv_navigation
+name: 04_tv_navi
 ---
 
-<div class="tv-nav">
-  <div class="navba tv-series">
-    <div class="navbar-header">
-      <a href="#" class="title hidden-xs"><span>愛料理 TV</span><span>35</span></a>
-      <button type="button" class="navbar-toggle in collapsed" data-target="#series-collapse" data-toggle="collapse" aria-expanded="false">愛料理 TV</button>
-    </div>
-    <div class="navbar-collapse collapse" id="series-collapse">
-      <ul class="nav navbar-nav">
-        <li class="visible-xs"><a href="#">全系列</a></li>
-        <li>
-          <a class="clearfix" href="#">
-            <span><span class="item">早午餐</span><span class="num visible-xs">5</span></span>
-          </a>
-        </li>
-        <li>
-          <a class="clearfix" href="#">
-            <span><span class="item">義大利麵</span><span class="num visible-xs">5</span></span>
-          </a>
-        </li>
-        <li>
-          <a class="clearfix" href="#">
-            <span><span class="item">歐陸家常菜</span><span class="num visible-xs">5</span></span>
-          </a>
-        </li>
-        <li>
-          <a class="clearfix" href="#">
-            <span><span class="item">甜蜜午茶</span><span class="num visible-xs">5</span></span>
-          </a>
-        </li>
-        <li>
-          <a class="clearfix" href="#">
-            <span><span class="item">在地台灣味</span><span class="num visible-xs">5</span></span>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-
 ```html_example
 <div class="tv-nav">
   <div class="navba tv-series">
@@ -74,6 +35,14 @@ name: tv_navigation
             </span>
           </a>
         </li>
+        <li>
+          <a class="clearfix" href="#">
+            <span>
+              <span class="item">在地台灣味</span>
+              <span class="num visible-xs">5</span>
+            </span>
+          </a>
+        </li>
       </ul>
     </div>
   </div>

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

@@ -1,12 +1,12 @@
 // --------------------------------
-// Recipe components - ingredients
+// Components - Recipe Ingredients
 // --------------------------------
 
 /*doc
 ---
-name: 22_recipe_ingredients
-title: Recipe ingredients
-category: UI components
+parent: 08_recipes
+name: 01_ingredients
+title: Ingredients
 ---
 
 <div>&nbsp;</div>
@@ -109,12 +109,6 @@ $ingredient-group7-text: #4b0050 !default;
 $ingredient-group7-bg: #f6e3fb !default;
 $ingredient-group8-text: #50291b !default;
 $ingredient-group8-bg: #fad6c8 !default;
-$recipe-detail-border: $basic-border !default;
-$recipe-detail-text: #888 !default;
-// recipe-detail
-$recipe-detail-title: $ic-brown !default;
-$recipe-detail-title-border: $basic-border !default;
-$recipe-detail-time: #888 !default;
 $recipe-notes-bg: #fefee5 !default;
 $recipe-notes-border: #fee59a !default;
 $recipe-notes-text: #666 !default;
@@ -161,63 +155,3 @@ $recipe-notes-text: #666 !default;
   }
 }
 
-.recipe-detail {
-  .ingredient {
-    border-bottom: 1px solid $recipe-detail-border;
-    color: $recipe-detail-text;
-    line-height: 1.2;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    text-align: left;
-  }
-
-  .ingredient-name {
-    max-width: 75%;
-  }
-
-  .group {
-    margin-top: 10px;
-  }
-
-  .group-0 .ingredient:first-child {
-    padding-top: 0;
-  }
-
-  h3 {
-    border-bottom: 1px solid $recipe-detail-title;
-    color: $recipe-detail-title;
-    font-size: 16px;
-    line-height: 20px;
-    margin: 0;
-    padding-bottom: 5px;
-  }
-
-  .time {
-    @include icon("\f017");
-
-    color: $recipe-detail-time;
-  }
-
-
-  .notes {
-    background-color: $recipe-notes-bg;
-    border-top: 4px solid $recipe-notes-border;
-    margin-top: 15px;
-    padding: 20px 30px;
-
-    h3 {
-      border-bottom: 0;
-      font-size: 20px;
-      line-height: 22px;
-      padding-bottom: 20px;
-    }
-
-    p {
-      color: $recipe-notes-text;
-      font-size: 16px;
-      margin-bottom: 0;
-      word-wrap: break-word;
-    }
-  }
-
-}

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

@@ -1,12 +1,12 @@
 // --------------------------------
-// Recipe components - notes
+// Components - Recipe notes
 // --------------------------------
 
 /*doc
 ---
-name: 24_recipe_notes
-title: Recipe notes
-category: UI components
+parent: 08_recipes
+name: 03_notes
+title: Notes
 ---
 
 <div class="notes">

data/app/assets/stylesheets/components/recipes/_recipe-details.scss

@@ -0,0 +1,48 @@
+// --------------------------------
+// Components - Recipe details
+// --------------------------------
+
+$recipe-detail-border: $basic-border !default;
+$recipe-detail-text: #888 !default;
+$recipe-detail-title: $ic-brown !default;
+$recipe-detail-title-border: $basic-border !default;
+$recipe-detail-time: #888 !default;
+
+.recipe-detail {
+  .ingredient {
+    border-bottom: 1px solid $recipe-detail-border;
+    color: $recipe-detail-text;
+    line-height: 1.2;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    text-align: left;
+  }
+
+  .ingredient-name {
+    max-width: 75%;
+  }
+
+  .group {
+    margin-top: 10px;
+  }
+
+  .group-0 .ingredient:first-child {
+    padding-top: 0;
+  }
+
+  h3 {
+    border-bottom: 1px solid $recipe-detail-title;
+    color: $recipe-detail-title;
+    font-size: 16px;
+    line-height: 20px;
+    margin: 0;
+    padding-bottom: 5px;
+  }
+
+  .time {
+    @include icon("\f017");
+
+    color: $recipe-detail-time;
+  }
+}
+