Updated. Fix menu bug.

assets/javascripts/app.js

@@ -25,8 +25,7 @@
     if ( $('.header-banner').length != 0) {
       $('.layout-header').css('height', '');
       var scrollTop = $(window).scrollTop();
-      var scrollBottom = $('html').height() - $(window).height() - $('.kenjohn').height();
-      if (scrollTop>5 && scrollBottom>0)  {          /* 要滑動到選單的距離 */
+      if (scrollTop>5) {          /* 要滑動到選單的距離 */
         if (parseInt($('.layout-content').css('margin-top'))==0 && $('.layout-content.topcontent').length != 0 && $('.layout-content.topcontent').offset().top<400){
           $('.layout-content').css('margin-top',$('.kenjohn').height()-$('#orbit-bar').height());
         }
@@ -370,8 +369,19 @@
       ClickMenuHandler: function() {
         $('.navbar-toggle').click(function(e){
           e.preventDefault();
-          $('.mobile-menu').toggleClass('active');
-          $('body').toggleClass('noscroll');
+          if($('body').hasClass('noscroll')){
+            $('.mobile-menu').removeClass('active');
+            window.setTimeout(function(){
+              $('body').removeClass('noscroll');
+              $('body').css('top', '');
+              window.scroll(window.temp_scrollX, ($('body').data('org-scrollY') || 0));
+            },400);
+          }else{
+            $('body').data('org-scrollY', window.temp_scrollY);
+            $('body').css('top', '-' +  window.temp_scrollY.toString() + 'px');
+            $('body').addClass('noscroll');
+            $('.mobile-menu').addClass('active');
+          }
 
           $('.mobile-menu .navbar-toggle').removeClass('collapsed');
           // $menu.slideToggle();
@@ -753,15 +763,15 @@ function transdate(){
         window.clearTimeout(window.focus_timeout_id);
       }
       var _this = $(document.activeElement);//$(this);
-      if(!_this.hasClass('close-screen-btn')){
-        var topOffset = window.temp_scrollY  + window.top_barrier_height;
-        var ele_offset = _this.offset().top - topOffset;
+      if($('body').css('position') != 'fixed' && !_this.hasClass('close-screen-btn') && !_this.hasClass('navbar-toggle')){
+        var ele_offset = _this[0].getBoundingClientRect().top - window.top_barrier_height;
+        console.log(_this, ele_offset)
         if(ele_offset < 0){
           window.scroll(window.temp_scrollX, window.temp_scrollY + ele_offset);
           window.temp_scrollY = Math.max(window.temp_scrollY + ele_offset, 0);
         }
         window.focus_timeout_id = window.setTimeout(function(){
-          var ele_offset = _this.offset().top - topOffset;
+          var ele_offset = _this[0].getBoundingClientRect().top - window.top_barrier_height;
           if(ele_offset < 0){
             window.scroll(window.temp_scrollX, window.temp_scrollY + ele_offset);
             window.temp_scrollY = Math.max(window.temp_scrollY + ele_offset, 0);

assets/stylesheets/template/layout/header.scss

@@ -370,14 +370,6 @@ a#content{
   position: fixed!important;
   top: auto;
   //top:2.5em;
-  .dropdowns{
-    @media (min-width: 769px) {
-      justify-content: flex-start;
-      .navbar-header {
-        justify-content: center;
-      }
-    }
-  }
   .navbar-brand{
     display: block!important;
   }
@@ -398,6 +390,14 @@ a#content{
     .navbar-header{
       display: flex!important;
     }
+    .dropdowns{
+      @media (min-width: 769px) {
+        justify-content: flex-start;
+        .navbar-header {
+          justify-content: center;
+        }
+      }
+    }
     .header-nav{
         @media(min-width: 480px){
               display: flex!important;

modules/ad_banner/_ad_banner_widget1.html.erb

@@ -70,9 +70,8 @@
   .w-ba-banner .button-mid{
     position: absolute;
     width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+    height: 0;
+    top: 50%;
   }
   .next-button,.prev-button{
     cursor: pointer;

modules/ad_banner/_ad_banner_widget2_video.html.erb

@@ -283,21 +283,26 @@
             delete yt_players[id][k];
           })
           iframes.each(function(i,iframe){
-            var yt_id = $(iframe).attr("id");
-            var yt_player = yt_players[id][$(iframe).attr("id")];
+            var $iframe = $(iframe);
+            var yt_id = $iframe.attr("id");
+            var yt_player = yt_players[id][yt_id];
             if(yt_player){
             }else{
-              yt_player = new YT.Player($(iframe).attr("id"), {
+              yt_player = new YT.Player(yt_id, {
                   events: {
                     'onReady': function(event){
                       var yt_player = event.target;
                       var height = $(yt_player.getIframe()).height();
-                      var banner_wrap = $(iframe).parents('.w-ba-banner__wrap').eq(0);
+                      var banner_wrap = $iframe.parents('.w-ba-banner__wrap').eq(0);
                       var carousel_wrap = banner_wrap.find(".cycle-carousel-wrap");
                       if(carousel_wrap.length){
                         carousel_wrap.css("top","3em");
                         height += parseInt(carousel_wrap.css('font-size')) * 3;
                       }
+                      var overlay_in_slide = $iframe.parent().siblings('.ad-overlay,.banner-overlay');
+                      if(overlay_in_slide.length != 0){
+                        height += overlay_in_slide.outerHeight(true);
+                      }
                       banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
                       var init_key = find_out_yt_event_relation_key(yt_player, false);
                       if(init_key){
@@ -330,8 +335,8 @@
                     'onStateChange': onPlayerStateChange
                   }
               });
-              yt_players[id][$(iframe).attr("id")] = yt_player;
-              $(iframe).data("yt_player",yt_player);
+              yt_players[id][yt_id] = yt_player;
+              $iframe.data("yt_player",yt_player);
             }
           })
         }
@@ -401,18 +406,6 @@
     $('[data-subpart-id="{{subpart-id}}"] .prev-button').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">
@@ -461,13 +454,6 @@
   .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;
   }

modules/ask/_ask_widget_form.html.erb

@@ -10,7 +10,7 @@
       flex-wrap: wrap;
       display: flex;
       width: 100%;
-      align-items: center;
+      align-items: flex-start;
     }
     .ask-question .controls > *{
       display: block;
@@ -28,7 +28,7 @@
     .ask-question .form-horizontal .control-group .controls{
       margin: 0;
       display: inline-flex;
-      align-items: center;
+      align-items: flex-start;
       overflow: hidden;
       position: relative;
       min-width: 10em;
@@ -36,7 +36,7 @@
       padding-left: 0;
       width: 100%;
       padding: 0.5em;
-      justify-content: center;
+      justify-content: flex-start;
     }
     .ask-question .form-horizontal input[type="text"],.ask-question  .form-horizontal select{
       width: 97%;

modules/gallery/_gallery_widget4.html.erb

@@ -2,7 +2,7 @@
   <h3 class="widget-title">
     <span>{{widget-title}}</span>
   </h3>
-  <link rel="stylesheet" type="text/css" href="/assets/gallery_card.css">
+  <% OrbitHelper.render_css_in_head(["gallery_card.css"]) %>
   <div class="row widget-content" data-level="0" data-list="images">
     <div class="card card-flip h-100">
       <div class="card-front">

modules/web_resource/_web_res_widget4.html.erb

@@ -41,9 +41,8 @@
   .widget-link.widget-4 .button-mid{
     position: absolute;
     width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+    height: 0;
+    top: 50%;
   }
   .widget-link.widget-4 .button-mid .fa{
   	cursor: pointer;

modules/web_resource/_web_res_widget5.html.erb

@@ -42,9 +42,8 @@
   .widget-link.widget-5 .button-mid{
     position: absolute;
     width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+    height: 0;
+    top: 50%;
   }
   .widget-link.widget-5 .button-mid .fa{
   	cursor: pointer;

modules/web_resource/_web_res_widget6.html.erb

@@ -43,9 +43,8 @@
   .widget-link.widget-6 .button-mid{
     position: absolute;
     width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+    height: 0;
+    top: 50%;
   }
   .widget-link.widget-6 .button-mid .fa{
   	cursor: pointer;

widgets/site_menu_widget/_site_menu_widget1.html.erb

@@ -5,10 +5,10 @@
 	<ul data-list="pages" class="sitemenu-list level-1 list-unstyled" data-level="0">
 		<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">
+			<ul class="sitemenu-list level-2 {{dropdown}}" data-list="children" data-level="1">
 				<li class="sitemenu-item level-2" style="position: relative;">
 					<a class="sitemenu-link level-2" href="{{url}}" target="{{target}}">{{page_name}}</a>
-					<ul class="sitemenu-list level-2" data-list="children" data-level="2">
+					<ul class="sitemenu-list level-2 {{dropdown}}" data-list="children" data-level="2">
 						<li class="sitemenu-item level-3" style="position: relative;">
 							<a class="sitemenu-link level-3" href="{{url}}" target="{{target}}">{{page_name}}</a>
 						</li>

widgets/site_menu_widget/_site_menu_widget2.html.erb

@@ -5,10 +5,10 @@
 	<ul data-list="pages" class="sitemenu-list level-1 list-unstyled" data-level="0">
 		<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">
+			<ul class="sitemenu-list level-2 {{dropdown}}" data-list="children" data-level="1">
 				<li class="sitemenu-item level-2" style="position: relative;">
 					<a class="sitemenu-link level-2" href="{{url}}" target="{{target}}">{{page_name}}</a>
-					<ul class="sitemenu-list level-2" data-list="children" data-level="2">
+					<ul class="sitemenu-list level-2 {{dropdown}}" data-list="children" data-level="2">
 						<li class="sitemenu-item level-3" style="position: relative;">
 							<a class="sitemenu-link level-3" href="{{url}}" target="{{target}}">{{page_name}}</a>
 						</li>