今まではグラデーションや影を使ったり、それぞれの項目を丸くしてみたりしてましたが
画面内の項目が増えるにつれ、見づらくなりました。
そこで、iOS7やGoogleなどにも使われて注目されているフラットデザインを取り入れました。
フラットデザインはシンプルなデザインであり、グラデーションや影、丸いデザインなどを
使わないようにしたデザインです。
人にもハードにも優しいデザインです。その分、面白みにかけますが。
こんな感じです。
大分、雰囲気が変わっていますよね。
このデザインだと項目増えた場合に見やすいです。
では、修正内容の説明ですが、細かい色の変更等は省略します。
[scheduler.css]
.blk { ･･･①
border: 1px solid #D3D3D3;
background-color: #FFFFFF;
padding: 1px;
～
vertical-align: top;
word-wrap: break-word;
}
[解説]
フラットデザインに伴ってborder-radiusや、gradient、box-shadowの使用をやめました。
また、paddingの値を小さくし１マス内に文字をできるだけかけるようにしています。
vertical-alignにより全てのマスを上揃えにし、word-wrapによりマスから文字が出ない
ようにしています。
content.cssも同様の修正をしています。
jsも画面関係のメソッドを数箇所修正しています。
[scheduler.js]
//日付を画面表示形式にフォーマット
view.dateToDisplay = function(day){ ･･･①
var dayStr = "";
if( model.app.getColumn() <= "4" || day.getDate() === 1){
dayStr += (day.getMonth() + 1);
dayStr += "/";
}
dayStr += day.getDate();
dayStr += " " + view.dayList[day.getDay()];
return dayStr;
};
//日付項目を作成
view.createDay = function(dayNum){ ･･･②
if (model.app.getColumn() === "1") {
element.innerHTML = view.dateToDisplay(day) + " " + view.addTask(day) + view.addCount(day);
} else {
element.innerHTML = view.dateToDisplay(day) + "<br/>" + view.addTask(day) + view.addCount(day);
}
dayPos.appendChild(element);
};
//祝日をセット
view.setHoliday = function(){ ･･･③
～
//一日は色を変える
var class_str = "holiday blk";
if (key.slice(-2) === "01") {
class_str += " monthFirst"
}
ById(key).setAttribute("class", class_str);
}
}
};
//指定日付項目にクラスを追加
view.addClass = function(element, day){ ･･･④
var class_str;
if (model.day.getHolidayName(day) != "") {
class_str += " holiday";
} else {
class_str += " day";
}
class_str += " blk";
//一日は色を変える
if (day.getDate() === 1) {
class_str += " monthFirst";
}
element.setAttribute("class", class_str);
};
[解説]
①列数が４つ以下の場合か１日の場合のみ月を表示させます。
②列数が１以外の場合は日付とタスクタイトルを別行にして表示させます。
③祝日の１日の場合に背景色を水色に変更させる為にクラスを追加しています。
④祝日以外に１日の場合に背景色を水色に変更させる為にクラスを追加しています。
列数などにより画面の表示形式を微妙に変更し、少しでもマス内の情報に
無駄がないようにしています。
サンプル
http://trapz.web.fc2.com/blog/20130618/scheduler.html