From e8d8dc8863fa37ac2995e3c67e6657a97a58dcd3 Mon Sep 17 00:00:00 2001 From: rulingcom Date: Wed, 7 Dec 2022 15:01:29 +0800 Subject: [PATCH] Updated --- assets/javascripts/app.js | 39 +- .../stylesheets/template/layout/content.scss | 401 +++++++++--------- assets/stylesheets/template/template.scss | 3 + home/index.html.erb | 6 +- 4 files changed, 240 insertions(+), 209 deletions(-) diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 13c17fa..e978589 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -11,6 +11,34 @@ this.replaceWith(new_html); } }); + function fix_first_element() { + console.log("fix_first_element"); + if (!window.has_topest_banner) { + $('.downIcon').css('display','none'); + var first_element = $('.header-banner'); + if(first_element.length == 0){ + first_element = $('.layout-content .layout-content-inner'); + }else{ + if(first_element.html() == ''){ + first_element = $('.layout-content-box').eq(0); + } + } + if(first_element.length){ + first_element.css("margin-top", ""); + var ele_offset = first_element[0].getBoundingClientRect().top; + if(first_element.parents('.kenjohn.navFixed').length == 0) + ele_offset -= window.top_barrier_height; + if(ele_offset < 0){ + first_element.css("margin-top", -ele_offset + "px"); + }else{ + first_element.css("margin-top", ""); + } + } + }else{ + $("#onesection").css("margin", "0"); + $('.layout-content-inner .row, .layout-content-inner .row > [class*="col-"]').css("padding", "0"); + } + } function initdata1 () { window.temp_scrollY = window.pageYOffset; window.temp_scrollX = window.pageXOffset; @@ -18,20 +46,17 @@ window.temp_scrollY = document.documentElement.scrollTop; window.temp_scrollX = document.documentElement.scrollLeft; } - if ($('.header-banner').html().trim() == "") { - $('.downIcon').css('display','none') - } // if (location.href.search('editmode') == -1 && document.getElementsByClassName('asideright').length != 0) { if ( $('.header-banner').length != 0) { $('.layout-header').css('height', ''); var scrollTop = $(window).scrollTop(); - if (scrollTop>5) { /* 要滑動到選單的距離 */ + if (!window.has_topest_banner || 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()); } $('.kenjohn').addClass('navFixed').removeClass('navRel'); /* 幫選單加上固定效果 */ } else { - if ($('.header-banner').html().trim() == "") { + if (!window.has_topest_banner) { $('.kenjohn').removeClass('navFixed').addClass('navRel'); }else{ $('.kenjohn').removeClass('navRel').removeClass('navFixed'); /* 移除選單固定效果 */ @@ -439,7 +464,10 @@ } // 在所有的頁面(包含首頁)執行下面這幾個函數 + window.has_topest_banner = ($('[data-pp="300"] .w-ad-banner').length != 0); initdata1(); + fix_first_element(); + window.setTimeout(fix_first_element, 3000); orbit.sitemenuDropdown(); orbit.goBackTop('top', 800); orbit.plugins.bullEye(); @@ -474,6 +502,7 @@ $('.navbar-toggle').bind(orbit.ClickMenuHandler()); } },500 )} else { + fix_first_element(); resizeTimer = setTimeout(function(){ if( $('.mobile-menu .modules-menu').length > 0 ) { $('.navbar-header').after($('.modules-menu')); diff --git a/assets/stylesheets/template/layout/content.scss b/assets/stylesheets/template/layout/content.scss index 9de3426..3d54c39 100644 --- a/assets/stylesheets/template/layout/content.scss +++ b/assets/stylesheets/template/layout/content.scss @@ -2,89 +2,85 @@ @import "../initial"; body{ -@media (min-width: 1150px){ -.black-screen-social-window.reactable{ -.content-social .social_wrap i, .content-social .social_wrap img { - width: 1.2em; - font-size: 2em; -} -.content-social .social_wrap>div{ - width: 3.2em; -} -} -} + @media (min-width: 1150px){ + .black-screen-social-window.reactable{ + .content-social .social_wrap i, .content-social .social_wrap img { + width: 1.2em; + font-size: 2em; + } + .content-social .social_wrap>div{ + width: 3.2em; + } + } + } } .downIcon { + position: absolute; + left: 50%; + bottom: 15%; + //bottom: 10%; + z-index: 2; + color: #fff; + + span { position: absolute; + top: 0; left: 50%; - bottom: 15%; - //bottom: 10%; - z-index: 2; - color: #fff; + width: 46px; + height: 46px; + margin-left: -23px; + border: 2px solid #fff; + border-radius: 100%; + behavior: url("/assets/ie_support/PIE2/PIE.htc"); + box-sizing: border-box; + } - span { - position: absolute; - top: 0; - left: 50%; - width: 46px; - height: 46px; - margin-left: -23px; - border: 2px solid #fff; - border-radius: 100%; - behavior: url("/assets/ie_support/PIE2/PIE.htc"); - box-sizing: border-box; - } - - a:hover span { - width: 60px; - height: 60px; - margin-left: -30px; - top: -7px; - border-width: 4px; - border-color: #facf3d; - } + 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; + 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%; - left: 50%; - content: ''; - width: 16px; - height: 16px; - margin: -12px 0 0 -8px; - border-left: 2px solid #fff; - border-bottom: 2px solid #fff; - -webkit-transform: rotate( --45deg -); - transform: rotate( --45deg -); - box-sizing: border-box; + position: absolute; + top: 50%; + left: 50%; + content: ''; + width: 16px; + height: 16px; + margin: -12px 0 0 -8px; + border-left: 2px solid #fff; + border-bottom: 2px solid #fff; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + box-sizing: border-box; } .downIcon a span::before{ position: absolute; - top: 0; - left: 0; - z-index: -1; - content: ''; - width: 44px; - height: 44px; - box-shadow: 0 0 0 0 #ffffff1a; - border-radius: 100%; - behavior: url("/assets/ie_support/PIE2/PIE.htc"); - opacity: 0; - -webkit-animation: sdb03 3s infinite; - animation: sdb03 3s infinite; - box-sizing: border-box; + top: 0; + left: 0; + z-index: -1; + content: ''; + width: 44px; + height: 44px; + box-shadow: 0 0 0 0 #ffffff1a; + border-radius: 100%; + behavior: url("/assets/ie_support/PIE2/PIE.htc"); + opacity: 0; + -webkit-animation: sdb03 3s infinite; + animation: sdb03 3s infinite; + box-sizing: border-box; } @-webkit-keyframes sdb03 { 0% { @@ -142,45 +138,47 @@ body{ @extend .response-pagecontainer; } } +#onesection{ + margin: 0 0.9375em; +} .bannertwo{ - - @media(min-width:1024px){ - padding: 0; - .w-ba-banner{ - display: flex; - flex-direction: row-reverse; - .w-ba-banner__wrap{ - flex: 0 0 65%; - } - .ad-overlay{ - position: relative; - background: none; - } + padding: 0; + @media(min-width:1024px){ + .w-ba-banner{ + display: flex; + flex-direction: row-reverse; + .w-ba-banner__wrap{ + flex: 0 0 65%; + } + .ad-overlay{ + position: relative; + background: none; } } - @media(min-width:800px){ - .ad-overlay{ - p{ - margin-top: 4em; - } - } - } - @media(min-width:768px){ - .ad-overlay{ - p{ - margin-top: 1em; - } - } - .ba-banner-widget-1 .w-ba-banner__caption{ - padding: 3em; - } + } + @media(min-width:800px){ + .ad-overlay{ + p{ + margin-top: 4em; } - .button-mid .prev-button{ - background: none; } - .button-mid .next-button{ - background: none; + } + @media(min-width:768px){ + .ad-overlay{ + p{ + margin-top: 1em; + } } + .ba-banner-widget-1 .w-ba-banner__caption{ + padding: 3em; + } + } + .button-mid .prev-button{ + background: none; + } + .button-mid .next-button{ + background: none; + } } .video-banner{ @@ -255,8 +253,8 @@ body{ display: flex; padding: 2em; @media(max-width: 1024px){ - flex-wrap: wrap; - padding: 0 15px; + flex-wrap: wrap; + padding: 0 15px; } } .fontgroup{ @@ -265,15 +263,15 @@ body{ flex-wrap: wrap; padding: 2em; @media(max-width: $screen-xs){ - flex-wrap: wrap; + flex-wrap: wrap; } } .iconbox{ width: 20% !important; flex: 1 1 20%; .fas{ - font-size: 2.5em; - color: #abb5b4; + font-size: 2.5em; + color: #abb5b4; } .fab{ font-size: 2.5em; @@ -295,8 +293,8 @@ body{ object-fit: cover; } .box .w-ba-banner__slide, .box .w-ba-banner__slide a { - height: 100%; - display: block; + height: 100%; + display: block; } .box{ flex: 3; @@ -325,9 +323,9 @@ body{ } } .layout-content-box3{ - @media(min-width: $screen-xs){ - top: -9em; - } + @media(min-width: $screen-xs){ + top: -9em; + } } .score{ .scorebutton{ @@ -357,11 +355,8 @@ body{ } .bannertwo{ @media(min-width:1024px){ - background-color: #72bcad; + background-color: #72bcad; } - @media(max-width: $screen-sm){ - padding: 0; - } } .onesection{ color: #fff; @@ -376,10 +371,10 @@ body{ padding:3em; } .line{ - @media(min-width:1025px){ - width: 80%!important; - margin: auto!important; - } + @media(min-width:1025px){ + width: 80%!important; + margin: auto!important; + } } .threesection{ padding: 2em 0; @@ -399,13 +394,13 @@ body{ .top-inner-block{ margin-left: 4.5em; &>h4 { - min-height: 3.2em; - //overflow: hidden; - //text-overflow: ellipsis; - color: #f49a04; - & > a{ - color: inherit !important; - } + min-height: 3.2em; + //overflow: hidden; + //text-overflow: ellipsis; + color: #f49a04; + & > a{ + color: inherit !important; + } } } .top-inner-info{ @@ -432,7 +427,7 @@ body{ .widget-event_news-0{ .w-event_news__list{ .w-event_news__img-wrap.bullseye{ - display: none; + display: none; } .card0{ border-top: 25px solid #72bcad; @@ -518,17 +513,17 @@ body{ .internal-page{ background-color: #fff; .kenjohn { - //flex-wrap:wrap-reverse; - display: flex; - flex-direction: column; - .navbar-header{ - display: flex!important; - } - .header-nav{ - @media(min-width: 480px){ - display: flex!important; - } - } + //flex-wrap:wrap-reverse; + display: flex; + flex-direction: column; + .navbar-header{ + display: flex!important; + } + .header-nav{ + @media(min-width: 480px){ + display: flex!important; + } + } .layout-header .header-nav a{ text-shadow: none; } @@ -546,9 +541,9 @@ body{ @media screen and (min-width:1025px) and (max-width:1599px){ flex: 0 0 65%; } - @media(min-width: 1900px){ - flex: 0 0 65%; - } + @media(min-width: 1900px){ + flex: 0 0 65%; + } } @media(min-width: 769px){ .dropdowns{ @@ -589,67 +584,67 @@ body{ .site-logo{ width:100%!important; } - @media(min-width:1900px){ - width: 225px; - margin-top: -12px; - } - @media screen and (min-width:1025px) and (max-width:1899px){ - width: 181px; - margin-top: -3px; - } - @media screen and (min-width:769px) and (max-width:1025px){ - width: 150px; - margin-top: -5px; - } - @media screen and (min-width:$screen-xs) and (max-width:769px){ - width: 146px !important; - } - @media screen and (max-width:$screen-xs){ - width: 110px !important; - margin-top: 3px; - } + @media(min-width:1900px){ + width: 225px; + margin-top: -12px; + } + @media screen and (min-width:1025px) and (max-width:1899px){ + width: 181px; + margin-top: -3px; + } + @media screen and (min-width:769px) and (max-width:1025px){ + width: 150px; + margin-top: -5px; + } + @media screen and (min-width:$screen-xs) and (max-width:769px){ + width: 146px !important; + } + @media screen and (max-width:$screen-xs){ + width: 110px !important; + margin-top: 3px; + } } - .navbar-brand:nth-child(2){ - @media(min-width:1900px){ - width: 330px!important; - margin-top: -14px; - } - @media screen and (min-width:1025px) and (max-width:1899px){ - width: 261px!important; - margin-top: -5px; - } - @media screen and (min-width:769px) and (max-width:1025px){ - width: 200px!important; - } - @media screen and (max-width:768px){ - width: 140px!important; - } - } - .modules-menu .modules-menu-level-0 > li > a{ - color: #333; - text-shadow: none; - } - .header-nav{ - background: #e7e8ea; - padding:0.5em !important; - } - .header-nav a{ - text-shadow:none; - color: #333333; - } - .navbar-toggle .icon-bar{ - background-color: #333; - } - .navbar-header .navbar-brand{ - @media(max-width: 769px){ - display: block!important; - } - } - .navbar-toggle{ - position: absolute; - right: 0; - } + .navbar-brand:nth-child(2){ + @media(min-width:1900px){ + width: 330px!important; + margin-top: -14px; + } + @media screen and (min-width:1025px) and (max-width:1899px){ + width: 261px!important; + margin-top: -5px; + } + @media screen and (min-width:769px) and (max-width:1025px){ + width: 200px!important; + } + @media screen and (max-width:768px){ + width: 140px!important; + } + } + .modules-menu .modules-menu-level-0 > li > a{ + color: #333; + text-shadow: none; + } + .header-nav{ + background: #e7e8ea; + padding:0.5em !important; + } + .header-nav a{ + text-shadow:none; + color: #333333; + } + .navbar-toggle .icon-bar{ + background-color: #333; + } + .navbar-header .navbar-brand{ + @media(max-width: 769px){ + display: block!important; + } + } + .navbar-toggle{ + position: absolute; + right: 0; + } } } @media(max-width:768px){ diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss index 2480ec8..f73bbf5 100644 --- a/assets/stylesheets/template/template.scss +++ b/assets/stylesheets/template/template.scss @@ -22,6 +22,9 @@ //RWD @import "RWD"; +[data-pp="8"] [data-subpart-id]:last-child { + margin-bottom: 2em; +} div.weather_widget1{ background: unset; } diff --git a/home/index.html.erb b/home/index.html.erb index 44b2864..becf698 100644 --- a/home/index.html.erb +++ b/home/index.html.erb @@ -24,7 +24,9 @@
- +
+
+
@@ -32,6 +34,8 @@
+
+