update template

assets/stylesheets/bootstrap/_mixins.scss

@@ -303,6 +303,8 @@
 @mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
   background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1-6, Chrome 10+
   background-image:  linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+  -pie-background:  linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+  behavior: url("/assets/ie_support/PIE2/PIE.htc");
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
 }
@@ -314,6 +316,8 @@
 @mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
   background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Safari 5.1-6, Chrome 10+
   background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+  -pie-background: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+  behavior: url("/assets/ie_support/PIE2/PIE.htc");
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
 }
@@ -322,16 +326,22 @@
   background-repeat: repeat-x;
   background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
   background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+  -pie-background: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+  behavior: url("/assets/ie_support/PIE2/PIE.htc");
 }
 @mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
   background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
   background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+  -pie-background: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+  behavior: url("/assets/ie_support/PIE2/PIE.htc");
   background-repeat: no-repeat;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
 }
 @mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
   background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
   background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
+  -pie-background: linear-gradient($start-color, $mid-color $color-stop, $end-color);
+  behavior: url("/assets/ie_support/PIE2/PIE.htc");
   background-repeat: no-repeat;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
 }
@@ -343,6 +353,8 @@
 @mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
   background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
   background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+  -pie-background: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+  behavior: url("/assets/ie_support/PIE2/PIE.htc");
 }
 
 // Reset filters for IE

assets/stylesheets/template/layout/slide.scss

@@ -7,7 +7,7 @@
   z-index: 0;
 
   .w-ad-banner {
-    max-width: 75em;
+    //max-width: 75em;
     margin: auto;
   }
 }

assets/stylesheets/template/modules/ad_banner.scss

@@ -37,6 +37,8 @@
   width: 100%;
   bottom: 0;
   background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40%,#000);
+  -pie-background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40%,#000);
+  behavior: url("/assets/ie_support/PIE2/PIE.htc");
   padding: 1.5em 1em;
   h3 { 
     margin: 0; 
@@ -85,6 +87,7 @@
     width: 0.8em;
     height: 0.8em;
     border-radius: 50%;
+    behavior: url("/assets/ie_support/PIE2/PIE.htc");
     opacity: .5;
 	  cursor:pointer;
     border:0;

assets/stylesheets/template/modules/announcement.scss

@@ -927,6 +927,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
   text-align: center;
   background-color: #aab2bd;
   border-radius: 4px;
+  behavior: url("/assets/ie_support/PIE2/PIE.htc");
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px
 }
@@ -947,6 +948,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
   background-color: #4fc1e9;
   border: 4px solid #f5f7fa;
   border-radius: 50%;
+  behavior: url("/assets/ie_support/PIE2/PIE.htc");
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%
 }
@@ -968,6 +970,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
   margin-top: 31px;
   background-color: #CCC;
   border-radius: 4px;
+  behavior: url("/assets/ie_support/PIE2/PIE.htc");
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px
 }
@@ -1021,6 +1024,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
 .VivaTimeline dl dd .events .events-footer ol li {
   background: #32b487; 
   border-radius: 5px; 
+  behavior: url("/assets/ie_support/PIE2/PIE.htc");
   margin: 10px; 
   display: inline-block; 
   width: 10px; 

assets/stylesheets/template/modules/member.scss

@@ -264,6 +264,7 @@
     @media(max-width:580px) {
       overflow: hidden;
       border-radius: 50%;
+      behavior: url("/assets/ie_support/PIE2/PIE.htc");
       height: 14em;
       width: 14em;
       margin: 1.5em auto 1em auto;

modules/active/active_index.html.erb

@@ -14,10 +14,15 @@
 		<tbody data-level="0" data-list="acts">
 			<tr>
 				<td>{{category}}</td>
-				<td>{{act_start_date}} ~ <br /> {{act_end_date}}</td>
+				<td>{{act_duration_date}}</td>
-				<td>{{title}}</td>
+				<td>
-				<td>{{sign_start_date}} ~ <br /> {{sign_end_date}}</td>
+					<span class="active-status-wrap" data-list="statuses" data-level="1">
-				<td>{{sign_up}}</i></td>
+		              <span class="label status {{status-class}}">{{status}}</span>
+		            </span>
+					{{title}}
+				</td>
+				<td>{{sign_duration_date}}</td>
+				<td>{{sign_up}}</td>
 			</tr>
 		</tbody>
 </table>

modules/active/active_index1.html.erb

@@ -0,0 +1,25 @@
+<div class="active-index1 {{display}}">
+  <h3>{{page-title}}</h3>
+  <table class="table  table-striped">
+    <thead>
+      <tr>
+        <th class="active-th-time">{{th_act_time_range}}</th>
+        <th class="active-th-title">{{th_title}}</th>
+        <th class="col-md-2">{{th_sign_up}}</th>
+      </tr>
+    </thead>
+    <tbody data-level="0" data-list="acts">
+        <tr>
+          <td class="active-time" date-format="%Y-%m-%d">{{act_duration_date}}</td>
+          <td class="active-content">
+            <span class="active-status-wrap" data-list="statuses" data-level="1">
+              <span class="label status {{status-class}}">{{status}}</span>
+            </span>
+            {{title}}
+          </td>
+          <td>{{sign_up}}</td>
+        </tr>
+    </tbody>
+  </table>
+</div>
+{{pagination_goes_here}}

modules/active/active_index2.html.erb

@@ -0,0 +1,32 @@
+<div class="active-index2">
+  <h3>{{page-title}}</h3>
+  <ul class="row" data-level="0" data-list="acts">
+    <li class="col-md-4">
+    <a href="{{link_to_show}}">
+	    <div class="active-img-wrap">
+	      <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+	    </div>
+	    <div class="active-content-wrap">
+	      <div class="active-meta">
+	        <span class="active-status-wrap" data-list="statuses" data-level="1">
+	          <span class="label {{status-class}}">{{status}}</span>
+	        </span>
+	        <span class="active-time-wrap" date-format="%Y-%m-%d">
+	          <i class="fa fa-calendar-o"></i>
+	          <span class="active-time" date-format="%Y-%m-%d">{{act_duration_date}}</span>
+	        </span>
+	        <span class="active-category-wrap">
+	          <i class="fa fa-tasks"></i>
+	          <span class="active-category">{{category}}</span>
+	          </span>
+	      </div>
+	      <h4 class="active-title">
+	        {{title_text}}
+	      </h4>
+	      <p class="active-subtitle">{{subtitle}}</p>
+	    </div>
+	  </a>
+    </li>
+  </ul>
+</div>
+{{pagination_goes_here}}

modules/active/info.json

@@ -3,10 +3,26 @@
         {
             "filename" : "active_index",
             "name" : {
-                "zh_tw" : "1. 列表",
+                "zh_tw" : "1. 列表 (類別, 活動期間, 狀態, 活動標題, 報名期間, 線上報名)",
-                "en" : "1. List"
+                "en" : "1. List (Category, Event Period, status, Event Title, Registration Period, Register)"
             },
             "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "active_index1",
+            "name" : {
+                "zh_tw" : "2. 精簡表格列表-2 ( 模組標題, 活動期間, 狀態, 標題, 線上報名)",
+                "en" : "2. Simple Table List (widget-title, Event Period, status, title, Register)"
+            },
+            "thumbnail" : "active_index1_thumbs.png"
+        },
+        {
+            "filename" : "active_index2",
+            "name" : {
+                "zh_tw" : "3. 三欄圖文 ( 模組標題, 圖片, 狀態, 活動期間, 類別, 標題, 副標題, 線上報名)",
+                "en" : "3. 3-Column Standard Image + Text (widget-title, image, status, postdate, category, title, subtitle, Register)"
+            },
+            "thumbnail" : "active_index2_thumbs.png"
         }
     ]
 }

modules/ad_banner/_ad_banner_widget1.html.erb

@@ -1,5 +1,5 @@
-<div class="w-ba-banner ad-banner-widget-1 ba-banner-widget-1">
+<div class="w-ad-banner w-ba-banner ad-banner-widget-1 ba-banner-widget-1">
-  <div class="w-ba-banner__wrap  cycle-slideshow"
+  <div class="w-ad-banner__wrap  w-ba-banner__wrap  cycle-slideshow"
       data-list="images"
       data-level="0"
       data-cycle-slides=".w-ba-banner__slide"
@@ -10,12 +10,12 @@
       data-cycle-timeout="{{timeout}}"
       data-cycle-fx="{{ad_fx}}"
       data-cycle-pager=".banner_caption_{{subpart-id}}"
-      data-pager-template="<li><button></button></li>"
+      data-pager-template=""
       data-pager-active-class="active-slide"
       data-cycle-swipe=true
       data-cycle-swipe-fx="scrollHorz"
     >
-    <div class="w-ba-banner__slide {{class}}"
+    <div class="w-ad-banner__slide w-ba-banner__slide {{class}}"
         data-link="{{link}}"
         data-cycle-title="{{title}}"
         data-cycle-desc="{{context}}"
@@ -23,13 +23,15 @@
         data-target="{{target}}"
       >
        <a href="{{link}}" target="{{target}}" title="{{alt_title}}">
-           <img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
+           <img class="w-ad-banner__image w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
        </a>
 
     </div>
   </div>
-  <div class="ad-overlay w-ba-banner__caption w-ad-banner__caption w-ad-banner__overlay_{{subpart-id}}"></div>
+  <div class="w-ad-banner__caption ad-overlay w-ba-banner__caption w-ad-banner__caption w-ad-banner__overlay_{{subpart-id}}"></div>
-    <div class="w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}"></div>
+    <div class="w-ad-banner__pager-1 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
+      <li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
+    </div>
     <ul class="controlplay"><a class="resume-slide active" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
   <ul class="button-mid">
     <i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
@@ -58,10 +60,23 @@
   
 </script>
 <style type="text/css">
-  .controlplay .resume-slide.active i{
+  .w-ba-banner .controlplay .resume-slide.active i{
     color: #32D9C3;
   }
-  .controlplay .pause-slide.active i{
+  .w-ba-banner .controlplay .pause-slide.active i{
     color: #ff4500;
   }
+  .w-ba-banner .controlplay{
+    width: auto;
+  }
+  .w-ba-banner .button-mid{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+  .next-button,.prev-button{
+    cursor: pointer;
+  }
 </style>

modules/ad_banner/_ad_banner_widget2_video.html.erb

@@ -1,5 +1,5 @@
-<div class="w-ba-banner ba-banner-widget-1 ba-banner-widget-youtube">
+<div class="w-ad-banner ad-banner-widget-2 w-ba-banner ba-banner-widget-1 ba-banner-widget-youtube">
-  <div class="w-ba-banner__wrap  cycle-slideshow"
+  <div class="w-ad-banner__wrap  w-ba-banner__wrap  cycle-slideshow"
       data-list="images"
       data-level="0"
       data-cycle-slides=".w-ba-banner__slide"
@@ -25,7 +25,7 @@
     {{html}}
   </div>
   <div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
-    <div class="w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}"></div>
+    <div class="w-ba-banner__caption w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></div>
     <ul class="controlplay"><a class="resume-slide active" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
     <ul class="button-mid">
       <i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
@@ -45,53 +45,116 @@
     var firstScriptTag = document.getElementsByTagName('script')[0];
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
   }
-
-  $("document").ready(function(){
   $("*[data-yt-binded=0]").each(function(){
     $(this).attr("data-yt-binded","1");
     var obj = $(this).find("iframe");
     obj.attr("id",$(this).data("youtube-id") + "_" + ad_banners_count);
     ad_banners_count++;
   })
-  });
-
 if (typeof onYouTubeIframeAPIReady !== 'function'){
+  if(window.yt_players == undefined)
+    window.yt_players = {};
+  $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
   function onYouTubeIframeAPIReady(){
-    $(".w-ba-banner iframe[data-yt-api-binded=0]").each(function(){
+    $(".w-ba-banner").each(function(i,banner){
-      $(this).attr("data-yt-api-binded","1");
+      var iframes = $(banner).find("iframe");
-       new YT.Player($(this).attr("id"), {
+      if(iframes.length > 0){
+        var id = $(banner).attr("data-subpart-id");
+        if(yt_players[id] == undefined)
+          yt_players[id] = {};
+        var remove_ids = [];
+        Object.keys(yt_players[id]).forEach(function(k){
+          var yt_player = yt_players[id][k];
+          if($(yt_player.getIframe()).length == 0){
+            yt_player.destroy();
+            remove_ids.push(k);
+          }
+        })
+        remove_ids.forEach(function(k){
+          delete yt_players[id][k];
+        })
+        iframes.each(function(i,iframe){
+          console.log($(iframe).attr("id"))
+          var yt_player = yt_players[id][$(iframe).attr("id")];
+          if(yt_player){
+          }else{
+            yt_player = new YT.Player($(iframe).attr("id"), {
                 events: {
+                  'onReady': function(event){
+                    var height = $(event.target.getIframe()).height();
+                    var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
+                    banner_wrap.height(height).css({"padding-bottom":"4em","padding-top":""});
+                    banner_wrap.find(".cycle-carousel-wrap").css("top","3em");
+                    delete event.target.B.onStateChange;
+                    var onStateChange_idx = event.target.l.i.onStateChange;
+                    onStateChange_idx.reverse();
+                    var event_size = 3;
+                    onStateChange_idx.forEach(function(start_idx){
+                      event.target.l.h.splice(start_idx,event_size);
+                    });
+                    event.target.l.i.onStateChange = [];
+                    event.target.l.s = event.target.l.h.length;
+                    event.target.addEventListener('onStateChange',onPlayerStateChange);
+                    {{extra_ready_script}}
+                  },
                   'onStateChange': onPlayerStateChange
                 }
             });
+            yt_players[id][$(iframe).attr("id")] = yt_player;
+            $(iframe).data("yt_player",yt_player);
+          }
+        })
+      }
     })
   }
 
   function onPlayerStateChange(event){
     var iframe = $(event.target.h),
         cyclediv = iframe.parents("div.cycle-slideshow");
-    var widget = cyclediv.parents('.ba-banner-widget-youtube')
+    var widget = cyclediv.parents('.ba-banner-widget-youtube');
     if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
+      cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
       cyclediv.cycle("pause");
       widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','hidden')
-    }else if(event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
+    }else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
+      if(cyclediv[0].need_resume)
         cyclediv.cycle("resume");
       widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','')
     }
+    {{extra_state_chnage_script}}
   }
   $(document).ready(function(){
     window.onYouTubePlayerAPIReady = function() {
-      onYouTubeIframeAPIReady();
+      onYouTubeIframeAPIReady.apply(this,arguments);
     };
+    var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
+    var opts = banner_wrap.data('cycle.opts');
+    banner_wrap.on('cycle-paused',function(opts){
+      var controlplay = $(this).nextAll(".controlplay");
+      if(controlplay.length != 0){
+        controlplay.find(".resume-slide").removeClass("active");
+        controlplay.find(".pause-slide").addClass("active");
+      }
+    })
+    banner_wrap.on('cycle-resumed',function(opts){
+      var controlplay = $(this).nextAll(".controlplay");
+      if(controlplay.length != 0){
+        controlplay.find(".resume-slide").addClass("active");
+        controlplay.find(".pause-slide").removeClass("active");
+      }
+    })
+    var height = opts.slides.filter('.active').height() || opts.slides.height();
+    banner_wrap.height(height).css("padding-bottom","");
+    {{extra_document_ready_script}}
     $('.pause-slide').off('click').click(function(){
       $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
-      $(this).addClass('active')
+      $(this).addClass('active');
-      $(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active')
+      $(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active');
     });
     $('.resume-slide').off('click').click(function(){
       $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
-      $(this).addClass('active')
+      $(this).addClass('active');
-      $(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active')
+      $(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active');
     });
     $('.next-button').off('click').on('click',function(){
       $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
@@ -99,14 +162,39 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
     $('.prev-button').off('click').on('click',function(){
       $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
     })
+    var resize_timeout_id;
+    $(window).resize(function(){
+      if(resize_timeout_id){
+        window.clearTimeout(resize_timeout_id);
+      }
+      resize_timeout_id = window.setTimeout(function(){
+        var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
+        var opts = banner_wrap.data('cycle.opts');
+        var height = opts.slides.filter('.active').height() || opts.slides.height();
+        banner_wrap.height(height).css("padding-bottom","");
+      },300);
+    })
   })
 }
 </script>
 <style type="text/css">
-  .controlplay .resume-slide.active i{
+  .w-ba-banner .controlplay .resume-slide.active i{
     color: #32D9C3;
   }
-  .controlplay .pause-slide.active i{
+  .w-ba-banner .controlplay .pause-slide.active i{
     color: #ff4500;
   }
+  .w-ba-banner .controlplay{
+    width: auto;
+  }
+  .w-ba-banner .button-mid{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+  .next-button,.prev-button{
+    cursor: pointer;
+  }
 </style>

modules/announcement/_annc_widget15.html.erb

@@ -1,13 +1,13 @@
-<div class="w-annc widget-announcement-15" style="position:relative;">
+<div class="w-annc  widget-announcement-4 w-annc  widget-announcement-15" style="position:relative;">
   <div class="w-annc__more-wrap clearfix">
     <h2 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h2>
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
-  <div style="position: absolute;top: 9em;width:100%;">
+  <div style="position: absolute;top: 50%;bottom: 50%;width:100%;">
-	<button class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: url(/assets/left-01.png) no-repeat;border: 0;background-size: contain;position: absolute;transition:.3s; left: 0;"></button>
+	<button class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: url(/assets/left-01.png) no-repeat;border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;"><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
-	<button class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background: url(/assets/right-01.png) no-repeat;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0;"></button>
+	<button class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background: url(/assets/right-01.png) no-repeat;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0.6%;"><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
   </div>
   <ul class="w-annc__list  row" data-level="0" data-list="announcements">
     <li class="w-annc__item  col-md-4">
@@ -20,11 +20,11 @@
           <span class="w-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-           
+          <i class="fa fa-calendar-o"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-           
+          <i class="fa fa-tasks"></i>
           <span class="w-annc__category">{{category}}</span>
           </span>
       </div>
@@ -38,92 +38,126 @@
 </div>
 <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script>
-	function combineul(){
+	function combineul_{{subpart-id}}(){
-		for(var i=1;i<$('.widget-announcement-15 ul.w-annc__list').length;i++)
+		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
-			$('.widget-announcement-15 ul.w-annc__list').eq(0).find('>li').eq(-1).after($('.widget-announcement-15 ul.w-annc__list').eq(i).html());
+		parents.each(function(i,v){
-		var ullength = $('.widget-announcement-15 ul.w-annc__list').length;
+			for(var i=1;i<$(v).find('ul.w-annc__list').length;i++)
+				$(v).find('ul.w-annc__list').eq(0).find('>li').eq(-1).after($(v).find('ul.w-annc__list').eq(i).html());
+			var ullength = $(v).find('ul.w-annc__list').length;
 			for(var i = 1;i < ullength;i++)
-			$('.widget-announcement-15 ul.w-annc__list').eq(-1).remove();
+				$(v).find('ul.w-annc__list').eq(-1).remove();
+		})
 	};
-	var lilength = $('.widget-announcement-15 li.w-annc__item').length;
 	var num;
-	function reorganize(num){
+	var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
-		combineul();
+	function reorganize_{{subpart-id}}(num){
-		for(var i=1;i< Math.ceil(lilength/num);i++){
+		var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').toArray();
-			$('.widget-announcement-15 ul.w-annc__list').eq(-1).after('<ul class="w-annc__list  row" data-level="0" data-list="announcements"></ul>')
+		var currentul = uls.findIndex(function(v){
+			return $(v).hasClass("active") && !$(v).hasClass("hidden_item");
+		})
+		if(currentul == -1)
+			currentul = 0;
+		var li_active_idx = 0;
+		if(currentul != 0)
+			li_active_idx = $(uls[currentul]).find("li.w-annc__item").eq(0).index("li.w-annc__item");
+		combineul_{{subpart-id}}();
+		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
+		parents.each(function(i,v){
+			var lilength = $(v).find('li.w-annc__item').length;
+			var ul_length = Math.ceil(lilength/num);
+			for(var ii=1;ii< ul_length;ii++){
+				var clone_ul = $(v).find('ul.w-annc__list').eq(-1).clone();
+				clone_ul.empty();
+				clone_ul.removeClass("active");
+				clone_ul.css("display","");
+				$(v).find('ul.w-annc__list').eq(-1).after(clone_ul.prop("outerHTML"));
 				var lihtml="";
-			//var liheight=new Array(num);
+				if(ii != (ul_length-1)){
-			if(i != (Math.ceil(lilength/num)-1)){
 					for(var j=0;j<num;j++){
-					lihtml += "<li class='w-annc__item  col-md-4'>"+$('.widget-announcement-15 li.w-annc__item').eq(i*num+j).html()+"</li>"
+						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
-					//liheight[j] = $('.widget-announcement-15 li.w-annc__item').eq(i*num+j).height()+20;//20=>margin-top+margin-bottom
 					};
 				}else{
-				for(var j=0;j< lilength - num *(Math.ceil(lilength/num)-1) ;j++){
+					for(var j=0;j< lilength - num *(ul_length-1) ;j++){
-					lihtml += "<li class='w-annc__item  col-md-4'>"+$('.widget-announcement-15 li.w-annc__item').eq(i*num+j).html()+"</li>"
+						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
-					//liheight[j] = $('.widget-announcement-15 li.w-annc__item').eq(i*num+j).height()+20;//20=>margin-top+margin-bottom
 					};
 				};
-			$('.widget-announcement-15 ul.w-annc__list').eq(-1).html(lihtml);
+				$(v).find('ul.w-annc__list').eq(-1).html(lihtml);
-		};
+			}
-		if(Math.ceil(lilength/num) != 1 )
+			if(ul_length != 1 )
 				for(var i=0;i< lilength -num ; i++)
-				$('.widget-announcement-15 ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
+					$(v).find('ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
-		for(var i=0;i< Math.ceil(lilength/num);i++)
+		})
-			$('.widget-announcement-15 ul.w-annc__list').eq(i).attr("index",i);
+		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css("display","none");
-		$('.widget-announcement-15 ul.w-annc__list').css("display","none");
+		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('padding','0 1.125em');
-		$('.widget-announcement-15 ul.w-annc__list').eq(0).css("display","flex");
+		$('[data-subpart-id=\"{{subpart-id}}\"] button').css('z-index','10');
-		$('.widget-announcement-15 ul.w-annc__list').eq(0).addClass("active");
+		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
-		$('.widget-announcement-15 ul.w-annc__list').css('padding','0 1.125em');
+	  	$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('float','left');
-		$('.widget-announcement-15 button').css('z-index','10');
+	  	var active_ul = $("[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item").eq(li_active_idx).parents("ul.w-annc__list");
-		$('.widget-announcement-15 ul.w-annc__list >li').css('width','calc('+100/num+'% )'); 
+		active_ul.addClass("active");
+		active_ul.removeClass("hidden_item");
+		active_ul.css("display","");
 	};
 	$(window).resize(function(){
 		if($(window).width()>1024){
-			reorganize(3);
+			reorganize_{{subpart-id}}(3);
 			num=3;
 		}else if($(window).width()>576){
-			reorganize(2);
+			reorganize_{{subpart-id}}(2);
 			num=2;
 		}else{
-			reorganize(1);
+			reorganize_{{subpart-id}}(1);
 			num=1;
 		}
 	})
 	$(document).ready(function(){
 		if($(window).width()>1024){
-			reorganize(3);
+			reorganize_{{subpart-id}}(3);
 			num=3;
 		}else if($(window).width()>576){
-			reorganize(2);
+			reorganize_{{subpart-id}}(2);
 			num=2;
 		}else{
-			reorganize(1);
+			reorganize_{{subpart-id}}(1);
 			num=1;
 		}
 	var flag=false;
 	$('.btn-left').click(function(){	
 		if(!flag){
-		var currentul = Number($('.widget-announcement-15 ul.w-annc__list.active').attr("index"));
+			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
-		$('.widget-announcement-15 ul.w-annc__list').css('display','none');
+			var ul_length = uls.length;
+			var currentul = uls.findIndex(function(v){
+				return $(v).hasClass("active");
+			})
+			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
 			if(currentul - 1 < 0)
-			currentul += Math.ceil(lilength/num);
+				currentul += ul_length;
-		$('.widget-announcement-15 ul.w-annc__list').removeClass("active");
+			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
-		$('.widget-announcement-15 ul.w-annc__list').eq(currentul-1).addClass("active");
+			var active_item = $(uls[currentul-1]);
+			active_item.addClass("active");
+			active_item.find("li").css("display","block");
 			flag=true;
-		$('.widget-announcement-15 ul.w-annc__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){flag=false;});
+			$("body").css("overflow-x","hidden");
+			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){$("body").css("overflow-x","");flag=false;});
 		};
 	});
 	$('.btn-right').click(function(){
+		var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
 		if(!flag){
-		var currentul = Number($('.widget-announcement-15 ul.w-annc__list.active').attr("index"));
+			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
-		$('.widget-announcement-15 ul.w-annc__list').css("display","none");
+			var ul_length = uls.length;
-		if(currentul + 1 > Math.ceil(lilength/num) - 1)
+			var currentul = uls.findIndex(function(v){
-			currentul -= Math.ceil(lilength/num);
+				return $(v).hasClass("active");
-		$('.widget-announcement-15 ul.w-annc__list').removeClass("active");
+			})
-		$('.widget-announcement-15 ul.w-annc__list').eq(currentul+1).addClass("active");
+			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
+			if(currentul + 1 > ul_length - 1)
+				currentul -= ul_length;
+			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
+			var active_item = $(uls[currentul+1]);
+			active_item.addClass("active");
+			active_item.find("li").css("display","block");
 			flag=true;
-		$('.widget-announcement-15 ul.w-annc__list.active').eq(0).effect("slide", { direction: "right", mode: 'show', duration: 500},function(){flag=false;});
+			$("body").css("overflow-x","hidden");
+			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "right", mode: 'show', duration: 500},function(){$("body").css("overflow-x","");flag=false;});
 		};
 	});
 	});

modules/announcement/_annc_widget4.html.erb

@@ -6,7 +6,7 @@
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <ul class="w-annc__list  row" data-level="0" data-list="announcements">
-    <li class="w-annc__item  col-sm-4">
+    <li class="w-annc__item  col-md-4">
     <div class="w-annc__img-wrap bullseye">
       <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
     </div>
@@ -16,11 +16,11 @@
           <span class="w-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-           
+          <i class="fa fa-calendar-o"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-           
+          <i class="fa fa-tasks"></i>
           <span class="w-annc__category">{{category}}</span>
           </span>
       </div>
@@ -32,4 +32,77 @@
     </li>
   </ul>
 </div>
-
+<style type="text/css">
+	[data-subpart-id="{{subpart-id}}"] .bullseye{
+		overflow: hidden;
+	}
+</style>
+<script>
+	function combineul_{{subpart-id}}(){
+		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
+		parents.each(function(i,v){
+			for(var i=1;i<$(v).find('ul.w-annc__list').length;i++)
+				$(v).find('ul.w-annc__list').eq(0).find('>li').eq(-1).after($(v).find('ul.w-annc__list').eq(i).html());
+			var ullength = $(v).find('ul.w-annc__list').length;
+			for(var i = 1;i < ullength;i++)
+				$(v).find('ul.w-annc__list').eq(-1).remove();
+		})
+	};
+	var num;
+	var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
+	function reorganize_{{subpart-id}}(num){
+		combineul_{{subpart-id}}();
+		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
+		parents.each(function(i,v){
+			var lilength = $(v).find('li.w-annc__item').length;
+			var ul_length = Math.ceil(lilength/num);
+			for(var ii=1;ii< ul_length;ii++){
+				var clone_ul = $(v).find('ul.w-annc__list').eq(-1).clone();
+				clone_ul.empty();
+				clone_ul.removeClass("active");
+				clone_ul.css("display","");
+				$(v).find('ul.w-annc__list').eq(-1).after(clone_ul.prop("outerHTML"));
+				var lihtml="";
+				if(ii != (ul_length-1)){
+					for(var j=0;j<num;j++){
+						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
+					};
+				}else{
+					for(var j=0;j< lilength - num *(ul_length-1) ;j++){
+						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
+					};
+				};
+				$(v).find('ul.w-annc__list').eq(-1).html(lihtml);
+			}
+			if(ul_length != 1 )
+				for(var i=0;i< lilength -num ; i++)
+					$(v).find('ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
+		})
+		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
+		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css("float","left");
+	};
+	$(window).resize(function(){
+		if($(window).width()>1024){
+			reorganize_{{subpart-id}}(3);
+			num=3;
+		}else if($(window).width()>576){
+			reorganize_{{subpart-id}}(2);
+			num=2;
+		}else{
+			reorganize_{{subpart-id}}(1);
+			num=1;
+		}
+	})
+	$(document).ready(function(){
+		if($(window).width()>1024){
+			reorganize_{{subpart-id}}(3);
+			num=3;
+		}else if($(window).width()>576){
+			reorganize_{{subpart-id}}(2);
+			num=2;
+		}else{
+			reorganize_{{subpart-id}}(1);
+			num=1;
+		}
+	})
+</script>

modules/announcement/annc_index11.html.erb

@@ -25,10 +25,15 @@
 {{pagination_goes_here}}
 
 <script>
-$('.i-annc__table').DataTable({
+$('.i-annc__table').each(function(){
+  if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
+    $(this).DataTable({
       searching: false,
       paging:   false,
       ordering: false,
-  info:     false
+      info:     false,
+      autoWidth: false
     });
+  }
+});;
 </script>

modules/announcement/annc_index12.html.erb

@@ -27,10 +27,15 @@
 {{pagination_goes_here}}
 
 <script>
-$('.i-annc__table').DataTable({
+$('.i-annc__table').each(function(){
+  if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
+    $(this).DataTable({
       searching: false,
       paging:   false,
       ordering: false,
-  info:     false
+      info:     false,
+      autoWidth: false
     });
+  }
+});;
 </script>

modules/announcement/annc_index15.html.erb

@@ -25,10 +25,15 @@
 {{pagination_goes_here}}
 
 <script>
-$('.i-annc__table').DataTable({
+$('.i-annc__table').each(function(){
+  if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
+    $(this).DataTable({
       searching: false,
       paging:   false,
       ordering: false,
-  info:     false
+      info:     false,
+      autoWidth: false
     });
+  }
+});;
 </script>

modules/announcement/annc_index16.html.erb

@@ -39,10 +39,15 @@
 {{pagination_goes_here}}
 
 <script>
-$('.i-annc__table').DataTable({
+$('.i-annc__table').each(function(){
+  if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
+    $(this).DataTable({
       searching: false,
       paging:   false,
       ordering: false,
-  info:     false
+      info:     false,
+      autoWidth: false
     });
+  }
+});;
 </script>

modules/announcement/show.html.erb

@@ -1,3 +1,28 @@
+<style type="text/css">
+  .full-size-img img {
+    width: 100%;
+  }
+  .full-size-img {
+      width: 100%;
+  }
+  .s-annc__sub-img.pull-right {
+    margin-left: 2em;
+  }
+  .s-annc__sub-img.pull-left {
+    margin-right: 2em;
+  }
+  strong.carousel__description {
+    color: white;
+  }
+  .carousel_images{
+    {{carousel_display_style}}
+  }
+  @media (max-width: 767px){
+    .carousel_images{
+      width: 100%;
+    }
+  }
+</style>
 <article class="s-annc show-announcement">
   <h1 class="s-annc__show-title">{{title}}</h1>
   
@@ -19,7 +44,7 @@
   </ul>
 
   <section class="s-annc__post-wrap">
-    <div class="s-annc__sub-img pull-right {{hide_class}}">
+    <div class="s-annc__sub-img {{hide_class}}">
     <img src="{{img_src}}" alt="{{img_description}}"></img>
     <span class="s-annc__img_description">{{img_description}}</span>
     </div>
@@ -44,7 +69,7 @@
   </ul>
 
 </article>
-<div class="carousel_images" style="{{carousel_display_style}}">
+<div class="carousel_images">
   <div class="w-ba-banner ba-banner-widget-1">
     <div class="w-ba-banner__wrap  cycle-slideshow"
         data-list="bulletin_carousel_images"
@@ -244,7 +269,7 @@
       var carousel_images_slide = $('.carousel_images_slide');
       var carousel_images_slide_first_child = carousel_images_slide.find(">li").eq(active_slide);
       if(carousel_images_slide_first_child.length > 0){
-        var content_size = Math.floor((carousel_images_slide.width() - Number.parseInt(carousel_images_slide.css('font-size')) * 3) / carousel_images_slide_first_child.width());
+        var content_size = Math.floor((carousel_images_slide.outerWidth() - Number.parseInt(carousel_images_slide.css('font-size')) * 3) / carousel_images_slide_first_child.outerWidth(true));
         content_size = Math.max(content_size,1);
         if(carousel_images_slide.find(">li").length > content_size && active_slide > 0){
           active_slide -= content_size;
@@ -259,7 +284,7 @@
       var carousel_images_slide = $('.carousel_images_slide');
       var carousel_images_slide_first_child = carousel_images_slide.find(">li").eq(active_slide);
       if(carousel_images_slide_first_child.length > 0){
-        var content_size = Math.floor((carousel_images_slide.width() - Number.parseInt(carousel_images_slide.css('font-size')) * 3) / carousel_images_slide_first_child.width());
+        var content_size = Math.floor((carousel_images_slide.outerWidth() - Number.parseInt(carousel_images_slide.css('font-size')) * 3) / carousel_images_slide_first_child.outerWidth(true));
         content_size = Math.max(content_size,1);
         var li_length = carousel_images_slide.find(">li").length;
         if(li_length > content_size){
@@ -307,7 +332,7 @@
       var carousel_images_slide = $('.carousel_images_slide');
       var carousel_images_slide_first_child = carousel_images_slide.find(">li").eq(active_slide);
       if(carousel_images_slide_first_child.length > 0){
-        var content_size = Math.floor((carousel_images_slide.width() - Number.parseInt(carousel_images_slide.css('font-size')) * 3) / carousel_images_slide_first_child.width());
+        var content_size = Math.floor((carousel_images_slide.outerWidth() - Number.parseInt(carousel_images_slide.css('font-size')) * 3) / carousel_images_slide_first_child.outerWidth(true));
         content_size = Math.max(content_size,1);
         carousel_images_slide.find(">li").css("display","none");
         var active_count = carousel_images_slide.find(">li").length - active_slide;

modules/member/show.html.erb

@@ -76,11 +76,16 @@ for ( var i = 0; i < $('tr[data-list="pd_title"]').length ; i++ ) {
   }
 }
 
-$('.tab-pane table').DataTable({
+$('.tab-pane table').each(function(){
+  if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
+    $(this).DataTable({
       searching: false,
       paging: false,
       ordering: false,
       info: false,
-  order: false
+      order: false,
+      autoWidth: false
     });
+  }
+});;
 </script>

modules/personal_activity/index.html.erb

@@ -26,10 +26,15 @@
 {{pagination_goes_here}}
 
 <script>
-$('table.activities-index').DataTable({
+$('table.activities-index').each(function(){
+  if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
+    $(this).DataTable({
       searching: false,
       paging:   false,
       ordering: false,
-  info:     false
+      info:     false,
+      autoWidth: false
     });
+  }
+});;
 </script>

modules/personal_book/index_search1.html.erb

@@ -23,7 +23,7 @@ $( ".selectbox" ).ready(function() {
   <a id="filter" style="" href="{{url}}">Clear</a>
   </form>
  </div>
-<table class="table table-hover table-striped journal-papers-index">
+<table class="table table-hover table-striped book-index">
   <thead>
     <tr data-level="0" data-list="headers">
       <th class="col-md-{{col}}">{{head-title}}</th>

modules/personal_conference/index_search1.html.erb

@@ -23,7 +23,7 @@ $( ".selectbox" ).ready(function() {
   <a id="filter" style="" href="{{url}}">Clear</a>
   </form>
  </div>
-<table class="table table-hover table-striped projects-index">
+<table class="table table-hover table-striped personal_conference-index">
   <thead>
     <tr data-level="0" data-list="headers">
       <th class="col-md-{{col}}">{{head-title}}</th>

modules/personal_course/index.html.erb

@@ -22,10 +22,15 @@
 {{pagination_goes_here}}
 
 <script>
-$('table.courses-index').DataTable({
+$('table.courses-index').each(function(){
+  if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
+    $(this).DataTable({
       searching: false,
       paging:   false,
       ordering: false,
-  info:     false
+      info:     false,
+      autoWidth: false
     });
+  }
+});;
 </script>

modules/personal_honor/index.html.erb

@@ -16,10 +16,15 @@
 <script>
 $('thead th.col-md-2:nth-child(2)').addClass('min-tablet-l');
 $('thead th.col-md-2:nth-child(5)').addClass('min-tablet');
-$('table.personal-honor').DataTable({
+$('table.personal-honor').each(function(){
+  if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
+    $(this).DataTable({
       searching: false,
       paging:   false,
       ordering: false,
-  info:     false
+      info:     false,
+      autoWidth: false
     });
+  }
+});;
 </script>

modules/personal_journal/index_search1.html.erb

@@ -23,7 +23,7 @@ $( ".selectbox" ).ready(function() {
   <a id="filter" style="" href="{{url}}">Clear</a>
   </form>
  </div>
-<table class="table table-hover table-striped projects-index">
+<table class="table table-hover table-striped personal_journal-index">
   <thead>
     <tr data-level="0" data-list="headers">
       <th class="col-md-{{col}}">{{head-title}}</th>

modules/personal_lab/index.html.erb

@@ -31,10 +31,15 @@ for ( var i = 0; i < $('thead th').length ; i++ ) {
   }
 }
 
-$('table.personal-lab').DataTable({
+$('table.personal-lab').each(function(){
+  if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
+    $(this).DataTable({
       searching: false,
       paging:   false,
       ordering: false,
-  info:     false
+      info:     false,
+      autoWidth: false
     });
+  }
+});;
 </script>

modules/personal_patent/index_search1.html.erb

@@ -23,7 +23,7 @@ $( ".selectbox" ).ready(function() {
   <a id="filter" style="" href="{{url}}">Clear</a>
   </form>
  </div>
-<table class="table table-hover table-striped projects-index">
+<table class="table table-hover table-striped personal_patent-index">
   <thead>
     <tr data-level="0" data-list="headers">
       <th class="col-md-{{col}}">{{head-title}}</th>

modules/personal_research/index.html.erb

@@ -31,10 +31,15 @@ for ( var i = 0; i < $('thead th').length ; i++ ) {
   }
 }
 
-$('table.personal-researchs').DataTable({
+$('table.personal-researchs').each(function(){
+  if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
+    $(this).DataTable({
       searching: false,
       paging:   false,
       ordering: false,
-  info:     false
+      info:     false,
+      autoWidth: false
     });
+  }
+});;
 </script>

modules/ruling_bus/_ruling_bus_widget1.html.erb

@@ -0,0 +1,57 @@
+<div id="{{update_id}}" class="bus_widget1" data-list="bus_infos" data-level="0">
+  <div class="bus_info" id="{{bus_id}}">
+    <div class="row mt-10">
+      <div class="col-sm-12 bus_title">
+        <i class="fa fa-bus"></i>
+        <strong>{{bus_title}}</strong>
+      </div>
+    </div>
+    <div class="row bus_data" data-list="bus_data" data-level="1">
+        <div class="col-sm-6">
+          <div>
+            <strong class="route_name">{{route_name}}:</strong>
+            <span class="bus_time">{{time_to_arrive}}</span>
+          </div>
+        </div>
+    </div>
+  </div>
+</div>
+<script type="text/javascript">
+  function update_bus(ele){
+    var $self = $(ele);
+    var bus_info_ids = $.map($self.find('.bus_info'),function(v){
+      return $(v).attr('id');
+    });
+    $.{{update_method}}( "{{update_url}}",
+      {
+        bus_info_ids: bus_info_ids
+      }, function( data ) {
+        $.each(data,function(k,v){
+          var bus_info = $self.find('#'+k);
+          var bus_route_names = $.map(bus_info.find('.route_name'),function(v1){
+            return $(v1).text().slice(0,-1)
+          });
+          var bus_time_span = bus_info.find('.bus_time');
+          $.each(v,function(k,v1){
+            var i = bus_route_names.indexOf(v1.route_name);
+            if (i>=0){
+              bus_time_span.eq(i).html(v1.time_to_arrive);
+            }
+          })
+        })
+        window.setTimeout(function(){
+          update_bus(ele);
+        },{{update_interval}});
+    });
+  }
+  function update_interval_bus(ele) {
+    window.setTimeout(function(){
+      update_bus(ele);
+    },{{update_interval}});
+  }
+  update_interval_bus($('#{{update_id}}[data-list="bus_infos"]')[0]);
+</script>
+<style type="text/css">
+  .bus_widget1 {margin-top: 1em;}
+  .bus_info {line-height: 1.8;}
+</style>

modules/ruling_bus/info.json

@@ -0,0 +1,14 @@
+{
+	"frontend": [
+	],
+	"widgets" : [
+		{
+			"filename" : "ruling_bus_widget1",
+			"name" : {
+				"zh_tw" : "1. 公車呈現樣式1",
+				"en" : "1. Bus layout 1"
+				},
+			"thumbnail" : "bus1_thumbs.png"
+		}
+	]
+}

modules/web_resource/_web_res_widget1.html.erb

@@ -4,6 +4,9 @@
   </h3>
   <ul class="list-unstyled" data-level="0" data-list="web_link">
     <li class="widget-content">
+      <div class="link-img-wrap{{display_image}}">
+        <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+      </div>
       <a class="widget-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">{{title}}</a>
       <span data-list="statuses" data-level="1">
         <span class="label status {{status-class}}">{{status}}</span>

modules/web_resource/_web_res_widget2.html.erb

@@ -4,6 +4,9 @@
   </h3>
   <ul class="list-unstyled" data-level="0" data-list="web_link">
     <li class="widget-content widget-content-horizontal">
+      <div class="link-img-wrap{{display_image}}">
+        <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+      </div>
       <a class="widget-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">{{title}}</a>
       <span data-list="statuses" data-level="1">
         <span class="label status {{status-class}}">{{status}}</span>

modules/web_resource/web_res_index1.html.erb

@@ -4,13 +4,18 @@
   </h1>
   <ul class="list-unstyled" data-list="web_link" data-level="0">
     <li class="index-content">
+      <a class="index-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">
         <h4>
-        <a class="index-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">{{title}}</a>
+          <div class="link-img-wrap{{display_image}}">
+            <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+          </div>
+          {{title}}
           <span data-list="statuses" data-level="1">
             <span class="label status {{status-class}}">{{status}}</span>
           </span>
         </h4>
         <small class="index-context">{{context}}</small>
+      </a>
     </li>
   </ul>
 </div>

modules/web_resource/web_res_index2.html.erb

@@ -4,13 +4,20 @@
   </h1>
   <ul class="list-unstyled" data-list="web_link" data-level="0">
     <li class="index-content col-md-4 col-sm-4">
+      <a class="index-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">
+        <div class="link-img-wrap{{display_image}}">
+          <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+        </div>
         <h4>
-        <a class="index-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">{{title}}</a>
+          <span class="link-title">
+            {{title}}
+          </span>
           <span data-list="statuses" data-level="1">
             <span class="label status {{status-class}}">{{status}}</span>
           </span>
         </h4>
         <small class="index-context">{{context}}</small>
+      </a>
     </li>
   </ul>
 </div>

partial/_head.html.erb

@@ -1,3 +1,4 @@
+<%= render 'shared/ie_html5_fix' %>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <%= favicon_link_tag (current_site.favicon.blank? ?  'favicon.ico' : current_site.favicon.url) %>
@@ -9,18 +10,10 @@
   <link rel="stylesheet" media="print" type="text/css" href="/assets/template/print.css">
   <%= javascript_include_tag "plugin/modernizr.js"%>
   <%= javascript_include_tag "plugin/picturefill.min.js"%>
-  <%= javascript_include_tag "jquery.min"%>
-	<%= javascript_include_tag "jquery_prefix"%>
-  <%= javascript_include_tag "jquery.min"%>
-	<%= javascript_include_tag "jquery_prefix"%>
   <%= javascript_include_tag "plugin/jquery.mobile.custom.min.js"%>
   <%= javascript_include_tag "bootstrap.min"%>
   <%= javascript_include_tag "bootstrap.min"%>
   
-  <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js"%>
-  <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.carousel.min.js"%>
-  <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.scrollVert.min.js"%>
-  <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.tile.min.js"%>
   <%= javascript_include_tag "plugin/jquery.cycle2.video.min.js"%>
   <%= javascript_include_tag "plugin/jquery-bullseye-min.js"%>
   <%= javascript_include_tag "plugin/jquery.scrolling-tabs.min.js"%>
@@ -29,15 +22,10 @@
   <link rel="stylesheet" type="text/css" href="/assets/template/owl.carousel.min.css">
   <link rel="stylesheet" type="text/css" href="/assets/template/owl.theme.default.min.css">
   
-  <%= javascript_include_tag "//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"%>
-  <%= javascript_include_tag "//cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"%>
-  <%= stylesheet_link_tag "//cdn.datatables.net/responsive/1.0.7/css/responsive.dataTables.min.css"%>
-
   <%= javascript_include_tag "app"%>
   <%= javascript_include_tag "#{@dataApi}" if @dataApi != nil%>
   <script src="https://apis.google.com/js/platform.js" async defer></script>
   <%= render_google_analytics %>
   <!--[if lt IE 9]>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
   <![endif]-->

widgets/site_menu_widget/_site_menu_widget1.html.erb

@@ -3,7 +3,7 @@
 	<a id="accesskey_sitemenu" accesskey="S" href="/<%= "#{locale.to_s}" %>/accesskey" title="Sitemenu">:::</a>
 	<h3 class="sitemenu-title">{{widget_title}}</h3>
 	<ul data-list="pages" class="sitemenu-list level-1 list-unstyled" data-level="0">
-		<li class="sitemenu-item level-1">
+		<li class="sitemenu-item level-1 {{active_class}}">
 			<a class="sitemenu-link level-1" href="{{url}}" target="{{target}}">{{page_name}}</a>
 			<ul class="sitemenu-list level-2" data-list="children" data-level="1">
 				<li class="sitemenu-item level-2" style="position: relative;">

widgets/site_menu_widget/_site_menu_widget2.html.erb

@@ -3,7 +3,7 @@
 	<a id="accesskey_sitemenu" accesskey="S" href="/<%= "#{locale.to_s}" %>/accesskey" title="Sitemenu">:::</a>
 	<h3 class="sitemenu-title">{{widget_title}}</h3>
 	<ul data-list="pages" class="sitemenu-list level-1 list-unstyled" data-level="0">
-		<li class="sitemenu-item level-1">
+		<li class="sitemenu-item level-1 {{active_class}}">
 			<a class="sitemenu-link level-1" href="{{url}}" target="{{target}}">{{page_name}}</a>
 			<ul class="sitemenu-list level-2" data-list="children" data-level="1">
 				<li class="sitemenu-item level-2" style="position: relative;">