レスポンシブWebデザイン導入（Parllet の場合 残高明細（番外編）） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4
の誤りに 1/9 に気づいて訂正、等 ^^; ）
sakashushu です。
Parllet（個人で作成・公開しているアルファ版のWeb家計簿） のレスポンシブWebデザイン導入シリーズですが、昨年の11月25日に以下のような想いを持って始めたのでした。
私のレスポンシブWebデザインに関する知識ですが、ちょっと前になりますこのエントリ
そして、そこで書いたように、Parllet（パレット）
でも、毎日 Parllet（パレット）
改良したい点や追加したい機能は満載で、いつも時間が足りない感覚で進めてはいるんですが、ずっとスマホが気になっている状態で進めるのは効率が悪いのかもしれないと思い始め、他のことは一旦脇に置いといてレスポンシブに手を付け始めることにしました。
via: レスポンシブWebデザイン導入計画（Parllet の場合 その１）
スポンサードリンク
正直ここまで長引くとは流石の私も予想してませんでしたが、今後の進捗を考える上で良い教訓になりました。
そんな長かったレスポンシブ化もいよいよ最終調整です。
公開しているParllet（パレット） に反映させる前段階として、スマホでの動作確認を行ってまして。
今回はその中で発覚した現象への対応です。
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
スマホ：Android 4.1.1（freebit mobile PandA）
Github公開リポジトリ のCommitバージョン（スタート時点）：こちら
■ 現状
愛機の Android 4.1.1（freebit mobile PandA）で、残高明細（口座系）を横にして見た時の状態です。
何がおかしいかと言いますと、ヘッダーとフッターの間にある肝心な表の部分が見えないということです・・・orz
これは単純に想定していませんでした。
フッターの中にグラフも入れており、表を縦スクロールしてもいつでも見れるのは良いだろうという判断でした。
しかしこうなってくると、絞り込み条件も含むヘッダーの固定はともかく、グラフの固定は諦めるしかないですね。
■ 体当たり開始
Parllet/app/views/DetailList/dl_remainderBank.html 内の編集（太字の部分）
<div id="dlMain">
<div id="dlMainInner">
<div id="dl_tblFrame">
<div id="dlRm_tblContent" >
<ul class="dl_tbl">
（中略）
</ul>
<div id="dlRmChartFrame">
<div id="dlRmChart"></div>
</div>
</div> <!-- dlRm_tblContent -->
</div> <!-- dl_tblFrame -->
</div> <!-- dlMainInner -->
</div> <!-- dlMain -->
<div id="dlFooter">
<div id="dlFooterInner">
<div id="dl_tblFrameFt">
//<div id="dlRmChartFrame">
//<div id="dlRmChart"></div>
//</div>
（中略）
</div> <!-- dl_tblFrameFt -->
<div id="configListPagination">
#{DetailList.dl_remainder_bank.pagination /}
</div>
</div> <!-- dlFooterInner -->
</div> <!-- dlFooter -->
#dlRmChartFrame 配下の記述位置を移動させてグラフは表の最下部に含めるようにしたので、表が見えるようになりました。
下の方にスクロールしていって、
グラフがくっ付いて来ることも確認できました。
はい、今回の対応は以上です。
お疲れ様でした！
いつも最後まで読んでいただいてありがとうございますm(_ _)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0