Skip to content
Browse files

new styles

  • Loading branch information...
1 parent e67719e commit 86163baee0a7d5056add57676997b4035a9ed99c techtangents committed
Showing with 102 additions and 220 deletions.
  1. +0 −95 css/Treemap.css
  2. +0 −97 css/base.css
  3. +83 −0 css/tiles.css
  4. +5 −6 fewtile.html
  5. +12 −20 guts/board.js
  6. +2 −2 lib/textfill.js
View
95 css/Treemap.css
@@ -1,95 +0,0 @@
-.tile {
-
-/* Firefox */
-display:-moz-box;
--moz-box-orient:horizontal;
--moz-box-pack:center;
--moz-box-align:center;
-
-/* Safari and Chrome */
-display:-webkit-box;
--webkit-box-orient:horizontal;
--webkit-box-pack:center;
--webkit-box-align:center;
-
-/* W3C */
-display:box;
-box-orient:horizontal;
-box-pack:center;
-box-align:center;
-}
-
-.passNode {
-}
-
-.failNode {
-}
-
-.disabled {
-}
-
-.jollyRoger {
- font-size:50px;
-}
-
-.loading, .noJobs, .allJobsPassing {
- font-size:100px;
-}
-
-#infovis {
-}
-
-.node {
- color:#fff;
- overflow:hidden;
- vertical-align:middle;
-}
-
-.tip {
- color: #fff;
- width: 139px;
- background-color: black;
- opacity:0.9;
- filter:alpha(opacity=90);
- font-size:10px;
- font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
-}
-
-.album {
- width:100px;
- margin:3px;
-}
-
-
-#id-list table {
- margin-top:2px;
-}
-
-#back {
- margin:10px 40px;
-}
-
-/* white */
-.white {
- color: #606060;
- border: solid 1px #b7b7b7;
- background: #fff;
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
- background: -moz-linear-gradient(top, #fff, #ededed);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
-}
-
-.white:hover {
- background: #ededed;
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
- background: -moz-linear-gradient(top, #fff, #dcdcdc);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
-}
-
-.white:active {
- color: #999;
- background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
- background: -moz-linear-gradient(top, #ededed, #fff);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
-}
-
View
97 css/base.css
@@ -1,97 +0,0 @@
-html, body {
- margin:0;
- padding:0;
- font-family: "Lucida Grande", Verdana;
- text-align: center;
- background-color:#F2F2F2;
-}
-
-table {
- margin-top:-10px;
- margin-left:7px;
-}
-
-h4 {
- font-size:1.1em;
- text-decoration:none;
- font-weight:normal;
- color:#23A4FF;
-}
-
-a {
- color:#23A4FF;
-}
-
-#container {
- position:absolute;
- top:0;
- bottom:0;
- left:0;
- right:0;
- width: 100%;
-}
-
-#left-container,
-#right-container,
-#center-container {
- height:600px;
- position:absolute;
- top:0;
-}
-
-#left-container, #right-container {
- width:200px;
- color:#686c70;
- text-align: left;
- overflow: auto;
- background-color:#fff;
- background-repeat:no-repeat;
- border-bottom:1px solid #ddd;
-}
-
-#left-container {
- left:0;
- background-image:url('col2.png');
- background-position:center right;
- border-left:1px solid #ddd;
-
-}
-
-#right-container {
- right:0;
- background-image:url('col1.png');
- background-position:center left;
- border-right:1px solid #ddd;
-}
-
-#right-container h4{
- text-indent:8px;
-}
-
-#center-container {
- width:600px;
- left:200px;
- background-color:#1a1a1a;
- color:#ccc;
-}
-
-.text {
- margin: 7px;
-}
-
-#inner-details {
- font-size:24pt;
- list-style:none;
- margin:7px;
-}
-
-#infovis {
- position:absolute;
- width:100%;
- top:0;
- bottom:0;
- left:0;
- right:0;
- overflow:hidden;
-}
-
View
83 css/tiles.css
@@ -0,0 +1,83 @@
+html, body {
+ margin:0;
+ padding:0;
+ border:0;
+ font-family: sans-serif;
+ text-align: center;
+}
+
+#container {
+ margin:0;
+ padding:0;
+ border:0;
+ position:absolute;
+ top:0;
+ bottom:0;
+ left:0;
+ right:0;
+ width: 100%;
+ overflow:hidden;
+}
+
+.node {
+ /* Firefox */
+ display:-moz-box;
+ -moz-box-orient:horizontal;
+ -moz-box-pack:center;
+ -moz-box-align:center;
+
+ /* Safari and Chrome */
+ display:-webkit-box;
+ -webkit-box-orient:horizontal;
+ -webkit-box-pack:center;
+ -webkit-box-align:center;
+
+ /* W3C */
+ display:box;
+ box-orient:horizontal;
+ box-pack:center;
+ box-align:center;
+
+ /* other styles */
+ border: 10px solid black;
+ margin: 0;
+ padding: 0;
+
+ color: #ffffff;
+}
+
+.node span {
+ border:0;
+ margin:0;
+ padding:0;
+}
+
+.passNode, .allJobsPassing {
+ background-color: #308A48;
+}
+
+.failNode, .noJobsNode {
+ background-color: #BD3333;
+}
+
+.disabledNode {
+ color: #eeeeee;
+ background-color: #999999;
+}
+
+.jollyRogerNode {
+ background-color: black;
+}
+
+.loadingNode {
+ background-color: blue;
+}
+
+.buildingNode {
+ background-color: yellow;
+}
+
+.failedRebuildingNode {
+ background-color: #9C6425;
+}
+
View
11 fewtile.html
@@ -4,8 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>fewtile</title>
-<link type="text/css" href="css/base.css" rel="stylesheet" />
-<link type="text/css" href="css/Treemap.css" rel="stylesheet" />
+<link type="text/css" href="css/tiles.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="lib/underscore-min.js"></script>
<script language="javascript" type="text/javascript" src="lib/jquery-1.7.1.min.js"></script>
@@ -32,12 +31,12 @@
var run = function(source, delay) { return function() {
$.resize.delay = delay;
var jollyRoger = "&#x2620;";
- var chrome = '<div id="container"><div id="infovis"></div></div>';
+ var chrome = '<div id="container"></div>';
$(document.body).append(chrome);
var duration = 400;
- var board = createBoard('infovis', duration, false, source.clickUrl, jollyRoger);
- $("#infovis").resize(function() {
- var e = $("#infovis");
+ var board = createBoard('container', duration, false, source.clickUrl, jollyRoger);
+ $("#container").resize(function() {
+ var e = $(this);
board.resize(e.width(), e.height());
});
createController(board, source, duration * 2, 6000, jollyRoger);
View
32 guts/board.js
@@ -5,9 +5,12 @@ var createBoard = function(elementId, duration, animate, clickUrl, jollyRoger) {
overridable: true
},
Canvas: {
- useCanvas: true,
+ useCanvas: false,
withLabels: false
},
+ Edge: {
+ lineWidth: 20
+ },
injectInto: elementId,
titleHeight: 0,
animate: animate,
@@ -16,11 +19,10 @@ var createBoard = function(elementId, duration, animate, clickUrl, jollyRoger) {
duration: duration,
onCreateLabel: function(domElement, node) {
var tile = $(domElement);
- var span = $("<span style='margin:0;border:0;padding:0;'>" + node.name + "</span>");
+ var span = $("<span>" + node.name + "</span>");
tile.append(span);
- tile.addClass('tile');
var data = node.data;
- span.addClass(data.cssClass);
+ tile.addClass(data.cssClass);
tile.resize(function() {
span.textfill();
});
@@ -49,59 +51,50 @@ var createBoard = function(elementId, duration, animate, clickUrl, jollyRoger) {
var styles = {
pass: {
- "$color": "green",
"$area": 10,
"cssClass": "passNode",
clickable: true
},
fail: {
- "$color": "red",
"$area": 100,
"cssClass": "failNode",
clickable: true
},
disabled: {
- "$color": "#999999",
"$area": 5,
"cssClass": "disabledNode",
clickable: true
},
building: {
- "$color": "yellow",
"$area": 10,
"cssClass": "buildingNode",
clickable: true
},
failed_rebuilding: {
- "$color": "orange",
"$area": 100,
"cssClass": "buildingNode",
clickable: true
},
"No jobs": {
- "$color": "red",
"$area": 100,
- "cssClass": "noJobs",
+ "cssClass": "noJobsNode",
clickable: false
},
"All jobs passing": {
- "$color": "green",
"$area": 100,
- "cssClass": "allJobsPassing",
+ "cssClass": "allJobsPassingNode",
clickable: false
},
loading: {
- "$color": "blue",
"$area": 100,
- "cssClass": "loading",
+ "cssClass": "loadingNode",
clickable: false
}
};
styles[jollyRoger] = {
- "$color": "#000000",
"$area": 100,
- "cssClass": "jollyRoger",
+ "cssClass": "jollyRogerNode",
clickable: false
};
@@ -125,9 +118,8 @@ var createBoard = function(elementId, duration, animate, clickUrl, jollyRoger) {
var n = tm.graph.getNode(id);
if (n === undefined) throw "Node not found: " + id;
n.data = s;
- var l = tm.labels.getLabel(id);
- var td = $(l).find("span");
- setClass(td, s.cssClass);
+ var l = $(tm.labels.getLabel(id));
+ setClass(l, s.cssClass);
};
var createNode = function(node) {
View
4 lib/textfill.js
@@ -62,8 +62,8 @@ Known issues:
var minFontSize = 2;
var maxFontSize = 2000;
- var minScale = 0.95;
- var maxScale = 0.98;
+ var minScale = 0.85;
+ var maxScale = 0.90;
var grossDelta = 0.2;
var grossTweak = 0.95;

0 comments on commit 86163ba

Please sign in to comment.
Something went wrong with that request. Please try again.