playground
/
TimelineJS
mirror of https://github.com/NUKnightLab/TimelineJS.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

More tweaks for touch devices. Cleanup up hover states for touch devices etc

pull/177/head
Zach Wise 13 years ago
parent
5c1d1bab17
commit
22cce47bdd
8 changed files with 193 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      compiled/css/themes/dark.css
  2. 32
      compiled/css/timeline.css
  3. 6
      compiled/js/timeline-min.js
  4. 14
      compiled/js/timeline.js
  5. 9
      source/js/Slider/VMM.DragSlider.js
  6. 5
      source/js/VMM.Timeline.js
  7. 81
      source/less/VMM.Slider.less
  8. 146
      source/less/VMM.Timeline.TimeNav.less

32
compiled/css/themes/dark.css
Unescape View File

@ -74,6 +74,12 @@
.vmm-timeline .googleplus .thumbnail-inline{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-208px -96px;}
.vmm-timeline .zFront{z-index:204;}
.slider{width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask{text-align:center;width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask .slider-container{position:absolute;top:0px;left:-2160px;width:100%;height:100%;text-align:center;display:block;}.slider .slider-container-mask .slider-container .slider-item-container{display:table-cell;vertical-align:middle;}
.vmm-notouch .slider .nav-previous:hover,.vmm-notouch .slider .nav-next:hover{color:#aaaaaa;cursor:pointer;}
.vmm-notouch .slider .nav-previous:hover .icon{margin-left:10px;}
.vmm-notouch .slider .nav-next:hover .icon{margin-left:66px;}
.vmm-notouch .slider .slider-item .content .content-container .media .media-container .wikipedia h4 a:hover{color:#0bd4e3;text-decoration:none;}
.vmm-notouch .slider .slider-item .content .content-container .created-at:hover{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.vmm-notouch .slider .slider-item .content .content-container .googleplus .googleplus-content .googleplus-attachments a:hover{text-decoration:none;}.vmm-notouch .slider .slider-item .content .content-container .googleplus .googleplus-content .googleplus-attachments a:hover h5{text-decoration:underline;}
.slider img,.slider embed,.slider object,.slider video,.slider iframe{max-width:100%;}
.slider .nav-previous,.slider .nav-next{position:absolute;top:0px;width:100px;color:#DBDBDB;font-size:11px;}.slider .nav-previous .nav-container,.slider .nav-next .nav-container{height:100px;width:100px;position:absolute;}
.slider .nav-previous .icon,.slider .nav-next .icon{margin-top:12px;margin-bottom:15px;}
@ -81,13 +87,10 @@
.slider .nav-previous .date small,.slider .nav-next .date small,.slider .nav-previous .title small,.slider .nav-next .title small{display:none;}
.slider .nav-previous .date,.slider .nav-next .date{font-size:13px;line-height:13px;font-weight:bold;text-transform:uppercase;margin-bottom:5px;}
.slider .nav-previous .title,.slider .nav-next .title{font-size:11px;line-height:13px;}
.slider .nav-previous:hover,.slider .nav-next:hover{color:#aaaaaa;cursor:pointer;}
.slider .nav-previous{float:left;text-align:left;}.slider .nav-previous .icon{margin-left:15px;height:24px;background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-160px 0;width:24px;height:24px;overflow:hidden;}
.slider .nav-previous .date,.slider .nav-previous .title{text-align:left;padding-left:15px;}
.slider .nav-previous:hover .icon{margin-left:10px;}
.slider .nav-next{float:right;text-align:right;}.slider .nav-next .icon{margin-left:61px;background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-184px 0;width:24px;height:24px;height:24px;overflow:hidden;}
.slider .nav-next .date,.slider .nav-next .title{text-align:right;padding-right:15px;}
.slider .nav-next:hover .icon{margin-left:66px;}
.slider .slider-item{position:absolute;width:700px;height:100%;padding:0px;margin:0px;display:table;overflow-y:auto;}.slider .slider-item .content{display:table-cell;vertical-align:middle;}.slider .slider-item .content .pad-top .text .container{padding-top:15px;}
.slider .slider-item .content .pad-right .text .container{padding-right:15px;}
.slider .slider-item .content .pad-left .text .container{padding-left:30px;}
@ -106,7 +109,6 @@
.slider .slider-item .content .content-container .media .media-wrapper .media-container .wikipedia{font-size:15px;line-height:20px;text-align:left;margin-left:auto;margin-right:auto;margin-bottom:15px;clear:both;}.slider .slider-item .content .content-container .media .media-wrapper .media-container .wikipedia .wiki-source{margin-bottom:15px;font-size:13px;line-height:19px;font-style:italic;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .wikipedia h4{border-bottom:1px solid #333333;margin-bottom:5px;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .wikipedia h4 a{color:#ffffff;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .wikipedia h4 a:hover{color:#0bd4e3;text-decoration:none;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .wikipedia p{font-size:13px;line-height:19px;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map{line-height:normal;z-index:200;text-align:left;background-color:#1a1a1a;}.slider .slider-item .content .content-container .media .media-wrapper .media-container .map img{max-height:none !important;max-width:none !important;border:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .google-map{height:100%;width:100%;}
@ -115,7 +117,6 @@
.slider .slider-item .content .content-container .media .media-wrapper .caption{text-align:left;margin-top:10px;color:#aaaaaa;font-size:11px;line-height:14px;text-rendering:optimizeLegibility;word-wrap:break-word;}
.slider .slider-item .content .media.text-media .media-wrapper .media-container{border:none;background-color:#1a1a1a;}
.slider .slider-item .content .created-at{width:24px;height:24px;overflow:hidden;margin-left:7.5px;margin-top:2px;display:inline-block;float:right;filter:alpha(opacity=25);-khtml-opacity:0.25;-moz-opacity:0.25;opacity:0.25;}
.slider .slider-item .content .created-at:hover{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.slider .slider-item .content .storify .created-at{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-328px -96px;}
.slider .slider-item .content .twitter .created-at{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-256px -24px;}
.slider .slider-item .content .googleplus .googleplus-content{font-size:13px;line-height:19px;margin-bottom:6px;padding-top:10px;background-color:#1a1a1a;color:#aaaaaa;}.slider .slider-item .content .googleplus .googleplus-content p{font-size:13px;line-height:19px;}
@ -126,7 +127,6 @@
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments:before,.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments:after{display:table;content:"";zoom:1;}
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments:after{clear:both;}
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments h5{margin-bottom:5px;}
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments a:hover{text-decoration:none;}.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments a:hover h5{text-decoration:underline;}
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments div{width:50%;padding-left:15px;display:inline-block;}
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments p{font-size:11px;line-height:14px;margin-bottom:5px;}
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments img{float:left;display:block;bottom:0;left:0;margin:auto;position:relative;right:0;top:0;width:40%;}
@ -140,8 +140,17 @@
.slider .slider-item .content-container.layout-media{width:100%;}.slider .slider-item .content-container.layout-media .text{width:100%;height:100%;max-width:100%;display:block;text-align:center;}.slider .slider-item .content-container.layout-media .text .container{display:block;text-align:center;width:100%;margin-left:none;margin-right:none;}
.slider .slider-item .content-container.layout-media .media{width:100%;min-width:50%;float:none;}.slider .slider-item .content-container.layout-media .media .media-wrapper .media-container{margin-left:auto;margin-right:auto;line-height:0px;padding:0px;}
.slider .slider-item .content-container.layout-media .twitter,.slider .slider-item .content-container.layout-media .wikipedia,.slider .slider-item .content-container.layout-media .googleplus{max-width:70%;}
.vmm-notouch .navigation .toolbar .zoom-in:hover,.vmm-notouch .navigation .toolbar .zoom-out:hover,.vmm-notouch .navigation .toolbar .back-home:hover{color:#0bd4e3;cursor:pointer;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.vmm-notouch .navigation .timenav .content .marker.active:hover{cursor:default;}.vmm-notouch .navigation .timenav .content .marker.active:hover .flag .flag-content h3,.vmm-notouch .navigation .timenav .content .marker.active:hover .flag-small .flag-content h3{color:#0bd4e3;}
.vmm-notouch .navigation .timenav .content .marker.active:hover .flag .flag-content h4,.vmm-notouch .navigation .timenav .content .marker.active:hover .flag-small .flag-content h4{color:#999999;}
.vmm-notouch .navigation .timenav .content .marker:hover .line{z-index:24;background:#999999;}
.vmm-notouch .navigation .timenav .content .marker .flag:hover,.vmm-notouch .navigation .timenav .content .marker .flag-small:hover{cursor:pointer;}.vmm-notouch .navigation .timenav .content .marker .flag:hover .flag-content h3,.vmm-notouch .navigation .timenav .content .marker .flag-small:hover .flag-content h3{color:#aaaaaa;}
.vmm-notouch .navigation .timenav .content .marker .flag:hover .flag-content h4,.vmm-notouch .navigation .timenav .content .marker .flag-small:hover .flag-content h4{color:#aaaaaa;}
.vmm-notouch .navigation .timenav .content .marker .flag:hover .flag-content .thumbnail,.vmm-notouch .navigation .timenav .content .marker .flag-small:hover .flag-content .thumbnail{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
.vmm-notouch .navigation .timenav .content .marker .flag:hover{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:0 -53px;width:153px;height:53px;}
.vmm-notouch .navigation .timenav .content .marker .flag-small:hover{height:56px;background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:0 -53px;width:153px;height:53px;}.vmm-notouch .navigation .timenav .content .marker .flag-small:hover .flag-content{height:36px;}.vmm-notouch .navigation .timenav .content .marker .flag-small:hover .flag-content h3{margin-top:5px;}
.vmm-notouch .navigation .timenav .content .marker .flag-small.flag-small-last:hover{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:0 -109px;width:153px;height:26px;height:26px;}.vmm-notouch .navigation .timenav .content .marker .flag-small.flag-small-last:hover .flag-content{height:14px;}.vmm-notouch .navigation .timenav .content .marker .flag-small.flag-small-last:hover .flag-content h3{margin-top:4px;}
.vmm-timeline .navigation{clear:both;cursor:move;width:100%;height:200px;border-top:1px solid #e3e3e3;position:relative;}.vmm-timeline .navigation .toolbar{position:absolute;top:45px;left:0px;z-index:202;background-color:#1a1a1a;border:1px solid #333333;-webkit-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);-moz-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);box-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);}.vmm-timeline .navigation .toolbar .zoom-in,.vmm-timeline .navigation .toolbar .zoom-out,.vmm-timeline .navigation .toolbar .back-home{font-weight:normal;font-size:10px;line-height:20px;top:0px;z-index:202;width:18px;height:18px;color:#aaaaaa;text-align:center;font-weight:bold;border:1px solid #1a1a1a;padding:5px;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
.vmm-timeline .navigation .toolbar .zoom-in:hover,.vmm-timeline .navigation .toolbar .zoom-out:hover,.vmm-timeline .navigation .toolbar .back-home:hover{color:#0bd4e3;cursor:pointer;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.vmm-timeline .navigation .toolbar .zoom-in .icon{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-256px 0;width:24px;height:24px;}
.vmm-timeline .navigation .toolbar .zoom-out .icon{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-280px 0;width:24px;height:24px;}
.vmm-timeline .navigation .toolbar .back-home .icon{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-328px 0;width:24px;height:24px;}
@ -161,9 +170,6 @@
.vmm-timeline .navigation .timenav .content .marker.active .flag.row1,.vmm-timeline .navigation .timenav .content .marker.active .flag.row2,.vmm-timeline .navigation .timenav .content .marker.active .flag.row3,.vmm-timeline .navigation .timenav .content .marker.active .flag-small.row1,.vmm-timeline .navigation .timenav .content .marker.active .flag-small.row2,.vmm-timeline .navigation .timenav .content .marker.active .flag-small.row3{z-index:200;}
.vmm-timeline .navigation .timenav .content .marker.active .flag{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:0 -53px;width:153px;height:53px;}
.vmm-timeline .navigation .timenav .content .marker.active .flag-small{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:0 -109px;width:153px;height:26px;height:26px;}.vmm-timeline .navigation .timenav .content .marker.active .flag-small .flag-content{height:14px;}.vmm-timeline .navigation .timenav .content .marker.active .flag-small .flag-content h3{margin-top:4px;}
.vmm-timeline .navigation .timenav .content .marker.active:hover{cursor:default;}.vmm-timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h3,.vmm-timeline .navigation .timenav .content .marker.active:hover .flag-small .flag-content h3{color:#0bd4e3;}
.vmm-timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h4,.vmm-timeline .navigation .timenav .content .marker.active:hover .flag-small .flag-content h4{color:#999999;}
.vmm-timeline .navigation .timenav .content .marker:hover .line{z-index:24;background:#999999;}
.vmm-timeline .navigation .timenav .content .marker{position:absolute;top:0px;left:150px;display:block;}.vmm-timeline .navigation .timenav .content .marker .dot{position:absolute;top:150px;left:0px;display:block;width:6px;height:6px;background:#aaaaaa;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;z-index:21;}
.vmm-timeline .navigation .timenav .content .marker .line{position:absolute;top:0px;left:3px;width:1px;height:150px;background-color:#333333;background-color:rgba(51, 51, 51, 0.5);-webkit-box-shadow:1px 0 0 rgba(26, 26, 26, 0.5);-moz-box-shadow:1px 0 0 rgba(26, 26, 26, 0.5);box-shadow:1px 0 0 rgba(26, 26, 26, 0.5);z-index:22;}.vmm-timeline .navigation .timenav .content .marker .line .event-line{position:absolute;z-index:22;left:0px;height:1px;width:1px;background:#0bd4e3;filter:alpha(opacity=15);-khtml-opacity:0.15;-moz-opacity:0.15;opacity:0.15;}
.vmm-timeline .navigation .timenav .content .marker .flag,.vmm-timeline .navigation .timenav .content .marker .flag-small{position:absolute;top:15px;left:3px;padding:0px;display:block;z-index:23;width:153px;}.vmm-timeline .navigation .timenav .content .marker .flag .flag-content,.vmm-timeline .navigation .timenav .content .marker .flag-small .flag-content{padding:0px 7px 2px 6px;overflow:hidden;}.vmm-timeline .navigation .timenav .content .marker .flag .flag-content h3,.vmm-timeline .navigation .timenav .content .marker .flag-small .flag-content h3{font-weight:bold;font-size:15px;line-height:20px;font-size:11px;line-height:11px;color:#999999;margin-bottom:2px;}.vmm-timeline .navigation .timenav .content .marker .flag .flag-content h3 small,.vmm-timeline .navigation .timenav .content .marker .flag-small .flag-content h3 small{display:none;}
@ -188,12 +194,6 @@
.vmm-timeline .navigation .timenav .content .marker .flag-small .flag-content .thumbnail.thumb-storify{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-184px -130px;}
.vmm-timeline .navigation .timenav .content .marker .flag-small .flag-content .thumbnail.thumb-googleplus{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-208px -130px;}
.vmm-timeline .navigation .timenav .content .marker .flag-small .flag-content thumbnail.thumb-instagram{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-208px -96px;}
.vmm-timeline .navigation .timenav .content .marker .flag:hover,.vmm-timeline .navigation .timenav .content .marker .flag-small:hover{cursor:pointer;}.vmm-timeline .navigation .timenav .content .marker .flag:hover .flag-content h3,.vmm-timeline .navigation .timenav .content .marker .flag-small:hover .flag-content h3{color:#aaaaaa;}
.vmm-timeline .navigation .timenav .content .marker .flag:hover .flag-content h4,.vmm-timeline .navigation .timenav .content .marker .flag-small:hover .flag-content h4{color:#aaaaaa;}
.vmm-timeline .navigation .timenav .content .marker .flag:hover .flag-content .thumbnail,.vmm-timeline .navigation .timenav .content .marker .flag-small:hover .flag-content .thumbnail{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
.vmm-timeline .navigation .timenav .content .marker .flag:hover{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:0 -53px;width:153px;height:53px;}
.vmm-timeline .navigation .timenav .content .marker .flag-small:hover{height:56px;background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:0 -53px;width:153px;height:53px;}.vmm-timeline .navigation .timenav .content .marker .flag-small:hover .flag-content{height:36px;}.vmm-timeline .navigation .timenav .content .marker .flag-small:hover .flag-content h3{margin-top:5px;}
.vmm-timeline .navigation .timenav .content .marker .flag-small.flag-small-last:hover{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:0 -109px;width:153px;height:26px;height:26px;}.vmm-timeline .navigation .timenav .content .marker .flag-small.flag-small-last:hover .flag-content{height:14px;}.vmm-timeline .navigation .timenav .content .marker .flag-small.flag-small-last:hover .flag-content h3{margin-top:4px;}
.vmm-timeline .navigation .timenav .content .marker .flag.row1{z-index:25;top:48px;}
.vmm-timeline .navigation .timenav .content .marker .flag.row2{z-index:24;top:96px;}
.vmm-timeline .navigation .timenav .content .marker .flag.row3{z-index:23;top:1px;}

32
compiled/css/timeline.css
Unescape View File

@ -74,6 +74,12 @@
.vmm-timeline .googleplus .thumbnail-inline{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-208px -96px;}
.vmm-timeline .zFront{z-index:204;}
.slider{width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask{text-align:center;width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask .slider-container{position:absolute;top:0px;left:-2160px;width:100%;height:100%;text-align:center;display:block;}.slider .slider-container-mask .slider-container .slider-item-container{display:table-cell;vertical-align:middle;}
.vmm-notouch .slider .nav-previous:hover,.vmm-notouch .slider .nav-next:hover{color:#333333;cursor:pointer;}
.vmm-notouch .slider .nav-previous:hover .icon{margin-left:10px;}
.vmm-notouch .slider .nav-next:hover .icon{margin-left:66px;}
.vmm-notouch .slider .slider-item .content .content-container .media .media-container .wikipedia h4 a:hover{color:#0088cc;text-decoration:none;}
.vmm-notouch .slider .slider-item .content .content-container .created-at:hover{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.vmm-notouch .slider .slider-item .content .content-container .googleplus .googleplus-content .googleplus-attachments a:hover{text-decoration:none;}.vmm-notouch .slider .slider-item .content .content-container .googleplus .googleplus-content .googleplus-attachments a:hover h5{text-decoration:underline;}
.slider img,.slider embed,.slider object,.slider video,.slider iframe{max-width:100%;}
.slider .nav-previous,.slider .nav-next{position:absolute;top:0px;width:100px;color:#DBDBDB;font-size:11px;}.slider .nav-previous .nav-container,.slider .nav-next .nav-container{height:100px;width:100px;position:absolute;}
.slider .nav-previous .icon,.slider .nav-next .icon{margin-top:12px;margin-bottom:15px;}
@ -81,13 +87,10 @@
.slider .nav-previous .date small,.slider .nav-next .date small,.slider .nav-previous .title small,.slider .nav-next .title small{display:none;}
.slider .nav-previous .date,.slider .nav-next .date{font-size:13px;line-height:13px;font-weight:bold;text-transform:uppercase;margin-bottom:5px;}
.slider .nav-previous .title,.slider .nav-next .title{font-size:11px;line-height:13px;}
.slider .nav-previous:hover,.slider .nav-next:hover{color:#333333;cursor:pointer;}
.slider .nav-previous{float:left;text-align:left;}.slider .nav-previous .icon{margin-left:15px;height:24px;background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-160px 0;width:24px;height:24px;overflow:hidden;}
.slider .nav-previous .date,.slider .nav-previous .title{text-align:left;padding-left:15px;}
.slider .nav-previous:hover .icon{margin-left:10px;}
.slider .nav-next{float:right;text-align:right;}.slider .nav-next .icon{margin-left:61px;background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-184px 0;width:24px;height:24px;height:24px;overflow:hidden;}
.slider .nav-next .date,.slider .nav-next .title{text-align:right;padding-right:15px;}
.slider .nav-next:hover .icon{margin-left:66px;}
.slider .slider-item{position:absolute;width:700px;height:100%;padding:0px;margin:0px;display:table;overflow-y:auto;}.slider .slider-item .content{display:table-cell;vertical-align:middle;}.slider .slider-item .content .pad-top .text .container{padding-top:15px;}
.slider .slider-item .content .pad-right .text .container{padding-right:15px;}
.slider .slider-item .content .pad-left .text .container{padding-left:30px;}
@ -106,7 +109,6 @@
.slider .slider-item .content .content-container .media .media-wrapper .media-container .wikipedia{font-size:15px;line-height:20px;text-align:left;margin-left:auto;margin-right:auto;margin-bottom:15px;clear:both;}.slider .slider-item .content .content-container .media .media-wrapper .media-container .wikipedia .wiki-source{margin-bottom:15px;font-size:13px;line-height:19px;font-style:italic;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .wikipedia h4{border-bottom:1px solid #cccccc;margin-bottom:5px;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .wikipedia h4 a{color:#000000;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .wikipedia h4 a:hover{color:#0088cc;text-decoration:none;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .wikipedia p{font-size:13px;line-height:19px;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map{line-height:normal;z-index:200;text-align:left;background-color:#ffffff;}.slider .slider-item .content .content-container .media .media-wrapper .media-container .map img{max-height:none !important;max-width:none !important;border:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .google-map{height:100%;width:100%;}
@ -115,7 +117,6 @@
.slider .slider-item .content .content-container .media .media-wrapper .caption{text-align:left;margin-top:10px;color:#666666;font-size:11px;line-height:14px;text-rendering:optimizeLegibility;word-wrap:break-word;}
.slider .slider-item .content .media.text-media .media-wrapper .media-container{border:none;background-color:#ffffff;}
.slider .slider-item .content .created-at{width:24px;height:24px;overflow:hidden;margin-left:7.5px;margin-top:2px;display:inline-block;float:right;filter:alpha(opacity=25);-khtml-opacity:0.25;-moz-opacity:0.25;opacity:0.25;}
.slider .slider-item .content .created-at:hover{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.slider .slider-item .content .storify .created-at{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-328px -96px;}
.slider .slider-item .content .twitter .created-at{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-256px -24px;}
.slider .slider-item .content .googleplus .googleplus-content{font-size:13px;line-height:19px;margin-bottom:6px;padding-top:10px;background-color:#ffffff;color:#666666;}.slider .slider-item .content .googleplus .googleplus-content p{font-size:13px;line-height:19px;}
@ -126,7 +127,6 @@
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments:before,.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments:after{display:table;content:"";zoom:1;}
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments:after{clear:both;}
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments h5{margin-bottom:5px;}
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments a:hover{text-decoration:none;}.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments a:hover h5{text-decoration:underline;}
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments div{width:50%;padding-left:15px;display:inline-block;}
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments p{font-size:11px;line-height:14px;margin-bottom:5px;}
.slider .slider-item .content .googleplus .googleplus-content .googleplus-attachments img{float:left;display:block;bottom:0;left:0;margin:auto;position:relative;right:0;top:0;width:40%;}
@ -140,8 +140,17 @@
.slider .slider-item .content-container.layout-media{width:100%;}.slider .slider-item .content-container.layout-media .text{width:100%;height:100%;max-width:100%;display:block;text-align:center;}.slider .slider-item .content-container.layout-media .text .container{display:block;text-align:center;width:100%;margin-left:none;margin-right:none;}
.slider .slider-item .content-container.layout-media .media{width:100%;min-width:50%;float:none;}.slider .slider-item .content-container.layout-media .media .media-wrapper .media-container{margin-left:auto;margin-right:auto;line-height:0px;padding:0px;}
.slider .slider-item .content-container.layout-media .twitter,.slider .slider-item .content-container.layout-media .wikipedia,.slider .slider-item .content-container.layout-media .googleplus{max-width:70%;}
.vmm-notouch .navigation .toolbar .zoom-in:hover,.vmm-notouch .navigation .toolbar .zoom-out:hover,.vmm-notouch .navigation .toolbar .back-home:hover{color:#0088cc;cursor:pointer;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.vmm-notouch .navigation .timenav .content .marker.active:hover{cursor:default;}.vmm-notouch .navigation .timenav .content .marker.active:hover .flag .flag-content h3,.vmm-notouch .navigation .timenav .content .marker.active:hover .flag-small .flag-content h3{color:#0088cc;}
.vmm-notouch .navigation .timenav .content .marker.active:hover .flag .flag-content h4,.vmm-notouch .navigation .timenav .content .marker.active:hover .flag-small .flag-content h4{color:#999999;}
.vmm-notouch .navigation .timenav .content .marker:hover .line{z-index:24;background:#999999;}
.vmm-notouch .navigation .timenav .content .marker .flag:hover,.vmm-notouch .navigation .timenav .content .marker .flag-small:hover{cursor:pointer;}.vmm-notouch .navigation .timenav .content .marker .flag:hover .flag-content h3,.vmm-notouch .navigation .timenav .content .marker .flag-small:hover .flag-content h3{color:#333333;}
.vmm-notouch .navigation .timenav .content .marker .flag:hover .flag-content h4,.vmm-notouch .navigation .timenav .content .marker .flag-small:hover .flag-content h4{color:#aaaaaa;}
.vmm-notouch .navigation .timenav .content .marker .flag:hover .flag-content .thumbnail,.vmm-notouch .navigation .timenav .content .marker .flag-small:hover .flag-content .thumbnail{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
.vmm-notouch .navigation .timenav .content .marker .flag:hover{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:0 -53px;width:153px;height:53px;}
.vmm-notouch .navigation .timenav .content .marker .flag-small:hover{height:56px;background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:0 -53px;width:153px;height:53px;}.vmm-notouch .navigation .timenav .content .marker .flag-small:hover .flag-content{height:36px;}.vmm-notouch .navigation .timenav .content .marker .flag-small:hover .flag-content h3{margin-top:5px;}
.vmm-notouch .navigation .timenav .content .marker .flag-small.flag-small-last:hover{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:0 -109px;width:153px;height:26px;height:26px;}.vmm-notouch .navigation .timenav .content .marker .flag-small.flag-small-last:hover .flag-content{height:14px;}.vmm-notouch .navigation .timenav .content .marker .flag-small.flag-small-last:hover .flag-content h3{margin-top:4px;}
.vmm-timeline .navigation{clear:both;cursor:move;width:100%;height:200px;border-top:1px solid #e3e3e3;position:relative;}.vmm-timeline .navigation .toolbar{position:absolute;top:45px;left:0px;z-index:202;background-color:#ffffff;border:1px solid #cccccc;-webkit-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);-moz-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);box-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);}.vmm-timeline .navigation .toolbar .zoom-in,.vmm-timeline .navigation .toolbar .zoom-out,.vmm-timeline .navigation .toolbar .back-home{font-weight:normal;font-size:10px;line-height:20px;top:0px;z-index:202;width:18px;height:18px;color:#333333;text-align:center;font-weight:bold;border:1px solid #ffffff;padding:5px;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
.vmm-timeline .navigation .toolbar .zoom-in:hover,.vmm-timeline .navigation .toolbar .zoom-out:hover,.vmm-timeline .navigation .toolbar .back-home:hover{color:#0088cc;cursor:pointer;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.vmm-timeline .navigation .toolbar .zoom-in .icon{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-256px 0;width:24px;height:24px;}
.vmm-timeline .navigation .toolbar .zoom-out .icon{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-280px 0;width:24px;height:24px;}
.vmm-timeline .navigation .toolbar .back-home .icon{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-328px 0;width:24px;height:24px;}
@ -161,9 +170,6 @@
.vmm-timeline .navigation .timenav .content .marker.active .flag.row1,.vmm-timeline .navigation .timenav .content .marker.active .flag.row2,.vmm-timeline .navigation .timenav .content .marker.active .flag.row3,.vmm-timeline .navigation .timenav .content .marker.active .flag-small.row1,.vmm-timeline .navigation .timenav .content .marker.active .flag-small.row2,.vmm-timeline .navigation .timenav .content .marker.active .flag-small.row3{z-index:200;}
.vmm-timeline .navigation .timenav .content .marker.active .flag{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:0 -53px;width:153px;height:53px;}
.vmm-timeline .navigation .timenav .content .marker.active .flag-small{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:0 -109px;width:153px;height:26px;height:26px;}.vmm-timeline .navigation .timenav .content .marker.active .flag-small .flag-content{height:14px;}.vmm-timeline .navigation .timenav .content .marker.active .flag-small .flag-content h3{margin-top:4px;}
.vmm-timeline .navigation .timenav .content .marker.active:hover{cursor:default;}.vmm-timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h3,.vmm-timeline .navigation .timenav .content .marker.active:hover .flag-small .flag-content h3{color:#0088cc;}
.vmm-timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h4,.vmm-timeline .navigation .timenav .content .marker.active:hover .flag-small .flag-content h4{color:#999999;}
.vmm-timeline .navigation .timenav .content .marker:hover .line{z-index:24;background:#999999;}
.vmm-timeline .navigation .timenav .content .marker{position:absolute;top:0px;left:150px;display:block;}.vmm-timeline .navigation .timenav .content .marker .dot{position:absolute;top:150px;left:0px;display:block;width:6px;height:6px;background:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;z-index:21;}
.vmm-timeline .navigation .timenav .content .marker .line{position:absolute;top:0px;left:3px;width:1px;height:150px;background-color:#cccccc;background-color:rgba(204, 204, 204, 0.5);-webkit-box-shadow:1px 0 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:1px 0 0 rgba(255, 255, 255, 0.5);box-shadow:1px 0 0 rgba(255, 255, 255, 0.5);z-index:22;}.vmm-timeline .navigation .timenav .content .marker .line .event-line{position:absolute;z-index:22;left:0px;height:1px;width:1px;background:#0088cc;filter:alpha(opacity=15);-khtml-opacity:0.15;-moz-opacity:0.15;opacity:0.15;}
.vmm-timeline .navigation .timenav .content .marker .flag,.vmm-timeline .navigation .timenav .content .marker .flag-small{position:absolute;top:15px;left:3px;padding:0px;display:block;z-index:23;width:153px;}.vmm-timeline .navigation .timenav .content .marker .flag .flag-content,.vmm-timeline .navigation .timenav .content .marker .flag-small .flag-content{padding:0px 7px 2px 6px;overflow:hidden;}.vmm-timeline .navigation .timenav .content .marker .flag .flag-content h3,.vmm-timeline .navigation .timenav .content .marker .flag-small .flag-content h3{font-weight:bold;font-size:15px;line-height:20px;font-size:11px;line-height:11px;color:#999999;margin-bottom:2px;}.vmm-timeline .navigation .timenav .content .marker .flag .flag-content h3 small,.vmm-timeline .navigation .timenav .content .marker .flag-small .flag-content h3 small{display:none;}
@ -188,12 +194,6 @@
.vmm-timeline .navigation .timenav .content .marker .flag-small .flag-content .thumbnail.thumb-storify{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-184px -130px;}
.vmm-timeline .navigation .timenav .content .marker .flag-small .flag-content .thumbnail.thumb-googleplus{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-208px -130px;}
.vmm-timeline .navigation .timenav .content .marker .flag-small .flag-content thumbnail.thumb-instagram{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-208px -96px;}
.vmm-timeline .navigation .timenav .content .marker .flag:hover,.vmm-timeline .navigation .timenav .content .marker .flag-small:hover{cursor:pointer;}.vmm-timeline .navigation .timenav .content .marker .flag:hover .flag-content h3,.vmm-timeline .navigation .timenav .content .marker .flag-small:hover .flag-content h3{color:#333333;}
.vmm-timeline .navigation .timenav .content .marker .flag:hover .flag-content h4,.vmm-timeline .navigation .timenav .content .marker .flag-small:hover .flag-content h4{color:#aaaaaa;}
.vmm-timeline .navigation .timenav .content .marker .flag:hover .flag-content .thumbnail,.vmm-timeline .navigation .timenav .content .marker .flag-small:hover .flag-content .thumbnail{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
.vmm-timeline .navigation .timenav .content .marker .flag:hover{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:0 -53px;width:153px;height:53px;}
.vmm-timeline .navigation .timenav .content .marker .flag-small:hover{height:56px;background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:0 -53px;width:153px;height:53px;}.vmm-timeline .navigation .timenav .content .marker .flag-small:hover .flag-content{height:36px;}.vmm-timeline .navigation .timenav .content .marker .flag-small:hover .flag-content h3{margin-top:5px;}
.vmm-timeline .navigation .timenav .content .marker .flag-small.flag-small-last:hover{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:0 -109px;width:153px;height:26px;height:26px;}.vmm-timeline .navigation .timenav .content .marker .flag-small.flag-small-last:hover .flag-content{height:14px;}.vmm-timeline .navigation .timenav .content .marker .flag-small.flag-small-last:hover .flag-content h3{margin-top:4px;}
.vmm-timeline .navigation .timenav .content .marker .flag.row1{z-index:25;top:48px;}
.vmm-timeline .navigation .timenav .content .marker .flag.row2{z-index:24;top:96px;}
.vmm-timeline .navigation .timenav .content .marker .flag.row3{z-index:23;top:1px;}

6
compiled/js/timeline-min.js vendored
View File

File diff suppressed because one or more lines are too long

14
compiled/js/timeline.js
Unescape View File

@ -4266,9 +4266,14 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
},
time: (new Date().getTime() - drag.time.start) * 10,
time_adjust: (new Date().getTime() - drag.time.start) * 10
};
},
multiplier = 3000;
drag_info.change.x = 3000 * (Math.abs(drag.pagex.end) - Math.abs(drag.pagex.start));
if (drag.touch) {
multiplier = 6000;
}
drag_info.change.x = multiplier * (Math.abs(drag.pagex.end) - Math.abs(drag.pagex.start));
drag_info.left_adjust = Math.round(drag_info.change.x / drag_info.time);
@ -6584,6 +6589,11 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
$timeline = VMM.getElement(timeline_id);
VMM.Lib.addClass(timeline_id, "vmm-timeline");
if (config.touch) {
VMM.Lib.addClass(timeline_id, "vmm-touch");
} else {
VMM.Lib.addClass(timeline_id, "vmm-notouch");
}
$feedback = VMM.appendAndGetElement($timeline, "<div>", "feedback", "");
slider = new VMM.Slider(timeline_id + " div.slider", config);

9
source/js/Slider/VMM.DragSlider.js
Unescape View File

@ -166,9 +166,14 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
},
time: (new Date().getTime() - drag.time.start) * 10,
time_adjust: (new Date().getTime() - drag.time.start) * 10
};
},
multiplier = 3000;
drag_info.change.x = 3000 * (Math.abs(drag.pagex.end) - Math.abs(drag.pagex.start));
if (drag.touch) {
multiplier = 6000;
}
drag_info.change.x = multiplier * (Math.abs(drag.pagex.end) - Math.abs(drag.pagex.start));
drag_info.left_adjust = Math.round(drag_info.change.x / drag_info.time);

5
source/js/VMM.Timeline.js
Unescape View File

@ -244,6 +244,11 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
$timeline = VMM.getElement(timeline_id);
VMM.Lib.addClass(timeline_id, "vmm-timeline");
if (config.touch) {
VMM.Lib.addClass(timeline_id, "vmm-touch");
} else {
VMM.Lib.addClass(timeline_id, "vmm-notouch");
}
$feedback = VMM.appendAndGetElement($timeline, "<div>", "feedback", "");
slider = new VMM.Slider(timeline_id + " div.slider", config);

81
source/less/VMM.Slider.less
Unescape View File

@ -33,6 +33,59 @@
}
}
/* HOVER ELEMENTS
================================================== */
.vmm-notouch {
.slider {
.nav-previous:hover, .nav-next:hover {
color: @color-dark-second;
cursor: pointer;
}
.nav-previous:hover {
.icon {
margin-left: @base-space - 5;
}
}
.nav-next:hover {
.icon {
margin-left: @feature-nav-width - @base-space - @feature-nav-icon-wh + 5;
}
}
.slider-item {
.content {
.content-container {
.media {
.media-container {
.wikipedia {
h4 a:hover {
color: @color-theme;
text-decoration: none;
}
}
}
}
.created-at:hover {
.opacity(100);
}
.googleplus {
.googleplus-content {
.googleplus-attachments {
a:hover {
text-decoration: none;
h5 {
text-decoration: underline;
}
}
}
}
}
}
}
}
}
}
/* SLIDER ELEMENTS
================================================== */
.slider {
@ -87,10 +140,6 @@
}
}
.nav-previous:hover, .nav-next:hover {
color: @color-dark-second;
cursor: pointer;
}
.nav-previous {
float: left;
text-align:left;
@ -103,11 +152,6 @@
padding-left:@base-space;
}
}
.nav-previous:hover {
.icon {
margin-left: @base-space - 5;
}
}
.nav-next {
float: right;
@ -121,12 +165,6 @@
padding-right:@base-space;
}
}
.nav-next:hover {
.icon {
margin-left: @feature-nav-width - @base-space - @feature-nav-icon-wh + 5;
}
}
}
@ -327,10 +365,6 @@
h4 a {
color: @color-feature-title;
}
h4 a:hover {
color: @color-theme;
text-decoration: none;
}
p {
font-size: 13px;
@ -431,9 +465,6 @@
float:right;
.opacity(25);
}
.created-at:hover {
.opacity(100);
}
.storify {
.created-at {
.icon-storify();
@ -484,12 +515,6 @@
h5 {
margin-bottom:5px;
}
a:hover {
text-decoration: none;
h5 {
text-decoration: underline;
}
}
div {
width: 50%;
padding-left: @base-space;

146
source/less/VMM.Timeline.TimeNav.less
Unescape View File

@ -3,6 +3,86 @@
UI for Navigation
------------------------------------------------------------------------------------------- */
/* HOVER ELEMENTS
================================================== */
.vmm-notouch {
.navigation {
.toolbar {
.zoom-in:hover, .zoom-out:hover, .back-home:hover {
color: @color-theme;
cursor: pointer;
.opacity(100);
}
}
.timenav {
.content {
.marker.active:hover {
cursor: default;
.flag, .flag-small {
.flag-content {
h3 {
color: @color-theme;
}
h4 {
color:@color-nav-title;
}
}
}
}
.marker:hover {
.line {
z-index:24;
background:@color-nav-title;
}
}
.marker {
.flag:hover, .flag-small:hover {
cursor: pointer;
.flag-content {
h3 {
color:@color-dark-second;
}
h4 {
color:@color-nav-date;
}
.thumbnail {
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}
}
}
.flag:hover {
.time-flag-active();
}
.flag-small:hover {
//.time-flag-small-active();
height:56px;
.time-flag-active();
.flag-content {
height:36px;
h3 {
margin-top:5px;
}
}
}
.flag-small.flag-small-last:hover {
.time-flag-small-active();
height:26px;
.flag-content {
height:14px;
h3 {
margin-top:4px;
}
}
}
}
}
}
}
}
.vmm-timeline {
.navigation {
@ -34,11 +114,6 @@
border: 1px solid @color-base;
padding:5px;
.opacity(50);
}
.zoom-in:hover, .zoom-out:hover, .back-home:hover {
color: @color-theme;
cursor: pointer;
.opacity(100);
}
.zoom-in {
.icon {
@ -202,25 +277,6 @@
}
}
.marker.active:hover {
cursor: default;
.flag, .flag-small {
.flag-content {
h3 {
color: @color-theme;
}
h4 {
color:@color-nav-title;
}
}
}
}
.marker:hover {
.line {
z-index:24;
background:@color-nav-title;
}
}
.marker {
position:absolute;
top: 0px;
@ -398,47 +454,7 @@
}
}
.flag:hover, .flag-small:hover {
cursor: pointer;
.flag-content {
h3 {
color:@color-dark-second;
}
h4 {
color:@color-nav-date;
}
.thumbnail {
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}
}
}
.flag:hover {
.time-flag-active();
}
.flag-small:hover {
//.time-flag-small-active();
height:56px;
.time-flag-active();
.flag-content {
height:36px;
h3 {
margin-top:5px;
}
}
}
.flag-small.flag-small-last:hover {
.time-flag-small-active();
height:26px;
.flag-content {
height:14px;
h3 {
margin-top:4px;
}
}
}
.flag.row1 {
z-index:25;

Write Preview
Loading…
Cancel
Save