make bookmarks visible in full screen + some restyling...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

index.html

@@ -40,14 +40,20 @@ $(document).ready(function(){
 		.swipe({
 			swipeStatus: swipeHandler,
 			// XXX change this to pinch...
-			swipeUp: function(){
-				//togglePageView('off')
-				togglePageView()
+			swipeUp: function(event, direction, distance, duration, fingerCount){
+				if(fingerCount == 2){
+					toggleBookmark()
+				} else {
+					togglePageView()
+				}
 			},
 			// XXX change this to pinch...
-			swipeDown: function(){
-				//togglePageView('on')
-				togglePageView()
+			swipeDown: function(event, direction, distance, duration, fingerCount){
+				if(fingerCount == 2){
+					toggleBookmark()
+				} else {
+					togglePageView()
+				}
 			},
 
 			pinchIn: function(event, direction, distance, duration, fingerCount, pinchZoom) {

magazine.css

@@ -22,6 +22,7 @@ body {
 /*********************************************************** pages ***/
 .page {
 	/* XXX make this browser-sized... */
+	position: relative;
 	display: inline-block;
 	vertical-align: bottom;
 	text-align: left;
@@ -68,14 +69,13 @@ body {
 .page .bookmark {
 	position: absolute;
 	font-size: 0px;
-	width: 50px;
-	height: 50px;
+	width: 100px;
+	height: 100px;
 
 	background: red;
 
-	/* XXX make this relative... */
-	margin-top: -50px;
-	margin-left: 750px;
+	right: -60px;
+	top: -60px;
 
 	cursor: hand;
 
@@ -87,8 +87,13 @@ body {
 	-o-transform: rotate(45deg);
 	-ms-transform: rotate(45deg);
 	transform: rotate(45deg);
-}
 
+	-webkit-transition: all 0.2s ease;
+	-moz-transition: all 0.2s ease;
+	-o-transition: all 0.2s ease;
+	-ms-transition: all 0.2s ease;	
+	transition: all 0.2s ease;
+}
 .page-view-mode .page {
 
 	/* XXX change to relative units... */
@@ -99,8 +104,14 @@ body {
 }
 
 .page-view-mode .page .bookmark {
-	display: none;
+	right: -70px;
+	top: -70px;
+	opacity: 0.5;
 }
+.page-view-mode .page .bookmark.justcreated {
+	opacity: 1;
+}
+
 
 
 /************************************************** general layout ***/

magazine.js

@@ -720,11 +720,15 @@ function toggleBookmark(n){
 	if(cur.children('.bookmark').length == 0){
 		var res = $('<div/>')
 			.prependTo(cur)
-			.addClass('bookmark')
+			.addClass('bookmark justcreated')
 			.click(function(){
 				toggleBookmark(n)
 			})
 
+		setTimeout(function(){
+			res.removeClass('justcreated')
+		}, 1000)
+
 		makeBookmarkIndicator(n)
 	} else {
 		cur.children('.bookmark').remove()