Updated. Fix accessibility.

assets/javascripts/app.js

@@ -12,6 +12,12 @@
     }
   });
   function initdata1 () {
+    window.temp_scrollY = window.pageYOffset;
+    window.temp_scrollX = window.pageXOffset;
+    if(window.temp_scrollY == undefined){
+        window.temp_scrollY = document.documentElement.scrollTop;
+        window.temp_scrollX = document.documentElement.scrollLeft;
+    }
     if ($('.header-banner').html().trim() == "") {
       $('.downIcon').css('display','none')
     }
@@ -34,10 +40,14 @@
         $('.layout-content').css('margin-top','');
       }
     }
+    var navFixed = $('.kenjohn.navFixed');
+    window.top_barrier_height = (navFixed.length ? navFixed.height() : 0) + $('#orbit-bar').height();
   }
   // 初始函數: 把所有的程式碼都包在init裡面，方便在之後的jQuery ready 函數裡一次呼叫
   function init() {
     // 快取一些常用的變數
+    var navFixed = $('.kenjohn.navFixed');
+    window.top_barrier_height = (navFixed.length ? navFixed.height() : 0) + $('#orbit-bar').height();
     var doc = document;
     var lang = doc.documentElement.lang;
     var pageModule = doc.body.getAttribute('data-module');
@@ -451,6 +461,8 @@
 
     // 自適應網頁使用，當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數
     $(window).resize(function() {
+      var navFixed = $('.kenjohn.navFixed');
+      window.top_barrier_height = (navFixed.length ? navFixed.height() : 0) + $('#orbit-bar').height();
       if ($(window).outerWidth() < 769) {
         if (resizeTimer) clearTimeout(resizeTimer);
         $('.outdropdowns').before($('.header-nav'));
@@ -728,8 +740,23 @@ function transdate(){
 
   // 當文件物件模型(DOM)載入後，執行init函數
   $(document).ready(function() {
-    $(document).on('focus','*',function(){
+    window.temp_scrollY = window.pageYOffset;
-      if ($('header>.kenjohn').attr('class') == "kenjohn" && $(document.activeElement).is('a.orbit-bar-logo')){
+    window.temp_scrollX = window.pageXOffset;
+    if(window.temp_scrollY == undefined){
+      window.temp_scrollY = document.documentElement.scrollTop;
+      window.temp_scrollX = document.documentElement.scrollLeft;
+    }
+    $(document).on('focusin','*',function(event){
+      // event.stopPropagation();
+      var _this = $(document.activeElement);//$(this);
+      var topOffset = window.temp_scrollY  + window.top_barrier_height;
+      var ele_offset = _this.offset().top - topOffset;
+      if(ele_offset < 0){
+        console.log(_this)
+        window.scroll(window.temp_scrollX, window.temp_scrollY + ele_offset);
+        window.temp_scrollY = Math.max(window.temp_scrollY + ele_offset, 0);
+      }
+      if ($('header>.kenjohn').attr('class') == "kenjohn" && _this.is('a.orbit-bar-logo')){
         $('header>.kenjohn').addClass('navRel');
         $('#gotocenter').focus();
       }
@@ -833,6 +860,7 @@ function transdate(){
       })
       var title_wrapper = $("<div class=\"title-wraper col-sm-12\"></div>")
       $('h4.page-module-title').replaceTagName('h3');
+      $('h3.i-annc__entry-title').replaceTagName('h4');
       title_wrapper.append($('.view_count.pull-right,.page-module-title,#main-content .index-title,.i-member-status-title:eq(0),#main-content > * > [class*="-title"]'));
       $('.row.pagerow').prepend(title_wrapper);
       try {
@@ -886,6 +914,7 @@ function transdate(){
         $('.outdropdowns .modules-menu-level-1').css('right','')
         $('.outdropdowns .modules-menu-level-1').css('width','')
       }else{
+        try{
           var width = $('header #main-nav').outerWidth();
           var right = $(window).width() - $('header #main-nav').offset().left - width;
           if (width>50){
@@ -893,6 +922,7 @@ function transdate(){
             $('.outdropdowns .modules-menu-level-1').css('right',right);
             $('.outdropdowns .modules-menu-level-1').css('width',width);
           }
+        }catch(e){};
       }
     }
     $(window).resize(function() {

assets/stylesheets/template/layout/content.scss

@@ -14,14 +14,15 @@ body{
 }
 }
 }
-.downIcon{
+.downIcon {
     position: absolute;
     left: 50%;
     bottom: 15%;
     //bottom: 10%;
     z-index: 2;
     color: #fff;
-    span{
+
+    span {
         position: absolute;
         top: 0;
         left: 50%;
@@ -33,10 +34,24 @@ body{
         behavior: url("/assets/ie_support/PIE2/PIE.htc");
         box-sizing: border-box;
     }
-    a:hover{
+
-        opacity: .5;
+    a:hover span {
+        width: 60px;
+        height: 60px;
+        margin-left: -30px;
+        top: -7px;
+        border-width: 4px;
+        border-color: #facf3d;
     }
 }
+.downIcon a:hover span::after {
+    width: 21px;
+    height: 21px;
+    border-left-width: 4px;
+    border-bottom-width: 4px;
+    margin: -14px 0 0 -10px;
+    border-color: #facf3d;
+}
 .downIcon a span::after{
     position: absolute;
     top: 50%;

modules/announcement/_annc_widget20.html.erb

@@ -0,0 +1,32 @@
+<div class="w-annc  widget-announcement-1">
+  <h3 class="w-annc__widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <ul class="w-annc__list" data-level="0" data-list="announcements">
+    <li class="w-annc__item">
+      <div class="w-annc__img-wrap bullseye">
+        <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+      </div>
+      <div class="w-annc__meta">
+        <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
+          <span class="w-annc__status label status {{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>
+      <h4 class="w-annc__entry-title">
+        <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
+      </h4>
+      <p class="w-annc__subtitle">{{subtitle}}</p>
+    </li>
+  </ul>
+  <div class="w-annc__more-wrap clearfix">
+    <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
+  </div>
+</div>

modules/announcement/info.json

@@ -305,6 +305,14 @@
         "en": "19. 3-Column Standard Text List (widget-title, postdate, category, status, title, subtitle)"
       },
       "thumbnail": "annc_index9_thumbs.png"
+    },
+    {
+      "filename": "annc_widget20",
+      "name": {
+        "zh_tw": "20. 標準圖文 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
+        "en": "20. Standard Image + Text (widget-title, image, status, postdate, category, title, subtitle)"
+      },
+      "thumbnail": "annc_widget1_thumbs.png"
     }
   ]
 }

modules/web_resource/_web_res_widget4.html.erb

@@ -7,7 +7,9 @@
   <div class="widget-link_wrapper">
 	  <div class="cycle-slideshow widget-content" style="margin: 0em 3.125em;"
 	    data-level="0" data-list="web_link" data-cycle-slides="> li"
-	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="4" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
+	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="4"
+      data-cycle-carousel-rwd-json="{768: 1}"
+      data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
 	    <li class="widget-link__item">
 	      <div class="liWrapper">
 	            <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">

modules/web_resource/_web_res_widget5.html.erb

@@ -7,7 +7,9 @@
   <div class="widget-link_wrapper">
 	  <div class="cycle-slideshow widget-content" style="margin: 0em 3.125em;"
 	    data-level="0" data-list="web_link" data-cycle-slides="> li"
-	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="5" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
+	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="5"
+      data-cycle-carousel-rwd-json="{768: 1}"
+      data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
 	    <li class="widget-link__item">
 	      <div class="liWrapper">
             <a class="widget-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">

modules/web_resource/_web_res_widget6.html.erb

@@ -7,7 +7,9 @@
   <div class="widget-link_wrapper">
 	  <div class="cycle-slideshow widget-content" style="margin: 0em 3.125em;"
 	    data-level="0" data-list="web_link" data-cycle-slides="> li"
-	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="5" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
+	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="5"
+      data-cycle-carousel-rwd-json="{768: 1}"
+      data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
 	    <li class="widget-link__item">
 	      <div class="liWrapper">
             <a class="widget-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">