cupboard 0.2.0

data/app/assets/stylesheets/widgets/sidebar-widgets/_sidebar-widget.scss

@@ -0,0 +1,62 @@
+//
+// Widgets - sidebar widget
+//
+// --------------------------
+// default sidebar widget basic style
+.widget {
+  padding-left: 11px;
+  padding-right: 11px;
+  
+  .title {
+    border-bottom: 1px solid #aa0000 !important;
+    color: #aa0000;
+    font-size: 16px;
+    line-height: 20px;
+    margin: 0 0 10px;
+    padding-bottom: 10px;
+  }
+
+  ul,
+  ol {
+    padding-left: 0;
+  }
+
+  ul,
+  ol,
+  li {
+    list-style-type: none;
+    margin: 0;
+  }
+
+  li {
+    border-bottom: 1px solid #ebe5e1;
+    padding: 10px 0;
+    
+    &:first-child {
+      padding-top: 0;
+    }
+    
+    &:last-child {
+      border-bottom: 0;
+      padding-bottom: 0;
+    }
+
+    a {
+      color: #5c4544;
+      display: block;
+      
+      &:hover {
+        color: #ac8c85;
+      }
+    }
+  }
+}
+
+.widget + .ad {
+  margin-top: 20px;
+
+  iframe {
+    margin: 0 auto;
+    display: block;
+  }
+}

data/app/assets/stylesheets/widgets/tv/_tv-more-recipes.scss

@@ -0,0 +1,93 @@
+// ----------------------------------
+// TV sidebar widgets - more recipes
+// ----------------------------------
+
+/*doc
+---
+parent: 07_tv_sidebar_widgets
+title: TV more recipes
+name: 07_tv_more_recipes
+---
+
+<div class="row">
+  <div class="col-xs-12 col-sm-4">
+    <div class="inner-block widget widget-tv more-recipes">
+      <h4 class="title">
+        便當食譜
+        <a class="more pull-right" target="_blank" href="#">更多</a>
+      </h4>
+      <div class="media">
+        <div class="pull-left">
+          <a title="簡單。炸雞便當" target="_blank" href="#">
+            <img alt="簡單。炸雞便當" class="img-responsive" src="/images/recipe-default.png">
+          </a>
+        </div>
+        <div class="media-body">
+          <a title="簡單。炸雞便當" target="_blank" href="#">
+            <div class="recipe-name">簡單。炸雞便當</div>
+          </a>
+        </div>
+      </div>
+      <div class="media">
+        <div class="pull-left">
+          <a title="牛丼便當" target="_blank" href="#">
+            <img alt="牛丼便當" class="img-responsive" src="/images/recipe-default.png">
+          </a>
+        </div>
+        <div class="media-body">
+          <a title="牛丼便當" target="_blank" href="#">
+            <div class="recipe-name">牛丼便當</div>
+          </a>
+        </div>
+      </div>
+      <div class="media">
+        <div class="pull-left">
+          <a title="悶燒罐便當 家常味增" target="_blank" href="#">
+            <img alt="悶燒罐便當 家常味增" class="img-responsive" src="/images/recipe-default.png">
+          </a>
+        </div>
+        <div class="media-body">
+          <a title="悶燒罐便當 家常味增" target="_blank" href="#">
+            <div class="recipe-name">悶燒罐便當 家常味增</div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+*/
+
+$more-recipes-title: $ic-brown !default;
+
+.more-recipes {
+  .media + .media {
+    margin-top: 10px;
+  }
+
+  .media-body {
+    line-height: 5em;
+  }
+
+  .pull-left {
+    height: 66px;
+    width: 88px;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .recipe-name {
+    color: $more-recipes-title;
+    display: inline-block;
+    font-size: 16px;
+    line-height: 1.4;
+    vertical-align: middle;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+

data/app/assets/stylesheets/widgets/tv/_tv-popular-tags.scss

@@ -0,0 +1,78 @@
+// ----------------------------------
+// TV sidebar widgets - popular tags
+// ----------------------------------
+
+/*doc
+---
+parent: 07_tv_sidebar_widgets
+title: TV popular tags
+name: 07_tv_popular_tags
+---
+
+<div class="row">
+  <div class="col-xs-12 col-sm-5">
+    <div class="inner-block widget widget-tv">
+      <div class="popular-tags">
+        <h4 class="title">熱門主題</h4>
+        <ul class="clearfix tags">
+          <li class="tag"><a href="#"><span>點心</span></a></li>
+          <li class="tag"><a href="#"><span>西式料理</span></a></li>
+          <li class="tag"><a href="#"><span>便當</span></a></li>
+          <li class="tag"><a href="#"><span>食材處理</span></a></li>
+          <li class="tag"><a href="#"><span>烘焙</span></a></li>
+          <li class="tag"><a href="#"><span>歐式料理</span></a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+*/
+
+$tv-widget-title: $ic-brown !default;
+$tag-link: #8c8783 !default;
+$tag-link-bg: #efede8 !default;
+$tag-link-hover: $ic-brown !default;
+$video-tag-bg: #8c8783 !default;
+
+.widget-tv {
+  .title {
+    border-bottom: 1px solid $tv-widget-title !important;
+    color: $tv-widget-title;
+  }
+}
+
+.popular-tags {
+  .tags {
+    margin-bottom: -10px;
+  }
+
+  .tag {
+    border-bottom: 0;
+    display: inline-block;
+    float: left;
+    line-height: 1.6;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    padding-bottom: 0;
+    padding-top: 0;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    a {
+      background-color: $tag-link-bg;
+      border-radius: 20px;
+      color: $tag-link;
+      font-size: 16px;
+      padding: 4px 10px;
+
+      &:hover {
+        color: $tag-link-hover;
+        text-decoration: none;
+			}
+		}
+	}
+}
+
+

data/app/assets/stylesheets/widgets/users/_fav-list.scss

@@ -0,0 +1,197 @@
+@import "compass/typography/text/ellipsis";
+
+// --------------------------------
+// User sidebar widgets - fav list
+// --------------------------------
+
+/*doc
+---
+parent: 05_user_sidebar_widgets
+title: User favorites list
+name: fav_list
+---
+
+<div class="row">
+	<div class="col-xs-12 col-sm-4">
+		<div class="navbar accordion-list to-filter">
+			<div class="navbar-header">
+				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#brands-lists-menu">看所有分類
+				</button>
+			</div>
+			<div class="collapse navbar-collapse" id="brands-lists-menu">
+				<ul class="nav navbar-nav">
+					<li class="active">
+						<a class="clearfix" href="#">
+							<span class="item">所有發表</span>
+						</a>
+					</li>
+					<li>
+						<a class="clearfix" href="#">
+							<span class="item">網友熱搜下飯菜</span>
+							<span class="num">5</span>
+						</a>
+					</li>
+					<li>
+						<a class="clearfix" href="#">
+							<span class="item">網友熱搜電鍋菜</span>
+							<span class="num">6</span>
+						</a>
+					</li>
+					<li>
+						<a class="clearfix" href="#">
+							<span class="item">愛料理廚房</span>
+							<span class="num">21</span>
+						</a>
+					</li>
+					<li>
+						<a class="clearfix" href="#">
+							<span class="item">愛料理食驗室</span>
+							<span class="num">22</span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
+*/
+
+$accordion-list-bg: $white !default;
+$accordion-list-title: #efede8 !default;
+$accordion-list-link: #777 !default;
+$accordion-list-link-active: $brown !default;
+$accordion-list-link-hover-text: $white !default;
+$accordion-list-border: #ebe5e1 !default;
+$accordion-list-button: $brown !default;
+
+.accordion-list {
+  .navbar-collapse {
+    max-height: 100%;
+    padding: 0;
+  }
+
+  .title {
+    background-color: $accordion-list-title;
+    font-size: 14px;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding: 10px;
+  }
+
+  .item {
+    @include ellipsis;
+
+    float: left;
+    line-height: 1.6;
+    max-width: 75%;
+  }
+
+  .num {
+    float: right;
+  }
+
+  ul,
+  li {
+    float: none;
+  }
+
+  ul {
+    margin: 0;
+    padding-top: 0;
+  }
+
+  li {
+    padding: 10px;
+
+    a {
+      color: $accordion-list-link;
+      padding: 0;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    + li {
+      border-top: 1px solid $accordion-list-border;
+    }
+
+    &:hover {
+      .item {
+        text-decoration: underline;
+      }
+
+      .num {
+        background-color: $accordion-list-link;
+      }
+    }
+
+    &.active {
+      .item {
+        color: $accordion-list-link-active;
+      }
+
+      .num {
+        background-color: $accordion-list-link-active;
+      }
+    }
+
+    &:hover,
+    &.active {
+      .num {
+        border-radius: 20px;
+        color: $accordion-list-link-hover-text;
+        font-size: 12px;
+        line-height: 1.4;
+        padding: 2px 5px;
+      }
+    }
+  }
+
+  button {
+    @include icon-b("\f0dd");
+
+    color: $accordion-list-button;
+    margin: 0;
+    padding: 10px 15px;
+    text-align: left;
+    width: 100%;
+
+    &::after {
+      font-size: 20px;
+      height: 20px;
+      margin-left: 0;
+      position: absolute;
+      right: 10px;
+      top: 4px;
+    }
+
+    &.open::after {
+      content: "\f0d8";
+      top: 0;
+    }
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .accordion-list {
+    background-color: $accordion-list-bg;
+    border-color: $accordion-list-border;
+    border-top: 0;
+    margin-bottom: 15px;
+
+    ul {
+      margin: 0;
+    }
+
+    li {
+      padding-left: 15px;
+      padding-right: 15px;
+
+      &:first-child {
+        border-top: 1px solid $accordion-list-border;
+      }
+    }
+  }
+}
+

data/app/assets/stylesheets/widgets/users/_user-stats.scss

@@ -0,0 +1,330 @@
+// ----------------------------------
+// User sidebar widgets - user stats
+// ----------------------------------
+
+/*doc
+---
+parent: 05_user_sidebar_widgets
+title: User stats
+name: user_stats
+---
+<div class="row">
+  <div class="col-xs-12 col-sm-6">
+    <p>in users page</p>
+    <div class="inner-block widget">
+      <div class="author-box">
+        <div class="text-center">
+          <a rel="author" class="author" href="#">
+            <img alt="" class="avatar img-circle" src="/images/default-avatar.png" width="80" height="80"/>
+            <span itemprop="author" class="author">iCook 愛料理</span>
+          </a>
+        </div>
+        <ul class="stats-tabs clearfix">
+          <li><a href="#"><span>食譜</span>34</a></li>
+          <li><a href="#"><span>料理</span>5</a></li>
+          <li>
+            <a href="#">
+              <span>粉絲</span>
+              <span id="followers-num">
+                <span data-reactroot="" class="">525</span>
+              </span>
+            </a>
+          </li>
+          <li><a href="#"><span>訂閱</span>1340</a></li>
+        </ul>
+        <div class="user-following">
+          <a class="btn btn-follow-user follow" href="#"></a>
+        </div>
+        <div class="desc">
+          <h3>關於我</h3>
+          <div id="about-the-user">
+            <p>iCook 愛料理 歡迎你~</p>
+          </div>
+          <div class="user-url">
+            <a rel="nofollow" target="_blank" href="http://icook.tw">http://icook.tw</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xs-12 col-sm-6">
+    <p>in recipes page</p>
+    <div class="inner-block widget">
+			<div class="author-box author-box-recipes">
+				<a rel="author" class="author" href="#">
+					<img alt="" class="avatar img-circle" src="/images/default-avatar.png" width="80" height="80" />
+				</a>
+				<a rel="author" class="author" itemprop="author" href="#">iCook 愛料理</a>
+				<ul class="stats-tabs clearfix" id="stats-tabs">
+				  <li>
+            <a href="#">
+              <span class="pull-left">34</span>
+              <span class="pull-right">食譜</span>
+            </a>
+          </li>
+					<li>
+						<a href="#">
+							<span class="pull-left">5</span>
+							<span class="pull-right">料理</span>
+            </a>
+          </li>
+					<li>
+						<a href="#">
+							<span class="pull-left">525</span>
+							<span class="pull-right">粉絲</span>
+            </a>
+          </li>
+					<li>
+						<a href="#">
+							<span class="pull-left">1340</span>
+							<span class="pull-right">訂閱</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+*/
+
+$users-stats-tabs-border: $basic-bg !default;
+$users-stats-tabs-link: #aaa !default;
+$users-stats-tabs-link-hover: $ic-brown !default;
+$users-stats-tabs-small-title: $ic-brown !default;
+$users-author-box-text: #888 !default;
+$users-author-text: $ic-brown !default;
+$users-desc-title-bg: $basic-bg !default;
+$users-desc-title: $ic-brown !default;
+$users-desc-link: $orange !default;
+$users-user-url-link: $orange !default;
+$users-author-box-recipes-border: #dadada !default;
+$users-author-box-recipes-link-hover: $ic-brown !default;
+$users-author-box-recipes-item-count: #9b9b9b !default;
+$users-author-box-recipes-item-name: $ic-brown !default;
+
+.stats-tabs {
+  border-top: 1px solid $users-stats-tabs-border;
+  padding-bottom: 15px;
+  padding-top: 20px;
+  text-align: center;
+
+  li {
+    border-bottom: 0;
+    display: inline-block;
+    min-width: 20%;
+    padding: 0;
+
+    a {
+      color: $users-stats-tabs-link;
+      display: block;
+      font-size: 24px;
+
+      &:hover {
+        color: $users-stats-tabs-link-hover;
+        text-decoration: none;
+      }
+    }
+  }
+
+  a > span {
+    &:nth-child(2) {
+      font-size: 24px;
+      text-align: center;
+    }
+
+    &:nth-child(1) {
+      color: $users-stats-tabs-small-title;
+      font-size: 14px;
+    }
+  }
+
+  .tooltip .tooltip-inner {
+    width: 100%;
+  }
+}
+
+.author-box {
+  color: $users-author-box-text;
+  margin-top: 5px;
+
+  .avatar {
+    border-radius: 50%;
+    height: 80px;
+    margin-bottom: 10px;
+    width: 80px;
+  }
+
+  .author {
+    color: $users-author-text;
+    font-size: 20px;
+
+    &:hover {
+      color: $users-author-text;
+    }
+  }
+
+  span:not(.inline-action-box) {
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  .inline-action-box {
+    display: block;
+    margin: 15px 0 -10px;
+  }
+
+  .btn-follow-user {
+    border-radius: 2px;
+    display: block;
+    font-size: 14px;
+    height: 30px;
+  }
+
+  .desc {
+    margin-top: -5px;
+    word-wrap: break-word;
+
+    > div {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+
+    h3 {
+      background-color: $users-desc-title-bg;
+      color: $users-desc-title;
+      font-size: 14px;
+      height: 30px;
+      padding: 7px;
+      text-align: center;
+
+      + div {
+        margin-bottom: 18px;
+      }
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+
+    a {
+      color: $users-desc-link;
+    }
+  }
+}
+
+.user-url {
+  line-height: 1;
+  margin-bottom: 10px;
+
+  p {
+    margin-bottom: 10px;
+  }
+
+  a {
+    color: $users-user-url-link;
+  }
+}
+
+// in recipes/shows
+.author-box-recipes {
+  margin-top: 0;
+
+  .author:first-child,
+  .avatar {
+    height: 42px;
+    width: 42px;
+  }
+
+  .author {
+    font-size: 16px;
+    line-height: 0;
+
+    &:first-child {
+      float: left;
+      margin-bottom: 0;
+      margin-right: 15px;
+    }
+  }
+
+  .avatar {
+    display: inline-block;
+    font-size: 16px;
+  }
+
+  .stats-tabs {
+    border-top: 0;
+    line-height: 0;
+    padding-bottom: 0;
+    padding-top: 5px;
+    text-align: left;
+
+    li {
+      min-width: inherit;
+      padding: 0;
+
+      + li a {
+        border-left: 1px solid $users-author-box-recipes-border;
+        display: block;
+        margin-left: 6px;
+        overflow: hidden;
+        padding-left: 10px;
+      }
+
+      a {
+        padding: 0;
+
+        &:hover span {
+          color: $users-author-box-recipes-link-hover;
+        }
+      }
+    }
+
+    span {
+      letter-spacing: 0;
+      line-height: 1;
+      margin-bottom: 0;
+
+      &.pull-left {
+        color: $users-author-box-recipes-item-count;
+        line-height: 13px;
+        padding-right: 3px;
+      }
+
+      &.pull-right {
+        color: $users-author-box-recipes-item-name;
+        font-size: 13px;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .author-box-recipes {
+    .author:first-child {
+      margin-right: 4.5%;
+    }
+
+    .stats-tabs li {
+      + li a {
+        margin-left: 3px;
+        padding-left: 5px;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 320px) {
+  .author-box-recipes {
+    .author:first-child {
+      margin-right: 10px;
+    }
+
+    .stats-tabs li {
+      + li a {
+        margin-left: 2px;
+        padding-left: 5px;
+      }
+    }
+  }
+}
+