Cleanups.

evoluteur · Mar 24, 2024 · cd6294f · cd6294f
1 parent 53ab839
commit cd6294f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 37 deletions.
diff --git a/css/d3-table-cards.css b/css/d3-table-cards.css
@@ -1,40 +1,41 @@
 /* https://github.com/evoluteur/d3-table-cards */
 
-.holder{
-	position: relative;
+.holder {
+  position: relative;
+  margin-top: 20px;
 }
 
-.header{
-	position: absolute;
-	padding: 10px;
-	background-color: #eee;
-	border: solid 2px silver;
-	left: 0px; 
-	top: 0px; 
-    width: 574px;
-    height: 19px;
-}
-.header > div{
-	float: left;
-	width: 194px;
-	line-height: 18px;
-}
-.header.sortable > div{
-	cursor: pointer;
+.header {
+  position: absolute;
+  padding: 10px;
+  background-color: #eee;
+  border: solid 2px silver;
+  left: 0px;
+  top: 0px;
+  width: 574px;
+  height: 19px;
+}
+.header > div {
+  float: left;
+  width: 194px;
+  line-height: 18px;
+}
+.header.sortable > div {
+  cursor: pointer;
 }
 .item {
-	position: absolute;
-	border: solid 1px silver;
-	background-color: white;
-	overflow: hidden;
+  position: absolute;
+  border: solid 1px silver;
+  background-color: white;
+  overflow: hidden;
 }
-.item > div{
-	position: absolute;
-	line-height: 18px;
+.item > div {
+  position: absolute;
+  line-height: 18px;
 }
-.item > div:first-child{
-	font-weight: bold;
+.item > div:first-child {
+  font-weight: bold;
 }
-.c1{
-	font-weight: bold;
+.c1 {
+  font-weight: bold;
 }
diff --git a/index.html b/index.html
@@ -33,8 +33,8 @@
       content="d3, d3v4, js, table, card, cards, view, javascript, animation, transition, gemstones"
     />
   </head>
-  <body onresize="redraw()">
-    <h1>Gemstones Properties</h1>
+  <body onresize="redraw()" onload="render()">
+    <h1>D3-Table-Cards</h1>
     <div id="opts">
       <div>
         View: <a href="javascript:redraw('table')">Table</a> /
@@ -45,17 +45,17 @@ <h1>Gemstones Properties</h1>
         <a href="javascript:sort('chakra')">Chakra</a>
       </div>
     </div>
+    <p>
+      This demo shows animations during transition between cards and table views
+      or sorting. Click on the links in the top-right corner to see it in
+      action.
+    </p>
     <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>