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

diff --git a/images/icon-shad.png b/images/icon-shad.png
new file mode 100644 (file)
index 0000000..c315879
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 6f12fb25b6fcd2eb6f42df4e269466b033b46978..624fc61ae221861f5a14f43e18c03d013bc6d9eb 100644 (file)
--- 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 7a6f47d6d5756e8100756ed35395438e2b5076e9..8a523af49578920ee3a2db06b167d6a7dcc09a79 100644 (file)
--- 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 58910d31287552b033d8118424d6801f6e0ae784..eb0d3cec71f04c12c8e49c2d2f767b81fb01c7c5 100644 (file)
--- 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