Issue 213 in geeklog-jp: テーマDenimのiPad&iPhone時のサイドメニューにアイコンを付けて欲しいです。 (geeklogjp-devel 1556) - geeklog-jp

Status: New
Owner: milk.****@gmail*****
Labels: Type-ChangeRequest Priority-Medium

New issue 213 by milk.****@gmail*****: テーマDenimのiPad&iPhone時のサイドメニ 
ューにアイコンを付けて欲しいです。
http://code.google.com/p/geeklog-jp/issues/detail?id=213

問題を再現するための操作手順:
1.テーマDenimでiPad&iPhoneでページを表示させる。
2.iPadでは、サイドメニュー(左右ブロックの見出し)をタップすれば内容が出てくる 
のですが、それがわからずログインするのに時間がかかりました。
3.iPhone時はiPadよりもわかりやすいのですが、やはりUI的にユーザーがパッと見て 
わかるようにしてもらえたら嬉しいです。

正常に動作する場合に、期待される出力(表示):
iPad & iPhoneで見出しの右端に▼を付けて欲しいです。

実際にはどのように出力(表示):
▼がないのでタップしたら内容が表示されるという事がわかりませんでした。

Geeklogのリリースまたはスナップショットのバージョン,
Subversionから取り出した場合は元のディレクトリと
リビジョン情報:geeklog-2.0.0b2-jp-extended-snapshot-20120720.tar.gz

アクセスしているブラウザとOS(オペレーティングシステ
ム)の
名称とバージョン:iOS 5.1.1 iPad Safari & iPod touch Safari

ラベルとテキストを使用して、できるだけ詳しく情報を
提供して下さい。

▼を画像にするとデバイスの幅が変化した時、対応出来ない場合があるので
CSS3を使用します。

iPad用は /layout/denim/css_ltr/style.cssの3667行目に

@media only screen and (max-width: 1024px) {
.block-title {
position: relative;
}
.block-title:before {
   border-color: #DDDDDD transparent transparent transparent ;
   border-style: solid;
   border-width: 5px 5px 0 5px;
   content: "";
   height: 0;
   top: 5px;
   right: 10%;
   position: absolute;
   width: 0;
}
}

を追記してください。

iPhone用には3685行目に
@media only screen and (max-width: 480px) {
.block-title {
position: relative;
}
.block-title:before {
   border-color: #ffffff transparent transparent transparent ;
   border-style: solid;
   border-width: 5px 5px 0 5px;
   content: "";
   height: 0;
   top: 10px;
   right: 10%;
   position: absolute;
   width: 0;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
と追記ください。

▼の付いたイメージ画像添付します。


Attachments:
	ipad_re.png  31.6 KB
	ipod_re.png  43.5 KB

geeklog-jp

[geeklogjp-devel 1556] Issue 213 in geeklog-jp: テーマDenimのiPad&iPhone時のサイドメニューにアイコンを付けて欲しいです。