From fcf7bea930c5b4171841716f43a682038bfbc01b Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 9 Jun 2017 18:08:10 +0200 Subject: [PATCH] add shade on thumbs | wip #1445 @1:05 --- images/icon-shad.png | Bin 0 -> 2391 bytes js/libs/fluidbook/fluidbook.slider.js | 11 +++++++++-- style/fluidbook.less | 27 ++++++++++++++++++++++---- style/slider.less | 18 ++++++++++++++++- 4 files changed, 49 insertions(+), 7 deletions(-) create mode 100644 images/icon-shad.png diff --git a/images/icon-shad.png b/images/icon-shad.png new file mode 100644 index 0000000000000000000000000000000000000000..c315879242728845eb7dbd3bcefb5ccc31493b75 GIT binary patch literal 2391 zcmbVO3se(V8V(@JB7!SWsEWpDRfJ?Rc@UBkl8_LH8j#4V6qT3^5FnY53=mKXs{*p@ zY7r0-aM3*~kAOg{uwbARS_MHAp}{~w@qxCYSXc0Ybtfp+J;&4S+4;}Ry>sXLzW;Im zd(LEU@$*?^xzrMa!7LK^@(6N-{4n7BvH ztvIYq%EX0Gg+!r}3q{L(Q&iB_6u&@8O00w~#j!lG9vTKJAcqh!RwIv7s2Lh2ZdR9p z&W+0e4m%4$Vwt!%L4^vpV7agg!cqxDyoBgR#JYh5kW8V`Xs%ci5hMac5&)9$AdNvL zF^EL$+Y5(!Q%NHkA|C&(FZ7Lxi$)M70|1hek_bs;0<4MxKsudn)F6@YC<3oeRv=;x zUZGw+r@({M5|vDe$Y2H5s3_hECm>858tI!9D;>Nzr6yWe+Y1ftO}{8ch^Q^avRSdt)z6o`Pw z#GzjZQkj%Nbth5yWC|bTf$rW!5TsLyd_L8UP9pQ&=^))}PUAydH!97IPoa8&?kF4d zCVEkL9IhLm!*}D*sP1I$99N)FBVvUFn)53|{l4XLewWMOsvt1}s{&y-Zmt8iM8gQI zj)s+3?p7)`M5d6!NowQfyvdaZsbqPsIQ<7{J&X z@3qR@654;p>AS{9U)~)ZNP(Ug6?!m)R8Kn$#ynfV;{<99502(2hTIo>dlw}hQZy`d z{pjB7*E<5f?rHbWc7d|m_F=vIL~%e0fr#z#t?$X(beUM!lSb-0*9Q+cHXR#Ytc%%k zLA!^N8B}LFG9XUimIVGyq6@MfvWlm5tdr?Y&p_5d&33F))}YN}+(aAqiS;thD|*Kc z?(P+19Cpo-_M9qP_Ry+hc6({3KmN; zOie0z8^W{|%wBX~eott#nV^C;dB)F#hwAL#=6p1(exKA$oVwX#*HnJh9| zw8gBkxu}^fHAU^pV${+zXYCKezqiBuCikA$`*QDz{g?MY3is}>`eAz6uH!UX>s4NJ zM#NK-#)cLh4y%?-{^&J*q^S3y?c~va`H>4)Wb^5x%TyJ`;KRuCA*?z|F#h1F2-l|u zyL56v?{>@bs%J$m`|N&hzM*dFo{l$Jf7+n0wY3#5$$J?fw;mKtZWI@!hn*NG`}dOz z`gO8Tdpg#(>~?t-{FLfz%f?UW+2knqFKVvEI8g@?`EpKUMnvFWxQ>HJQjwZ9pJ(N+()E9xTED-r+B z6{n9UM|_&SgX_KJ)BUnE&tJ#n?-M~`Mb zbM~0(lK(x32AlV59`D^erFpCiFErJ!`37&&J$$hPh;PlY>$_RsXs=`i&g4JV0Vdj} zE%2G_B;ZjWDh0o0z>}ro(LY}>fanPz*{Y##&zqP>TdL^P>N86pZ;DF8Z z6J_#w!;C{Ej%Ry|HjC=}D=zpvl#L%dd|R~3L3-Eo`cT&l>rZ=q?!yI_JZ_9sW-ZSs z&uX-fJ#gt(DSOC*vPfayk5ssR)#+NXHkWxf0w`emIdO!aeAL5>EdS@i7o~>7=elH` zi5n&!_22h}_qKPYVkZ5{s#jm}aM#6UUY);5_Ic=N!Ld`W0pb7HRhhft&`XOFA|g1u zRWVdGRnFF_D-$kLzjxeLbzi7jH>v$=!lYsCjqBf}o+>Lfql9Q_wwFSk9UY1~LWj(= zGcyM&aE6AaFFnhDela*+p9}PvQ#-&=%Mg=tx3L>e z$ZEOSctCP{%>9l;db3<7g6#4{5AGe>uwG{nO_;G$$;{|(ps%;9ahR8 z%v1w2c{$n3lZ8%c1uL>rc{q`JCZ8dNmnfVCiHGiFcF~XKU)va)cj!fD;DMfsaTO~m zYWIb(i=U)5(VO>AM;1Rh$RvQD5ds`~@TUq1wLg04n~GYO4}|^HS{K7AcUC^AUTIN$ q5*xnIaI$wwF|p?Li5DU1CYY(R^UZsINenjr>Il63cr{)Td;SByfxR05 literal 0 HcmV?d00001 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 -- 2.39.5