ガントチャートライブラリを使用したタスク管理画面の製作③

とりあえずな感じではありますが、タスクが管理できそうな感じになってきたので最新化してみました。

タスク管理システム(仮)
http://task.imo-tikuwa.com/login/

更新内容

  • ログイン機能を追加
  • bootstrapの導入
  • タスクの新規登録はコンテキストメニューからできるように修正
  • プロジェクトの検索/登録/更新/削除機能を追加

ログイン機能を追加

タスク一覧などを閲覧するのにログイン認証を必要とするようにしました。ログイン画面に初期表示されている値でログインボタンを押していただければログイン後の画面に遷移できます。

bootstrapの導入

bootstrapは「bootstrap 管理画面」と検索したときによさげだったSB Admin2というテンプレートを使用しています。ヘッダーとサイドバーは固定して使っています。

今回bootstrapを導入するにあたって、ガントチャートを表示するページで若干表示崩れが発生しました。box-sizing:border-box;というCSSの設定がbootstrap.cssで行われていたのが原因でした。これを以下のように修正しました。

/* gantt_layout.css */
/* bootstrapのbox-sizingの設定を無効化する */
*,
*:before,
*:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
/* ヘッダーのナビゲーションはbox-sizingの設定をbootstrapの初期設定に合わせる*/
nav.navbar *,.row *,
nav.navbar *:before, .row *:before,
nav.navbar *:after, .row *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

上記CSSはガントチャートを使用するページでのみ読み込んでいます。全ての要素のbox-sizingをcontent-boxとするけどnav.navbar *,.row *に一致する要素はborder-boxとするみたいな意味だと思います。content-boxとborder-boxについてはよくわかっていません。

タスクの新規登録はコンテキストメニューからできるように修正

親タスク、子タスクの関係を無視した実装をしているのに各行に新規追加ボタンが表示されているのが微妙だったのでコンテキストメニューからのみできるように修正しました。

プロジェクトの検索/登録/更新/削除機能を追加

1ページ辺りの表示は10件、同じ名前のプロジェクトは作れないようにしてあります。
何かしらバグがありそうなので見つけ次第修正しようと思います。

今後の課題

  • 入力欄、表示欄のレイアウトのbootstrap化
  • コンテキストメニューの機能追加
  • タスクのCSVインポート/エクスポート
  • タスクの画像出力、pdf出力
  • アカウントごとに閲覧可能な機能を設定する機能

などなど

スポンサーリンク
GoogleAdsense



GoogleAdsense



シェアする