Project

General

Profile

Enhancement(機能追加・改善) #1472

Global navigation becomes 2 lines when wide-font is used (幅広フォントの場合にグローバルナビゲーションが2行になる)

Added by Minoru Takai over 9 years ago. Updated about 8 years ago.

Status:
Fixed(完了)
Priority:
Normal(通常)
Assignee:
Target version:
Start date:
2010-08-03
Due date:
% Done:

100%


Description

Overview

Mac OS などでは標準的な幅広のフォントが使われていると、グローバルナビゲーションが折り返されてしまう。
ナビゲーションをカスタマイズしていないプリセットの状態であっても折り返されているのは見栄えが悪いので改善したい。
折り返される実態は添付画像を参照してください。

Way to fix

ナビ項目の文言を変更して文字列を減らすことで対応することも可能ですが、対応前のマイナーバージョンと異なる文言にしてしまうことが気に掛かるので、ナビ項目の文字列を括る要素に指定されている横の余白を少なくすることで対応するのが好ましいと考えます。

Version

この問題が顕著化したのは、グローバルナビゲーションに「ランキング」という項目が追加された時点であると考えられます。

手元で確認した限りでは 3.2.x ではランキングは含まれておらず、 3.4.x から含まれているようです。
よって、 3.4.x 以上のバージョンが本件の対象になると考えられます。

  • 2010/09/29修正

バージョンについて、以前手元で確認した際に 3.4 に含まれると書きましたが、手元のソースをカスタマイズしており錯覚していました。

http://trac.openpne.jp/browser/OpenPNE3/bandled-plugins-list

バンドルプラグインリストに opRankingPlugin が含まれるのは以下の通りでした。(以下のリストは、上記バンドルプラグインリストのリポジトリをチェックアウトし、"opRankingPlugin" という文字列を含むファイル名を列挙した結果です)

3.5.3-dev.yml
3.5.3.yml
3.6beta1-dev.yml
3.6beta1.yml
3.6beta2-dev.yml
3.6beta2.yml
3.6beta3-dev.yml
3.6beta3.yml
3.6beta4-dev.yml
3.6beta4.yml
3.6beta5-dev.yml
3.6beta5.yml
3.6beta6-dev.yml
3.7.0-dev.yml

よって、(3.5.3 は除いて)3.6.x 以上のバージョンが本件の対象になると考えられます。

globalNav_inMac.png View - Mac OS で確認した globalNav (ナビのボックスを灰色で着色しています) (52.4 KB) Minoru Takai, 2010-08-03 17:26


Related issues

Related to OpenPNE 3 - Backport(バックポート) #2262: Global navigation becomes 2 lines when wide-font is used (幅広フォントの場合にグローバルナビゲーションが2行になる) Fixed(完了) 2011-07-06

Associated revisions

Revision 7085a17b (diff)
Added by Minoru Takai over 8 years ago

(fixed #1472) changed padding 10px to 8px, for globalNav > ul > li > a

History

#1 Updated by Minoru Takai over 8 years ago

  • Status changed from New(新規) to Pending Review(レビュー待ち)
  • % Done changed from 0 to 50

更新履歴 7085a17be5084193a5304646aa55e441f3a3695f で適用されました。

#2 Updated by Minoru Takai over 8 years ago

  • Assignee set to Minoru Takai

この問題は、共通テンプレートのデザインを見直すことが本質的な解決となりますが、とりあえず現状のデザインにおいて OpenPNE-3.6 系以上でインストール後にグローバルナビが2段になってしまうことを防ぐ修正を施します。

#globalNav li a に対して与えられている padding の左右の値を 10px から 8px に変更します。 8px という値は Mac OS で表示を確認しながら1段に収まるようにし、必要以上に padding が狭まらないようにと考えた値であり、これ以上の根拠はありません。

#3 Updated by Minoru Takai over 8 years ago

  • Status changed from Pending Review(レビュー待ち) to Pending Testing(テスト待ち)
  • % Done changed from 50 to 70

修正方針に対するコミット内容に問題はないと判断し、テスト待ちにステータスを変更します。

#4 Updated by Minoru Takai over 8 years ago

この内容のテストについて

このチケットを作成した時点で問題となっていたことは次のものです。

  • OpenPNE 3.6 以上をインストールし、任意のメンバーでログインしたとき、ズームや文字サイズの拡大を行っていない場合でも Mac OS ではグローバルナビが2行になってしまう。
    • ブラウザは Safari, Firefox など(バージョンやブラウザの種類にかかわらず、Mac OS で一般的に使われるフォントであれば2行になる可能性が高いです。

なお、Windows OS であれば(一般的な)フォントの幅は Mac OS に比べて狭いので1行に収まっているようです。Windows でも Osaka フォントなどを適用すれば2行になります。

テストすべきは以下の2点です。

  • Mac OS で(ブラウザ側の設定でフォントサイズなどを特に変更しない状態で)マイページを表示した際に、(デフォルトのままの)グローバルナビが1行に収まる。
  • Windows OS など他の環境で、グローバルナビの項目間が異様に狭くなっていたり不自然な表示になっていない。

#5 Updated by Shingo Yamada over 8 years ago

  • 360対象 set to RC1

#6 Updated by Yuma Sakata over 8 years ago

  • 360対象 deleted (RC1)

#7 Updated by Yuma Sakata over 8 years ago

  • 360対象 set to RC1

#8 Updated by Yuma Sakata about 8 years ago

  • Status changed from Pending Testing(テスト待ち) to Fixed(完了)
  • % Done changed from 70 to 100

テストOKです。

Also available in: Atom PDF