Aspect changes
authorveltr
Wed, 04 Sep 2013 18:23:51 +0200
changeset 95 907a53a35a95
parent 94 bf8879a6470e
child 96 7d1c2c21d891
Aspect changes
timeline/css/timeline.css
timeline/js/timeline.js
--- a/timeline/css/timeline.css	Mon Aug 19 18:04:32 2013 +0200
+++ b/timeline/css/timeline.css	Wed Sep 04 18:23:51 2013 +0200
@@ -85,7 +85,7 @@
     content: "."; position: absolute; height: 1px; text-indent: -9999px;
     width: 200px; top: 0; background: #DEDEDE; z-index: 5;
     background: -moz-linear-gradient(to right, rgba(220,220,220,1) 80px, rgba(220,220,220,.1) 140px );
-    background: -webkit-linear-gradient(to right, rgba(220,220,220,1) 80%, rgba(220,220,220,.1) 140px );
+    background: -webkit-linear-gradient(left, rgba(220,220,220,1) 80px, rgba(220,220,220,.1) 140px );
 }
 
 .Tl-UniversLabels li:after {
@@ -103,7 +103,7 @@
 .Tl-Grid {
     position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden;
     background: -moz-linear-gradient(to right, #cccccc 0, #ffffff 3%, #ffffff 97%, #cccccc 100% );
-    background: -webkit-linear-gradient(to right, #cccccc 0, #ffffff 3%, #ffffff 97%, #cccccc 100% );
+    background: -webkit-linear-gradient(left, #cccccc 0, #ffffff 3%, #ffffff 97%, #cccccc 100% );
 }
 
 .Tl-Grid-Column {
@@ -123,11 +123,11 @@
 }
 
 .Tl-Occurrence {
-    width: 85px; height: 38px; cursor: pointer; border: 2px solid rgba(255,255,255,.9);
+    width: 38px; height: 38px; cursor: pointer; border: 2px solid rgba(255,255,255,.9);
 }
 
 .Tl-Occurrence img {
-    max-width: 100%; max-height: 100%; opacity: .6;
+    max-width: 100%; max-height: 100%;
 }
 
 .Tl-Editing {
@@ -151,41 +151,18 @@
 }
 
 .Tl-Overlay {
-    position: absolute; left: -105px; width: 210px; z-index: 6;
-}
-
-.Tl-Overlay-Up .Tl-Overlay {
-     bottom: 0;
-}
-
-.Tl-Overlay-Down .Tl-Overlay {
-     top: 22px;
+    position: absolute; left: -105px; width: 210px; z-index: 6; top: 22px;
 }
 
 .Tl-Overlay-Main {
     width: 190px;
-}
-
-.Tl-Overlay-Up .Tl-Overlay-Main {
-    background: url(../img/tooltip.png) top; padding: 10px 10px 0;
-}
-
-.Tl-Overlay-Down .Tl-Overlay-Main {
     background: url(../img/tooltip-down.png) bottom; padding: 0 10px 10px;
 }
 
-.Tl-Overlay-Up .Tl-Overlay-Tip-Bottom  {
-    width: 210px; height: 20px; background: url(../img/tooltip.png) bottom;
-}
-
-.Tl-Overlay-Down .Tl-Overlay-Tip-Top {
+.Tl-Overlay-Tip-Top {
     width: 210px; height: 20px; background: url(../img/tooltip-down.png) top;
 }
 
-.Tl-Overlay-Up .Tl-Overlay-Tip-Top, .Tl-Overlay-Down .Tl-Overlay-Tip-Bottom {
-    display: none;
-}
-
 h3.Tl-Tooltip-Title {
     font-size: 14px; font-weight: bold; color: #000080; margin: 0;
 }
--- a/timeline/js/timeline.js	Mon Aug 19 18:04:32 2013 +0200
+++ b/timeline/js/timeline.js	Wed Sep 04 18:23:51 2013 +0200
@@ -185,7 +185,7 @@
     + '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul>'
     + '<div class="Tl-MainPart"><div class="Tl-Occurrences"></div>'
     + '</div>'
-    + '<div class="Tl-Overlay-Container"><div class="Tl-Overlay-Box"><div class="Tl-Overlay"><div class="Tl-Overlay-Tip-Top"></div><div class="Tl-Overlay-Main"></div><div class="Tl-Overlay-Tip-Bottom"></div></div></div></div></div></div>'
+    + '<div class="Tl-Overlay-Container"><div class="Tl-Overlay-Box"><div class="Tl-Overlay"><div class="Tl-Overlay-Tip-Top"></div><div class="Tl-Overlay-Main"></div></div></div></div></div></div>'
     + '<div class="Tl-Details"></div>'
     
 Tlns.Templates.Univers = '<div class="Tl-UniversText">{{title}}</div>';
@@ -195,9 +195,7 @@
     + '{{#image}}<img src="{{image}}" />{{/image}}'
     + '</div>{{/occurrences}}';
 
-Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}} &mdash; {{translated_status}} &mdash; {{format}}</p>'
-    + '<p class="Tl-Tooltip-Description">{{description}}</p>'
-//    + '<p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'
+Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3>';
 
 Tlns.Templates.OccurrenceDetails = '<div class="Tl-Detail"><img class="Tl-Detail-Image" src="{{detail_image}}" />'
     + '<h2 class="Tl-Detail-Title">{{title}}</h2><p class="Tl-Detail-Description">{{detail_description}}</p>'
@@ -441,7 +439,9 @@
         case "Cms\\Previously":
         case "Cms\\Chapter":
         case "Cms\\Article":
+        case "Cms\\Video":
         case "Cms\\Poll":
+        case "Cms\\Rule":
         case "Cms\\CallWitness":
         case "Cms\\CallCharacter":
         case "Cms\\SweetCadaver":
@@ -455,10 +455,8 @@
     return _occurrence;
 }
 
-Tlns.Classes.Timeline.prototype.showTooltip = function(_x, _y, _html, _isUp) {
+Tlns.Classes.Timeline.prototype.showTooltip = function(_x, _y, _html) {
     this.$.find('.Tl-Overlay-Box')
-        .removeClass(_isUp ? 'Tl-Overlay-Down' : 'Tl-Overlay-Up')
-        .addClass(_isUp ? 'Tl-Overlay-Up' : 'Tl-Overlay-Down')
         .show()
         .css({
             left: _x + "px",
@@ -478,7 +476,7 @@
         _occ.x = _this.current_scale * (_occ.date - _this.start_time);
         _occ.y = _occ.univers.y;
     });
-    var minT = this.timeFromX(-85),
+    var minT = this.timeFromX(-38),
         minI = this.timescales[this.level].min_importance;
     var _visible = _(this.occurrences).filter(function(_occ) {
         return (_occ.date >= minT && _occ.date <= _this.end_time  && _occ.status && (_occ.importance >= minI));
@@ -532,9 +530,8 @@
         if (typeof _id !== "undefined") {
             var _occurrence = _this.getOccurrence(_id);
             if (!_this.is_dragging) {
-                var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence),
-                    isup = (_event.pageY - _this.dragging_bounds.top) >= (.4 * _this.main_height);
-                _this.showTooltip(_occurrence.x + 42, _occurrence.y + (isup ? 10 : 20), _html,  isup);
+                var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence);
+                _this.showTooltip(_occurrence.x + 19, _occurrence.y + 20, _html);
             }
         }
     }).mouseout(function() {
@@ -593,16 +590,18 @@
     switch(_data.__CLASS__) {
         case "Cms\\Previously":
         case "Cms\\Chapter":
+        case "Cms\\Video":
             this.univers_id = 0;
         break;
         case "Cms\\Article":
             this.univers_id = 1;
         break;
         case "Cms\\Poll":
+        case "Cms\\Rule":
         case "Cms\\CallWitness":
-        case "Cms\\CallCharacter":
             this.univers_id = 2;
         break;
+        case "Cms\\CallCharacter":
         case "Cms\\SweetCadaver":
             this.univers_id = 3;
         break;
@@ -626,7 +625,7 @@
     }
     this.format = this.timeline.class_labels[this.type];
     if (_data.contentHasMedias && _data.contentHasMedias.length) {
-        this.image = _data.contentHasMedias[0].media.cinema.replace(/cinema\/[\d]+\/[\d]+/,'cinema/85/38');
+        this.image = _data.contentHasMedias[0].media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/38/38');
         this.detail_image = _data.contentHasMedias[0].media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/135/135');
     }
     this.translated_status = Tlns.Defaults.Timeline.statuses[this.status];