- commit
- 2afce435df781582aae0f6bcf20c035faa4924d6
- parent
- 2035f42baf8f62b73311fdb94e7fc1674d48f982
- Author
- Tobias Bengfort <tobias.bengfort@gmx.net>
- Date
- 2016-09-09 15:15
build
Diffstat
| M | static/style.css | 226 | ++++++++++++++++++++++++++++++------------------------------- |
| M | static/voterunner.js | 42 | +++++++++++++++++++++++++++--------------- |
2 files changed, 138 insertions, 130 deletions
diff --git a/static/style.css b/static/style.css
@@ -14,52 +14,19 @@ textarea {
14 14 font-family: inherit;
15 15 font-size: inherit; }
16 16
17 -1 #tree .tree > li .body .header .expand,
18 -1 #tree .followers > li .body .header .expand, #tree .tree > li .body .header .delegate,
19 -1 #tree .followers > li .body .header .delegate, #user > .statusbar .undelegate, #user #rm {
20 -1 appearance: none;
21 -1 background: none;
22 -1 border: 0;
23 -1 cursor: pointer;
24 -1 font: inherit;
25 -1 color: inherit;
26 -1 text-align: center; }
27 -1 #tree .tree > li .body .header .expand:hover,
28 -1 #tree .followers > li .body .header .expand:hover, #tree .tree > li .body .header .delegate:hover,
29 -1 #tree .followers > li .body .header .delegate:hover, #user > .statusbar .undelegate:hover, #user #rm:hover {
30 -1 background-color: rgba(255, 255, 255, 0.2); }
31 -1
32 -1 #tree .tree > li .body .header .expand,
33 -1 #tree .followers > li .body .header .expand, #tree .tree > li .body .header .delegate,
34 -1 #tree .followers > li .body .header .delegate, #tree .tree > li .body .header .votes,
35 -1 #tree .followers > li .body .header .votes, #user > .statusbar .votes, #user > .statusbar .undelegate, #user #rm, #tree .tree > li .body .header .name,
36 -1 #tree .followers > li .body .header .name, #user > .statusbar .delegate, #user #name {
37 -1 padding: 0.4em;
38 -1 white-space: nowrap;
39 -1 overflow: hidden;
40 -1 display: inline-block; }
41 -1
42 -1 #tree .tree > li .body .header .expand,
43 -1 #tree .followers > li .body .header .expand {
44 -1 float: left;
45 -1 border-right: 1px solid lightgray; }
46 -1
47 -1 #tree .tree > li .body .header .delegate,
48 -1 #tree .followers > li .body .header .delegate, #tree .tree > li .body .header .votes,
49 -1 #tree .followers > li .body .header .votes, #user > .statusbar .votes, #user > .statusbar .undelegate, #user #rm {
50 -1 float: right;
51 -1 border-left: 1px solid lightgray; }
52 -1
53 17 html {
54 -1 height: 100%;
55 18 font-family: sans-serif;
56 19 font-size: 70%;
57 20 background: #eee; }
58 21
-1 22 body,
-1 23 html {
-1 24 height: 100%; }
-1 25
59 26 body {
60 -1 height: 100%;
61 27 max-width: 90em;
62 28 margin: 0 auto;
-1 29 padding: 0 0.4em;
63 30 position: relative; }
64 31 body > div {
65 32 padding: 3em 0 1em;
@@ -70,102 +37,131 @@ body {
70 37 height: 100%;
71 38 min-height: 33em; }
72 39
73 -1 header {
-1 40 body > header {
74 41 background: #336DBE;
75 42 text-align: center;
76 43 border-radius: 0 0 0.4em 0.4em;
77 44 margin: 0;
78 -1 width: 100%;
79 45 position: absolute;
80 -1 top: 0; }
81 -1 header h1 {
-1 46 top: 0;
-1 47 left: 0.4em;
-1 48 right: 0.4em; }
-1 49 body > header h1 {
82 50 margin: 0;
83 51 font-size: 2em;
84 52 color: #D9E7F9; }
85 -1 header h1 span {
-1 53 body > header h1 span {
86 54 color: #ABC3E3; }
87 55
88 -1 #tree, #user, #tree li .body {
-1 56 #tree,
-1 57 #user,
-1 58 #tree .node .body {
89 59 border: 1px solid lightgray;
90 60 border-radius: 0.2em 0.2em 0 0; }
91 61
92 62 #tree {
93 -1 position: absolute;
94 -1 top: 0;
95 -1 left: 0;
96 -1 width: 57%;
97 -1 height: 100%;
98 -1 overflow: auto;
99 63 background: white;
100 -1 padding: 0.4em; }
101 -1 #tree .tree,
102 -1 #tree .followers {
103 -1 padding: 0;
104 -1 margin: 0;
105 -1 list-style: none; }
106 -1 #tree .tree > li,
107 -1 #tree .followers > li {
108 -1 margin: 0.5em 0; }
109 -1 #tree .tree > li .body,
110 -1 #tree .followers > li .body {
111 -1 background: white; }
112 -1 #tree .tree > li .body .header,
113 -1 #tree .followers > li .body .header {
114 -1 background: #ABC3E3; }
115 -1 #tree .tree > li .body .header .expand:before,
116 -1 #tree .followers > li .body .header .expand:before {
117 -1 content: ">"; }
118 -1 #tree .tree > li .body .comment,
119 -1 #tree .followers > li .body .comment {
120 -1 padding: 0.4em; }
121 -1 #tree .tree > li .body .comment[data-type="pre"],
122 -1 #tree .followers > li .body .comment[data-type="pre"] {
123 -1 white-space: pre-wrap; }
124 -1 #tree .tree > li[data-highlight] > .body,
125 -1 #tree .followers > li[data-highlight] > .body {
126 -1 font-weight: bold; }
127 -1 #tree .tree > li[data-self] > .body .header .delegate,
128 -1 #tree .followers > li[data-self] > .body .header .delegate {
129 -1 display: none; }
130 -1 #tree .tree > li:not([data-expanded="true"]) > .followers,
131 -1 #tree .followers > li:not([data-expanded="true"]) > .followers {
132 -1 display: none; }
133 -1 #tree .tree > li[data-expanded="true"] > .body .header .expand:before,
134 -1 #tree .followers > li[data-expanded="true"] > .body .header .expand:before {
135 -1 content: "v"; }
136 -1 #tree .followers {
-1 64 padding: 0.4em;
-1 65 margin-top: 0.4em; }
-1 66
-1 67 @media (min-width: 40em) {
-1 68 #tree {
-1 69 position: absolute;
-1 70 top: 0;
-1 71 left: 0;
-1 72 width: 57%;
-1 73 height: 100%;
-1 74 overflow: auto;
-1 75 margin-top: 0; }
-1 76 #sidebar {
-1 77 position: absolute;
-1 78 top: 0;
-1 79 right: 0;
-1 80 width: 42%; } }
-1 81
-1 82 .node .expand, .node .delegate, #user .undelegate, #rm {
-1 83 appearance: none;
-1 84 background: none;
-1 85 border: 0;
-1 86 cursor: pointer;
-1 87 font: inherit;
-1 88 color: inherit;
-1 89 text-align: center; }
-1 90 .node .expand:hover, .node .delegate:hover, #user .undelegate:hover, #rm:hover {
-1 91 background-color: rgba(255, 255, 255, 0.2); }
-1 92
-1 93 .node .expand, .node .delegate, .node .votes, #user .votes, #user .undelegate, #rm, .node .name, #user .delegate, #name {
-1 94 padding: 0.4em;
-1 95 white-space: nowrap;
-1 96 overflow: hidden;
-1 97 text-overflow: ellipsis; }
-1 98
-1 99 .node .expand {
-1 100 float: left;
-1 101 border-right: 1px solid lightgray; }
-1 102
-1 103 .node .delegate, .node .votes, #user .votes, #user .undelegate, #rm {
-1 104 float: right;
-1 105 border-left: 1px solid lightgray; }
-1 106
-1 107 .tree {
-1 108 padding: 0;
-1 109 margin: 0;
-1 110 list-style: none; }
-1 111 .tree .tree {
137 112 margin-left: 2em; }
138 113
139 -1 #sidebar {
140 -1 position: absolute;
141 -1 top: 0;
142 -1 right: 0;
143 -1 width: 42%;
144 -1 height: 100%; }
-1 114 .node {
-1 115 margin: 0.5em 0; }
-1 116 .node .body {
-1 117 background: white; }
-1 118 .node .header {
-1 119 background: #ABC3E3; }
-1 120 .node .expand:before {
-1 121 content: ">"; }
-1 122 .node .comment {
-1 123 padding: 0.4em; }
-1 124 .node.m-self > .body .delegate {
-1 125 display: none; }
-1 126 .node.m-self > .body .header {
-1 127 background: #336DBE;
-1 128 color: white; }
-1 129 .node:not(.is-expanded) > .tree {
-1 130 display: none; }
-1 131 .node.is-expanded > .body .expand:before {
-1 132 content: "v"; }
145 133
146 134 #user {
147 135 background: #D9E7F9; }
148 -1 #user > .statusbar {
149 -1 width: 100%;
150 -1 border-bottom: 1px solid lightgray; }
151 -1 #user > .statusbar .undelegate:before {
152 -1 content: "‒"; }
153 -1 #user #name {
154 -1 max-width: 80%; }
155 -1 #user #name input {
156 -1 font-size: 120%;
157 -1 height: 1.6em; }
158 -1 #user #rm {
-1 136 #user .delegate {
-1 137 float: left; }
-1 138 #user .undelegate:before {
-1 139 content: "‒"; }
-1 140
-1 141 .statusbar {
-1 142 width: 100%;
-1 143 border-bottom: 1px solid lightgray;
-1 144 overflow: hidden; }
-1 145
-1 146 #name {
-1 147 float: left;
-1 148 max-width: 80%; }
-1 149 #name input {
159 150 font-size: 120%;
160 -1 padding: 0.4em;
161 -1 line-height: 1.6;
162 -1 min-width: 2em; }
163 -1 #user #rm:before {
164 -1 content: "X"; }
165 -1 #user #comment textarea {
166 -1 width: 100%;
167 -1 min-height: 15em;
168 -1 border: none;
169 -1 resize: vertical;
170 -1 padding: 0.4em; }
-1 151 height: 1.6em; }
-1 152
-1 153 #rm {
-1 154 font-size: 120%;
-1 155 padding: 0.4em;
-1 156 line-height: 1.6;
-1 157 min-width: 2em; }
-1 158 #rm:before {
-1 159 content: "X"; }
-1 160
-1 161 #comment textarea {
-1 162 width: 100%;
-1 163 min-height: 15em;
-1 164 border: none;
-1 165 resize: vertical;
-1 166 padding: 0.4em; }
171 167
diff --git a/static/voterunner.js b/static/voterunner.js
@@ -16699,36 +16699,39 @@ var tplFollowers = function(nodes, id, ID) {
16699 16699 };
16700 16700
16701 16701 var tplNode = function(nodes, node, ID) {
16702 -1 var dataset = {};
-1 16702 var classList = [];
16703 16703 if (node.expanded) {
16704 -1 dataset.expanded = true;
-1 16704 classList.push('is-expanded');
-1 16705 }
-1 16706 if (node.id === ID) {
-1 16707 classList.push('m-self');
16705 16708 }
16706 16709
16707 -1 var attrs = {};
-1 16710 var delegateAttrs = {};
16708 16711 if (node.id === ID || getDelegationChain(nodes, node).indexOf(ID) !== -1) {
16709 -1 attrs.disabled = true;
-1 16712 delegateAttrs.disabled = true;
16710 16713 }
16711 16714
16712 16715 return h('li.node#node' + node.id, {
16713 -1 dataset: dataset,
-1 16716 className: classList.join(' '),
16714 16717 }, [
16715 -1 h('div.body', [
16716 -1 h('div.header', [
-1 16718 h('article.body', [
-1 16719 h('header.header', [
-1 16720 h('button.expand', {
-1 16721 title: _(node.expanded ? 'collapse' : 'expand'),
-1 16722 }),
16717 16723 h('div.votes', '' + getVotes(nodes, node)),
16718 16724 h('button.delegate', {
16719 16725 title: _('delegate to ') + getName(node),
16720 -1 attributes: attrs,
-1 16726 attributes: delegateAttrs,
16721 16727 }, '+'),
16722 -1 h('a.expand', {
16723 -1 title: _('expand'),
16724 -1 }),
16725 16728 h('div.name', getName(node)),
16726 16729 ]),
16727 16730 h('div.comment', {
16728 16731 innerHTML: md.render(node.comment || ''),
16729 16732 }),
16730 16733 ]),
16731 -1 h('ul.followers', tplFollowers(nodes, node.id, ID)),
-1 16734 h('ul.tree', tplFollowers(nodes, node.id, ID)),
16732 16735 ]);
16733 16736 };
16734 16737
@@ -16744,7 +16747,7 @@ var initVDom = function(wrapper, nodes, ID, afterRender) {
16744 16747 afterRender();
16745 16748
16746 16749 return function(newState) {
16747 -1 var newTree = template(nodes, ID);
-1 16750 var newTree = template(newState, ID);
16748 16751 var patches = virtualDom.diff(tree, newTree);
16749 16752 virtualDom.patch(element, patches);
16750 16753 tree = newTree;
@@ -16767,11 +16770,13 @@ var getCookie = function(key) {
16767 16770
16768 16771 document.addEventListener('DOMContentLoaded', function() {
16769 16772 var TOPIC = document.URL.split('/')[3];
16770 -1 var ID = getCookie('id');
-1 16773 var ID = document.URL.split('/')[4];
-1 16774 if (!ID) ID = getCookie('id');
16771 16775 if (!ID) ID = uid();
16772 16776 setCookie('id', ID, 100);
16773 16777
16774 16778 var socket = io.connect('/');
-1 16779 window.socket = socket; // make available for tests
16775 16780 socket.emit('register', TOPIC, ID);
16776 16781
16777 16782 var nodes = JSON.parse(document.querySelector('#json-nodes').dataset.value);
@@ -16869,7 +16874,14 @@ document.addEventListener('DOMContentLoaded', function() {
16869 16874
16870 16875 var pushComment = throttle(function() {
16871 16876 var comment = document.querySelector('#comment textarea').value;
16872 -1 socket.emit('setNodeComment', comment);
-1 16877 var node = nodes.find(function(n) {
-1 16878 return n.id === ID;
-1 16879 });
-1 16880 // Do not create a new node if the comment is empty.
-1 16881 // This can happen e.g. on a keydown event from the ctrl or shift keys.
-1 16882 if (node || comment) {
-1 16883 socket.emit('setNodeComment', comment);
-1 16884 }
16873 16885 }, 1000);
16874 16886
16875 16887 document.querySelector('#comment textarea').addEventListener('change', pushComment);