レスポンシブWebデザイン導入(Parllet の場合 明細表(残高明細)-5) [公開アプリ]
※ 注意! このエントリは ブログラミング(ブログを書きながらプログラミング)です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。(過去の事例:2014年 1/4 の誤りに 1/9 に気づいて訂正、等 ^^; )
sakashushu です。
3/11 からParllet(個人で作成・公開しているアルファ版のWeb家計簿) のレスポンシブWebデザイン導入シリーズは明細表篇の中の残高明細篇のブログラミング(ブログを書きながらプログラミング)に入っています。
スポンサードリンク
■ ざっくり環境
OS:Windows 7 Home Premium
Play Flamework:1.2.4
ブラウザ:IE 11.0
スマホ:Android 4.1.1(freebit mobile PandA)
Github公開リポジトリ のCommitバージョン(スタート時点):こちら
■ 現状
2/7 に現時点のParllet(パレット)(GithubのこのCommitバージョン )の残高明細(口座系)を元に、スナップショットを兼ねてサンプル残高明細(口座系)1 を作りました。
ここがスタート地点です。
※ ただ、収支明細篇(2/8 ~ 2/25)でいじった部分の影響も受けているため、現時点で若干レスポンシブ化されている部分もあります。
いつものように体当たりで学びながら進めていきます。
(1/11 に提示した新手法の方で実施するので、以前のようにサンプルページを元にして編集はしません。あくまで元になるのはGithubのこのCommitバージョン です。)
■ 体当たり開始
沿っていくのは 2/6の案 ですが 2/15 に決めた通り、表の部分だけは横スクロールする方向性 です。
前回 は愛機の Android 4.1.1(freebit mobile PandA)で横スクロールの動きの確認したので、今回は縦スクロールの確認です。
一番下までスクロールすると、以下の状態。
表の部分とグラフの間に隙間ができました。
これも収支明細篇のこの辺(2/22)で同様の対応をしましたですね。
元々は収支明細と残高明細で if 文で分岐していましたが、同じロジックで行けそうです。
Parllet/app/views/DetailList/dl_header.html 内での編集(太字の部分)
/* dlFooterのCSS設定切替関数 */
function setCssFooter() {
var dlFtr = jQuery('#dlFooter'),
dlMn = jQuery('#dlMain'),
ctnHt = jQuery('#container').height(),
winInHt = jQuery(window).innerHeight(),
winSrTp = jQuery(window).scrollTop(),
ftrHt = jQuery('#footer').height(),
winSrBtm = ctnHt - winSrTp - winInHt;
if (winInHt < ctnHt) {
dlFtr.css('position', 'fixed').css('width', '95%');
dlMn.css('padding-bottom', jQuery('#dlFooterInner').height()+'px');
dlFtr.css('bottom', '0');
if (winSrBtm < ftrHt) {
dlFtr.css('bottom', ftrHt - winSrBtm + 'px');
}
} else {
dlFtr.css('position', '').css('width', '100%');
dlFtr.css('bottom', '');
dlMn.css('padding-bottom', '');
}
}
オッケーです。隙間は消えました。
以上、今回はここまでです。
次回に続きます!
3/16 追記
続きを書きました。
いつも最後まで読んでいただいてありがとうございますm(_ _)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ!
コメント 0