diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index df085e8..7556ced 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -320,7 +320,18 @@ } }); - $('.mobile-menu1 > .menu-drop').click(function(){ + // ✅ Tab 鍵跳過 .navbar-toggle 時,觸發與點擊相同的收合邏輯 + $(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'); + } + }, 50); + }); + $('.mobile-menu1 > .menu-drop').click(function(){ var $that = $(this); var opencheck1 = $that.hasClass('opened'); if ( opencheck1 == 0 ) { @@ -863,7 +874,7 @@ var isLinkImage = $parentA.length > 0 && $parentA.text().replace(/\u00a0/g, '').trim() === ""; // --- 1. 處理「裝飾性圖片」標註 --- - if (currentAlt === "裝飾圖片" || currentTitle === "裝飾圖片") { + if (currentAlt === "announcement image" || currentAlt === "裝飾圖片" || currentTitle === "裝飾圖片") { $img.attr('alt', ''); $img.removeAttr('title'); return; @@ -1475,60 +1486,86 @@ setTimeout(fixEmptyHref, 500); }); //頁籤無障礙 - $(function() { - /** - * 頁籤導覽 (Tab Navigation) 無障礙補強 - * 1. 容器加入 role="tablist" - * 2. 項目加入 role="tab" - * 3. 動態切換 aria-selected="true/false" - * 4. 確保 Enter 鍵可以觸發切換 (針對 tabindex="0" 的優化) - */ - function fixTabAccessibility() { - var $tabNav = $('.tab_nav'); - var $tabs = $tabNav.find('.filter_tab'); + $(function () { + function fixTabAccessibility() { + var $tabNav = $('.tab_nav'); + var $tabs = $tabNav.find('li'); // ✅ 你的 HTML 是 li,不是 .filter_tab - // --- 1. 初始化結構語意 --- - $tabNav.attr('role', 'tablist'); + // --- 1. 初始化結構語意 --- + $tabNav.attr('role', 'tablist'); - $tabs.each(function() { - var $this = $(this); - var isActive = $this.hasClass('active'); + $tabs.each(function () { + var $this = $(this); + var isActive = $this.hasClass('active'); - // 加入頁籤角色與選取狀態 - $this.attr({ - 'role': 'tab', - 'aria-selected': isActive ? 'true' : 'false' - }); - - // 修正 Title:讓使用者知道這是切換頁籤 - var tabName = $this.text().trim(); - $this.attr('title', '切換至 ' + tabName); - }); + $this.attr({ + 'role': 'tab', + 'aria-selected': isActive ? 'true' : 'false', + 'tabindex': isActive ? '0' : '-1' // ✅ 只有 active 的可以被 Tab 聚焦 + }); - // --- 2. 監聽切換事件 (點擊或鍵盤) --- - // 假設原本已有切換邏輯,我們在此「補強」屬性的變更 - $tabs.on('click', function() { - var $clickedTab = $(this); + var tabName = $this.text().trim(); + $this.attr('title', '切換至 ' + tabName); + }); - // 先將所有頁籤設為未選取 - $tabs.attr('aria-selected', 'false'); + // --- 2. 點擊事件:更新 aria-selected 與 tabindex --- + $tabs.on('click', function () { + var $clickedTab = $(this); - // 將當前點擊的頁籤設為已選取 - $clickedTab.attr('aria-selected', 'true'); - }); + $tabs.attr('aria-selected', 'false').attr('tabindex', '-1'); + $clickedTab.attr('aria-selected', 'true').attr('tabindex', '0'); + }); - // --- 3. 鍵盤操作補強 (針對 tabindex="0" 的非按鈕元素) --- - $tabs.on('keydown', function(e) { - // 當按下 Enter (13) 或 Space (32) 時觸發點擊 - if (e.which === 13 || e.which === 32) { - e.preventDefault(); - $(this).trigger('click'); - } - }); - } + // --- 3. 鍵盤操作補強 --- + $tabs.on('keydown', function (e) { + var $current = $(this); + var currentIndex = $tabs.index($current); + var lastIndex = $tabs.length - 1; + var $target = null; - // 延遲執行確保頁籤元件已渲染 - setTimeout(fixTabAccessibility, 500); + switch (e.which) { + case 13: // Enter + case 32: // Space + e.preventDefault(); + $current.trigger('click'); + break; + + case 37: // ← 左方向鍵:移到前一個頁籤 + case 38: // ↑ 上方向鍵 + e.preventDefault(); + $target = currentIndex > 0 + ? $tabs.eq(currentIndex - 1) + : $tabs.eq(lastIndex); // 到底了就循環到最後一個 + break; + + case 39: // → 右方向鍵:移到下一個頁籤 + case 40: // ↓ 下方向鍵 + e.preventDefault(); + $target = currentIndex < lastIndex + ? $tabs.eq(currentIndex + 1) + : $tabs.eq(0); // 到底了就循環到第一個 + break; + + case 36: // Home:跳到第一個頁籤 + e.preventDefault(); + $target = $tabs.eq(0); + break; + + case 35: // End:跳到最後一個頁籤 + e.preventDefault(); + $target = $tabs.eq(lastIndex); + break; + } + + // 移動焦點並觸發點擊切換 + if ($target && $target.length) { + $tabs.attr('tabindex', '-1'); + $target.attr('tabindex', '0').focus().trigger('click'); + } + }); + } + + setTimeout(fixTabAccessibility, 500); }); } forFreeGo(); @@ -2381,6 +2418,32 @@ $(document).ready(function() { } } }); +}); +//#tdstylesp表格樣式 +$(function () { + $('#tdstylesp').each(function () { + var $table = $(this); + var headers = []; + + // 收集 thead 的標題文字 + $table.find('thead th').each(function () { + // 只取 .universal-th-text 的文字,沒有就取全部文字 + var $thText = $(this).find('.universal-th-text'); + var label = $thText.length > 0 + ? $thText.text().trim() + : $(this).text().trim(); + headers.push(label); + }); + + // 把標題塞進每個 tbody td 的 data-label + $table.find('tbody tr').each(function () { + $(this).find('td').each(function (i) { + if (headers[i]) { + $(this).attr('data-label', headers[i]); + } + }); + }); + }); }); // 執行 member等高計算,目前改用flexbox故mark掉 by ika 20160105 // $(window).load(function() { diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss index 2ef22c0..de08c00 100644 --- a/assets/stylesheets/template/layout/header.scss +++ b/assets/stylesheets/template/layout/header.scss @@ -199,6 +199,7 @@ } .navbar-header { z-index: 10; + position: relative; padding:0; margin: 0; @media (min-width: 769px) { diff --git a/assets/stylesheets/template/modules/archives.scss b/assets/stylesheets/template/modules/archives.scss index bfea779..cdf598b 100644 --- a/assets/stylesheets/template/modules/archives.scss +++ b/assets/stylesheets/template/modules/archives.scss @@ -157,9 +157,13 @@ .xlsx { background-color: rgba(187, 109, 127, 0.6) !important; } /* iOS Pink/Red */ .pdf { background-color: rgba(59, 131, 71, 0.7) !important; } /* 深一點的 Green */ .docx { background-color: rgba(132, 109, 187, 0.6) !important; } /* iOS Purple */ +.doc { background-color: rgba(18, 115, 235, 0.6)!important; } .pptx { background-color: rgba(109, 119, 187, 0.6) !important; } /* iOS Indigo */ .jpg { background-color: rgba(187, 109, 109, 0.6) !important; } /* iOS Red */ .zip { background-color: rgba(220, 185, 87, 0.6) !important; } /* iOS Yellow/Orange */ +.rar { background-color: rgba(230, 149, 0, 0.6) !important; } /* iOS Orange (與 zip 區隔,更偏橘) */ +.xls { background-color: rgba(109, 187, 115, 0.6) !important; } /* 沿用 iOS Green (試算表系列) */ +.odt { background-color: rgba(100, 100, 100, 0.6) !important; } /* iOS Gray (通用文件/系統灰色) */ // Archive index 1 .index-archive-1 { font-family: $main-font; diff --git a/assets/stylesheets/template/modules/menu.scss b/assets/stylesheets/template/modules/menu.scss index 7bc41aa..baefc52 100644 --- a/assets/stylesheets/template/modules/menu.scss +++ b/assets/stylesheets/template/modules/menu.scss @@ -183,7 +183,6 @@ .modules-menu { font-family: $sub-font; max-height: none; - z-index: 1020; li { padding: 1em; diff --git a/assets/stylesheets/template/modules/universal-table.scss b/assets/stylesheets/template/modules/universal-table.scss index 09aa505..6789b2c 100644 --- a/assets/stylesheets/template/modules/universal-table.scss +++ b/assets/stylesheets/template/modules/universal-table.scss @@ -1,6 +1,9 @@ @charset "utf-8"; @import "../initial"; +.universal-th-text{ + white-space: pre; +} .universal-table-index h3 { padding: 0; } diff --git a/assets/stylesheets/template/modules/web_resource.scss b/assets/stylesheets/template/modules/web_resource.scss index 9bde244..3c4ce3f 100644 --- a/assets/stylesheets/template/modules/web_resource.scss +++ b/assets/stylesheets/template/modules/web_resource.scss @@ -69,15 +69,22 @@ } &.widget1 { - height: -webkit-fill-available; + // height: -webkit-fill-available; margin-bottom: 1em; - background: #ffffff7d; + background:#f3f7f9; border-radius: 0; box-shadow: 3px 3px 6px 2px #00000017; backdrop-filter: saturate(180%) blur(20px); - padding: 0.5em; + padding:0; .list-unstyled{ - padding-left: 1.6em; + padding: 0.5em 0.5em 0.5em 2em; + } + .widget-title{ + background: #9dd3dd; + padding: 0.5em; + span{ + border-left: 5px solid #fff; + } } img{ // width: 32%; diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss index 9989da1..048f59d 100644 --- a/assets/stylesheets/template/template.scss +++ b/assets/stylesheets/template/template.scss @@ -531,6 +531,60 @@ ul.tab_nav,.nav_tabs_filter { } } } +#tdstylesp{ + @media (max-width: 480px) { + thead, + tbody, + tr, + th, + td { + display: block; + width: 100%; + } + + /* thead 隱藏,改用 data-label 顯示 */ + thead { + display: none; + } + + tbody tr { + border: 1px solid #ddd; + margin-bottom: 12px; + } + + tbody td { + position: relative; + padding-left: 45%!important; + text-align: left; + border-bottom: 1px solid #eee; + min-height: 72px; + display: flex; + align-items: center; + justify-content: center; + } + + /* 用 data-label 顯示對應標題 */ + tbody td::before { + content: attr(data-label); + position: absolute; + left: 8px; + width: 40%; + font-weight: bold; + color: #333; + white-space: normal; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + } + + /* 空白格不顯示 */ + tbody td:empty, + tbody td[data-label=""]::before { + display: none; + } + } +} // //取消內頁tdrwd可加在內頁編輯 // .internal-page table td{ // border: 1px solid #ddd!important; diff --git a/modules/announcement/_annc_widget15.html.erb b/modules/announcement/_annc_widget15.html.erb index 162ee50..2cb7a51 100644 --- a/modules/announcement/_annc_widget15.html.erb +++ b/modules/announcement/_annc_widget15.html.erb @@ -1,8 +1,8 @@