cupboard 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f0b251982e9b8b6faa4567d4f3040524100d5d40
-  data.tar.gz: 74c5cffe43801d67041dbcaf630b7d73547aefb4
+  metadata.gz: cdc7984cb878320d62ba448330f251070b47f05c
+  data.tar.gz: b1401a732f3379950b9edcf15430ce05cd95af71
 SHA512:
-  metadata.gz: 16b8941e5a357eac074571f6dc02ce6eaf0594dc5ad2a22cd57280106a1f9253499c8b0ad0bd66eb4b275f913d9b0fdab25dbc7bd4cac00417da7cc1328c0656
-  data.tar.gz: 01a410b2bd017366f9abf93e93ad54fbb26cd4a682e002792357e1ccbac30e12e6bfb159cbaa65c8cb19af4bb4f0927657d2f44914ed8b1700eba517441f807b
+  metadata.gz: 1c24eb88690e2a0bda6761c77ff04a9e52a74d17db6c5aa3fc7a7bc807649dbbd463c3c962d2660f669aac0795ba1b1c8cbe183c3be3db6f2a87d640c71cd960
+  data.tar.gz: 2616a33bf1651261439c7b33359cb7fa1202f917469259411f0cb0e11f90e9c136c3ae5258884dcbde2d00222a411bc7e397eec82e85cb2569c53a0f5486d9af

data/Dockerfile

@@ -7,13 +7,14 @@ ENV APP_HOME /app
 RUN mkdir $APP_HOME
 WORKDIR $APP_HOME
 
-ADD example/Gemfile* $APP_HOME/example/
-RUN cd example && bundle install
+RUN gem i bundler
 
 ADD . $APP_HOME
 
+RUN bundle install
+RUN cd example && bundle install
+
 WORKDIR $APP_HOME/example
 
-# 這邊再跑一次才能安裝 cupboard 的 dependency
-RUN bundle install
-RUN bundle exec rake assets:precompile assets:clean RAILS_ENV=production
+RUN middleman build
+CMD puma -p $PORT -e $RACK_ENV

data/README.md

@@ -6,6 +6,7 @@ Welcome to your new gem! In this directory, you'll find the files you need to be
 
 1. v0.1.0 - static html pages
 2. v0.2.0 - contents generated by Hologram
+3. v0.2.1 - refactor files
 
 ## Installation
 

data/app/assets/pages/index.md

@@ -1,13 +1,11 @@
 ---
 hologram: true
-title: Develop principles
+title: Guidelines
 name: index
 category: index
 ---
 
-> Yes, we use Bootstrap as our basic css framework, and use SCSS and Compass for our improvements. Both them are used from ruby gems (check the Gemfiles).
-
-## Conventions
+### Conventions
 
 * Use soft-tabs with a two space indent.
 * Keep sorted in first alphabetical order of rule declarations.

data/app/assets/stylesheets/_base.scss

@@ -1,4 +1,9 @@
-@import "base/buttons";
-@import "base/badge";
-@import "icookfont.scss";
-
+// -------------------
+// Base
+// -------------------
+@import
+"base/basic",
+"base/typography",
+"base/lists",
+"base/forms",
+"base/table";

data/app/assets/stylesheets/_components.scss

@@ -1,95 +1,111 @@
 // --------------------------------
 // Components
 // --------------------------------
-//
-// breadcrumbs / pagination / order
+// icons
+@import "components/icons/icon-status";          // card status
+@import "components/icons/footer-social-icons";  // footer social icons
+
+// Buttons
+@import "components/buttons";
+
+// Sorting cards(order)
+@import "components/sorting-cards";
+
+// Search form
+@import "components/search-form";
+
+// Badges
+@import "components/badges";
+
+// Breadcrumbs
 @import "components/breadcrumbs";
+
+// Pagination
 @import "components/pagination";
-@import "components/sorting-cards";
 
 // --------------------------------
-// Form component
+// Cards
 // --------------------------------
-// - search form
-@import "components/search-form";
-// - comment form
-@import "components/comments/comment-form";
+@import "components/cards/recipe-card";  // recipe card - must imported before others
+@import "components/cards/photo-card";   // photo card
+@import "components/cards/list-card";    // list card
+@import "components/cards/dish-card";    // dish card
+@import "components/cards/video-card";   // videor card
+@import "components/cards/feeds-card";   // feed card in homepage
+@import "components/cards/brand-product-card";  // product card in brands
+@import "components/cards/product-card";        // product card in market
 
 // --------------------------------
-// Single comments
+// Alerts
 // --------------------------------
-@import "components/single_comment/single-comment";
+@import "components/alerts/alert-global";    // basic alert
+@import "components/alerts/alert-market";    // market notice
+@import "components/alerts/alert-no-result"; // no result
 
 // --------------------------------
-// Alert
+// Recipes
 // --------------------------------
-@import "components/alerts/alert-global";
-@import "components/alerts/alert-market";
+@import "components/recipes/recipe-details";  // recipe details
+@import "components/recipes/ingredients";     // recipe ingredients
+@import "components/recipes/steps";           // recipe steps
+@import "components/recipes/notes";           // recipe notes
+@import "components/recipes/recipe-navi";     // recipe navigation
 
 // --------------------------------
-// Navigation
+// Navigations
 // --------------------------------
-// - recipes nav
-@import "components/navigations/recipe-nav";
-// - categories nav
-@import "components/navigations/categories-nav";
-@import "components/navigations/categories-nav-responsive";
-// - brands nav
-@import "components/navigations/brand-tabs-nav";
-// - blog nav
-@import "components/navigations/blog-nav";
-// - tv nav
-@import "components/navigations/tv-nav";
+@import "components/navigations/categories-navi";  // categories navigaiton
+@import "components/navigations/categories-navi-responsive";
+@import "components/navigations/brand-tabs-navi";  // brand navigation
+@import "components/navigations/blog-navi";        // blog navigation
+@import "components/navigations/tv-navi";          // tv navigation
 
 // --------------------------------
-// Cards
+// Comments
 // --------------------------------
-// - recipe card
-@import "components/cards/recipe-card"; //must imported before others
-@import "components/cards/list-card";
-@import "components/cards/photo-card";
-// - dish card
-@import "components/cards/dish-card";
-// - product card in market
-@import "components/cards/product-card";
-// - video card in TV
-@import "components/cards/video-card";
+@import "components/comments/comment-form";    // comment form
+@import "components/comments/single-comment";  // single comment
 
 // --------------------------------
-// Recipe pieces
+// Covers
 // --------------------------------
-@import "components/recipes/ingredients";
-@import "components/recipes/steps";
-@import "components/recipes/notes";
+@import "components/covers/categories-cover";  // categories cover
+@import "components/covers/brand-cover";       // brands cover
 
 // --------------------------------
-// Media blocks
+// Users
 // --------------------------------
-// block thumbs //Figure with caption
-// @import "components/medias/blog-feeds";
-// @import "components/medias/icook-videos";
-// @import "components/medias/popular-categories";
-// @import "components/medias/popular-recipes";
-// @import "components/medias/hot-categories";
-// @import "components/medias/user-recipes";
-// @import "components/medias/pr-lists";
-// @import "components/medias/recipe-reference";
-// block cover
-@import "components/medias/categories-cover";
-@import "components/medias/brand-cover";
-// block nested
-// @import "components/medias/business-kitchen";
-// @import "components/medias/brand-product";
+@import "components/users/user-stats";  // user stats
+@import "components/users/fav-list";    // user favorites list
 
 // --------------------------------
-// Accordion
+// Features
 // --------------------------------
-// market - qna
-// @import "components/accordion";
+@import "components/features/feature-slides";  // feature slides
+@import "components/features/feature-events";  // feature events
 
 // --------------------------------
-// Text
+// Modals
 // --------------------------------
-@import "components/text";
+@import "components/modals/modal-reset";        // override default modal
+@import "components/modals/recipe-list-modal";  // recipe list modal
 
+// --------------------------------
+// Sidebars
+// --------------------------------
+@import "components/sidebars/sidebar-basic";     // default sidebar styles
+@import "components/sidebars/business-kitchen";  // business kitchen
+@import "components/sidebars/popular-search";    // popular search
+@import "components/sidebars/hot-categories";    // hot categories
+@import "components/sidebars/popular-recipes";   // popular recipes
+@import "components/sidebars/recipes-collect";   // recipes collect
+@import "components/sidebars/icook-video";       // icook video
+// - Brands
+@import "components/sidebars/brand-popular-lists";  // brand popular lists
+@import "components/sidebars/brand-recent-events";  // brand recent events
+@import "components/sidebars/brand-ingredients";    // brand ingredients
+@import "components/sidebars/brand-video";          // brand video
+// - TV
+@import "components/sidebars/tv-more-recipes";  // tv more recipes
+@import "components/sidebars/tv-popular-tags";  // tv popular tags
 

data/app/assets/stylesheets/_helpers.scss

@@ -0,0 +1,14 @@
+// --------------------------------
+// Helpers - variables and mixins
+// --------------------------------
+// variables
+@import "helpers/variables-color";
+
+// mixins
+@import
+"helpers/mixin-animation",
+"helpers/mixin-icons",
+"helpers/mixin-buttons",    //must after icons
+"helpers/mixin-badge",
+"helpers/mixin-alert";
+

data/app/assets/stylesheets/_layouts.scss

@@ -1,4 +1,14 @@
+// --------------------------------
+// Layouts
+// --------------------------------
+// Grids
+@import "layouts/grids";
+
+// Headers
 @import "layouts/global-navbar";
 @import "layouts/sub-header-market";
+
+// Footers
 @import "layouts/footer-nav";
-@import "layouts/footer";
+@import "layouts/base-footer";
+

data/app/assets/stylesheets/{widgets/_widgets.scss → base/_base.scss}

@@ -1,11 +1,12 @@
 // ----------------------------
-// Widgets
+// Base
 // ----------------------------
 
 /*doc
 ---
-title: Widgets
-name: 03_widgets
-category: modular_widgets
+title: CSS
+name: 01_base
+category: CSS
 ---
 */
+

data/app/assets/stylesheets/base/_basic.scss

@@ -0,0 +1,24 @@
+// ------------------
+// Base - basic
+// ------------------
+
+$selection-color: #564e42 !default;
+$selection-bg: #e3d6cc !default;
+
+body {
+  font-family: "Helvetica Neue", "Microsoft Jhenghei", Helvetica, Arial, Geneva, sans-serif;
+  letter-spacing: 0.06em;
+}
+
+::selection {
+  color: $selection-color;
+  background-color: $selection-bg;
+}
+
+.inner-block {
+  background-color: $white;
+  border: 1px solid $basic-border;
+  margin-bottom: 10px;
+  padding: 20px 15px;
+}
+

data/app/assets/stylesheets/{_forms.scss → base/_forms.scss}

@@ -1,12 +1,12 @@
 // ----------------------------
-// Form
+// Base - forms
 // ----------------------------
 
 /*doc
 ---
+parent: 01_base
 title: Forms
-name: 6_forms
-category: Design elements
+name: 3_forms
 ---
 
 Basic form, select menu, checkbox, radio button

data/app/assets/stylesheets/base/_lists.scss

@@ -0,0 +1,70 @@
+// -----------------
+// Base - lists
+// -----------------
+
+/*doc
+---
+parent: 01_base
+title: Lists
+name: 2_Lists
+---
+
+### Unordered list
+<div class="ic-lists">
+  <small>orign</small><br/>
+</div>
+
+- 所有發表
+- 網友熱搜電鍋菜
+- 愛瘦身食堂
+- 愛料理 TV
+- 愛料理活動
+
+<br/>
+
+```
+<ul>
+  <li>...</li>
+</ul>
+````
+
+---
+
+### Ordered list
+<div class="ic-lists">
+  <small>orign</small><br/>
+</div>
+
+1. 馬鈴薯
+2. 地瓜
+3. 豬肉
+4. 洋蔥
+5. 起司早餐
+
+```
+<ol>
+  <li>...</li>
+</ol>
+```
+
+---
+
+### Description
+
+<dl>
+  <dt>豬肉</dt>
+  <dd>豬肉不同的部位，口感也都不同，如:里肌、後腿、梅花、五花、松阪豬、嘴邊肉等。</dd>
+  <dt>雞肉</dt>
+  <dd>常見的雞肉料理方式有炸雞、烤雞、燉雞、雞湯、雞肉飯等等。</dd>
+  <dt>牛肉</dt>
+  <dd>牛肉味道鮮美，是受全世界人喜愛的食品，其料理方式主要有生、烤、炒、煮、肉球或肉乾等等。</dd>
+</dl>
+
+```
+<dl>
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+```
+
+*/

data/app/assets/stylesheets/{_tables.scss → base/_table.scss}

@@ -1,12 +1,12 @@
 // ----------------------------
-// Table
+// Base - table
 // ----------------------------
 
 /*doc
 ---
+parent: 01_base
 title: Tables
-name: 7_Tables
-category: Design elements
+name: 4_tables
 ---
 
 Table view examples (in Market)
@@ -59,7 +59,7 @@ Table view examples (in Market)
     <tr class="limit">
       <td class="media">
         <span class="img pull-left">
-          <img alt="Icook bag" class="img-responsive" src="http://placehold.it/640x480">
+          <img alt="Icook bag" class="img-responsive" src="images/recipe-default.png">
         </span>
         <div class="media-body">
           <span class="title">愛料理生活購物袋 - 限定（手提）大款</span>

data/app/assets/stylesheets/{_typography.scss → base/_typography.scss}

@@ -1,15 +1,28 @@
-// -------------
-// Typography
-// -------------
+// --------------------
+// Base - typography
+// --------------------
 
 /*doc
 ---
+parent: 01_base
 title: Typography
-name: 2_typography
-category: Design elements
+name: 1_typography
 ---
 
-Headings, Paragraph, Blockquote, Time format, default definitions also may be customized in multi sites.
+### Fonts
+
+Currently we're using
+`"Helvetica Neue", "Microsoft Jhenghei", Helvetica, Arial, Geneva, sans-serif` as our default body font sets, and with default `letter-spacing: 0.06em;` .
+
+[Normal] Cooking is a happiness thing, sharing recipes is that to share happiness to more people.<br/>
+[一般] 料理是一件幸福的事，分享食譜則是分享幸福給更多的人。
+
+**[Bold] Cooking is a happiness thing, share recipes is that to share happiness to more people.<br/>
+[粗體] 料理是一件幸福的事，分享食譜則是分享幸福給更多的人。**
+
+*[Italic] Cooking is a happiness thing, share recipes is that to share happiness to more people.<br/>
+[斜體] 料理是一件幸福的事，分享食譜則是分享幸福給更多的人。*
+<hr/>
 
 ### Heading
 
@@ -73,8 +86,7 @@ h6 { font-size: 16px; }
 
 ### Paragraph
 Note **DO NOT** forget to check other non-desktop devices...<br/>
-Bet:200
-ter typography better reading experiences.
+Better typography better reading experiences.
 
 
 iCook
@@ -189,50 +201,45 @@ padding: 10px 25px;
 <div class="recipe-published">發表於 2012/12/30</div>
 ```
 
-*/
-
-// headings
-.ic-headings {
-  &.icook + .codeExample {
-    h1 { font-size: 28px; }
-    h2 { font-size: 24px; }
-    h3 { font-size: 18px; }
-    h4 { font-size: 16px; }
-  }
+<hr/>
+### Byline
+
+<div class="row">
+	<div class="col-xs-12 col-md-3">
+		<p>recipe card - iCook</p>
+		<p class="byline">by <a href="#">愛料理</a></p>
+	</div>
+	<div class="col-xs-12 col-md-5 tv-sub-info">
+		<p>TV</p>
+		<span class="byline">
+      於&nbsp; 2015/2/17&nbsp;發表
+      <a href="#">闔家團圓年菜</a>
+		  阿嬌
+    </span>
+	</div>
+</div>
 
-  &.market + .codeExample {
-    h1 { font-size: 22px; }
-    h2 { font-size: 18px; }
-    h3 { font-size: 18px; }
-    h4 { font-size: 19px; }
-  }
+<hr/>
+### Small text
+<div class="row">
+	<div class="col-xs-12 col-md-6">
+		<p>recipe card (list-card) - iCook</p>
+		<small class="material">食材：豬絞肉、青蔥(切末)、水餃皮、清水、醬油、味霖、鹽、白胡椒粉</small>
+	</div>
+	<div class="col-xs-12 col-md-6">
+		<p>sku - Market</p>
+		<small class="sku-small">不分大小款，凡購買三個愛料理生活購物袋即享免運</small>
+	</div>
+</div>
 
-  &.blog + .codeExample {
-		h1 { font-size: 34px; }
-		h2 { font-size: 30px; }
-		h3 { font-size: 26px; }
-		h4 { font-size: 24px; }
-		h5 { font-size: 18px; }
-		h6 { font-size: 16px; }
-  }
-}
 
-// paragraph
-.ic-paragraph {
-  &.icook + .codeExample p {
-    color: #888;
-    font-size: 15px;
-    letter-spacing: 0.03em;
-  }
+*/
 
-  &.blog + .codeExample p {
-    color: #444;
-    font-size: 16px;
-    letter-spacing: 0.04em;
-    line-height: 1.8em;
-    margin: 1em 0;
-  }
-}
+// default global body styles
+$byline-text: #a5a5a5 !default;
+$byline-link: #777 !default;
+$material-text: #aa8f83 !default;
+$sku-small-text: #555 !default;
 
 // blockquote
 %blockquote {
@@ -251,32 +258,6 @@ padding: 10px 25px;
   }
 }
 
-.ic-blockquote.blog + .codeExample blockquote {
-  @extend %blockquote;
-
-  color: #444;
-  font-size: 14px;
-  padding: 30px 50px 30px 56px;
-
-  &::before {
-    left: 20px;
-    top: 20px;
-  }
-}
-
-.ic-blockquote.market + .codeExample blockquote {
-  @extend %blockquote;
-
-  color: #555;
-  font-size: 16px;
-  padding: 10px 25px;
-
-  &::before {
-    left: 10px;
-    top: 10px;
-  }
-}
-
 // time format
 .cooking-time {
   @include icon("\f017");
@@ -290,3 +271,17 @@ padding: 10px 25px;
   font-size: 14px;
 }
 
+// byline and small text
+.byline {
+  color: $byline-text;
+
+  a {
+    color: $byline-link;
+  }
+}
+
+.material {
+  color: $material-text;
+  font-size: 13px;
+  max-height: 40px;
+}

data/app/assets/stylesheets/components/_alerts.scss

@@ -0,0 +1,12 @@
+// --------------------------------
+// Components - Alerts
+// --------------------------------
+
+/*doc
+---
+title: Alerts
+name: 06_alerts
+category: Components
+---
+
+*/

data/app/assets/stylesheets/{base/_badge.scss → components/_badges.scss}

@@ -1,12 +1,12 @@
 // --------------------------------
-// Badges
+// Components - Badges
 // --------------------------------
 
 /*doc
 ---
-title: Badge
-name: 02_badge
-category: UI components
+name: 03_badges
+title: Badges
+category: Components
 ---
 
 <div><p>simply add <code>.badge-</code> class as below</p></div>
@@ -87,3 +87,4 @@ $badge-vip-bg: $orange !default;
     width: 18px;
   }
 }
+