From deed5acf959c189943b7b775587cb14f21b552aa Mon Sep 17 00:00:00 2001 From: bohung Date: Thu, 27 Oct 2022 19:58:54 +0800 Subject: [PATCH] Fix logo size bug. --- assets/javascripts/app.js | 99 ++++--------------- .../stylesheets/template/layout/header.scss | 30 +++--- 2 files changed, 31 insertions(+), 98 deletions(-) diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index c53698c..8a8a2d4 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -14,6 +14,21 @@ } } // 初始函數: 把所有的程式碼都包在init裡面,方便在之後的jQuery ready 函數裡一次呼叫 + function adjust_logo_font_size(){ + $('.navbar-header').each(function(i, v){ + var $v = $(v); + var max_width = $v.width(); + var logo_container = $v.find('a'); + var logo_width = logo_container.width(); + var org_font_size = logo_container.data('font-size'); + if(!org_font_size){ + org_font_size = 1.2; + } + var new_font_size = Math.floor(max_width / logo_width * org_font_size * 100) / 100; + logo_container.css('font-size', new_font_size + 'em'); + logo_container.data('font-size', new_font_size); + }) + } function init() { // 快取一些常用的變數 var doc = document; @@ -426,9 +441,10 @@ $('.outdropdowns').after($('.header-nav')); $('.navbar-header').before($('.modules-menu')); } - + adjust_logo_font_size(); // 自適應網頁使用,當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數 $(window).resize(function() { + adjust_logo_font_size(); if ($(window).width() < 769) { if (resizeTimer) clearTimeout(resizeTimer); $('.outdropdowns').before($('.header-nav')); @@ -456,87 +472,6 @@ // }else{ // $('.header-buttom').appendTo($('.dropdowns')); // } - function forFreeGo() { - // 幫有連結目的之所有a標籤加上title - for(var i=0;i<$('a').length;i++){ - if($('a').eq(i).attr("href") != "" || $('a').eq(i).attr("href") != undefined ){ - var titlestr=""; - if($('a').eq(i).attr('target')=='_self') - titlestr += '在本視窗開啟 '; - else if($('a').eq(i).attr('target') == '_blank') - titlestr += '在新視窗開啟 '; - if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title')==undefined && $('a').eq(i).html().search('span').length==1) - titlestr += $('a').eq(i).find('>span').html().trim(); - else if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title') == undefined){ - try{ - if($('a').eq(i).html().trim().split('>').length==2) - titlestr += $('a').eq(i).html().trim().split('>')[1].trim(); - else if($('a').eq(i).html().trim().split('>').length==3) - titlestr += $('a').eq(i).html().trim().split('>')[2].trim(); - }catch(e){}; - } - else - titlestr += $('a').eq(i).attr('title'); - if(titlestr.search('=0;i--) - if($('dd a.i-archive-files-item').eq(i).html().trim()=="") - $('dd a.i-archive-files-item').eq(i).parent('dd').remove(); - // 刪除具有空連結欄位的橫列 - for(var i = 0;i < $('*[data-list] tr td a').length ; i++) - if($('*[data-list] tr td a').eq(i).html().trim()=="") - $('*[data-list] tr td a').eq(i).parent('td').parent('tr').remove(); - // tab按鍵選到menu,會顯示下層的menu(為了符合無障礙) - $('.nav-level-0>li>a').focus(function(e) { - e.stopPropagation(); - $(this).parent().focus(); - if ($(this).parent().find('.nav-level-1').hasClass('show')) { - } else { - $('.nav-level-1').removeClass('show'); - $(this).parent().find('.nav-level-1').addClass('show'); - } - }); - $('.nav-level-1>li>a').focus(function(e) { - e.stopPropagation(); - if ($(this).parent().find('.nav-level-2').hasClass('show')) { - }else{ - $('.nav-level-2').removeClass('show'); - $(this).parent().find('.nav-level-2').addClass('show'); - } - }); - $('show').parent('li').focus(); - } - forFreeGo(); - //背景widget設定 if ( location.href.search('editmode=on') != -1 ) { $('.background').css('z-index','0'); diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss index 9c15b67..94c354e 100644 --- a/assets/stylesheets/template/layout/header.scss +++ b/assets/stylesheets/template/layout/header.scss @@ -14,7 +14,8 @@ } } .site-logo{ - height: 40px; + max-height: 10em; + height: 3em; } .dropdowns{ z-index: 1; @@ -246,14 +247,15 @@ display: flex; } .navbar-brand { + display: flex; + align-items: center; height: auto; margin: 0; padding: 0; line-height: 2.125em; color: $theme-color-main; - font-size: 0.6em; + font-size: 1.2em; font-family: $main-font; - } } } @@ -360,15 +362,16 @@ } - .navbar-header{ - @media screen and (min-width:769px) { - width: 35%; - justify-content: center; - } - @media (min-width: 1900px){ - height: 90px; - } + .navbar-header{ + @media screen and (min-width:769px) { + width: 35%; + justify-content: center; + align-items: center; } + @media (min-width: 1900px){ + height: 90px; + } + } @media screen and (max-width:768px) { .navbar-header{ margin-bottom: 1em; @@ -399,11 +402,6 @@ transition-duration: opacity 0.3s cubic-bezier(0.48, 0.01, 0.5, 0.99),visibility 0.1s linear; } } - .navbar-header .navbar-brand{ - @media(max-width: 769px){ - display: block!important; - } - } .navbar-toggle{ position: absolute; right: 0;