From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 9 Jun 2017 16:08:10 +0000 (+0200)
Subject: add shade on thumbs | wip #1445 @1:05
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=fcf7bea930c5b4171841716f43a682038bfbc01b;p=fluidbook-html5.git

add shade on thumbs | wip #1445 @1:05
---

diff --git a/images/icon-shad.png b/images/icon-shad.png
new file mode 100644
index 00000000..c3158792
Binary files /dev/null and b/images/icon-shad.png differ
diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js
index 6f12fb25..624fc61a 100644
--- a/js/libs/fluidbook/fluidbook.slider.js
+++ b/js/libs/fluidbook/fluidbook.slider.js
@@ -34,7 +34,11 @@ FluidbookSlider.prototype = {
     },
 
     dragCursor: function (e, end) {
-        console.log(this.pageToSlider(e.pageX));
+        if(!end) {
+            $("#slider").addClass(".drag");
+        }else{
+            $("#slider").removeClass(".drag");
+        }
         this.updatePageByCursorPosition(this.pageToSlider(e.pageX), end, true);
     },
 
@@ -77,8 +81,11 @@ FluidbookSlider.prototype = {
         if (single) {
             bottom = 18;
         }
+        bottom *= this.fluidbook.resize.interfaceScale;
 
-        $("#slider").css({width: this.sliderWidth, left: (ww - this.sliderWidth) / 2, top: hh - bottom});
+        $("#slider")
+            .css({width: this.sliderWidth, left: (ww - this.sliderWidth) / 2, top: hh - bottom})
+            .transform({scaleY: this.fluidbook.resize.interfaceScale});
         this.updateSnaps(single);
         this.cursorWidth = Math.max(30, this.snapsWidth);
         $("#slidercursor").css('width', this.cursorWidth);
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 7a6f47d6..8a523af4 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -659,6 +659,7 @@ footer {
 	position: absolute;
 	bottom: 2px;
 	z-index: 20;
+	transform-origin: 100% 100%;
 }
 
 footer a {
@@ -823,6 +824,7 @@ html.ios body.portrait #interface {
 #indexView .bookmark {
 	width: 35px;
 	height: 35px;
+	z-index: 2;
 }
 
 .landscape .bookmark.left {
@@ -975,9 +977,6 @@ form input[type="text"], form input[type="email"] {
 	color: @menu-field-text;
 }
 
-//$res[] = '#indexView .thumb img{width:100px;height:' . $thumbh . 'px;}';
-//$res[] = '#indexView .doubleThumb{height:' . $thumbh . 'px;' . wsHTML5::writeCSSUA('box-shadow', '0 0 3px ' . $shadowColor) . '}';
-
 #indexView {
 	margin: auto;
 	.doubleThumb, .padding {
@@ -1057,10 +1056,13 @@ form input[type="text"], form input[type="email"] {
 		top: 0px;
 		left: 0px;
 		font-size: 12px;
+
 		img {
 			width: 100px;
 			height: @thumb-height;
-			background: #fff
+			background: #fff;
+			position: relative;
+			z-index: 1;
 		}
 		.number {
 			text-align: center;
@@ -1068,6 +1070,8 @@ form input[type="text"], form input[type="email"] {
 			font-family: Arial, Helvetica, sans-serif;
 			margin: 1px 0 0 0;
 			max-width: 100px;
+			position: relative;
+			z-index: 1;
 		}
 		&.right {
 			left: 100px;
@@ -1082,6 +1086,21 @@ form input[type="text"], form input[type="email"] {
 			margin-right: 110px;
 		}
 
+		@shade-height: unit(@thumb-height+22, px);
+		&:before {
+			position: absolute;
+			content: "";
+			background-image: url("../images/icon-shad.png");
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+			opacity: 0.65;
+			top: -5px;
+			left: -5px;
+			width: 111px;
+			height: @shade-height;
+			z-index: 0;
+		}
+
 	}
 }
 
diff --git a/style/slider.less b/style/slider.less
index 58910d31..eb0d3cec 100644
--- a/style/slider.less
+++ b/style/slider.less
@@ -9,6 +9,14 @@
 		width: 100%;
 		position: relative;
 		top: 20px;
+		transition: all 250ms;
+	}
+
+	&:hover, &.drag {
+		.visible {
+			height: 12px;
+			top: 17px;
+		}
 	}
 
 	#sliderback {
@@ -25,7 +33,6 @@
 	}
 
 	#slidercursor {
-
 		height: 46px;
 		position: absolute;
 		left: 0;
@@ -36,4 +43,13 @@
 			background-color: #fff;
 		}
 	}
+
+	&:hover, &.drag {
+		#slidercursor {
+			.visible {
+				height: 10px;
+				top: 18px;
+			}
+		}
+	}
 }
\ No newline at end of file