パチンコ収支表の更新とBootstrap
さてはて、最後の更新から暫くたってしまったパチンコ収支表。
一ヶ月前のソースを見ると、頭を抱えたくなる汚ソース|||orz|||
ということで、リファクタリング
リファクタした後Rspecを書こうとして、、、やはり力尽きたorz
次こそはRspecを書くべ
しかし、収支表を作ったのに、行く頻度が減ってしまい、、、
現状は、あまり役には立っていないという(汗
さて、そろそろ本題、デザインが苦手なので基本的にはBootstrapを使用し、
レスポンシブルなWEBページの作成をするようにしていました。
が、、、しかし!
「navbar」を設定し、bodyのstyle='padding-top:70px;'なんてベタに書いていたがゆえに、
サイズによってはnavが2段になって表示がグシャる|||orz|||
ということで、少しだけ対応する方法を以下に記述する。
編集前
<body style='padding-top:70px;'> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/">パチンコ収支表</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <% if user_signed_in? %> <li> <%= link_to '遊戯店情報登録', new_stores_path %> </li> <li> <%= link_to '遊戯店情報更新', stores_path %> </li> <li> <%= link_to '遊戯結果登録', new_balance_sheets_path %> </li> <li></li> <% end %> </ul> #・・・(省略) <% end %> </div> </div> </nav>
編集後
<body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/">パチンコ収支表</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <% if user_signed_in? %> <li> <%= link_to '遊戯店情報登録', new_stores_path %> </li> <li> <%= link_to '遊戯店情報更新', stores_path %> </li> <li> <%= link_to '遊戯結果登録', new_balance_sheets_path %> </li> <li></li> <% end %> </ul> #・・・(省略) <% end %> </div> </div> </nav>
@media (max-width: 225px) { body { padding-top: 120px; } } @media (min-width: 225px) and (max-width: 767px) { body { padding-top: 70px; } } @media (min-width: 768px) and (max-width: 991px) { body { padding-top: 120px; } } @media (min-width: 992px) { body { padding-top: 70px; } }
上記例では「min-width」、「max-width」は以下の画像のように2段になる所のサイズをmax-widthに指定するとよいかと思います。
その場合、上記のようにしておくと、ブラウザのwidthによってbodyのpaddingを切り替えてくれます。
二段になった場合
スマホ想定のページの場合
通常のページの場合
と、それぞれのページでbodyのpadding-topが自動的に切り替わる。
もう少しスマートな方法で記述したいなぁ、、、と思ったけれど、とりあえずはこれで回避!
さてはて、今後のTODOをば、、、
・過去のパチンコ収支の詳細確認(現状月単位でまとめているため)
・UI、UX関係の勉強使いやすいサイトに、、、
・グラフを用いた収支や比率の算出(JS勉強のため無理やりいれるぜ!)
・エラー文言の出力方法を再検討(エラー出力がわかりにくいので、、、デザイン調整)
・携帯対応(優先度低、、、)