Update design by Ray

2014-06-30 17:05:56 +08:00 · 2014-06-30 17:05:56 +08:00 · 14402d44fa
parent d2b38cd0da
commit 14402d44fa
46 changed files with 983 additions and 380 deletions
--- a/.ruby-version
+++ b/.ruby-version
@ -0,0 +1 @@
+ruby 2.1.1
--- a/app/templates/orbit_bootstrap/assets/javascripts/app.js
+++ b/app/templates/orbit_bootstrap/assets/javascripts/app.js
@ -28,10 +28,14 @@ var response = function(width, element, fns) {
  });
 }
 $(function() {
+
+  // 當有次選單時自動加入icon指標
  $('.modules-menu-level-1, .modules-menu-level-2').before('<i class="fa fa-angle-down"></i>');
  $('.modules-menu').on('click', '.fa', function(event) {
    $(this).next('ul').slideToggle(300);
  });
+
+  // 移除當主選單在小螢幕時次選單被點擊後的display屬性
  var menuLevel1 = new response(786, $('.modules-menu-level-1'), {
    "over": function() {menuLevel1.element.removeAttr('style');},
    "less": function() {return false}
--- a/app/templates/orbit_bootstrap/assets/javascripts/plugin/jquery.cycle2.carousel.min.js
+++ b/app/templates/orbit_bootstrap/assets/javascripts/plugin/jquery.cycle2.carousel.min.js
@ -0,0 +1,2 @@
+/* Plugin for Cycle2; Copyright (c) 2012 M. Alsup; v20140114 */
+(function(e){"use strict";e(document).on("cycle-bootstrap",function(e,t,i){"carousel"===t.fx&&(i.getSlideIndex=function(e){var t=this.opts()._carouselWrap.children(),i=t.index(e);return i%t.length},i.next=function(){var e=t.reverse?-1:1;t.allowWrap===!1&&t.currSlide+e>t.slideCount-t.carouselVisible||(t.API.advanceSlide(e),t.API.trigger("cycle-next",[t]).log("cycle-next"))})}),e.fn.cycle.transitions.carousel={preInit:function(t){t.hideNonActive=!1,t.container.on("cycle-destroyed",e.proxy(this.onDestroy,t.API)),t.API.stopTransition=this.stopTransition;for(var i=0;t.startingSlide>i;i++)t.container.append(t.slides[0])},postInit:function(t){var i,n,s,o,r=t.carouselVertical;t.carouselVisible&&t.carouselVisible>t.slideCount&&(t.carouselVisible=t.slideCount-1);var l=t.carouselVisible||t.slides.length,c={display:r?"block":"inline-block",position:"static"};if(t.container.css({position:"relative",overflow:"hidden"}),t.slides.css(c),t._currSlide=t.currSlide,o=e('<div class="cycle-carousel-wrap"></div>').prependTo(t.container).css({margin:0,padding:0,top:0,left:0,position:"absolute"}).append(t.slides),t._carouselWrap=o,r||o.css("white-space","nowrap"),t.allowWrap!==!1){for(n=0;(void 0===t.carouselVisible?2:1)>n;n++){for(i=0;t.slideCount>i;i++)o.append(t.slides[i].cloneNode(!0));for(i=t.slideCount;i--;)o.prepend(t.slides[i].cloneNode(!0))}o.find(".cycle-slide-active").removeClass("cycle-slide-active"),t.slides.eq(t.startingSlide).addClass("cycle-slide-active")}t.pager&&t.allowWrap===!1&&(s=t.slideCount-l,e(t.pager).children().filter(":gt("+s+")").hide()),t._nextBoundry=t.slideCount-t.carouselVisible,this.prepareDimensions(t)},prepareDimensions:function(t){var i,n,s,o,r=t.carouselVertical,l=t.carouselVisible||t.slides.length;if(t.carouselFluid&&t.carouselVisible?t._carouselResizeThrottle||this.fluidSlides(t):t.carouselVisible&&t.carouselSlideDimension?(i=l*t.carouselSlideDimension,t.container[r?"height":"width"](i)):t.carouselVisible&&(i=l*e(t.slides[0])[r?"outerHeight":"outerWidth"](!0),t.container[r?"height":"width"](i)),n=t.carouselOffset||0,t.allowWrap!==!1)if(t.carouselSlideDimension)n-=(t.slideCount+t.currSlide)*t.carouselSlideDimension;else for(s=t._carouselWrap.children(),o=0;t.slideCount+t.currSlide>o;o++)n-=e(s[o])[r?"outerHeight":"outerWidth"](!0);t._carouselWrap.css(r?"top":"left",n)},fluidSlides:function(t){function i(){clearTimeout(s),s=setTimeout(n,20)}function n(){t._carouselWrap.stop(!1,!0);var e=t.container.width()/t.carouselVisible;e=Math.ceil(e-r),t._carouselWrap.children().width(e),t._sentinel&&t._sentinel.width(e),l(t)}var s,o=t.slides.eq(0),r=o.outerWidth()-o.width(),l=this.prepareDimensions;e(window).on("resize",i),t._carouselResizeThrottle=i,n()},transition:function(t,i,n,s,o){var r,l={},c=t.nextSlide-t.currSlide,a=t.carouselVertical,d=t.speed;if(t.allowWrap===!1){s=c>0;var u=t._currSlide,p=t.slideCount-t.carouselVisible;c>0&&t.nextSlide>p&&u==p?c=0:c>0&&t.nextSlide>p?c=t.nextSlide-u-(t.nextSlide-p):0>c&&t.currSlide>p&&t.nextSlide>p?c=0:0>c&&t.currSlide>p?c+=t.currSlide-p:u=t.currSlide,r=this.getScroll(t,a,u,c),t.API.opts()._currSlide=t.nextSlide>p?p:t.nextSlide}else s&&0===t.nextSlide?(r=this.getDim(t,t.currSlide,a),o=this.genCallback(t,s,a,o)):s||t.nextSlide!=t.slideCount-1?r=this.getScroll(t,a,t.currSlide,c):(r=this.getDim(t,t.currSlide,a),o=this.genCallback(t,s,a,o));l[a?"top":"left"]=s?"-="+r:"+="+r,t.throttleSpeed&&(d=r/e(t.slides[0])[a?"height":"width"]()*t.speed),t._carouselWrap.animate(l,d,t.easing,o)},getDim:function(t,i,n){var s=e(t.slides[i]);return s[n?"outerHeight":"outerWidth"](!0)},getScroll:function(e,t,i,n){var s,o=0;if(n>0)for(s=i;i+n>s;s++)o+=this.getDim(e,s,t);else for(s=i;s>i+n;s--)o+=this.getDim(e,s,t);return o},genCallback:function(t,i,n,s){return function(){var i=e(t.slides[t.nextSlide]).position(),o=0-i[n?"top":"left"]+(t.carouselOffset||0);t._carouselWrap.css(t.carouselVertical?"top":"left",o),s()}},stopTransition:function(){var e=this.opts();e.slides.stop(!1,!0),e._carouselWrap.stop(!1,!0)},onDestroy:function(){var t=this.opts();t._carouselResizeThrottle&&e(window).off("resize",t._carouselResizeThrottle),t.slides.prependTo(t.container),t._carouselWrap.remove()}}})(jQuery);
--- a/app/templates/orbit_bootstrap/assets/stylesheets/bootstrap/_pagination.scss
+++ b/app/templates/orbit_bootstrap/assets/stylesheets/bootstrap/_pagination.scss
@ -9,8 +9,7 @@

  > li {
    display: inline; // Remove list-style and block-level defaults
-    > a,
-    > span {
+    > a {
      position: relative;
      float: left; // Collapse white-space
      padding: $padding-base-vertical $padding-base-horizontal;
@ -19,22 +18,13 @@
      color: $pagination-color;
      background-color: $pagination-bg;
      border: 1px solid $pagination-border;
-      // margin-left: -1px;
      margin: 0 0.5em;
    }
-    // &:first-child {
-    //   > a,
-    //   > span {
-    //     margin-left: 0;
-    //     // @include border-left-radius($border-radius-base);
-    //   }
-    // }
-    // &:last-child {
-    //   > a,
-    //   > span {
-    //     // @include border-right-radius($border-radius-base);
-    //   }
-    // }
+    &:first-child {
+      > a {
+        margin-left: 0;
+      }
+    }
  }

  > li > a,
--- a/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_unity.scss
+++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_unity.scss
@ -0,0 +1,37 @@
+// Title
+.unity-title {
+  margin-bottom: 1em;
+  border-bottom: 1px solid $theme-gray-light;
+  span {
+    display: inline-block;
+    margin-bottom: -2px;
+    border-bottom: 3px solid $brand-primary;
+  }
+  .layout-footer & {
+    margin-bottom: 10px;
+    border-bottom: none;
+    span {
+      display: inline;
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+  }
+}
+
+// More
+.unity-more {
+  white-space: nowrap;
+  color: $brand-primary;
+  text-decoration: underline;
+}
+
+// Status
+.status {
+  background-color: $theme-gray-light;
+  &.status-top {
+    background-color: $brand-primary;
+  }
+  &.status-hot {
+    background-color: $brand-danger;
+  }
+}
--- a/app/templates/orbit_bootstrap/assets/stylesheets/template/layout/content.scss
+++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/layout/content.scss
@ -1,4 +1,6 @@
 .layout-content {
+  min-height: 600px;
+  margin-bottom: 2em;
  .container {
    @extend .response-content;
  }
--- a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/ad_banner.scss
+++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/ad_banner.scss
@ -1,5 +1,5 @@
-.modules-adBanner {
-  .modules-adBanner-content {
+.widget-adBanner {
+  .widget-adBanner-content {
    width: 100%;
    .slide-img {
      @include size(100%, 100%);
@ -9,7 +9,7 @@
      }
    }
  }
-  .modules-adBanner-overlay {
+  .widget-adBanner-overlay {
    display: none !important;
    right: 0;
    bottom: 0;
@ -62,15 +62,15 @@
      }
    }
  }
-  &.home,
-  &.page, {
-    .modules-adBanner-overlay {
+  &.widget1,
+  &.widget2, {
+    .widget-adBanner-overlay {
      position: absolute;
      @extend .response-content;
    }
  }
-  &.home {
-    .modules-adBanner-content {
+  &.widget1 {
+    .widget-adBanner-content {
      .slide-img {
        max-height: 200px;
        @media (min-width: $screen-sm) {
@ -82,8 +82,8 @@
      }
    }
  }
-  &.page {
-    .modules-adBanner-content {
+  &.widget2 {
+    .widget-adBanner-content {
      .slide-img {
        max-height: 200px;
        @media (min-width: $screen-md) {
@ -92,13 +92,13 @@
      }
    }
  }
-  &.block {
-    .modules-adBanner-content {
+  &.widget3 {
+    .widget-adBanner-content {
      .slide-img {
        max-height: 200px;
      }
    }
-    .modules-adBanner-overlay {
+    .widget-adBanner-overlay {
      position: absolute;
    }
  }
--- a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/announcement.scss
+++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/announcement.scss
@ -1,102 +1,61 @@
-.modulesTitle {
-  margin-bottom: 1em;
-  border-bottom: 1px solid $theme-gray-light;
-  span {
-    display: inline-block;
-    margin-bottom: -2px;
-    border-bottom: 3px solid $brand-primary;
-  }
-}
-.modulesmMore {
-  white-space: nowrap;
-  color: $brand-primary;
-  text-decoration: underline;
-}
-
 // Announcement MODULES
-.modules-announcement {
-  .modules-title {
-    @extend .modulesTitle;
+.widget-announcement {
+  .widget-title {
+    @extend .unity-title;
  }
-  .modules-part-subtitle {
+  .widget-subtitle {
    color: lighten($theme-gray, 20%);
  }
-  .modules-content {
+  .widget-content {
    margin-bottom: 2em;
  }
-  &.boxes {
-    .modules-pic {
-      height: 180px;
-      .modules-part-date {
-        position: absolute;
-        bottom: 1em;
-        left: 0;
-        padding: 0.5em 0.8em;
-        font-size: 0.8em;
-        background-color: $brand-primary;
-        color: #fff;
-      }
-    }
-    .modules-part-title {
-      margin-bottom: 1em;
-      a {
-        color: $brand-primary;
-        text-decoration: none;
-      }
-    }
-    // 在aside區塊下的時候class「modules-part, modules-pic」的狀態
-    .aside & {
-      .modules-content {
-        width: auto;
-        float: none;
-      }
-    }
-  }
-  &.section {
-    .modules-pic {
-      height: 180px;
-      margin: 0 15px 1em;
-    }
-    .modules-content {
-      & + .modules-content {
+
+  // 對應_wudget1.html.erb
+  &.wudget1 {
+    .widget-content {
+      & + .widget-content {
        border-top: 1px dotted $theme-gray-light;
-        .section-inner {
+        .widget-content-inner {
          padding-top: 2em;
        }
      }
-    }
-    .modules-part-title {
-      margin-bottom: 1em;
-      font-size: 1.5em;
-      a {
-        color: $theme-gray-dark;
-        text-decoration: none;
+      .widget-pic {
+        height: 180px;
+        margin: 0 15px 1em;
      }
-    }
-    .modules-part-date {
-      display: block;
-      color: darken($theme-gray-light, 5%);
-      i {
-        color: $brand-primary;
+      .date {
+        display: block;
+        color: darken($theme-gray-light, 5%);
+        i {
+          color: $brand-primary;
+        }
      }
-    }
-    @media (min-width: $screen-sm) {
-      .modules-pic {
-        height: 150px;
-        margin: 0 0 1em;
+      .widget-content-title {
+        margin-bottom: 1em;
+        font-size: 1.5em;
+        a {
+          color: $theme-gray-dark;
+          text-decoration: none;
+        }
      }
-      .section-inner {
-        margin: 0;
-      }
-      .modules-part-title {
-        margin-bottom: 10px;
+      @media (min-width: $screen-sm) {
+        .widget-pic {
+          height: 150px;
+          margin: 0 0 1em;
+        }
+        .widget-content-inner {
+          margin: 0;
+        }
+        .widget-content-title {
+          margin-bottom: 10px;
+        }
      }
    }

-    // 在aside區塊下的時候class「modules-part, modules-pic」的狀態
-    .aside & {
-      .modules-part,
-      .modules-pic {
+    // 在 .layout-content .aside 的樣式
+    .layout-content .aside & {
+      .widget-part,
+      .widget-pic {
        width: auto;
        float: none;
        @media (min-width: $screen-sm) {
@ -105,62 +64,227 @@
      }
    }
  }
+
+  // 對應_wudget2.html.erb
+  &.wudget2 {
+    .widget-content {
+      .widget-pic {
+        height: 180px;
+        .date {
+          position: absolute;
+          bottom: 1em;
+          left: 0;
+          padding: 0.5em 0.8em;
+          font-size: 0.8em;
+          background-color: $brand-primary;
+          color: #fff;
+        }
+      }
+      .widget-content-title {
+        margin-bottom: 1em;
+        a {
+          color: $brand-primary;
+          text-decoration: none;
+        }
+      }
+
+      // 在 .layout-content .aside 的樣式
+      .layout-content .aside & {
+        width: auto;
+        float: none;
+      }
+    }
+  }
  .dotted {
    margin-top: 0;
  }
  .more {
-    @extend .modulesmMore;
+    @extend .unity-more;
  }
 }

 // Announcement INDEX
 .index-announcement {
  .index-title {
-    @extend .modulesTitle;
+    @extend .unity-title;
  }
-  .index-content {
+  &.index1 {
+    .index-content {
+      margin-bottom: 2em;
+      .date {
+        display: block;
+        margin-bottom: 1em;
+        color: darken($theme-gray-light, 5%);
+        i {
+          color: $brand-primary;
+        }
+      }
+    }
+    .index-content-inner {
+      border: 1px solid darken($theme-gray-lighter, 2%);
+      border-radius: 4px;
+      @include box-shadow(2px 2px 3px rgba($theme-gray-lighter, .8));
+    }
+    .index-pic {
+      height: 150px;
+      @include border-top-radius(3px);
+    }
+    .index-part {
+      padding: 1em;
+    }
+    .index-content-title {
+      margin-top: 0;
+      @media (min-width: $screen-sm) {
+        width: 100%;
+        line-height: 1.2em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      a {
+        color: $theme-gray;
+        text-decoration: none;
+      }
+    }
+    .index-subtitle {
+      color: lighten($theme-gray, 20%);
+      @media (min-width: $screen-sm) {
+        position: relative;
+        line-height: 1.5em;
+        overflow: hidden;
+        height: 1.5em*3;
+        max-height: 1.5em*3;
+        &:after {
+          content: "";
+          position: absolute;
+          bottom: -1.5em;
+          left: 0;
+          background-color: #eee;
+          @include size(100%, 1.5em);
+          @include box-shadow(0 -0.75em 10px #FFF);
+        }
+      }
+    }
+  }
+}
+
+// Announcement SHOW
+.show-announcement {
+  .show-title {
+    @extend .unity-title;
+  }
+  // .show-content {
+  //   padding-right: 0;
+  //   padding-left: 0;
+  //   .img {
+  //     display: inline-block;
+  //     width: 100%;
+  //     height: auto;
+  //     opacity: (0.8);
+  //     -webkit-filter: grayscale(100%) brightness(1.2);
+  //     -moz-filter: grayscale(100%) brightness(1.2);
+  //     filter: grayscale(100%) brightness(1.2);
+  //     @include transition(all 0.2s ease);
+  //   }
+  //   .show-content-inner {
+  //     position: relative;
+  //     padding: 2px;
+  //     z-index: 0;
+  //     @include scale(1);
+  //     @include transition(all 0.2s ease);
+  //     &:hover {
+  //       z-index: 1;
+  //       @include scale(1.1);
+  //       .img {
+  //         opacity: (1);
+  //         -webkit-filter: grayscale(0%) brightness(1);
+  //         -moz-filter: grayscale(0%) brightness(1);
+  //         filter: grayscale(0%) brightness(1);
+  //       }
+  //     }
+  //   }
+  // }
+  .post-metadata {
+    border-bottom: 1px solid $theme-gray-light;
+    @include clearfix();
+    li {
+      margin-right: 1em;
+      margin-bottom: 0.6em;
+      float: left;
+      &.metadata-tags {
+        position: relative;
+        margin-right: 0;
+        padding-left: 1.6em;
+        clear: both;
+        float: none;
+        i {
+          position: absolute;
+          top: 7px;
+          left: 0;
+        }
+      }
+      &.metadata-tags {
+        .tag {
+          display: inline-block;
+          margin-bottom: 4px;
+          padding: 5px 8px;
+          font-size: 0.8em;
+          color: $theme-gray;
+          border: 1px solid $theme-gray-light;
+          text-decoration: none;
+          &:hover {
+            color: $theme-color-main;
+            border-color: $theme-color-main;
+            background-color: $theme-gray-lighter;
+          }
+        }
+      }
+      i {
+        color: darken($theme-gray-light, 10%);
+      }
+    }
+  }
+  .post-section {
+    @include clearfix();
    margin-bottom: 2em;
-  }
-  .boxes-inner {
-    border: 1px solid darken($theme-gray-lighter, 2%);
-    border-radius: 4px;
-    @include box-shadow(2px 2px 3px rgba($theme-gray-lighter, .8));
-  }
-  .index-pic {
-    height: 150px;
-    @include border-top-radius(3px);
-  }
-  .index-part {
-    padding: 1em;
-  }
-  .index-part-title {
-    margin-top: 0;
-    @media (min-width: $screen-sm) {
-      line-height: 1.2em;
-      overflow: hidden;
-      max-height: 1.2em*3;
-      height: 1.2em*3;
-    }
-    a {
-      color: $theme-gray;
-      text-decoration: none;
+    .post-pic {
+      img {
+        @include size(100%, auto);
+      }
    }
  }
-  .index-part-date {
-    display: block;
-    margin-bottom: 1em;
-    color: darken($theme-gray-light, 5%);
-    i {
-      color: $brand-primary;
-    }
-  }
-  .index-part-subtitle {
-    color: lighten($theme-gray, 20%);
-    @media (min-width: $screen-sm) {
-      line-height: 1.5em;
-      overflow: hidden;
-      height: 1.5em*4;
-      max-height: 1.5em*4;
+  .post-related {
+    padding-top: 1em;
+    border-top: 1px solid $theme-gray-light;
+    li {
+      padding-bottom: 3px;
+      padding-left: 1.6em;
+      & + li {
+        padding-top: 8px;
+        border-top: 1px dotted $theme-gray-light;
+      }
+      i {
+        margin: 8px 0 0 -1.6em;
+        float: left;
+        color: darken($theme-gray-light, 10%);
+      }
+      & > div {
+        display: inline-block;
+      }
+      a {
+        display: inline-block;
+        margin-bottom: 4px;
+        padding: 5px 8px;
+        font-size: 0.8em;
+        color: $theme-gray;
+        border: 1px solid $theme-gray-light;
+        text-decoration: none;
+        &:hover {
+          color: $theme-color-main;
+          border-color: $theme-color-main;
+          background-color: $theme-gray-lighter;
+        }
+      }
    }
  }
 }
--- a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/archives.scss
+++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/archives.scss
@ -0,0 +1,28 @@
+// Link MODULES
+.widget-archive {
+  // 在 layout-content 下的樣式
+  .widget-title {
+    @extend .unity-title;
+  }
+  &.widget1 {
+    .widget-archive-item-group {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Link INDEX
+.index-archive {
+  .index-title {
+    @extend .unity-title;
+  }
+  &.index1 {
+    #index-archive-group {
+      .index-archives-files-list {
+        dd {
+          margin-bottom: 5px;
+        }
+      }
+    }
+  }
+}
--- a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/faq.scss
+++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/faq.scss
@ -0,0 +1,46 @@
+// Faqs MODULES
+.widget-faqs {
+  &.widget1 {
+    .widget-content {
+      padding-bottom: 10px;
+      & + .widget-content {
+        border-top: 1px dotted $theme-gray-light;
+      }
+      .widget-content-title {
+        display: inline-block;
+        padding: 5px 0;
+      }
+    }
+
+    // 在 layout-content 下的樣式
+    .layout-content & {
+      .widget-title {
+        @extend .unity-title;
+      }
+    }
+
+    // 在 layout-footer 下的樣式
+    .layout-footer & {
+      .widget-content {
+        line-height: 2em;
+        border-top-color: $theme-gray;
+      }
+    }
+  }
+}
+
+// Faqs INDEX
+.index-faqs {
+  .index-title {
+    @extend .unity-title;
+  }
+  &.index1 {
+    .index-content {
+      list-style-type: decimal-leading-zero;
+      list-style-position: inside;
+      & + .index-content {
+        border-top: 1px dotted $theme-gray-light;
+      }
+    }
+  }
+}
--- a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/gallery.scss
+++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/gallery.scss
@ -0,0 +1,121 @@
+// Gallery MODULES
+.widget-gallery {
+  .widget-title {
+    @extend .unity-title;
+  }
+  .widget-content {
+    position: relative;
+  }
+  &.widget1 {
+    .widget-content {
+      overflow: hidden;
+      .widget-pic {
+        display: inline-block;
+        padding: 1px;
+        text-align: center;
+        @include size(33.3333%, auto);
+        img {
+          @include size(100%, 100%);
+        }
+      }
+    }
+  }
+  &.widget2 {
+    .widget-content {
+      margin-left: -5px;
+      margin-right: -5px;
+      .widget-pic {
+        margin-bottom: 10px;
+        padding-left: 5px;
+        padding-right: 5px;
+        img {
+          @include size(100%, auto);
+        }
+      }
+    }
+  }
+}
+
+.index-gallery {
+  .index-title {
+    @extend .unity-title;
+  }
+  &.index1 {
+    .index-content {
+      .index-content-inner {
+        position: relative;
+      }
+      .index-part {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        bottom: 4px;
+        left: 4px;
+        overflow: hidden;
+        background-color: rgba($theme-color-main, 0.8);
+        @include transition(all 0.5s ease);
+        @include opacity(0);
+        .index-content-title {
+          @include transition(all 0.3s ease);
+          @include transition-delay(0.1s);
+          @include scale(0);
+        }
+        &:hover {
+          @include opacity(1);
+          .index-content-title {
+            @include scale(1);
+          }
+        }
+      }
+      .index-content-title {
+        display: table;
+        margin: 0;
+        @include size(100%, 100%);
+        a {
+          display: table-cell;
+          color: #FFF;
+          text-decoration: none;
+          text-align: center;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}
+
+.show-gallery {
+  .show-title {
+    @extend .unity-title;
+  }
+  .show-content {
+    padding-right: 0;
+    padding-left: 0;
+    .img {
+      display: inline-block;
+      width: 100%;
+      height: auto;
+      opacity: (0.8);
+      -webkit-filter: grayscale(100%) brightness(1.2);
+      -moz-filter: grayscale(100%) brightness(1.2);
+      filter: grayscale(100%) brightness(1.2);
+      @include transition(all 0.2s ease);
+    }
+    .show-content-inner {
+      position: relative;
+      padding: 2px;
+      z-index: 0;
+      @include scale(1);
+      @include transition(all 0.2s ease);
+      &:hover {
+        z-index: 1;
+        @include scale(1.1);
+        .img {
+          opacity: (1);
+          -webkit-filter: grayscale(0%) brightness(1);
+          -moz-filter: grayscale(0%) brightness(1);
+          filter: grayscale(0%) brightness(1);
+        }
+      }
+    }
+  }
+}
--- a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/web_resource.scss
+++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/web_resource.scss
@ -1,2 +1,47 @@
-.modules-link {
+// Link MODULES
+.widget-link {
+  // 在 layout-content 下的樣式
+  .widget-title {
+    @extend .unity-title;
+  }
+  &.widget1 {
+    .widget-content {
+      line-height: 2.5em;
+      & + .widget-content {
+        border-top: 1px dotted $theme-gray-light;
+      }
+      .widget-content-title {
+        display: inline-block;
+      }
+    }
+
+    // 在 layout-footer 下的樣式
+    .layout-footer & {
+      .widget-content {
+        line-height: 2em;
+        border-top-color: $theme-gray;
+      }
+    }
+  }
+}
+
+// Link INDEX
+.index-link {
+  .index-title {
+    @extend .unity-title;
+  }
+  &.index1 {
+    .index-content {
+      list-style-type: decimal-leading-zero;
+      list-style-position: inside;
+      & + .index-content {
+        border-top: 1px dotted $theme-gray-light;
+      }
+      .index-context {
+        display: inline-block;
+        margin: 0 0 10px 2em;
+        color: darken($theme-gray-light, 20%);
+      }
+    }
+  }
 }
--- a/app/templates/orbit_bootstrap/assets/stylesheets/template/template.scss
+++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/template.scss
@ -4,6 +4,7 @@
@import "bootstrap/variables";
@import "base/mixins";
@import "base/variables";
+@import "base/unity";

 // Layout
@import "layout/header";
@ -15,7 +16,10 @@
@import "modules/menu";
@import "modules/ad_banner";
@import "modules/announcement";
+@import "modules/faq";
@import "modules/web_resource";
+@import "modules/gallery";
+@import "modules/archives";

 body {
  font-family: 'Droid Sans';
--- a/app/templates/orbit_bootstrap/home/header.html.erb
+++ b/app/templates/orbit_bootstrap/home/header.html.erb
@ -1,3 +1,14 @@
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.0";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+
 <header class="navbar layout-header" role="navigation">
  <div class="container">
    <div class="header-nav" >
--- a/app/templates/orbit_bootstrap/home/page.html.erb
+++ b/app/templates/orbit_bootstrap/home/page.html.erb
@ -6,19 +6,19 @@
 <body>
  <%= render_orbit_bar %>
  <%= render_header %>
-  <section class="layout-slide" data-pp="4"></section>
+  <section class="layout-slide" data-pp="1"></section>

  <div class="layout-content">
    <div class="layout-content-inner container">
      <div class="row">
-        <section class="layout-content-box col-sm-8">
-        <div data-pp="1"></div>
-        <main id="main-content" data-content="true">
-          <%= yield %>
-        </main>
-        <div data-pp="2"></div>
+        <section class="layout-content-box col-sm-9">
+          <div data-pp="2"></div>
+          <main id="main-content" data-content="true">
+            <%= yield %>
+          </main>
+          <div data-pp="3"></div>
        </section>
-        <aside class="layout-content-box col-sm-4" data-pp="3"></aside>
+        <aside class="layout-content-box aside col-sm-3" data-pp="4"></aside>
      </div>
    </div>
  </div>
--- a/app/templates/orbit_bootstrap/modules/ad_banner/_widget.html.erb
+++ b/app/templates/orbit_bootstrap/modules/ad_banner/_widget.html.erb
@ -1,24 +0,0 @@
-<div class="modules-adBanner" >
-  <div class="cycle-slideshow modules-adBanner-content"
-      data-list="images"
-      data-level="0"
-      data-cycle-slides=".slide-img"
-      data-overlay=".modules-adBanner-overlay .caption"
-      data-pager=".modules-adBanner-overlay .navigation"
-      data-pager-template="<li><i class='fa fa-circle-o'></i></li>"
-      data-pager-active-class="active"
-    >
-    <div class="{{class}} slide-img"
-        data-link="{{link}}"
-        data-cycle-title="{{title}}"
-        data-cycle-desc="{{context}}"
-        data-overlay-template="<h2>{{title}}</h2>{{desc}}"
-      >
-        <img src="{{image_link}}">
-    </div>
-  </div>
-  <div class="modules-adBanner-overlay">
-    <div class="caption"></div>
-    <ul class="navigation"></ul>
-  </div>
-</div>
--- a/app/templates/orbit_bootstrap/modules/ad_banner/_widgetHome.html.erb
+++ b/app/templates/orbit_bootstrap/modules/ad_banner/_widgetHome.html.erb
@ -1,10 +1,10 @@
-<div class="modules-adBanner home" >
-  <div class="cycle-slideshow modules-adBanner-content"
+<div class="widget-adBanner widget1" >
+  <div class="cycle-slideshow widget-adBanner-content"
      data-list="images"
      data-level="0"
      data-cycle-slides=".slide-img"
-      data-overlay=".modules-adBanner-overlay .caption"
-      data-pager=".modules-adBanner-overlay .home"
+      data-overlay=".widget-adBanner-overlay .caption"
+      data-pager=".widget-adBanner-overlay .home"
      data-pager-template="<li><i class='fa fa-circle-o'></i></li>"
      data-pager-active-class="active"
    >
@ -17,7 +17,7 @@
        <img src="{{image_link}}">
    </div>
  </div>
-  <div class="modules-adBanner-overlay">
+  <div class="widget-adBanner-overlay">
    <div class="caption"></div>
    <ul class="navigation home"></ul>
  </div>
--- a/app/templates/orbit_bootstrap/modules/ad_banner/_widgetPage.html.erb
+++ b/app/templates/orbit_bootstrap/modules/ad_banner/_widgetPage.html.erb
@ -1,9 +1,9 @@
-<div class="modules-adBanner page" >
-  <div class="cycle-slideshow modules-adBanner-content"
+<div class="widget-adBanner widget2" >
+  <div class="cycle-slideshow widget-adBanner-content"
      data-list="images"
      data-level="0"
      data-cycle-slides=".slide-img"
-      data-pager=".modules-adBanner-overlay .page"
+      data-pager=".widget-adBanner-overlay .page"
      data-pager-template="<li><i class='fa fa-circle-o'></i></li>"
      data-pager-active-class="active"
    >
@ -16,7 +16,7 @@
        <img src="{{image_link}}">
    </div>
  </div>
-  <div class="modules-adBanner-overlay">
+  <div class="widget-adBanner-overlay">
    <ul class="navigation page"></ul>
  </div>
 </div>
--- a/app/templates/orbit_bootstrap/modules/ad_banner/_widgetBlock.html.erb
+++ b/app/templates/orbit_bootstrap/modules/ad_banner/_widgetBlock.html.erb
@ -1,9 +1,9 @@
-<div class="modules-adBanner block">
-  <div class="cycle-slideshow modules-adBanner-content"
+<div class="widget-adBanner widget3">
+  <div class="cycle-slideshow widget-adBanner-content"
      data-list="images"
      data-level="0"
      data-cycle-slides=".slide-img"
-      data-pager=".modules-adBanner-overlay .box"
+      data-pager=".widget-adBanner-overlay .box"
      data-pager-template="<li><i class='fa fa-circle-o'></i></li>"
      data-pager-active-class="active"
    >
@ -16,7 +16,7 @@
        <img src="{{image_link}}">
    </div>
  </div>
-  <div class="modules-adBanner-overlay">
+  <div class="widget-adBanner-overlay">
    <ul class="navigation box"></ul>
  </div>
 </div>
--- a/app/templates/orbit_bootstrap/modules/announcement/_widget.html.erb
+++ b/app/templates/orbit_bootstrap/modules/announcement/_widget.html.erb
@ -1,12 +0,0 @@
-<div class="widget-2" module="announcement" data-ps="">
-  <h2 class="widget-title">{{widget-title}}</h2>
-  <ul class="widget-list"data-level="0" data-list="announcements">
-    <li>
-      <a href="{{link_to_show}}"><i class="fa fa-chevron-right"></i>{{title}}<span>{{postdate}}</span></a>
-    </li>
-  </ul>
-  <p class="more">
-    <a class="btn btn-sm btn-info" href="{{more_url}}">More</a>
-  </p>
-</div>
-<hr class="dotted">
--- a/app/templates/orbit_bootstrap/modules/announcement/_widget1.html.erb
+++ b/app/templates/orbit_bootstrap/modules/announcement/_widget1.html.erb
@ -0,0 +1,24 @@
+<div class="widget-announcement wudget1">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div data-level="0" data-list="announcements">
+    <div class="widget-content">
+      <div class="widget-content-inner row">
+        <div class="widget-pic resizeimg col-sm-4">
+          <img src="{{img_src}}" alt="">
+        </div>
+        <section class="widget-part col-sm-8">
+          <span class="pull-right" data-list="statuses" data-level="1">
+            <span class="label status {{status-class}}">{{status}}</span>
+          </span>
+          <span class="date"><i class="fa fa-calendar"></i> {{postdate}}</span>
+          <h4 class="widget-content-title">
+            <a href="{{link_to_show}}">{{title}}</a>
+          </h4>
+          <p class="widget-subtitle">{{subtitle}} <a class="more" href="{{link_to_show}}">Read More »</a></p>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>
--- a/app/templates/orbit_bootstrap/modules/announcement/_widget2.html.erb
+++ b/app/templates/orbit_bootstrap/modules/announcement/_widget2.html.erb
@ -0,0 +1,21 @@
+<div class="widget-announcement wudget2">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div class="row" data-level="0" data-list="announcements">
+    <div class="widget-content col-sm-4">
+      <div class="widget-content-inner">
+        <div class="widget-pic resizeimg">
+          <img src="{{img_src}}" alt="">
+          <span class="date">{{postdate}}</span>
+        </div>
+        <section class="widget-part">
+          <h4 class="widget-content-title">
+            <a href="{{link_to_show}}">{{title}}</a>
+          </h4>
+          <p class="widget-subtitle">{{subtitle}} <a class="more" href="{{link_to_show}}">Read More »</a></p>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>
--- a/app/templates/orbit_bootstrap/modules/announcement/_widgetBoxes.html.erb
+++ b/app/templates/orbit_bootstrap/modules/announcement/_widgetBoxes.html.erb
@ -1,21 +0,0 @@
-<div class="modules-announcement boxes">
-  <h3 class="modules-title">
-    <span>{{widget-title}}</span>
-  </h3>
-  <div class="row" module="announcement" data-level="0" data-list="announcements">
-    <div class="modules-content col-sm-4">
-      <div class="boxes-inner">
-        <div class="modules-pic resizeimg">
-          <img src="{{img_src}}" alt="">
-          <span class="modules-part-date">{{postdate}}</span>
-        </div>
-        <section class="modules-part">
-          <h4 class="modules-part-title">
-            <a href="{{link_to_show}}">{{title}}</a>
-          </h4>
-          <p class="modules-part-subtitle">{{subtitle}} <a class="more" href="{{link_to_show}}">Read More »</a></p>
-        </section>
-      </div>
-    </div>
-  </div>
-</div>
--- a/app/templates/orbit_bootstrap/modules/announcement/_widgetSection.html.erb
+++ b/app/templates/orbit_bootstrap/modules/announcement/_widgetSection.html.erb
@ -1,21 +0,0 @@
-<div class="modules-announcement section">
-  <h3 class="modules-title">
-    <span>{{widget-title}}</span>
-  </h3>
-  <div module="announcement" data-level="0" data-list="announcements">
-    <div class="modules-content">
-      <div class="section-inner row">
-        <div class="modules-pic resizeimg col-sm-4">
-          <img src="{{img_src}}" alt="">
-        </div>
-        <section class="modules-part col-sm-8">
-          <span class="modules-part-date"><i class="fa fa-calendar"></i> {{postdate}}</span>
-          <h4 class="modules-part-title">
-            <a href="{{link_to_show}}">{{title}}</a>
-          </h4>
-          <p class="modules-part-subtitle">{{subtitle}} <a class="more" href="{{link_to_show}}">Read More »</a></p>
-        </section>
-      </div>
-    </div>
-  </div>
-</div>
--- a/app/templates/orbit_bootstrap/modules/announcement/index.html.erb
+++ b/app/templates/orbit_bootstrap/modules/announcement/index.html.erb
@ -1,23 +0,0 @@
-<div class="index-announcement">
-  <h3 class="index-title">
-    <span>{{widget-title}}</span>
-  </h3>
-  <div class="row" module="announcement" data-level="0" data-list="announcements">
-    <div class="index-content col-sm-6">
-      <div class="boxes-inner">
-        <div class="index-pic resizeimg">
-          <img src="{{img_src}}" alt="">
-        </div>
-        <section class="index-part">
-          <h4 class="index-part-title">
-            <a href="{{link_to_show}}">{{title}}</a>
-          </h4>
-          <span class="index-part-date"><i class="fa fa-calendar"></i> {{postdate}}</span>
-          <p class="index-part-subtitle">{{subtitle}}</p>
-          <a class="more" href="{{link_to_show}}">Read More »</a>
-        </section>
-      </div>
-    </div>
-  </div>
-</div>
-{{pagination_goes_here}}
--- a/app/templates/orbit_bootstrap/modules/announcement/index1.html.erb
+++ b/app/templates/orbit_bootstrap/modules/announcement/index1.html.erb
@ -0,0 +1,26 @@
+<div class="index-announcement index1">
+  <h3 class="index-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div class="row" data-level="0" data-list="announcements">
+    <div class="index-content col-sm-6">
+      <div class="index-content-inner">
+        <div class="index-pic resizeimg">
+          <img src="{{img_src}}" alt="">
+        </div>
+        <section class="index-part">
+          <h4 class="index-content-title">
+            <a href="{{link_to_show}}">{{title}}</a>
+          </h4>
+          <span class="pull-right" data-list="statuses" data-level="1">
+            <span class="label status {{status-class}}">{{status}}</span>
+          </span>
+          <span class="date"><i class="fa fa-calendar"></i> {{postdate}}</span>
+          <p class="index-subtitle">{{subtitle}}</p>
+          <a class="more" href="{{link_to_show}}">Read More »</a>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>
+{{pagination_goes_here}}
--- a/app/templates/orbit_bootstrap/modules/announcement/show.html.erb
+++ b/app/templates/orbit_bootstrap/modules/announcement/show.html.erb
@ -1,26 +1,67 @@
-<article class="show" module="announcement">
-  <div class="post-title">
-    <h1>{{title}}</h1>
-  </div>
-  <small class="post-meta-date">
-    <span>
-      TAGS :
-      <span class="post-related" data-list="tags" data-level="0">
-        <a href="#"><span class="label label-info">{{tag}}</span></a>
+<article class="show-announcement">
+  <h1 class="show-title">
+    <span>{{title}}</span>
+  </h1>
+  <ul class="post-metadata list-unstyled">
+    <li class="metadata-date">
+      <i class="fa fa-calendar fa-fw"></i>
+      <span class="date">{{updated_at}}</span>
+    </li>
+    <li class="metadata-author">
+      <i class="fa fa-male fa-fw"></i>
+      <span class="author">{{update_user}}</span>
+    </li>
+    <li class="metadata-tags">
+      <i class="fa fa-tags fa-fw"></i>
+      <span data-list="tags" data-level="0">
+        <span class="tag">{{tag}}</span>
      </span>
-    </span>
-    <span class="author">{{update_user}}</span>
-    <span class="unit">AT : unit</span>
-    <span class="date">{{updated_at}}</span>
-  </small>
-  <section class="post">
-    <p class="pic"><img src="{{image}}" alt=""></p>
-    <p>{{body}}</p>
+    </li>
+  </ul>
+  <section class="post-section">
+    <p class="post-pic"><img src="{{image}}" alt=""></p>
+    <p class="post-content">{{body}}</p>
  </section>
-  <div class="post-related" data-list="bulletin_files" data-level="0">
-   <a href="{{file_url}}">{{file_title}}</a><br/>
+  <ul class="post-related list-unstyled">
+    <li class="post-related-files">
+      <i class="fa fa-fw fa-paperclip"></i>
+      <div class="post-related-flises-list" data-list="bulletin_files" data-level="0">
+        <a href="{{file_url}}">{{file_title}}</a>
+      </div>
+    </li>
+    <li class="post-related-links">
+      <i class="fa fa-fw fa-link"></i>
+      <div class="post-related-links-list" data-list="bulletin_links" data-level="0">
+        <a href="{{link_url}}" target="_blank">{{link_title}}</a>
+      </div>
+    </li>
+  </ul>
+  <div class="social-buttons">
+    <div class="fb-share-button" data-type="button"></div>
+    <a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true" data-count="none">Tweet</a>
  </div>
-  <div class="post-related" data-list="bulletin_links" data-level="0">
-   <a href="{{link_url}}" target="_blank">{{link_title}}</a><br/>
-  </div>
-</article>
+</article>
+<script>
+  $(function() {
+
+    // 當metadata-tags沒內容時將會隱藏
+    if(!$('.metadata-tags .tag').length) {
+      $('.metadata-tags').remove();
+    }
+
+    // 當post-related沒內容時會隱藏
+    if($('.post-related').length) {
+      var element = ['.post-related-flises-list', '.post-related-links-list'],
+          n = 0;
+      $.each(element, function(index, val) {
+        if(!$(val).text()) {
+          $(val).closest('li').remove();
+          n += 1;
+        }
+        if(n == element.length) {
+          $('.post-related').remove();
+        }
+      });
+    }
+  });
+</script>
--- a/app/templates/orbit_bootstrap/modules/archive/_widget1.html.erb
+++ b/app/templates/orbit_bootstrap/modules/archive/_widget1.html.erb
@ -0,0 +1,34 @@
+<div class="widget-archive widget1">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div class="panel-group" id="widget-archive-group" data-list="categories" data-level="0">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h4 class="panel-title">
+          <a data-toggle="collapse" data-parent="#widget-archive-group" href="#collapse" class="collapsed">
+            {{category-title}}
+          </a>
+        </h4>
+      </div>
+      <div id="collapse" class="panel-collapse collapse">
+        <div class="panel-body">
+          <ul class="widget-archive-item-group" data-list="archives" data-level="1">
+            <li class="widget-archive-item-list">
+              <a href="{{archive_url}}">{{archive-title}}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <p class="more">
+    <a class="btn btn-sm btn-info" href="{{more_url}}">More</a>
+  </p>
+</div>
+<script>
+  for (var i = 0; i < $('.widget-archive.widget1 .panel-title').length; i++) {
+    $('.widget-archive.widget1 .panel-title:eq(' + i + ') .collapsed').attr('href', '#collapse' + i);
+    $('.widget-archive.widget1 .panel-collapse:eq(' + i + ')').attr('id', 'collapse' + i);
+  };
+</script>
--- a/app/templates/orbit_bootstrap/modules/archive/index.html.erb
+++ b/app/templates/orbit_bootstrap/modules/archive/index.html.erb
@ -1,4 +1,4 @@
-<div class="index" module="archive">
+<!-- <div class="index" module="archive">
  <h2 class="widget-title">{{widget-title}}</h2>
  <div class="list-group">
    <div class="list-group-item" data-list="categories" data-level="0">
@ -7,8 +7,8 @@
        <li data-list="archives"  data-level="1">
          <h5 class="archives-title">
          {{archive-title}}
-          <span data-list="status" data-level="2">
-            <span class="label label-primary">{{archive-status}}</span>
+          <span data-list="statuses" data-level="2">
+            <span class="label  status {{status-class}}">{{status}}</span>
          </span>
          </h5>
          <ol class="archives-item" data-list="files"  data-level="2">
@ -18,10 +18,64 @@
            </li>
          </ol>
        </li>
-        <li data-list="cool"  data-level="1"> 
+        <li data-list="cool"  data-level="1">
        <span>This is for test</span>
        </li>
      </ul>
    </div>
  </div>
-</div>
+</div> -->
+<div class="index-archive index1">
+  <h3 class="index-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div class="panel-group" id="index-archive-group" data-list="categories" data-level="0">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h4 class="panel-title">
+          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed">
+            {{category-title}}
+          </a>
+        </h4>
+      </div>
+      <div id="collapse" class="panel-collapse collapse">
+        <div class="panel-body">
+          <dl class="dl-horizontal index-archive-item-group" data-list="archives" data-level="1">
+            <dt class="index-archive-item-list">
+              <sapn class="index-archive-item-title">{{archive-title}}</span>
+              <span data-list="statuses" data-level="2">
+                <span class="label status {{status-class}}">{{status}}</span>
+              </span>
+            </dt>
+            <dl class="index-archives-files-list" data-list="files"  data-level="2">
+              <dd>
+                <a href="{{file-url}}" class="index-archives-files-item" target="_blank">{{file-name}}</a>
+                <span class="label label-primary">{{file-type}}</span>
+              </dd>
+            </dl>
+          </dl>
+          <!-- <ul class="index-archive-item-group" data-list="archives" data-level="1">
+            <li class="index-archive-item-list">
+              <sapn class="index-archive-item-title">{{archive-title}}</span>
+              <span data-list="statuses" data-level="2">
+                <span class="label status {{status-class}}">{{status}}</span>
+              </span>
+              <ol class="index-archives-files-list" data-list="files"  data-level="2">
+                <li>
+                  <a href="{{file-url}}" class="index-archives-files-item" target="_blank">{{file-name}}</a>
+                  <span class="label label-primary">{{file-type}}</span>
+                </li>
+              </ol>
+            </li>
+          </ul> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  for (var i = 0; i < $('.index-archive.index1 .panel-title').length; i++) {
+    $('.index-archive.index1 .panel-title:eq(' + i + ') .collapsed').attr('href', '#collapse' + i);
+    $('.index-archive.index1 .panel-collapse:eq(' + i + ')').attr('id', 'collapse' + i);
+  };
+</script>
--- a/app/templates/orbit_bootstrap/modules/archive/index1.html.erb
+++ b/app/templates/orbit_bootstrap/modules/archive/index1.html.erb
@ -0,0 +1,34 @@
+<div class="widget-archive widget1">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div class="panel-group" id="widget-archive-group" data-list="categories" data-level="0">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h4 class="panel-title">
+          <a data-toggle="collapse" data-parent="#widget-archive-group" href="#collapse" class="collapsed">
+            {{category-title}}
+          </a>
+        </h4>
+      </div>
+      <div id="collapse" class="panel-collapse collapse">
+        <div class="panel-body">
+          <ol class="widget-archive-item-group" data-list="archives" data-level="1">
+            <li class="widget-archive-item-list">
+              <a href="{{archive_url}}">{{archive-title}}</a>
+            </li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </div>
+  <p class="more">
+    <a class="btn btn-sm btn-info" href="{{more_url}}">More</a>
+  </p>
+</div>
+<script>
+  for (var i = 0; i < $('.widget-archive.widget1 .panel-title').length; i++) {
+    $('.widget-archive.widget1 .panel-title:eq(' + i + ') .collapsed').attr('href', '#collapse' + i);
+    $('.widget-archive.widget1 .panel-collapse:eq(' + i + ')').attr('id', 'collapse' + i);
+  };
+</script>
--- a/app/templates/orbit_bootstrap/modules/faq/_widget.html.erb
+++ b/app/templates/orbit_bootstrap/modules/faq/_widget.html.erb
@ -1,12 +0,0 @@
-<div class="widget-2" module="announcement" data-ps="">
-  <h2 class="widget-title">{{widget-title}}</h2>
-  <ul class="widget-list" data-level="0" data-list="faqs" >
-    <li>
-      <a href="{{link_to_show}}"><i class="fa fa-chevron-right"></i>{{title}}<span>{{postdate}}</span></a>
-    </li>
-  </ul>
-  <p class="more">
-    <a class="btn btn-sm btn-info" href="{{more_url}}">More</a>
-  </p>
-</div>
-<hr class="dotted">
--- a/app/templates/orbit_bootstrap/modules/faq/_widget1.html.erb
+++ b/app/templates/orbit_bootstrap/modules/faq/_widget1.html.erb
@ -0,0 +1,16 @@
+<div class="widget-faqs widget1">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <ul class="list-unstyled" data-list="faqs" data-level="0">
+    <li class="widget-content">
+      <a class="widget-content-title" href="{{link_to_show}}" target="_blank">{{title}}</a>
+      <span data-list="statuses" data-level="1">
+        <span class="label status {{status-class}}">{{status}}</span>
+      </span>
+    </li>
+  </ul>
+  <p class="more text-right">
+    <a class="btn btn-sm btn-info" href="{{more_url}}">More</a>
+  </p>
+</div>
--- a/app/templates/orbit_bootstrap/modules/faq/index.html.erb
+++ b/app/templates/orbit_bootstrap/modules/faq/index.html.erb
@ -1,8 +0,0 @@
-<h2 class="widget-title">{{widget-title}}</h2>
-<ul class="media-list index" module="faq" data-repeat="4" data-list="data" data-level="0">
-  <li class="media">
-    <div class="media-body">
-      <h4 class="media-heading"><a href="{{link_to_show}}">{{question}}</a></h4>
-    </div>
-  </li>
-</ul>
--- a/app/templates/orbit_bootstrap/modules/faq/index1.html.erb
+++ b/app/templates/orbit_bootstrap/modules/faq/index1.html.erb
@ -0,0 +1,16 @@
+<div class="index-faqs index1">
+  <h3 class="index-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <ul class="list-unstyled" data-list="faqs" data-level="0">
+    <li class="index-content">
+      <h4>
+        <a class="index-content-title" href="{{link_to_show}}">{{question}}</a>
+        <span data-list="statuses" data-level="1">
+          <span class="label status {{status-class}}">{{status}}</span>
+        </span>
+      </h4>
+    </li>
+  </ul>
+</div>
+{{pagination_goes_here}}
--- a/app/templates/orbit_bootstrap/modules/faq/show.html.erb
+++ b/app/templates/orbit_bootstrap/modules/faq/show.html.erb
@ -1,7 +1,11 @@
-<article class="show" module="announcement">
+<article>
  <div class="post-title">
    <h1>{{question}}</h1>
  </div>
+
+      <span data-list="tags" data-level="0">
+        <a class="tag" href="#">{{tag}}</a>
+      </span>
  <section class="post">
    <p>{{answer}}</p>
  </section>
--- a/app/templates/orbit_bootstrap/modules/gallery/_widget.html.erb
+++ b/app/templates/orbit_bootstrap/modules/gallery/_widget.html.erb
@ -1,10 +0,0 @@
-<div class="widget" module="gallery" data-ps="">
-  <h2 class="widget-title">{{widget-title}}</h2>
-  <ul class="row" data-list="images" data-level="0">
-    <li class="col-md-4 col-sm-6 col-xs-3"><a href="{{link_to_show}}"><img class="img-rounded" src="{{thumb-src}}" alt=""></a></li>
-  </ul>
-  <p class="more">
-    <a class="btn btn-sm btn-info" href="{{more_url}}">More</a>
-  </p>
-</div>
-<hr class="dotted">
--- a/app/templates/orbit_bootstrap/modules/gallery/_widget1.html.erb
+++ b/app/templates/orbit_bootstrap/modules/gallery/_widget1.html.erb
@ -0,0 +1,18 @@
+<div class="widget-gallery widget1">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div class="cycle-slideshow widget-content"
+  data-level="0"
+  data-list="images"
+  data-cycle-slides="> a"
+  data-cycle-fx="carousel"
+  data-cycle-timeout="3000"
+  data-cycle-carousel-visible="3"
+  data-cycle-carousel-fluid="true">
+    <a class="widget-pic" href="{{link_to_show}}" target="_blank">
+      <img src="{{thumb-src}}" alt="">
+    </a>
+  </div>
+</div>
+<%= javascript_include_tag "plugin/jquery.cycle2.carousel.min"%>
--- a/app/templates/orbit_bootstrap/modules/gallery/_widget2.html.erb
+++ b/app/templates/orbit_bootstrap/modules/gallery/_widget2.html.erb
@ -0,0 +1,10 @@
+<div class="widget-gallery widget2">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div class="row widget-content" data-level="0" data-list="images">
+    <a class="widget-pic col-xs-4" href="{{link_to_show}}" target="_blank">
+      <img src="{{thumb-src}}" alt="">
+    </a>
+  </div>
+</div>
--- a/app/templates/orbit_bootstrap/modules/gallery/index.html.erb
+++ b/app/templates/orbit_bootstrap/modules/gallery/index.html.erb
@ -1,11 +0,0 @@
-<div class="index" module="gallery">
-  <h2 class="widget-title">{{widget-title}}</h2>
-  <ul class="row" data-list="data" data-level="0">
-    <li class="col-md-3 col-sm-4 col-xs-3">
-      <a href="{{link_to_show}}">
-        <img class="img-rounded" src="{{thumb-src}}" width="200px" height="200px" alt="">
-      </a>
-      <h4 class="album-name">{{album-name}}</h4>
-    </li>
-  </ul>
-</div>
--- a/app/templates/orbit_bootstrap/modules/gallery/index1.html.erb
+++ b/app/templates/orbit_bootstrap/modules/gallery/index1.html.erb
@ -0,0 +1,20 @@
+<div class="index-gallery index1">
+  <h3 class="index-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div class="row" data-level="0" data-list="albums">
+    <div class="index-content col-xs-4 col-sm-3">
+      <div class="index-content-inner">
+        <div class="index-pic">
+          <img class="img-thumbnail" src="{{thumb-src}}" alt="">
+        </div>
+        <section class="index-part">
+          <h4 class="index-content-title">
+            <a href="{{link_to_show}}">{{album-name}}</a>
+          </h4>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>
+{{pagination_goes_here}}
--- a/app/templates/orbit_bootstrap/modules/gallery/show.html.erb
+++ b/app/templates/orbit_bootstrap/modules/gallery/show.html.erb
@ -1,10 +1,16 @@
-<div class="index" module="gallery">
-  <h2 class="widget-title">{{album-title}}</h2>
-  <ul class="row" data-list="images" data-level="0">
-    <li class="col-md-3 col-sm-4 col-xs-3">
-      <a href="{{link_to_show}}">
-        <img class="img-rounded" src="{{thumb-src}}" alt="">
-      </a>
-    </li>
-  </ul>
+<div class="show-gallery">
+  <h3 class="show-title">
+    <span>{{album-title}}</span>
+  </h3>
+  <div data-level="0" data-list="images">
+    <div class="show-content col-xs-4 col-sm-3">
+      <div class="show-content-inner">
+        <div class="show-pic">
+          <a href="{{link_to_show}}">
+            <img class="img" src="{{thumb-src}}" alt="">
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
--- a/app/templates/orbit_bootstrap/modules/web_resource/_widget.html.erb
+++ b/app/templates/orbit_bootstrap/modules/web_resource/_widget.html.erb
@ -1,10 +0,0 @@
-<div class="widget" module="link" data-ps="">
-  <h2 class="widget-title">{{widget-title}}</h2>
-  <div class="list-group" module="link" data-repeat="4" data-level="0" data-list="web_link">
-    <a href="{{link_to_show}}" target="_blank" class="list-group-item">{{title}}</a>
-  </div>
-  <p class="more">
-    <a class="btn btn-sm btn-info" href="{{more_url}}">More</a>
-  </p>
-</div>
-<hr class="dotted">
--- a/app/templates/orbit_bootstrap/modules/web_resource/_widget1.html.erb
+++ b/app/templates/orbit_bootstrap/modules/web_resource/_widget1.html.erb
@ -0,0 +1,13 @@
+<div class="widget-link widget1">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <ul class="list-unstyled" data-level="0" data-list="web_link">
+    <li class="widget-content">
+      <a class="widget-content-title" href="{{link_to_show}}" target="_blank">{{title}}</a>
+      <span data-list="statuses" data-level="1">
+        <span class="label status {{status-class}}">{{status}}</span>
+      </span>
+    </li>
+  </ul>
+</div>
--- a/app/templates/orbit_bootstrap/modules/web_resource/_widgetFooter.html.erb
+++ b/app/templates/orbit_bootstrap/modules/web_resource/_widgetFooter.html.erb
@ -1,6 +0,0 @@
-<div class="modules-link footer">
-  <h3 class="modules-title">{{widget-title}}</h3>
-  <ul class="list-unstyled" module="link" data-level="0" data-list="web_link">
-    <li><a href="{{link_to_show}}" target="_blank">{{title}}</a></li>
-  </ul>
-</div>
--- a/app/templates/orbit_bootstrap/modules/web_resource/index.html.erb
+++ b/app/templates/orbit_bootstrap/modules/web_resource/index.html.erb
@ -1,8 +0,0 @@
-<div class="index" module="link">
-  <h2 class="widget-title">{{widget-title}}</h2>
-  <ul class="link-list" module="link" data-repeat="4" data-level="0" data-list="web_link">
-    <li class="item">
-      <span class="title"><a href="{{link_to_show}}" target="_blank">{{title}}</a></span>
-    </li>
-  </ul>
-</div>
--- a/app/templates/orbit_bootstrap/modules/web_resource/index1.html.erb
+++ b/app/templates/orbit_bootstrap/modules/web_resource/index1.html.erb
@ -0,0 +1,17 @@
+<div class="index-link index1">
+  <h3 class="index-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <ul class="list-unstyled" data-list="web_link" data-level="0">
+    <li class="index-content">
+      <h4>
+        <a class="index-content-title" href="{{link_to_show}}" target="_blank">{{title}}</a>
+        <span data-list="statuses" data-level="1">
+          <span class="label status {{status-class}}">{{status}}</span>
+        </span>
+      </h4>
+      <small class="index-context">{{context}}</small>
+    </li>
+  </ul>
+</div>
+{{pagination_goes_here}}