Update menu layout.

This commit is contained in:
rulingcom 2022-10-12 09:11:40 +08:00
parent be17e78244
commit 7b3b4b752b
12 changed files with 475 additions and 277 deletions

View File

@ -447,46 +447,47 @@
orbit.setColumn('.left-column', '.right-column'); orbit.setColumn('.left-column', '.right-column');
// 自適應網頁使用當網頁載入時如果視窗寬度小於769就執行orbit.nav.setDropdown函數 // 自適應網頁使用當網頁載入時如果視窗寬度小於769就執行orbit.nav.setDropdown函數
if ($(window).outerWidth() < 769) { if ($(window).outerWidth() >200) {
// orbit.nav.setDropdown(); // orbit.nav.setDropdown();
orbit.MobileMenu(); orbit.MobileMenu();
$('.mobile-menu').append($('.modules-menu')); $('.dropdowns').append($('.modules-menus'));
$('.header-buttom').appendTo($('.modules-menu')); $('.mobile-menu').append($('.modules-menus'));
$('.header-buttom').appendTo($('.modules-menus'));
$('.outdropdowns').before($('.header-nav')); $('.outdropdowns').before($('.header-nav'));
orbit.ClickMenuHandler(); orbit.ClickMenuHandler();
}else{ }else{
$('.outdropdowns').before($('.header-nav')); $('.outdropdowns').before($('.header-nav'));
$('.navbar-header').after($('.modules-menu')); $('.navbar-header').after($('.modules-menus'));
} }
// 自適應網頁使用當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數 // 自適應網頁使用當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數
$(window).resize(function() { $(window).resize(function() {
var navFixed = $('.kenjohn.navFixed'); var navFixed = $('.kenjohn.navFixed');
window.top_barrier_height = (navFixed.length ? navFixed.height() : 0) + $('#orbit-bar').height(); window.top_barrier_height = (navFixed.length ? navFixed.height() : 0) + $('#orbit-bar').height();
if ($(window).outerWidth() < 769) { if ($(window).outerWidth() >200) {
if (resizeTimer) clearTimeout(resizeTimer); if (resizeTimer) clearTimeout(resizeTimer);
$('.outdropdowns').before($('.header-nav')); $('.outdropdowns').before($('.header-nav'));
resizeTimer = setTimeout(function() { resizeTimer = setTimeout(function() {
if ( $('.modules-menu i').length == 0 ) { if ( $('.modules-menus i').length == 0 ) {
orbit.MobileMenu(); orbit.MobileMenu();
} }
if( $('.mobile-menu .modules-menu').length == 0 ) { if( $('.mobile-menu .modules-menus').length == 0 ) {
$('.mobile-menu').append($('.modules-menu')); $('.mobile-menu').append($('.modules-menus'));
$('.navbar-toggle').bind(orbit.ClickMenuHandler()); $('.navbar-toggle').bind(orbit.ClickMenuHandler());
} }
},500 )} else { },500 )} else {
resizeTimer = setTimeout(function(){ resizeTimer = setTimeout(function(){
if( $('.mobile-menu .modules-menu').length > 0 ) { if( $('.mobile-menu .modules-menus').length > 0 ) {
$('.navbar-header').after($('.modules-menu')); $('.navbar-header').after($('.modules-menus'));
} }
orbit.removeDropdown(); orbit.removeDropdown();
}, 500); }, 500);
$('.outdropdowns').before($('.header-nav')); $('.outdropdowns').before($('.header-nav'));
$('.navbar-header').after($('.modules-menu')); $('.navbar-header').after($('.modules-menus'));
} }
}); });
// if($(window).width()<769){ // if($(window).width()<769){
// $('.header-buttom').appendTo($('.modules-menu')); // $('.header-buttom').appendTo($('.modules-menus'));
// }else{ // }else{
// $('.header-buttom').appendTo($('.dropdowns')); // $('.header-buttom').appendTo($('.dropdowns'));
// } // }
@ -550,7 +551,7 @@
if($('*[data-list] tr td a').eq(i).html().trim()=="") if($('*[data-list] tr td a').eq(i).html().trim()=="")
$('*[data-list] tr td a').eq(i).parent('td').parent('tr').remove(); $('*[data-list] tr td a').eq(i).parent('td').parent('tr').remove();
// tab按鍵選到menu,會顯示下層的menu(為了符合無障礙) // tab按鍵選到menu,會顯示下層的menu(為了符合無障礙)
/* /*
$('.nav-level-0>li>a').focus(function(e) { $('.nav-level-0>li>a').focus(function(e) {
e.stopPropagation(); e.stopPropagation();
$(this).parent().focus(); $(this).parent().focus();
@ -836,10 +837,10 @@ function transdate(){
// //
// //drop down menu // //drop down menu
// $(".dropdown-toggle").hover(function() { // $(".dropdown-toggle").hover(function() {
// $('.modules-menu-level-1').addClass('display-on'); // $('.modules-menus-level-1').addClass('display-on');
// }); // });
// $(".dropdown-toggle").mouseleave(function() { // $(".dropdown-toggle").mouseleave(function() {
// $('.modules-menu-level-1').removeClass('display-on'); // $('.modules-menus-level-1').removeClass('display-on');
// }); // });
// //
// }); // });
@ -887,7 +888,7 @@ function transdate(){
e.preventDefault(); e.preventDefault();
} }
}); });
//$('.modules-menu-level-1').css('left','-'+$('.outdropdowns .dropdowns').offset().left+'px'); //$('.modules-menus-level-1').css('left','-'+$('.outdropdowns .dropdowns').offset().left+'px');
$(".downIcon").click(function() { $(".downIcon").click(function() {
var move_to_target=function (stop) { var move_to_target=function (stop) {
var theTop; var theTop;
@ -922,23 +923,23 @@ function transdate(){
function calc_menu_pos(){ function calc_menu_pos(){
if ($(window).outerWidth() < 769){ if ($(window).outerWidth() < 769){
calc_menu_flag = false; calc_menu_flag = false;
$('.outdropdowns .modules-menu-level-1').css('right','') $('.outdropdowns .modules-menus-level-1').css('right','')
$('.outdropdowns .modules-menu-level-1').css('width','') $('.outdropdowns .modules-menus-level-1').css('width','')
}else{ }else{
try{ try{
var width = $('header #main-nav').outerWidth(); var width = $('header #main-nav').outerWidth();
var right = $(window).width() - $('header #main-nav').offset().left - width; var right = $(window).width() - $('header #main-nav').offset().left - width;
if (width>50){ if (width>50){
calc_menu_flag = true; calc_menu_flag = true;
$('.outdropdowns .modules-menu-level-1').css('right',right); $('.outdropdowns .modules-menus-level-1').css('right',right);
$('.outdropdowns .modules-menu-level-1').css('width',width); $('.outdropdowns .modules-menus-level-1').css('width',width);
} }
}catch(e){}; }catch(e){};
} }
} }
$(window).resize(function() { $(window).resize(function() {
//$('.modules-menu-level-1').css('calc_menu_flagleft','-'+$('.outdropdowns .dropdowns').offset().left+'px'); //$('.modules-menus-level-1').css('calc_menu_flagleft','-'+$('.outdropdowns .dropdowns').offset().left+'px');
calc_menu_pos(); calc_menu_pos();
window.has_hover = false; window.has_hover = false;

File diff suppressed because one or more lines are too long

View File

@ -21,8 +21,8 @@ $theme-color-third: #ed4c43;
$theme-color-green: #288E8E; $theme-color-green: #288E8E;
// Font stacks // Font stacks
$main-font: "IndustryW00-Medium","Barlow", "Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif; $main-font: "Calibri","Barlow", "Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
$sub-font: "Barlow","Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif; $sub-font: "Calibri","Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
@font-face {font-family: "IndustryW00-Medium"; src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot"); src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff") format("woff"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.svg#IndustryW00-Medium") format("svg"); } @font-face {font-family: "IndustryW00-Medium"; src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot"); src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff") format("woff"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.svg#IndustryW00-Medium") format("svg"); }

View File

@ -517,6 +517,15 @@ body{
} }
.internal-page{ .internal-page{
background-color: #fff; background-color: #fff;
.site-trigger__text{
color: #333;
top: -0.4em;
right: 1em;
text-shadow:none;
}
.dropdowns{
justify-content: center;
}
.kenjohn { .kenjohn {
//flex-wrap:wrap-reverse; //flex-wrap:wrap-reverse;
display: flex; display: flex;
@ -575,6 +584,9 @@ body{
color: $theme-color-main; color: $theme-color-main;
font-size: 0.6em; font-size: 0.6em;
font-family: $main-font; font-family: $main-font;
@media(min-width:769px){
display: block!important;
}
@media (max-width: $screen-sm) { @media (max-width: $screen-sm) {
height: 5em; height: 5em;
display: none; display: none;
@ -640,6 +652,7 @@ body{
} }
.navbar-toggle .icon-bar{ .navbar-toggle .icon-bar{
background-color: #333; background-color: #333;
box-shadow: none;
} }
.navbar-header .navbar-brand{ .navbar-header .navbar-brand{
@media(max-width: 769px){ @media(max-width: 769px){

View File

@ -6,9 +6,7 @@
z-index: 1; z-index: 1;
} }
.kenjohn{ .kenjohn{
@media (min-width: 769px) {
display: none;
}
position: absolute; position: absolute;
width: 100%; width: 100%;
} }
@ -162,9 +160,9 @@ a#content{
@media screen and(min-width:$screen-xs) and (max-width:768px){ @media screen and(min-width:$screen-xs) and (max-width:768px){
height: 1000px!important; height: 1000px!important;
} }
@media screen and (max-width: $screen-xs){ @media screen and (max-width: $screen-xs){
height: 720px!important; height: 720px!important;
} }
} }
} }
.jp-jplayer{ .jp-jplayer{
@ -222,9 +220,7 @@ a#content{
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 75px; height: 75px;
@media (min-width: 769px){
display: none!important;
}
@media (max-width: 768px) { @media (max-width: 768px) {
position:relative!important; position:relative!important;
} }
@ -247,7 +243,9 @@ a#content{
height: 5em; height: 5em;
display: none; display: none;
} }
@media (min-width: 769px){
display: none;
}
@media (max-width: 480px) { @media (max-width: 480px) {
margin: 0; margin: 0;
} }
@ -303,10 +301,9 @@ a#content{
.navbar-toggle { .navbar-toggle {
padding: 0.875em 0.625em; padding: 0.875em 0.625em;
margin-top: 1em; margin-top: 1em;
// border-radius: 0.125em; @media(min-width: 769px){
// border-width: 0.125em; margin-top: 1.8em;
// border-color: lighten($theme-color-main, 30%); }
.icon-bar { .icon-bar {
background-color: #fff; background-color: #fff;
} }
@ -350,14 +347,42 @@ a#content{
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
@media(max-width: 769px){
position: absolute;
right: 0;
}
} }
.outdropdowns{ .outdropdowns{
width:100%; width:100%;
} }
.navFixed{ .navFixed{
.site-trigger__text{
text-shadow: none!important;
}
.navbar-toggle .icon-bar{
box-shadow:none!important;
}
.home-menu{
@media(min-width: 769px){
display: block!important;
}
}
position: fixed!important; position: fixed!important;
top: auto; top: auto;
//top:2.5em; //top:2.5em;
.dropdowns{
@media (min-width: 769px) {
justify-content:center!important;
}
}
.navbar-brand{
display: block!important;
}
.site-trigger__text{
color: #333;
top: -0.32em;
right: 1em;
}
} }
.internal-page .kenjohn.navRel,.navRel { .internal-page .kenjohn.navRel,.navRel {
position: relative!important; position: relative!important;
@ -405,15 +430,15 @@ a#content{
.navbar-header{ .navbar-header{
@media screen and (min-width:769px) { @media screen and (min-width:769px) {
height: 78px; height: 78px;
margin-bottom: 1em;
width: 35%; width: 35%;
justify-content: center; justify-content: center;
margin-bottom: 1em;
} }
@media (min-width: 1900px){ @media (min-width: 1900px){
height: 90px; height: 90px;
} }
} }
@media screen and (max-width:768px) { @media screen and (max-width:820px) {
.navbar-header{ .navbar-header{
height: 75px; height: 75px;
margin-bottom: 1em; margin-bottom: 1em;
@ -442,10 +467,10 @@ a#content{
max-height: 65%; max-height: 65%;
verflow-y: scroll; verflow-y: scroll;
border-radius: 0.5em; border-radius: 0.5em;
opacity: 1; opacity: 1;
padding:1em 5% 3em; padding:1em 5% 3em;
transition-duration: opacity 0.3s cubic-bezier(0.48, 0.01, 0.5, 0.99),visibility 0.1s linear; transition-duration: opacity 0.3s cubic-bezier(0.48, 0.01, 0.5, 0.99),visibility 0.1s linear;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
@ -463,12 +488,14 @@ a#content{
} }
} }
@media (width: 768px) { .navbar-toggle{
.navbar-toggle{
display: block!important; display: block!important;
@media(min-width: 769px){
margin-right: 2em;
width: 150px;
}
} }
}
.header-nav{ .header-nav{
} }
.outdropdowns{ .outdropdowns{
@ -510,3 +537,28 @@ a#content{
display: inline-block; display: inline-block;
left: 5px; left: 5px;
} }
.mobile-menu .collapse.navbar-collapse.modules-menu{
@media(min-width: 769px){
overflow-y: scroll!important;
height: 100%!important;
padding: 0;
}
}
.navbar-toggle .icon-bar{
@media(min-width: 769px){
right:-1em;
}
}
.site-trigger__text{
font-weight: bold;
@media(min-width: 769px){
position: absolute;
top: 1em;
right: 1em;
text-shadow: 2px 2px 4px #00000080;
font-size: 1.5em;
}
@media(max-width: 768px){
display: none;
}
}

View File

@ -8,7 +8,13 @@
// Widget // Widget
// ## gerenral styles // ## gerenral styles
.jarallax-video-audio, .jarallax-video-control-play{
bottom: 2%!important;
top: auto!important;
}
.jarallax-video-control-play{
margin-bottom: 66px!important;
}
.w-ba-banner { .w-ba-banner {
position: relative; position: relative;
z-index: 0; z-index: 0;

View File

@ -143,10 +143,7 @@
.card:before{ .card:before{
height:100%; height:100%;
} }
.w-annc__subtitle{
max-height: 100px;
opacity: 1;
}
} }
padding: 0; padding: 0;
flex: 0 0 25%; flex: 0 0 25%;

View File

@ -32,16 +32,34 @@
padding-top: 28px!important; padding-top: 28px!important;
} }
@media (min-width: 769px) { @media (min-width: 769px) {
margin: 0 0 0.8em 0; margin: 0 0 0.8em 0;
-webkit-flex-flow: row wrap; -webkit-flex-flow: row wrap;
list-style: none; list-style: none;
float: left !important; float: left !important;
padding-top: 10px; padding-top: 10px;
display: flex; display: flex;
width: 100%;
justify-content:start;
padding-left: 0;
padding-left: 6em;
padding-right: 3em;
.mobile-menu1{
width: 30%;
.dropdown-toggle{
border-bottom: 2px solid #288E8E;
margin-right: 1em;
font-weight:bold;
}
}
.modules-menu-level-1{
display: flex!important;
width: 100%;
flex-wrap: wrap;
}
} }
.has-dropdown.level-1.active { .has-dropdown.level-1.active {
.modules-menu-level-1 { .modules-menu-level-1 {
display: block; display: block!important;
} }
} }
@ -66,7 +84,7 @@
.menu-drop { .menu-drop {
position: absolute; position: absolute;
right: 0.3em; right: 1.3em;
width: 2.5em; width: 2.5em;
height: 2.5em; height: 2.5em;
cursor: pointer; cursor: pointer;
@ -74,7 +92,15 @@
font-size: 0.5em; font-size: 0.5em;
text-align: center; text-align: center;
border-radius: 0.13em; border-radius: 0.13em;
top: 2em; top: 0.5em;
@media(min-width: 769px){
right: 0.3em;
cursor: pointer;
text-align: center;
border-radius: 0.13em;
top: 2em;
display: none;
}
} }
// .dropdown-toggle-icon.level-1 { // .dropdown-toggle-icon.level-1 {
@ -126,7 +152,6 @@
margin-right: 0; margin-right: 0;
.modules-menu-level-1 { .modules-menu-level-1 {
left: auto;
&:before { &:before {
right: 0.625em; right: 0.625em;
@ -172,40 +197,24 @@
} }
.modules-menu-level-1 { .modules-menu-level-1 {
background-color:#ffffff;
list-style: none; list-style: none;
z-index: 1; z-index: 1;
padding:1em; padding:1em;
@media(min-width:769px){ @media(min-width:769px){
flex-wrap: wrap;
justify-content: flex-start;
right: 0;
display: flex;
visibility: hidden;
position: fixed!important;
opacity: 0;
width: 60vw;
box-shadow: 2px 2px 10px #000000ab;
margin: 0.8em 0; margin: 0.8em 0;
padding: 0; padding: 0;
max-height: 0;
overflow: hidden;
transition-duration: 0.5s;
} }
& > li { & > li {
position: relative; position: relative;
// & + li {
// border-top: 0.0625em solid lighten($theme-gray, 5%);
// }
& > a { & > a {
display: block; display: block;
padding: 1em 1.5em; padding: 1em 1.5em;
font-family: $main-font; font-family: $main-font;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 500;
color: #333; color: #fff;
} }
// &:hover { // &:hover {
@ -215,16 +224,18 @@
// } // }
// } // }
} }
@media(max-width: 1024px){
& > li{
width: 100%!important;
}
}
@media (min-width: $screen-sm) { @media (min-width: $screen-sm) {
position: absolute;
& > li { & > li {
padding-right: 2em; padding-right: 2em;
flex: 0 0 33.3%; width: 50%;
& > a { & > a {
padding-left: 1em; padding-left: 1em;
border-bottom: 2px solid #288E8E;
padding: 5px 0; padding: 5px 0;
} }
@ -312,29 +323,36 @@
width: 100%; width: 100%;
position: absolute; position: absolute;
right: 0; right: 0;
background: #ffffff; background:#222222a6;
height: 100%; height: 100%;
top: 40px; top: 40px;
padding-top: 0; padding-top: 0;
overflow-y: scroll;
} }
.modules-menu .modules-menu-level-0 > li > a, .modules-menu .modules-menu-level-0 ,.modules-menu .modules-menu-level-0 > li {color: #000; .modules-menu .modules-menu-level-0 > li > a, .modules-menu .modules-menu-level-0 ,.modules-menu .modules-menu-level-0 > li {color: #fff;
font-size: 18px ; font-size: 18px ;
font-weight: 500; } font-weight: 500; }
.menu-drop{ .menu-drop{
font-size: 10px ; font-size: 10px ;
} }
.navbar-toggle { .navbar-toggle {
position: absolute; position: absolute;
left: 0; right: 2.8em;
background: transparent; background: transparent;
top: 0; top: 6.5em;
z-index: 1; z-index: 11111;
height: 40px; height: 40px;
margin: 0; margin: 0;
width: 100%; border: 0;
border: 0; -webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
@media(max-width:768px){
left: 3em;
top:0;
}
} }
.cover { .cover {
position: fixed; position: fixed;
top: 0; top: 0;
@ -377,6 +395,7 @@
.mobile-menu .collapse.navbar-collapse.modules-menu { .mobile-menu .collapse.navbar-collapse.modules-menu {
//overflow-y: scroll; //overflow-y: scroll;
transform: translateX(0%); transform: translateX(0%);
} }
.display-on{ .display-on{
display:block!important; display:block!important;
@ -412,3 +431,109 @@
font-size: 3px; font-size: 3px;
font-weight: 100!important; font-weight: 100!important;
} }
.home-menu{
display: none;
position: relative;
height: 100px!important;
width: 80%;
z-index: -1;
.dropdown-toggle{
border-bottom: 0!important;
}
.modules-menu-level-0{
padding: 0;
}
@media(max-width: 768px){
display: none;
}
.modules-menu-level-1{
overflow-y: scroll !important;
}
.modules-menu-level-0 .mobile-menu1{
@media (min-width: 769px){
width: auto!important;
}
}
.modules-menu-level-1 {
list-style: none;
z-index: 1;
padding:1em;
@media(min-width:769px){
flex-wrap: wrap;
justify-content: flex-start;
left:0;
display: flex;
visibility: hidden;
position: fixed!important;
opacity: 0;
width: 100vw;
box-shadow: 2px 2px 5px #00000033;
margin: 0.8em 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition-duration: 0.5s;
}
& > li {
position: relative;
// & + li {
// border-top: 0.0625em solid lighten($theme-gray, 5%);
// }
& > a {
display: block;
padding: 1em 1.5em;
font-family: $main-font;
font-size: 16px;
font-weight: 600;
color: #333;
}
}
@media (min-width: $screen-sm) {
position: absolute;
& > li {
padding-right: 2em;
flex: 0 0 33.3%;
& > a {
padding-left: 1em;
border-bottom: 2px solid #288E8E;
padding: 5px 0;
}
&:hover {
.modules-menu-level-2 {
display: block;
}
}
}
}
}
}
.modules-menus{
.mobile-menu2{
.menu-drop{
@media(min-width: 769px){
display: none;
}
}
}
}
.navbar-toggle .icon-bar{
width: 1.75em;
box-shadow: 2px 2px 4px #00000080;
}
.active{
.navbar-toggle .icon-bar{
right:-2em;
margin-top: 0.25em!important;
}
}
.navbar-toggle .icon-bar+.icon-bar{
margin-top: 0.35em;
}
.navbar-toggle .icon-bar{
height: 0.15em;
}

View File

@ -26,7 +26,7 @@ div.weather_widget1{
background: unset; background: unset;
} }
.navFixed .modules-menu .modules-menu-level-0 > li:focus-within .modules-menu-level-1, .navRel .modules-menu .modules-menu-level-0 > li:focus-within .modules-menu-level-1{ .navFixed .modules-menu .modules-menu-level-0 > li:focus-within .modules-menu-level-1, .navRel .modules-menu .modules-menu-level-0 > li:focus-within .modules-menu-level-1{
visibility: visible; visibility: visible;
max-height: 65%; max-height: 65%;
opacity: 1; opacity: 1;
border-radius: 0.5em; border-radius: 0.5em;
@ -101,17 +101,15 @@ div.extra-box:empty {
} }
} }
.dropdowns{ .dropdowns{
@media (min-width: $screen-md) { @media (min-width:769px) {
display: flex; display: flex;
margin: auto; margin: auto;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content:end;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
} }
} }
.header-buttom{ .header-buttom{
@media (min-width: $screen-md) { @media (min-width: $screen-md) {
@ -214,4 +212,4 @@ h3.page-module-title {
.title-wraper{ .title-wraper{
width: 100%; width: 100%;
order: 0; order: 0;
} }

View File

@ -31,15 +31,18 @@
<span class="icon-bar icon-bar-top"></span> <span class="icon-bar icon-bar-top"></span>
<span class="icon-bar icon-bar-middle"></span> <span class="icon-bar icon-bar-middle"></span>
<span class="icon-bar icon-bar-bottom"></span> <span class="icon-bar icon-bar-bottom"></span>
<span class="site-trigger__text">
MENU </span>
</button> </button>
<a title="{{site_title_1}}" class="navbar-brand" href="{{home_link_1}}"><img class="site-logo" src="{{logo_url_1}}" alt="site-logo"></a> <a title="{{site_title_1}}" class="navbar-brand" href="{{home_link_1}}"><img class="site-logo" src="{{logo_url_1}}" alt="site-logo"></a>
<script>$(document).ready(function(){var url =$('.site-logo').eq(0).attr('src');if(url == "/assets/default-site-logo.png"){$('.navbar-brand').eq(0).remove();};if($('.navbar-brand').length == 2){$('.site-logo').css('height','auto')};$('.site-logo').eq(0).css('margin-right',0);$('.navbar-brand').css('padding-right',0)})</script> <script>$(document).ready(function(){var url =$('.site-logo').eq(0).attr('src');if(url == "/assets/default-site-logo.png"){$('.navbar-brand').eq(0).remove();};if($('.navbar-brand').length == 2){$('.site-logo').css('height','auto')};$('.site-logo').eq(0).css('margin-right',0);$('.navbar-brand').css('padding-right',0)})</script>
<a title="{{site_title}}" class="navbar-brand" href="{{home_link}}"><img class="site-logo" src="{{logo_url}}" alt="site-logo"> {{site_name}}</a> <a title="{{site_title}}" class="navbar-brand" href="{{home_link}}"><img class="site-logo" src="{{logo_url}}" alt="site-logo"> {{site_name}}</a>
</div> </div>
<div class="collapse navbar-collapse modules-menu" id="layout-navigation"> <div class="collapse navbar-collapse modules-menu modules-menus" id="layout-navigation">
<a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a> <a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>
<%= render_menu %> <%= render_menu %>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -171,193 +171,193 @@
$("*[data-yt-binded=0]").each(function(){ $("*[data-yt-binded=0]").each(function(){
init_yt_banner(this); init_yt_banner(this);
}) })
if (typeof onYouTubeIframeAPIReady !== 'function'){ if (typeof onYouTubeIframeAPIReady !== 'function'){
$(document).ready(function() { $(document).ready(function() {
$(document).on('touchstart click mousedown',".jarallax-video-audio",function(){ $(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
$(this).trigger('click'); $(this).trigger('click');
});
}); });
}); if(window.yt_players == undefined)
if(window.yt_players == undefined) window.yt_players = {};
window.yt_players = {}; function find_out_yt_event_list_key(yt_player){
function find_out_yt_event_list_key(yt_player){ var defalt_key = 'o';
var defalt_key = 'o'; var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1}); var prop_nums_thresh = 6;
var prop_nums_thresh = 6; if(all_keys.indexOf(defalt_key) != -1){
if(all_keys.indexOf(defalt_key) != -1){ if((yt_player[defalt_key] instanceof Object) && Object.keys(yt_player[defalt_key]).length > prop_nums_thresh){
if((yt_player[defalt_key] instanceof Object) && Object.keys(yt_player[defalt_key]).length > prop_nums_thresh){
return defalt_key;
}
}
var event_key;
all_keys.forEach(function(k){
if((yt_player[k] instanceof Object) && Object.keys(yt_player[k]).length > prop_nums_thresh){
event_key = k;
return false;
}
})
return event_key;
}
function find_out_yt_event_list_count_key(yt_player, event_list_key){
var defalt_key = 'v';
var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
var equal_count = yt_player[event_list_key].length;
if(all_keys.indexOf(defalt_key) != -1){
if(yt_player[defalt_key] == equal_count){
return defalt_key;
}
}
var count_key;
all_keys.forEach(function(k){
if(yt_player[k] == equal_count){
count_key = k;
return false;
}
})
return count_key;
}
function find_out_yt_event_list_array_key(event_dict){
var defalt_key = 'i';
var all_keys = Object.keys(event_dict);
if(all_keys.indexOf(defalt_key) != -1){
var tmp = event_dict[defalt_key];
if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
return defalt_key;
}
}
var array_key;
all_keys.forEach(function(k){
var tmp = event_dict[k];
if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
array_key = k;
return false;
}
})
return array_key;
}
function find_out_yt_event_relation_key(event_dict, is_obj){ // is_obj = true => store event idx array. false => store whether event init(true or false)
var defalt_key = 'j';
var all_keys = Object.keys(event_dict);
if(all_keys.indexOf(defalt_key) != -1){
var tmp = event_dict[defalt_key];
if((tmp instanceof Object) && tmp['onStateChange']){
if(!is_obj || (tmp['onStateChange'] instanceof Object)){
return defalt_key; return defalt_key;
} }
} }
} var event_key;
var relation_key; all_keys.forEach(function(k){
all_keys.forEach(function(k){ if((yt_player[k] instanceof Object) && Object.keys(yt_player[k]).length > prop_nums_thresh){
var tmp = event_dict[k]; event_key = k;
if((tmp instanceof Object) && tmp['onStateChange']){
if(!is_obj || (tmp['onStateChange'] instanceof Object)){
relation_key = k;
return false; return false;
} }
}
})
return relation_key;
}
function onYouTubeIframeAPIReady(){
$(".w-ba-banner").on('cycle-post-initialize', function(){
init_banner(this);
});
function init_banner(banner){
var $banner = $(banner);
$banner.find('.w-ad-banner__slide').each(function(j, banner__slide){
init_yt_banner(banner__slide);
}) })
var iframes = $banner.find("iframe"); return event_key;
if(iframes.length > 0){ }
var id = $banner.attr("data-subpart-id"); function find_out_yt_event_list_count_key(yt_player, event_list_key){
if(yt_players[id] == undefined) var defalt_key = 'v';
yt_players[id] = {}; var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
var remove_ids = []; var equal_count = yt_player[event_list_key].length;
Object.keys(yt_players[id]).forEach(function(k){ if(all_keys.indexOf(defalt_key) != -1){
var yt_player = yt_players[id][k]; if(yt_player[defalt_key] == equal_count){
if($(yt_player.getIframe()).length == 0){ return defalt_key;
yt_player.destroy(); }
remove_ids.push(k);
}
})
remove_ids.forEach(function(k){
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")];
if(yt_player){
}else{
yt_player = new YT.Player($(iframe).attr("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 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;
}
banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
var init_key = find_out_yt_event_relation_key(yt_player, false);
if(init_key){
delete yt_player[init_key].onStateChange;
}
else{
console.log("{onReady: true, onStateChange: true} missing!");
}
var event_list_key = find_out_yt_event_list_key(yt_player);
if(event_list_key){
var event_dict = yt_player[event_list_key];
var array_key = find_out_yt_event_list_array_key(event_dict);
var count_key = find_out_yt_event_list_count_key(event_dict, array_key);
var relation_key = find_out_yt_event_relation_key(event_dict, true);
var onStateChange_idx = event_dict[relation_key].onStateChange;
onStateChange_idx.reverse();
var event_size = 3;
onStateChange_idx.forEach(function(start_idx){
event_dict[array_key].splice(start_idx,event_size);
});
event_dict[relation_key].onStateChange = [];
event_dict[count_key] = event_dict[array_key].length;
yt_player.addEventListener('onStateChange',onPlayerStateChange);
banner_wrap.trigger('resize');
}else{
console.log("YT player changes its variables!")
}
{{extra_ready_script}}
},
'onStateChange': onPlayerStateChange
}
});
yt_players[id][$(iframe).attr("id")] = yt_player;
$(iframe).data("yt_player",yt_player);
}
})
} }
var count_key;
all_keys.forEach(function(k){
if(yt_player[k] == equal_count){
count_key = k;
return false;
}
})
return count_key;
} }
$(".w-ba-banner").each(function(i,banner){ function find_out_yt_event_list_array_key(event_dict){
init_banner(banner); var defalt_key = 'i';
}) var all_keys = Object.keys(event_dict);
} if(all_keys.indexOf(defalt_key) != -1){
function onPlayerStateChange(event){ var tmp = event_dict[defalt_key];
var iframe = $(event.target.getIframe()), if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
cyclediv = iframe.parents("div.cycle-slideshow"); return defalt_key;
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")); var array_key;
cyclediv.cycle("pause"); all_keys.forEach(function(k){
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay,.banner-overlay').css('visibility','hidden') var tmp = event_dict[k];
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),false); if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
}else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){ array_key = k;
if(cyclediv[0].need_resume) return false;
cyclediv.cycle("resume"); }
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay,.banner-overlay').css('visibility','') })
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true); return array_key;
}
function find_out_yt_event_relation_key(event_dict, is_obj){ // is_obj = true => store event idx array. false => store whether event init(true or false)
var defalt_key = 'j';
var all_keys = Object.keys(event_dict);
if(all_keys.indexOf(defalt_key) != -1){
var tmp = event_dict[defalt_key];
if((tmp instanceof Object) && tmp['onStateChange']){
if(!is_obj || (tmp['onStateChange'] instanceof Object)){
return defalt_key;
}
}
}
var relation_key;
all_keys.forEach(function(k){
var tmp = event_dict[k];
if((tmp instanceof Object) && tmp['onStateChange']){
if(!is_obj || (tmp['onStateChange'] instanceof Object)){
relation_key = k;
return false;
}
}
})
return relation_key;
}
function onYouTubeIframeAPIReady(){
$(".w-ba-banner").on('cycle-post-initialize', function(){
init_banner(this);
});
function init_banner(banner){
var $banner = $(banner);
$banner.find('.w-ad-banner__slide').each(function(j, banner__slide){
init_yt_banner(banner__slide);
})
var iframes = $banner.find("iframe");
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){
var yt_id = $(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 yt_player = event.target;
var height = $(yt_player.getIframe()).height();
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;
}
banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
var init_key = find_out_yt_event_relation_key(yt_player, false);
if(init_key){
delete yt_player[init_key].onStateChange;
}
else{
console.log("{onReady: true, onStateChange: true} missing!");
}
var event_list_key = find_out_yt_event_list_key(yt_player);
if(event_list_key){
var event_dict = yt_player[event_list_key];
var array_key = find_out_yt_event_list_array_key(event_dict);
var count_key = find_out_yt_event_list_count_key(event_dict, array_key);
var relation_key = find_out_yt_event_relation_key(event_dict, true);
var onStateChange_idx = event_dict[relation_key].onStateChange;
onStateChange_idx.reverse();
var event_size = 3;
onStateChange_idx.forEach(function(start_idx){
event_dict[array_key].splice(start_idx,event_size);
});
event_dict[relation_key].onStateChange = [];
event_dict[count_key] = event_dict[array_key].length;
yt_player.addEventListener('onStateChange',onPlayerStateChange);
banner_wrap.trigger('resize');
}else{
console.log("YT player changes its variables!")
}
{{extra_ready_script}}
},
'onStateChange': onPlayerStateChange
}
});
yt_players[id][$(iframe).attr("id")] = yt_player;
$(iframe).data("yt_player",yt_player);
}
})
}
}
$(".w-ba-banner").each(function(i,banner){
init_banner(banner);
})
}
function onPlayerStateChange(event){
var iframe = $(event.target.getIframe()),
cyclediv = iframe.parents("div.cycle-slideshow");
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,.banner-overlay').css('visibility','hidden')
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),false);
}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,.banner-overlay').css('visibility','')
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true);
}
{{extra_state_chnage_script}}
} }
{{extra_state_chnage_script}}
} }
}
$(document).ready(function(){ $(document).ready(function(){
window.onYouTubePlayerAPIReady = function() { window.onYouTubePlayerAPIReady = function() {
onYouTubeIframeAPIReady.apply(this,arguments); onYouTubeIframeAPIReady.apply(this,arguments);

View File

@ -46,6 +46,9 @@
padding: 1em 0 0 0; padding: 1em 0 0 0;
text-align: center; text-align: center;
} }
.ask-question .controls > input[type="radio"]:not(:first-child) {
margin-left: 0.5em;
}
</style> </style>
<link href="/assets/custom_field.css" media="screen" rel="stylesheet"> <link href="/assets/custom_field.css" media="screen" rel="stylesheet">
<script src="/assets/validator"></script> <script src="/assets/validator"></script>