refactor -- add words and rows, edit tag text

Author: hmsklee

css/style.css

@@ -14,15 +14,15 @@ svg text {
   user-select: none;
 }
 
-#header {
+/*#header {
   position:absolute;
   top:0;
   left:0;
   background:#333;
   color:white;
   width:calc( 100% - 20px );
   padding:10px;
-}
+}*/
 
 #drawing {
   margin-top:30px;
@@ -86,7 +86,7 @@ svg text {
   background:rgba(200,200,200,0.5);
   margin-top:5px;
   width:100px;
-  height:100px;  
+  height:100px;
 }
 
 .noselect {
@@ -144,4 +144,4 @@ svg text {
 }
 .word:hover .word--handle {
   opacity: 0.7;
-}
+}

css/style2.css

@@ -0,0 +1,109 @@
+body {
+  margin:0;
+  -moz-osx-font-smoothing:grayscale;
+  -webkit-font-smoothing:antialiased;
+  font-family: BrownPro, Brown, futura, helvetica, arial, sans-serif;
+  font-size: 11px;
+  min-height:100%;
+  overflow-y: scroll;
+}
+
+svg text {
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+#header {
+  position:fixed;
+  background:black;
+  width:100%;
+  height:40px;
+  top:0;
+}
+
+#tooltip {
+  width:175px;
+  background:white;
+  margin-bottom:10px;
+  box-shadow: 0 0 10px #555;
+  border-radius:3px;
+  position:absolute;
+  padding: 8px 0;
+  font: 14px helvetica, arial, sans-serif;
+  font-weight: 400;
+  color:#444;
+  display:none;
+}
+#tooltip.active {
+  display:block;
+}
+#tooltip p {
+  padding: 4px 14px;
+  margin:0;
+  cursor:default;
+}
+#tooltip p:hover {
+  background-color: rgb(77, 157, 250);
+  color:white;
+}
+#tooltip hr {
+  border-width: 0;
+  border-top:1px solid #ddd;
+}
+
+
+/* svg styles for main vis */
+#main {
+  margin-top:40px;
+  position:relative;
+}
+#main svg {
+  background-color: hsl(40,10%,90%);
+}
+.row-drag {
+  stroke-width:2;
+  stroke-dasharray: 2,1;
+  stroke:rgba(100,100,100,0.3);
+  transition: stroke 300ms ease;
+  cursor: row-resize;
+}
+.row-drag:hover {
+  stroke-dasharray:none;
+  stroke:rgba(100,100,100,0.8);
+}
+
+.word text {
+  font-family: BrownPro, Brown, futura, helvetica, arial, sans-serif;
+  font-size:16px;
+  text-anchor: middle;
+  fill:black;
+}
+.word path {
+  stroke:#333;
+  fill:none;
+}
+.word .word-text {
+  cursor: pointer;
+}
+
+.word .word-cluster,
+.word .word-tag {
+  font-size: 12px;
+  cursor: text;
+}
+
+.word .word-cluster {
+  fill:#a94442;
+}
+.word .word-tag {
+  fill:#333;
+}
+.editing .word-tag {
+  fill: #fff;
+}
+.editing rect {
+  fill: rgb(203, 120, 111);
+}