UI tweaks.

Author: evoluteur

README.md

@@ -7,4 +7,4 @@ This code uses HTML (with absolute positioning) rather than SVG, and has no depe
 Check out [the demo](https://evoluteur.github.io/d3-table-cards/).
 
 
-(c) 2018 [Olivier Giulieri](https://evoluteur.github.io/) with [MIT license](http://github.com/evoluteur/d3-table-cards/blob/master/LICENSE.md).
+(c) 2019 [Olivier Giulieri](https://evoluteur.github.io/) with [MIT license](http://github.com/evoluteur/d3-table-cards/blob/master/LICENSE.md).

d3-table-cards.css

@@ -8,7 +8,7 @@
 	position: absolute;
 	padding: 10px;
 	background-color: #eee;
-	border: solid 1px silver;
+	border: solid 2px silver;
 	left: 0px; 
 	top: 0px; 
     width: 574px;
@@ -26,11 +26,15 @@
 	position: absolute;
 	border: solid 1px silver;
 	background-color: white;
+	overflow: hidden;
 }
 .item > div{
 	position: absolute;
 	line-height: 18px;
 }
+.item > div:first-child{
+	font-weight: bold;
+}
 .c1{
 	font-weight: bold;
 }

d3-table-cards.js

@@ -4,10 +4,10 @@
 var layoutInfo = {
 	table: {
 		// ---- row position & size
-		top: function(d, i){return 40+i*29+'px'},
+		top: function(d, i){return 40+i*31+'px'},
 		left: 0,
-		height: 28,
-		width: 590,
+		height: 30,
+		width: 594,
 		// ---- row border-radius
 		radius: 0,
 		// ---- table header
@@ -23,12 +23,12 @@ var layoutInfo = {
 	},
 	cards: {
 		// ---- card position & size
-		top: function(d, i){return Math.floor(i/cardsPerRow)*90+'px'},
-		left: function(d, i){return (i%cardsPerRow)*200+'px'},
-		height: 80,
-		width: 188,
+		top: function(d, i){return Math.floor(i/cardsPerRow)*94+'px'},
+		left: function(d, i){return (i%cardsPerRow)*210+'px'},
+		height: 84,
+		width: 200,
 		// ---- card border-radius
-		radius: '5px',
+		radius: '4px',
 		// ---- table header (hidden)
 		headerOpacity: 0,
 		headerLeft: -650,
@@ -37,21 +37,21 @@ var layoutInfo = {
 		c1Left: 10,
 		c1FontSize: 18,
 		// ---- line 2
-		c2Top: 37,
+		c2Top: 38,
 		c2Left: 10,
 	}
 };
 
 var selector = '.holder';
 var curStyle = 'cards'; // "table" or "cards"
-var animTime = 650;
+var animTime = 600;
 
 var holder;
 var cardsPerRow = 3;
 
 function getLayoutInfo(style){
-	var width = window.innerWidth -20;
-	cardsPerRow = Math.floor(width/200);
+	var width = window.innerWidth -40;
+	cardsPerRow = Math.floor(width/210);
 	return layoutInfo[style];
 }
 
@@ -127,8 +127,8 @@ function layout(skipAnim, skipChildren){
 			.style('left', l.headerLeft);
 
 		var totalHeight = 20+(curStyle==='cards' ?
-				Math.ceil(data.length/cardsPerRow)*90
-				 : 40+data.length*29);
+				Math.ceil(data.length/cardsPerRow)*94
+				 : 40+data.length*31);
 
 		holder.transition(t)
 			.style('height', totalHeight);

demo.css

@@ -1,80 +1,61 @@
 
 body{
-	font-family: Arial, Helvetica, sans-serif;
-	margin: 20px;
-    min-height: 1250px;
-
-  color: black;
-  background-color: white; 
-  background-image: url("bg.gif");
+	font-family: 'Roboto',arial;
+	min-height: 1250px;
+	margin: 0;
+	padding: 20px 20px 20px 30px;
+	color: black;
+	background-color: white; 
 }
+
 h1{
 	margin-bottom: 40px;
 }
 a {
-  text-decoration: none;
-  background-color: rgba(187,239,253,0.3);
-  border-bottom: 1px solid rgba(0,0,0,0.2);
-  color: #1a1a1a;
+	text-decoration: none;
+    color: #259DCB;
 }
 a:hover {
-  background-color: #bbeffd;
-  border-bottom-color: #1a1a1a;
+	text-decoration: underline;
+	color: navy;
 }
 
 #opts{
 	position: absolute;
 	top: 10px;
 	right: 20px;
 	background-color: white;
+	color: grey;
 }
 #opts > div{
 	padding:5px;
 }
 
-/* gemstones */
 .chakra1{
-	border-left: solid 7px #f44336;
-}
-.chakra2{
-	border-left: solid 7px #ff9800;
-}
-.chakra3{
-	border-left: solid 7px #ffc107;
-}
-.chakra4{
-	border-left: solid 7px #4caf50;
-}
-.chakra5{
-	border-left: solid 7px #00bcd4;
-}
-.chakra6{
-	border-left: solid 7px #3f51b5;
-}
-.chakra7{
-	border-left: solid 7px #9c27b0;
-}
-/*
-.chakra1:hover{
 	background-color: #ffebee;
+	border: solid 2px #f44336;
 }
-.chakra2:hover{
+.chakra2{
 	background-color: #fff3e0;
+	border: solid 2px #ff9800;
 }
-.chakra3:hover{
+.chakra3{
 	background-color: #fff8e1;
+	border: solid 2px #ffc107;
 }
-.chakra4:hover{
+.chakra4{
 	background-color: #e8f5e9;
+	border: solid 2px #4caf50;
 }
-.chakra5:hover{
+.chakra5{
 	background-color: #e0f7fa;
+	border: solid 2px #00bcd4;
 }
-.chakra6:hover{
+.chakra6{
 	background-color: #e8eaf6;
+	border: solid 2px #3f51b5;
 }
-.chakra7:hover{
+.chakra7{
 	background-color: #f3e5f5;
+	border: solid 2px #9c27b0;
 }
-*/
-

index.html

@@ -12,9 +12,7 @@
     <meta name="keywords" content="d3 d3v4 js table card cards view javascript animation gemstones">
 </head>
 <body onresize="redraw()">
-
 	<h1>Gemstones Properties</h1>
-
 	<div id="opts">
 		<div>View:
 			<a href="javascript:redraw('table')">Table</a> /
@@ -25,26 +23,26 @@ <h1>Gemstones Properties</h1>
 			<a href="javascript:sort('chakra')">Chakra</a>
 		</div>
 	</div>
-
 	<div class="holder">
 		<div class="header sortable">
 			<div onclick="sort('name')">Gemstone</div>
 			<div onclick="sort('chakra')">Spiritual properties</div>
 		</div>
 	</div>
-
 <script>
 window.onload = function(){
 	render();
 }
 </script>
 
+<p><br/></p>
+
 <p>Code available at <a href="https://github.com/evoluteur/d3-table-cards">GitHub</a> under the MIT license.</p>
 
-<p>Data from <a href="https://smile.amazon.com/dp/1844090671" target="crystals">Healing Crystals</a> by 
+<p>Gemstones properties from <a href="https://smile.amazon.com/dp/1844090671" target="crystals">Healing Crystals</a> by 
 Michael Gienger.</p>
 
-<p>&#169; 2018 <a href="https://evoluteur.github.io/">Olivier Giulieri</a>.</p>
+<p>&#169; 2019 <a href="https://evoluteur.github.io/">Olivier Giulieri</a>.</p>
 
 </body>
 </html>

package.json

@@ -1,14 +1,26 @@
 {
   "name": "d3-table-cards",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Table/Cards views using D3.js for animated transitions.",
   "author": "Olivier Giulieri (https://evoluteur.github.io/)",
+  "copyright": "(c) 2019 Olivier Giulieri",
   "repository": {
     "type": "git",
     "url": "https://github.com/evoluteur/d3-table-cards.git"
   },
   "license": "MIT",
   "homepage": "https://github.com/evoluteur/d3-table-cards",
   "bugs": "https://github.com/evoluteur/d3-table-cards/issues",
-  "keywords": "d3 d3v4 transition javascript animation js table card cards view"
+  "keywords": [
+    "d3", 
+    "d3v4", 
+    "transition", 
+    "animation", 
+    "list", 
+    "table", 
+    "cards", 
+    "d3js", 
+    "javascript", 
+    "html"
+  ]
 }