Ajout des boutons de relations dans le .jss .

code/html5/index.html

@@ -6,9 +6,6 @@
 	<style>
 body {
 	background-color: black;
-	padding: 0;
-	margin: 0;
-	text-align: left;
 }
 
 #screen {
@@ -17,63 +14,36 @@ body {
 }
 
 #mc-caption {
-	position: absolute;
-	text-align: center;
 	color: #8b4;
 }
 
 #mn-caption {
-	position: absolute;
-	text-align: center;
 	color: #4a4;
 }
 
-#mc-caption-block {
-	position: absolute;
-}
-
 #mn-caption-block {
-	position: absolute;
 	border-top: medium solid #44AA44;
 	border-bottom: medium solid #44AA44;
 	background-color: #F0F8D0;
 }
-	</style>
-
-<!--
-/*.relations {
-	width: 100%;
-}*/
-
 .relations div {
 	background-color: #F0F8D0;
 	border: thin solid #44AA44;
 	-moz-border-radius: 10px;
-/*	margin: 10px;
-	height: 72px; */
 	background-repeat: no-repeat;
-/*	padding: 10px; */
-}
-
-.relations div:nth-child(odd) {
-	text-align: right;
-	padding-left: 76px;
-	background-position: 2% center;
-}
-
-.relations div:nth-child(even) {
-	text-align: left;
-	padding-right: 76px;
-	background-position: 98% center;
 }
 
 .relations .rid-1 { background-image: url("img/rel/-1.png"); }
-.relations .rid0 { background-image: url("img/rel/0.png"); }
+.relations .rid0  { background-image: url("img/rel/0.png"); }
-.relations .rid5 { background-image: url("img/rel/5.png"); }
+.relations .rid5  { background-image: url("img/rel/5.png"); }
-.relations .rid7 { background-image: url("img/rel/7.png"); }
+.relations .rid7  { background-image: url("img/rel/7.png"); }
-.relations .rid9 { background-image: url("img/rel/9.png"); }
+.relations .rid9  { background-image: url("img/rel/9.png"); }
-.relations .rid10 { background-image: url("img/rel/10.png"); } */
+.relations .rid10 { background-image: url("img/rel/10.png"); }
-	</style>-->
+
+.relations .hot {
+	background-color: yellow;
+}
+	</style>
 	<script src="jquery-1.5.1.min.js"></script>
 	<script src="jquery-ui-1.8.11.custom.min.js"></script>
 	<script src="pticlic.js"></script>
@@ -85,7 +55,7 @@ body {
 	<div id="mn-caption-block"></div>
 	<div id="mc-caption" class="mc"></div>
 	<div id="mn-caption" class="mn"></div>
-	<!--<div class="relations"></div>-->
+	<div class="relations"></div>
 </div>
 </body>
 </html>

code/html5/pticlic.js

@@ -1,31 +1,78 @@
 function jss() {
 	var w=480, h=800;
 	var mch = h/8, mnh = h*0.075;
+	
+	$("body")
+		.css({
+			padding: 0,
+			margin: 0,
+			textAlign: "left"
+		});
+	
 	$("#screen")
 		.width(w)
 		.height(h)
+		.position({my:"center center", at:"center center", of:"body", collision:"none"});
 	
 	$("#mc-caption-block")
+		.css({
+			position: "absolute"
+		})
 		.width(w)
 		.height(mch)
 		.position({my:"center top", at:"center top", of:"#screen", collision:"none"});
+	
 	$("#mc-caption")
+		.css({
+			maxWidth: w*0.9,
+			textAlign: "center",
+			position: "absolute"
+		})
 		.fitFont(w*0.9, mch*0.9, 20)
-		.css("max-width", w*0.9)
 		.position({my:"center center", at:"center center", of:"#mc-caption-block", collision:"none"});
 	
 	$("#mn-caption-block")
+		.css({
+			borderWidth: h/100,
+			position: "absolute"
+		})
 		.width(w)
 		.height(mnh)
-		.css("border-width", h/100)
 		.position({my:"center top", at:"center bottom", of:"#mc-caption-block", collision:"none"});
+	
 	$("#mn-caption")
+		.css({
+			maxWidth: w*0.9,
+			textAlign: "center",
+			position: "absolute"
+		})
 		.fitFont(w*0.9, mnh*0.9, 20)
-		.css("max-width", w*0.9)
 		.position({my:"center center", at:"center center", of:"#mn-caption-block", collision:"none"});
+	
+	$(".relations > div")
+		.css({
+			margin: 10,
+			height: 72,
+			padding: 10,
+		});
 
-	$("#screen")
+	// TODO : fitFont pour ".relations div"
-		.position({my:"center center", at:"center center", of:"body", collision:"none"});
+	$(".relations > div:nth-child(odd)")
+		.css({
+			backgroundPosition: "2% center", // TODO : virer le pourcentage, et séparer l'icône dans un nouvel élément.
+			textAlign: "right",
+			paddingLeft: 76
+		});
+	
+	$(".relations > div:nth-child(even)")
+		.css({
+			backgroundPosition: "98% center", // TODO : virer le pourcentage, et séparer l'icône dans un nouvel élément.
+			textAlign: "left",
+			paddingRight: 76
+		});
+	
+	$(".relations")
+		.position({my:"center bottom", at:"center bottom", of:"#screen", offset:"0 -10", collision:"none"});
 }
 
 
@@ -53,11 +100,14 @@ $(function () {
 				.addClass("rid"+cat.id)
 				.click(function() {
 					answers[currentWordNb++] = cat.id;
+					$(this).addClass("hot")//.delay(500).removeClass("hot"); // TODO: just blink.
 					refresh();
 				})
 				.appendTo(".relations");
 		});
 		
+		$(window).resize(jss);
 		refresh();
+		refresh(); // TODO : fix the bug with the margin on ".relation > div"
 	});
 });