From 499adab9b358d448a2e5f0de5401ae1c58561358 Mon Sep 17 00:00:00 2001 From: ken Date: Fri, 31 Jul 2026 14:23:37 +0800 Subject: [PATCH] css --- assets/javascripts/app.js | 149 ++++++++++-------- assets/stylesheets/template/base/_global.scss | 20 +-- assets/stylesheets/template/modules/menu.scss | 6 +- assets/stylesheets/template/template.scss | 3 +- .../web_resource/_web_res_widget9.html.erb | 2 +- 5 files changed, 103 insertions(+), 77 deletions(-) diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 843abc8..ad31a9b 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -269,80 +269,103 @@ $(function(){ } }, - ClickMenuHandler: function() { - // 處理主選單切換（漢堡 icon） - $(document).on('click', '.navbar-toggle', function (e) { - e.preventDefault(); + ClickMenuHandler: function() { + // 處理主選單切換（漢堡 icon） + $(document).on('click', '.navbar-toggle', function (e) { + e.preventDefault(); - // 確保 .navbar-toggle 放到 .modules-menu 後面 - $('.mobile-menu').each(function () { - var $menu = $(this); - if ($menu.find('.modules-menu').length && !$menu.find('.modules-menu + .navbar-toggle').length) { - $menu.find('.modules-menu').after($menu.find('.navbar-toggle')); + // 確保 .navbar-toggle 放到 .modules-menu 後面 + $('.mobile-menu').each(function () { + var $menu = $(this); + if ($menu.find('.modules-menu').length && !$menu.find('.modules-menu + .navbar-toggle').length) { + $menu.find('.modules-menu').after($menu.find('.navbar-toggle')); + } + }); + + $('.mobile-menu').toggleClass('active'); + $('body').toggleClass('noscroll'); + + // ★ 修正：依據 active 狀態決定 collapsed 的加/移除 + if ($('.mobile-menu').hasClass('active')) { + $('.mobile-menu .navbar-toggle').removeClass('collapsed'); // 打開 → 叉叉 + } else { + $('.mobile-menu .navbar-toggle').addClass('collapsed'); // 關閉 → 三條橫線 + } + + // 關閉所有下拉選單 + $('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500); + $('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened'); + + // 無障礙：聚焦第一個互動元素 + if ($('.mobile-menu').hasClass('active')) { + setTimeout(function () { + $('.modules-menu').find('input, button, select, textarea, a').first().focus(); + }, 100); } }); - $('.mobile-menu').toggleClass('active'); - $('body').toggleClass('noscroll'); - $('.mobile-menu .navbar-toggle').removeClass('collapsed'); - - // 關閉所有下拉選單 - $('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500); - $('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened'); - - // 無障礙：聚焦第一個互動元素 - if ($('.mobile-menu').hasClass('active')) { - setTimeout(function () { - $('.modules-menu').find('input, button, select, textarea, a').first().focus(); - }, 100); - } - }); - // ✅ Tab 鍵跳過 .navbar-toggle 時，觸發與點擊相同的收合邏輯 - $(document).on('focusout', '.mobile-menu', function(e) { + // ✅ Tab 鍵跳過 .mobile-menu 時，觸發收合邏輯 + $(document).on('focusout', '.mobile-menu', function(e) { setTimeout(function() { - var $newFocus = $(document.activeElement); - // 焦點已離開 .mobile-menu 且選單是展開狀態 - if ($('.mobile-menu').hasClass('active') && $newFocus.closest('.mobile-menu').length === 0) { - // ✅ 直接 trigger click，與按下 .navbar-toggle 執行完全相同的動作 - $('.navbar-toggle').first().trigger('click'); + var $newFocus = $(document.activeElement); + + // 焦點在 body 時代表滑鼠正在點擊中，不處理 + if ($newFocus.is('body')) return; + + if ($('.mobile-menu').hasClass('active') && $newFocus.closest('.mobile-menu').length === 0) { + + var $btn = $('.navbar-toggle').first(); + + if ($btn.attr('data-bs-toggle')) { + var target = $btn.attr('data-bs-target'); + var bsCollapse = window.bootstrap && bootstrap.Collapse.getInstance($(target)[0]); + if (bsCollapse) bsCollapse.hide(); + $('.mobile-menu').removeClass('active'); + $('body').removeClass('noscroll'); + $('.mobile-menu .navbar-toggle').addClass('collapsed'); + $('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500); + $('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened'); + } else { + $btn.trigger('click'); } + } }, 50); - }); + }); - $('.mobile-menu1 > .menu-drop').click(function(){ - var $that = $(this); - var opencheck1 = $that.hasClass('opened'); - if ( opencheck1 == 0 ) { - $('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(500); - $('.mobile-menu1 > .menu-drop').not($that).removeClass('opened'); - $('.mobile-menu2 > ul').slideUp(500); - $('.mobile-menu2 > .menu-drop').removeClass('opened'); - $that.siblings('ul').slideDown(500); - $that.addClass('opened'); + $('.mobile-menu1 > .menu-drop').click(function(){ + var $that = $(this); + var opencheck1 = $that.hasClass('opened'); + if ( opencheck1 == 0 ) { + $('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(500); + $('.mobile-menu1 > .menu-drop').not($that).removeClass('opened'); + $('.mobile-menu2 > ul').slideUp(500); + $('.mobile-menu2 > .menu-drop').removeClass('opened'); + $that.siblings('ul').slideDown(500); + $that.addClass('opened'); - } else if (opencheck1 == 1) { - $that.siblings('ul').slideUp(500); - $('.mobile-menu2 > ul').slideUp(500); - $('.mobile-menu2 > .menu-drop').removeClass('opened'); - $that.removeClass('opened'); + } else if (opencheck1 == 1) { + $that.siblings('ul').slideUp(500); + $('.mobile-menu2 > ul').slideUp(500); + $('.mobile-menu2 > .menu-drop').removeClass('opened'); + $that.removeClass('opened'); - } - }) + } + }) - $('.mobile-menu2 > .menu-drop').click(function(){ - var $that = $(this); - var opencheck2 = $that.hasClass('opened'); - if ( opencheck2 == 0 ) { - $('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(500); - $('.mobile-menu2 > .menu-drop').not($that).removeClass('opened'); - $that.siblings('ul').slideDown(500); - $that.addClass('opened'); - } else if (opencheck2 == 1) { - $that.siblings('ul').slideUp(500); - $that.removeClass('opened'); - } - }) - } + $('.mobile-menu2 > .menu-drop').click(function(){ + var $that = $(this); + var opencheck2 = $that.hasClass('opened'); + if ( opencheck2 == 0 ) { + $('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(500); + $('.mobile-menu2 > .menu-drop').not($that).removeClass('opened'); + $that.siblings('ul').slideDown(500); + $that.addClass('opened'); + } else if (opencheck2 == 1) { + $that.siblings('ul').slideUp(500); + $that.removeClass('opened'); + } + }) + } }; // 把orbit物件加到window物件裡面並改名為ORBITFRONT來減少名稱衝突的機會 diff --git a/assets/stylesheets/template/base/_global.scss b/assets/stylesheets/template/base/_global.scss index 90c9be9..530d65b 100644 --- a/assets/stylesheets/template/base/_global.scss +++ b/assets/stylesheets/template/base/_global.scss @@ -26,16 +26,16 @@ } } } -label[for="open-orbit-login"] { - @media(max-width:768px){ - display: none!important; - } -} -[accesskey="U"],[accesskey="W"]{ - @media(max-width:768px){ - color: #666!important; - } -} +// label[for="open-orbit-login"] { +// @media(max-width:768px){ +// display: none!important; +// } +// } +// [accesskey="U"],[accesskey="W"]{ +// @media(max-width:768px){ +// color: #666!important; +// } +// } .orbit-bar-inner{ [accesskey="U"]{ height: 40px; diff --git a/assets/stylesheets/template/modules/menu.scss b/assets/stylesheets/template/modules/menu.scss index 66556d7..8f577eb 100644 --- a/assets/stylesheets/template/modules/menu.scss +++ b/assets/stylesheets/template/modules/menu.scss @@ -261,7 +261,7 @@ body { border-radius: 0.13em; top: 2em; @media(max-width: 769px){ - top: 1em; + top: 0; font-size: 1em; } } @@ -288,10 +288,12 @@ body { & > a { display: block; - padding: 1em; font-family: $main-font; font-size: 1em; color: #fff; + @media(max-width:768px){ + padding: 0.5em; + } &:after{ content:''; position:absolute; diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss index c499759..09f8d35 100644 --- a/assets/stylesheets/template/template.scss +++ b/assets/stylesheets/template/template.scss @@ -845,7 +845,8 @@ a.ui-state-default{ position: absolute; right: 5em; color: #fff; - margin-top: 1em; + margin-top: 0; + top: 1em; } } .search-box{ diff --git a/modules/web_resource/_web_res_widget9.html.erb b/modules/web_resource/_web_res_widget9.html.erb index 54e493f..82f1aa7 100644 --- a/modules/web_resource/_web_res_widget9.html.erb +++ b/modules/web_resource/_web_res_widget9.html.erb @@ -9,7 +9,7 @@
{{img_description}}
- {{title}} + {{title}} {{status}}