From c06d00a3efcd1154f72b91daae70f4c18c438ecb Mon Sep 17 00:00:00 2001 From: jos Date: Fri, 2 May 2014 11:06:03 +0200 Subject: [PATCH] Some css improvements --- dist/vis.css | 36 ++++-------------------- dist/vis.js | 6 ++-- docs/timeline.html | 2 +- src/timeline/component/css/item.css | 31 ++++---------------- src/timeline/component/css/itemset.css | 1 - src/timeline/component/css/labelset.css | 2 -- src/timeline/component/css/panel.css | 2 -- src/timeline/component/item/ItemPoint.js | 2 +- 8 files changed, 17 insertions(+), 65 deletions(-) diff --git a/dist/vis.css b/dist/vis.css index 17b2cf75..1f2c2de7 100644 --- a/dist/vis.css +++ b/dist/vis.css @@ -7,7 +7,6 @@ overflow: hidden; border: 1px solid #bfbfbf; - -moz-box-sizing: border-box; box-sizing: border-box; /* FIXME: there is an issue with the height of the items when panel height is animated @@ -20,7 +19,6 @@ position: absolute; overflow: hidden; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -39,7 +37,6 @@ overflow: hidden; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -50,7 +47,6 @@ width: 100%; color: #4d4d4d; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -75,7 +71,6 @@ padding: 0; margin: 0; - -moz-box-sizing: border-box; box-sizing: border-box; /* FIXME: get transition working for rootpanel and itemset @@ -114,6 +109,7 @@ position: absolute; color: #1A1A1A; border-color: #97B0F8; + border-width: 1px; background-color: #D5DDF6; display: inline-block; padding: 5px; @@ -136,50 +132,30 @@ .vis.timeline .item.point.selected { background-color: #FFF785; - z-index: 999; -} -.vis.timeline .item.point.selected .dot, -.vis.timeline .item.dot.selected { - border-color: #FFC200; -} - -.vis.timeline .item.cluster { - /* TODO: use another color or pattern? */ - background: #97B0F8 url('img/cluster_bg.png'); - color: white; -} -.vis.timeline .item.cluster.point { - border-color: #D5DDF6; } .vis.timeline .item.box { text-align: center; border-style: solid; - border-width: 1px; - border-radius: 5px; - -moz-border-radius: 5px; /* For Firefox 3.6 and older */ + border-radius: 2px; } .vis.timeline .item.point { background: none; } -.vis.timeline .dot, .vis.timeline .item.dot { - padding: 0; - border: 5px solid #97B0F8; position: absolute; - border-radius: 5px; - -moz-border-radius: 5px; /* For Firefox 3.6 and older */ + padding: 0; + border-width: 4px; + border-style: solid; + border-radius: 4px; } .vis.timeline .item.range, .vis.timeline .item.rangeoverflow{ border-style: solid; - border-width: 1px; border-radius: 2px; - -moz-border-radius: 2px; /* For Firefox 3.6 and older */ - -moz-box-sizing: border-box; box-sizing: border-box; } diff --git a/dist/vis.js b/dist/vis.js index f6cf32e1..95a30701 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -5,7 +5,7 @@ * A dynamic, browser-based visualization library. * * @version 0.7.5-SNAPSHOT - * @date 2014-05-01 + * @date 2014-05-02 * * @license * Copyright (C) 2011-2014 Almende B.V, http://almende.com @@ -6242,7 +6242,6 @@ ItemPoint.prototype.repaint = function repaint() { // dot at start dom.dot = document.createElement('div'); - dom.dot.className = 'dot'; dom.point.appendChild(dom.dot); // attach this item as attribute @@ -6285,6 +6284,7 @@ ItemPoint.prototype.repaint = function repaint() { if (this.className != className) { this.className = className; dom.point.className = 'item point' + className; + dom.dot.className = 'item dot' + className; this.dirty = true; } @@ -7158,7 +7158,7 @@ function Timeline (container, items, options) { orientation: 'bottom', direction: 'horizontal', // 'horizontal' or 'vertical' autoResize: true, - stacking: true, + stack: true, editable: { updateTime: false, diff --git a/docs/timeline.html b/docs/timeline.html index 26c12b91..31b4adae 100644 --- a/docs/timeline.html +++ b/docs/timeline.html @@ -568,7 +568,7 @@ var options = { stack Boolean true - If true (default), items will be stacked on top of each other such that they are not overlapping. + If true (default), items will be stacked on top of each other such that they do not overlap. diff --git a/src/timeline/component/css/item.css b/src/timeline/component/css/item.css index 8e2cfbc3..2075b92b 100644 --- a/src/timeline/component/css/item.css +++ b/src/timeline/component/css/item.css @@ -3,6 +3,7 @@ position: absolute; color: #1A1A1A; border-color: #97B0F8; + border-width: 1px; background-color: #D5DDF6; display: inline-block; padding: 5px; @@ -25,50 +26,30 @@ .vis.timeline .item.point.selected { background-color: #FFF785; - z-index: 999; -} -.vis.timeline .item.point.selected .dot, -.vis.timeline .item.dot.selected { - border-color: #FFC200; -} - -.vis.timeline .item.cluster { - /* TODO: use another color or pattern? */ - background: #97B0F8 url('img/cluster_bg.png'); - color: white; -} -.vis.timeline .item.cluster.point { - border-color: #D5DDF6; } .vis.timeline .item.box { text-align: center; border-style: solid; - border-width: 1px; - border-radius: 5px; - -moz-border-radius: 5px; /* For Firefox 3.6 and older */ + border-radius: 2px; } .vis.timeline .item.point { background: none; } -.vis.timeline .dot, .vis.timeline .item.dot { - padding: 0; - border: 5px solid #97B0F8; position: absolute; - border-radius: 5px; - -moz-border-radius: 5px; /* For Firefox 3.6 and older */ + padding: 0; + border-width: 4px; + border-style: solid; + border-radius: 4px; } .vis.timeline .item.range, .vis.timeline .item.rangeoverflow{ border-style: solid; - border-width: 1px; border-radius: 2px; - -moz-border-radius: 2px; /* For Firefox 3.6 and older */ - -moz-box-sizing: border-box; box-sizing: border-box; } diff --git a/src/timeline/component/css/itemset.css b/src/timeline/component/css/itemset.css index 0864aedf..f4045a02 100644 --- a/src/timeline/component/css/itemset.css +++ b/src/timeline/component/css/itemset.css @@ -4,7 +4,6 @@ padding: 0; margin: 0; - -moz-box-sizing: border-box; box-sizing: border-box; /* FIXME: get transition working for rootpanel and itemset diff --git a/src/timeline/component/css/labelset.css b/src/timeline/component/css/labelset.css index 0daa809f..e316ad84 100644 --- a/src/timeline/component/css/labelset.css +++ b/src/timeline/component/css/labelset.css @@ -5,7 +5,6 @@ overflow: hidden; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -16,7 +15,6 @@ width: 100%; color: #4d4d4d; - -moz-box-sizing: border-box; box-sizing: border-box; } diff --git a/src/timeline/component/css/panel.css b/src/timeline/component/css/panel.css index 83ea8399..d541096e 100644 --- a/src/timeline/component/css/panel.css +++ b/src/timeline/component/css/panel.css @@ -4,7 +4,6 @@ overflow: hidden; border: 1px solid #bfbfbf; - -moz-box-sizing: border-box; box-sizing: border-box; /* FIXME: there is an issue with the height of the items when panel height is animated @@ -17,7 +16,6 @@ position: absolute; overflow: hidden; - -moz-box-sizing: border-box; box-sizing: border-box; } diff --git a/src/timeline/component/item/ItemPoint.js b/src/timeline/component/item/ItemPoint.js index bccdebfe..43651b1c 100644 --- a/src/timeline/component/item/ItemPoint.js +++ b/src/timeline/component/item/ItemPoint.js @@ -65,7 +65,6 @@ ItemPoint.prototype.repaint = function repaint() { // dot at start dom.dot = document.createElement('div'); - dom.dot.className = 'dot'; dom.point.appendChild(dom.dot); // attach this item as attribute @@ -108,6 +107,7 @@ ItemPoint.prototype.repaint = function repaint() { if (this.className != className) { this.className = className; dom.point.className = 'item point' + className; + dom.dot.className = 'item dot' + className; this.dirty = true; }