まえがき
ここで記載しているものとは別の Rails 4 アプリを二つ抱えてしまったので、こちらはお休みしていた。せっかくなので、そちらでは Rails 4 の新しい機能をいろいろと試してみたので、こちらにフィードバックしています。ネタは 2 週間分くらい抱えているのですが、だいぶ修正が必要になっています。直しながら公開していきます。
本来のネタ(デザインの雛形)
年末年始は頭を使いたくなかったので、ページのデザインを設定した。まず、flatly で始まる haml, js, css は application に変更した。
$ mv app/assets/stylesheets/{flatly,application}.css $ mv app/assets/javascripts/{flatly,application}.js $ mv app/views/layouts/{flatly,application}.html.haml
修正した app/views/layouts/application.html.haml は以下のように記述した。
!!! 5 %html(lang="ja") %head %meta(charset="utf-8") %meta(http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1") %meta(name="viewport" content="width=device-width, initial-scale=1.0") %title= content_for?(:title) ? yield(:title) : "webcit3" = csrf_meta_tags / Le HTML5 shim, for IE6-8 support of HTML elements /[if lt IE 9] = javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js" = stylesheet_link_tag "application", :media => "all", debug: true = yield(:page_stylesheet) if content_for?(:page_stylesheet) %body = render partial: '/shared/top_link_bar.html.haml', locals: { notice: notice, alert: alert } -if notice .alert.alert-dismissable.alert-success %button.close{type:'button', 'data-dismiss' => 'alert'} × %p= notice -if alert .alert.alert-dismissable.alert-warning %button.close{type:'button', 'data-dismiss' => 'alert'} × %p= alert .container-fluid = yield / Javascripts \================================================== / Placed at the end of the document so the pages load faster = javascript_include_tag "application", debug: true = yield(:page_javascript) if content_for?(:page_javascript)
修正点は以下の通り。
- stylesheet, javascript に debug:true を追加
- shared/top_link_bar.haml.haml でヘッダを表示
app/views/shared/_top_link_bar.html.haml は以下のように記述した。デザインなのでいろいろなところを直書きしており、リンクも disabled してある。
.nav.navbar-default.navbar-fixed-top .navbar-header %button{type: 'button', class: 'navbar-toggle', 'data-toggle' => 'collapse', 'data-target' => '.navbar-responsive-collapse' } %span.icon-bar %span.icon-bar %span.icon-bar = link_to lh("校務支援システムv3"), root_path, class: 'navbar-brand' .navbar-collapse.collapse.navbar-responsive-collapse -path = controller.admin_signed_in? ? destroy_admin_session_path : controller.user_signed_in? ? destroy_user_session_path : nil -if path %ul.nav.navbar-nav %li.dropdown %a.dropdown-toggle{'data-toggle' => 'dropdown', href: '#'} 品川 %span.caret %ul.dropdown-menu %li.disabled= link_to '●[品川]', '#' %li.disabled= link_to '[荒川]', '#' %li.dropdown %a.dropdown-toggle{'data-toggle' => 'dropdown', href: '#'} 前期中間 %span.caret %ul.dropdown-menu %li.disabled= link_to '●[前期中間]', '#' %li.disabled= link_to '[前期]', '#' %li.disabled= link_to '[後期中間]', '#' %li.disabled= link_to '[後期]', '#' %li.disabled= link_to '[学年末]', '#' %li.dropdown %a.dropdown-toggle{'data-toggle' => 'dropdown', href: '#'} メニュー %span.caret %ul.dropdown-menu %li.disabled= link_to '[クラス]', '#' %li.disabled= link_to '[教職員]', '#' %li.disabled= link_to '[学生]', '#' %li.divider %li.dropdown-header 教務 %li.disabled= link_to '[成績処理]', '#' %li.disabled= link_to '[時間割]', '#' %li.divider %li.dropdown-header 室関係 %li.disabled= link_to '[入試・広報]', '#' %li.disabled= link_to '[進路]', '#' %li.divider %li.dropdown-header 共通 %li.disabled= link_to '[会計]', '#' %li.disabled= link_to '[施設]', '#' %li.disabled= link_to '[統計]', '#' %li.disabled= link_to '[設定]', '#' -if path %li= link_to '[ログアウト]', path, method: :delete, data: { confirm: 'ログアウトしてよろしいですか?' } -if path .nav %ul.breadcrumb %li 平成26年度・ユーザ名 %li= link_to lh('Home'), root_path -if @navis -@navis.each do |navi| %li= navi
.navbar-fixed-top しているため、body の padding を修正する必要がある。navbar の高さが可変になる可能性があるため、高さを自動で設定する Javascript を app/assets/javascripts/webcitc.js に記述した。
$(window).on('load resize', function() {
$('body').css({"padding-top": $(".navbar-default").height() + 0 + "px"});
});これを app/assets/javascripts/application.js で読み込むように設定した。
// Flatly // Bootswatch //= require jquery //= require jquery_ujs //= require flatly/loader //= require flatly/bootswatch //= require webcitc
また、config/initializers/assets.rb に webcitc を追加した。代わりに flatly 関係は消した。
Rails.application.config.assets.precompile += %w( webcitc.js )
これからもレイアウトを修正していくが、だいたいのイメージを紹介しておく。
キャンパスの切替はトップリンクバーのドロップダウンメニューで行う。切り替えが必要ないページは disable にする予定。
期間の変更も同様。
旧システムはメニューが入りきらないことがあったため、こちらもドロップダウンメニューとした。
nav-bar は上に張り付いているのでスクロールしても残る。
パンくずリストはこんなふうになる。ここは後でもう少しちゃんとしたシステムを作る。
なお、画面幅が狭いときには、ナビゲーション自体がボタンになる。
ボタンをクリックすると全体がプルダウンメニューとなる。
プルダウンメニューの中のプルダウンメニューは内部で展開される。
