Skip to content

Commit 1e33c54

Browse files
hmskleehmsklee
committed
rearrange files, temp adjust row height
1 parent 0f0586c commit 1e33c54

File tree

7 files changed

+153
-293
lines changed

7 files changed

+153
-293
lines changed

‎css/style.css‎

Lines changed: 142 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ body {
44
-webkit-font-smoothing:antialiased;
55
font-family: BrownPro, Brown, futura, helvetica, arial, sans-serif;
66
font-size: 11px;
7+
min-height:100%;
8+
overflow-y: scroll;
79
}
810

911
svg text {
@@ -14,134 +16,179 @@ svg text {
1416
user-select: none;
1517
}
1618

17-
/*#header {
18-
position:absolute;
19+
#header {
20+
position:fixed;
21+
z-index:100;
22+
background:#555;
23+
width:100%;
24+
height:40px;
1925
top:0;
20-
left:0;
21-
background:#333;
22-
color:white;
23-
width:calc( 100% - 20px );
24-
padding:10px;
25-
}*/
26+
font: 14px/1.5em helvetica, arial, sans-serif;
27+
}
2628

27-
#drawing {
28-
margin-top:30px;
29-
margin-bottom: 210px;
29+
#options {
30+
float:right;
31+
display:inline-block;
32+
background:inherit;
33+
color:white;
3034
}
31-
#drawing.bracket-left, #drawing.bracket-left rect {
32-
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAZCAYAAADnstS2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NDQxNzM1NTQ2MUMxMUU3QTRFNDkxNDI3MkNCQjJGRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4NDQxNzM1NjQ2MUMxMUU3QTRFNDkxNDI3MkNCQjJGRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjg0NDE3MzUzNDYxQzExRTdBNEU0OTE0MjcyQ0JCMkZEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg0NDE3MzU0NDYxQzExRTdBNEU0OTE0MjcyQ0JCMkZEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+3b/Z1wAAAR5JREFUeNrMlE2KhDAQhZNoEH9AT6E7TzJzDfEW3sFTuHA5YJ+h98qgbgbBvStxQGtSYSLdTJrWTTMFCSZ+9awqeFIAIEfDxG1ZFmjblqzrSiilchmGQaZpIrZtkziOP8T5naBy0zTg+z6YpgniJXDO8XMQhiGUZTmioKwAt7quwXEcCQhVmZSmKYzj+IVglmVsh1HZ8zwJYkKe53sjSZLwO2WEXdeVIK6qqhTMVRJyTB2wKRXzPKvH7XYa7DZzv2RMOzqt8qPQKj+Fj8QLyjilfKrmfwhv23YcRnf8hvEQVuPr+15dfd8xOqegrdApwzBctU4JguCPB6MogqIoPpUoxQ3d3XXd3hiWIxKluy3LWoW7L8Ldb/TMf+NHgAEAjFyqDEH528wAAAAASUVORK5CYII='), e-resize !important;
35+
#dataset,
36+
#options button {
37+
color:white;
38+
height:40px;
39+
padding: 0 20px;
40+
background: none;
41+
outline:none;
42+
cursor:pointer;
43+
font:inherit;
44+
border:none;
3345
}
34-
#drawing.bracket-right, #drawing.bracket-right rect {
35-
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAZCAYAAADnstS2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NDQxNzM1MTQ2MUMxMUU3QTRFNDkxNDI3MkNCQjJGRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4NDQxNzM1MjQ2MUMxMUU3QTRFNDkxNDI3MkNCQjJGRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjg0NDE3MzRGNDYxQzExRTdBNEU0OTE0MjcyQ0JCMkZEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg0NDE3MzUwNDYxQzExRTdBNEU0OTE0MjcyQ0JCMkZEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7MeYRQAAARlJREFUeNrEVEuKhDAQzUcRP6CXUK8yizmHeAvv4ClcuJsB7zBLQZmFm0HwCmKjpvMCpu3pYWxXXZCiEl69VIp6oUII8qwZcMuyfNR1/T6OI/F9H3sCEizOOYmiiFiWRcnGXJblIA+xEaZpCtu2hWEYQiaLtm2FwsFlWcaQMAzDT5qmCkQpVYmO44imaW5gWJIk5lZbnucKiATP8+6Zd6YSqqpSYCzXdTWY/XrwCoeHbibZdcz+ahFjt+P9zeyot4fMezvFfFfe68o4xXyq5heC13V9Cszh5OAfghFfEHRd99A23fRNKX3ff0EpkNW/SimK4juO4wcNBkGgh5/CSTV/SnW/TdPEoe55njUJZjsMQ6VueubfuAowAPZKsAzs/sUoAAAAAElFTkSuQmCC'), w-resize !important;
46+
#options button {
47+
border: 1px solid #999;
48+
border-width:0 0 0 1px;
49+
border-radius:0;
3650
}
37-
38-
#graph {
39-
cursor:-webkit-grab;
40-
cursor:grab;
41-
width:100%;
42-
height:200px;
43-
border-top: 1px solid #ccc;
44-
background:#fff;
45-
position:fixed;
46-
bottom:0;
47-
left:0;
51+
#options.open button {
52+
background: #333;
53+
border-color: #555;
54+
border-width:0 0 1px 0;
4855
}
49-
50-
#graph:before {
51-
cursor:row-resize;
52-
content:'';
53-
width:100%;
54-
height:7px;
55-
margin-top:-3.5px;
56+
#options ul {
57+
display:none;
58+
margin:0;
59+
list-style-type: none;
60+
padding: 4px 0;
61+
background: #333;
62+
}
63+
#options > ul {
5664
position:absolute;
57-
top:0;
58-
left:0;
65+
min-width:125px;
66+
padding: 10px;
67+
padding-left: 0;
68+
right: 0;
69+
max-height: calc(100vh - 60px);
70+
overflow-y: scroll;
71+
}
72+
#options.open ul {
5973
display:block;
6074
}
75+
#options li {
76+
padding: 3px 10px;
77+
padding-right: 0;
78+
}
79+
#options li input[type="checkbox"] {
80+
margin-right: 5px;
81+
}
6182

62-
#graph button {
83+
#tooltip {
84+
width:175px;
85+
background:hsl(40,10%,98%);
86+
margin-bottom:10px;
87+
box-shadow: 0 0 10px #555;
88+
border-radius:3px;
6389
position:absolute;
90+
padding: 8px 0;
91+
font: 14px helvetica, arial, sans-serif;
92+
font-weight: 400;
93+
color:#444;
94+
display:none;
6495
}
65-
66-
#toggle-minimap {
96+
#tooltip.active {
6797
display:block;
68-
cursor:pointer;
6998
}
70-
#search-minimap {
71-
display:block;
72-
width:100px;
99+
#tooltip p {
100+
padding: 4px 14px;
101+
margin:0;
102+
cursor:default;
73103
}
74-
#minimap {
75-
pointer-events:none;
76-
position:fixed;
77-
z-index:100;
78-
top:40px;
79-
right:0;
104+
#tooltip p:hover {
105+
background-color: rgb(77, 157, 250);
106+
color:white;
80107
}
81-
#minimap * {
82-
pointer-events: all;
108+
#tooltip hr {
109+
border-width: 0;
110+
border-top:1px solid #ddd;
83111
}
84112

85-
#minimap canvas {
86-
background:rgba(200,200,200,0.5);
87-
margin-top:5px;
88-
width:100px;
89-
height:100px;
90-
}
91113

92-
.noselect {
93-
-webkit-touch-callout: none; /* iOS Safari */
94-
-webkit-user-select: none; /* Safari */
95-
-khtml-user-select: none; /* Konqueror HTML */
96-
-moz-user-select: none; /* Firefox */
97-
-ms-user-select: none; /* Internet Explorer/Edge */
98-
user-select: none; /* Non-prefixed version, currently
99-
supported by Chrome and Opera */
114+
/* svg styles for main vis */
115+
#main {
116+
margin-top:40px;
117+
position:relative;
100118
}
101-
102-
/* svg classes */
103-
#drawing text, .link--labels text {
104-
pointer-events: none;
119+
#main svg {
120+
background-color: hsl(40,10%,90%);
105121
}
106-
#drawing text {
122+
#main text {
123+
font-family: BrownPro, Brown, futura, helvetica, arial, sans-serif;
107124
text-anchor: middle;
108125
}
109-
110-
.node { cursor: pointer; }
111-
.link, .link--dashed {
112-
fill: none;
113-
stroke: #999;
126+
.row-drag {
127+
stroke-width:2;
128+
stroke-dasharray: 2,1;
129+
stroke:rgba(100,100,100,0.3);
130+
transition: stroke 300ms ease;
131+
cursor: row-resize;
114132
}
115-
.link--dashed {
116-
stroke-dasharray: 2,2;
133+
.row-drag:hover {
134+
stroke-dasharray:none;
135+
stroke:rgba(100,100,100,0.8);
117136
}
118137

119-
.row--0, .link--label {
120-
fill: #f6f6f6;
138+
.word text {
139+
font-size:16px;
140+
fill:black;
141+
}
142+
.word path {
143+
stroke:#333;
144+
fill:none;
121145
}
122-
.row--1, .link--label.odd {
123-
fill: #d5d5d5;
146+
.word .word-text {
147+
cursor: pointer;
124148
}
125149

126-
.word--underneath {
127-
fill:white;
128-
cursor:-webkit-grab;
129-
cursor:grab;
150+
.word-cluster text,
151+
.word .word-tag {
152+
font-size: 12px;
153+
cursor: text;
130154
}
131155

132-
.selected .word--underneath, .link--label.selected {
133-
fill:#fff6f6;
134-
stroke:#c37;
156+
.word-cluster text,
157+
.word .word-tag {
158+
fill:#333;
135159
}
136-
.hovered .word--underneath, .link--label.hovered {
137-
fill:white;
138-
stroke:#f7c;
160+
.word .syntax-tag {
161+
fill: rgb(208, 150, 143);
162+
}
163+
.toggle-syntax .syntax-tag, .toggle-syntax .syntax-link {
164+
display:none;
165+
}
166+
167+
.editing .word-tag,
168+
.editing text {
169+
fill: #fff;
170+
}
171+
.editing rect {
172+
fill:#a94442;
139173
}
140174

141-
.word--handle {
142-
fill: rgb(255, 204, 204);
143-
opacity: 0;
175+
.link path.polyline {
176+
stroke: #6590b4;
177+
fill: none;
178+
}
179+
.link {
180+
font-size: 12px;
181+
fill:#6590b4;
182+
stroke-width:1.5px;
144183
}
145-
.word:hover .word--handle {
146-
opacity: 0.7;
184+
.link.syntax-link {
185+
fill: #999;
186+
}
187+
.syntax-link path.polyline {
188+
stroke: #999;
189+
fill: none;
190+
}
191+
192+
.link:hover {
193+
stroke-width:2.5px;
147194
}

0 commit comments

Comments
 (0)