display:flexがモバイルで効かないときはdisplay:boxで代用する

真木よう子Viewer ver1.01

f:id:naoyashiga:20140519201042p:plain
先日のエントリに引き続き「真木よう子Viewer」を作っていました。AngularJSの恩恵を十分に受けていないようなペラ一枚のページになっています・・・。

code修正点

modify layout and title font · naoyashiga/Yoko_Maki_Viewer@3246158 · GitHub
modify flex layout · naoyashiga/Yoko_Maki_Viewer@249b3fa · GitHub

demo

http://naoyashiga.github.io/Yoko_Maki_Viewer/

・先日のエントリ
AngularJSを使って「真木よう子Viewer」を作り始めた - not good but great

orderByでソートする

<li ng-repeat="makiYoko in makiYokos | orderBy:'-score'" ng-controller="makiYokoItemCtrl">
	<img ng-src="{{makiYoko.url}}" ng-class="'makiImg'">
	<button ng-click="increment()">{{makiYoko.score}}</button>
</li>

「-score」というように先頭にマイナスをつけることによって、scoreが大きい順に並べています。ボタンを押して、数値をアップさせれば、順番が変わります。

Google Web Fontsを使う

タイトルは「Josefin Sans」というフォントにしました。字体は細めです。
https://www.google.com/fonts/specimen/Josefin+Sans

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' rel='stylesheet' type='text/css'>

htmlにWeb Fontsを読み込みます。

header{
	width:80%;
	margin:0 auto;
	text-align:center;
	font-family: 'Josefin Sans', sans-serif;
}

html5から採用されたheaderタグにフォントを指定しました。

display:flexはモバイルで動かない?

タブレットでページを見ると「display:flex」が効いていませんでした。

.makiImgLayout{
	display:-webkit-box;
	display:-moz-box;
	display:box;
	display:-webkit-flex;
	display:flex;

	-moz-box-orient:horizontal;
	-webkit-box-orient:horizontal;
	flex-direction:row;

	-ms-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;

	-moz-box-pack:justify;
	-ms-box-pack:justify;
	box-pack:justify;
	flex-pack:justify;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	/*
	justify-content:space-around;
	*/
}