diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 6312ecb..11e3fa0 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -3160,10 +3160,121 @@ $(document).ready(function () { setTimeout(removeHiddenContentLinks, 500); }); $(document).ready(function () { - $('#table1').on('draw.dt', function () { setTimeout(function () { - $('#table1_wrapper .dtr-control').removeAttr('tabindex'); + $('.dtr-control').removeAttr('tabindex'); }, 500); +}); +$(function() { + $('h3.page-module-title').each(function() { + var $h3 = $(this); + var $h2 = $('

'); + + // 複製所有屬性 + $.each(this.attributes, function() { + $h2.attr(this.name, this.value); + }); + + // 複製內容 + $h2.html($h3.html()); + + // 替換 + $h3.replaceWith($h2); + }); +}); +$(function() { + var $wrapper = $('.lang-switch-wrapper'); + var $trigger = $wrapper.find('.lang-switch'); + var $menu = $wrapper.find('.google-translate-flags'); + var $items = $menu.find('.lang-item'); + + // 設定 trigger 無障礙屬性 + $trigger.attr({ + 'aria-haspopup': 'true', + 'aria-expanded': 'false' + }); + + // 讓 .lang-item 可被 Tab 游走 + $items.each(function() { + var $item = $(this); + // 有 onclick 的 lang-item 沒有 ，補上 tabindex 和 role + if ($item.find('a').length === 0) { + $item.attr({ + 'tabindex': '0', + 'role' : 'button' + }); + } + }); + + function openMenu() { + $wrapper.addClass('active'); + $trigger.attr('aria-expanded', 'true'); + } + + function closeMenu() { + $wrapper.removeClass('active'); + $trigger.attr('aria-expanded', 'false'); + } + + // 點擊 trigger 切換 + $trigger.on('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + $wrapper.hasClass('active') ? closeMenu() : openMenu(); + }); + + // Enter / Space 開關選單 + $trigger.on('keydown', function(e) { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + $wrapper.hasClass('active') ? closeMenu() : openMenu(); + } + // Escape 關閉 + if (e.key === 'Escape') { + closeMenu(); + $trigger.focus(); + } + }); + + // 選單內 Enter / Space 觸發 onclick + $items.on('keydown', function(e) { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + $(this).trigger('click'); + } + // Escape 關閉並還原焦點 + if (e.key === 'Escape') { + closeMenu(); + $trigger.focus(); + } + // 上下鍵在選單內移動焦點 + if (e.key === 'ArrowDown') { + e.preventDefault(); + var $focusable = $items.filter(':visible'); + var idx = $focusable.index($(this)); + $focusable.eq((idx + 1) % $focusable.length).focus(); + } + if (e.key === 'ArrowUp') { + e.preventDefault(); + var $focusable = $items.filter(':visible'); + var idx = $focusable.index($(this)); + $focusable.eq((idx - 1 + $focusable.length) % $focusable.length).focus(); + } + }); + + // 焦點離開整個 wrapper 時關閉 + $wrapper.on('focusout', function(e) { + setTimeout(function() { + if (!$wrapper[0].contains(document.activeElement)) { + closeMenu(); + } + }, 100); + }); + + // 點擊頁面其他地方關閉 + $(document).on('click', function(e) { + if (!$wrapper[0].contains(e.target)) { + closeMenu(); + } }); }); // 執行 member等高計算，目前改用flexbox故mark掉 by ika 20160105 diff --git a/assets/stylesheets/template/base/_variables.scss b/assets/stylesheets/template/base/_variables.scss index 30e2189..92f3b65 100644 --- a/assets/stylesheets/template/base/_variables.scss +++ b/assets/stylesheets/template/base/_variables.scss @@ -36,42 +36,45 @@ $sub-font: "Noto Sans TC", sans-serif; $font-15: 0.9375rem; $font-13: 0.8125rem; -$font-h1: 2rem; -$font-h2: 1.8rem; +// $font-h1: 2rem; +// $font-h2: 1.8rem; +// $font-h3: 1.3rem; +// $font-h4: 1rem; +// $font-h5: 0.9rem; +// $font-h6: 0.85rem; +$font-h1: 1.8rem; +$font-h2:1.3rem; $font-h3: 1.3rem; -$font-h4: 1rem; -$font-h5: 0.9rem; -$font-h6: 0.85rem; +$font-h4: 0.9rem; +$font-h5: 0.85rem; +$font-h6: 0.75rem; h1{ - font-size:2rem; - @media(max-width:$screen-xs){ - font-size:2rem; - } -} -h2{ font-size: 1.8rem; @media(max-width:$screen-xs){ font-size:1.8rem; } } -h3{ +h2{ font-size:1.3rem; @media(max-width:$screen-xs){ font-size:1.3rem; } } -h4{ +h3{ font-size: 1rem; @media(max-width:$screen-xs){ font-size:1rem; } } -h5{ +h4{ font-size: 0.9rem; } -h6{ +h5{ font-size: 0.85rem; } +h6{ + font-size: 0.75rem; +} // $font-h1: 1.8rem; // $font-h2: 1.5rem; // $font-h3: 1.2rem; diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss index 43a961a..c499759 100644 --- a/assets/stylesheets/template/template.scss +++ b/assets/stylesheets/template/template.scss @@ -885,12 +885,8 @@ a.ui-state-default{ } } .btn-search:focus{ - border-color: rgba(82, 168, 236, 0.8); - outline: 0; - outline: thin dotted \9; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + border: 2px solid #52a8ec; + outline: auto; border-radius: 1em; } /* 當 input 被 focus 或 btn 被點擊時，讓按鈕跳到上層並可點擊 */ diff --git a/modules/announcement/annc_index1.html.erb b/modules/announcement/annc_index1.html.erb index c245d9d..5a1af24 100644 --- a/modules/announcement/annc_index1.html.erb +++ b/modules/announcement/annc_index1.html.erb @@ -1,5 +1,5 @@
-

{{page-title}}

+

{{page-title}}