Browse code

Ajouter un paging par jour #43

devnewton authored on 27/12/2017 14:07:35
Showing 3 changed files
... ...
@@ -11,33 +11,33 @@ jb3 = {
11 11
         self.controlsNickname = $('#jb3-controls-nickname');
12 12
         self.rooms = {};
13 13
         self.rooms[self.controlsRoom.val()] = {};
14
-        jb3_common.getRooms().forEach(function(room){
15
-        	self.rooms[room.rname] = {};
14
+        jb3_common.getRooms().forEach(function (room) {
15
+            self.rooms[room.rname] = {};
16 16
         });
17 17
         var uri = URI(window.location);
18 18
         var roomInURI = uri.search(true).room;
19
-        if(roomInURI) {
20
-                self.rooms[roomInURI] = {};
19
+        if (roomInURI) {
20
+            self.rooms[roomInURI] = {};
21 21
         }
22 22
         self.controlsRoom.empty().append(
23
-        		Object.keys(self.rooms).sort().map(function(room) {
24
-        			return new Option(room, room);
25
-        		})
26
-        );
23
+                Object.keys(self.rooms).sort().map(function (room) {
24
+            return new Option(room, room);
25
+        })
26
+                );
27 27
         var roomInDomain = uri.domain().slice(0, -uri.tld().length - 1);
28 28
         roomInDomain = self.rooms[roomInDomain] && roomInDomain;
29 29
         self.controlsRoom.attr("size", self.controlsRoom.find('option').length);
30 30
         self.controlsRoom.val(roomInURI || roomInDomain || localStorage.selectedRoom || self.controlsRoom.find('option:first').val());
31 31
         var postsContainer = document.getElementById('jb3-posts-container');
32
-        for(var room in self.rooms) {
33
-        	var postsDivForRoom = document.createElement("div");
34
-        	postsDivForRoom.dataset.room = room;
35
-        	postsDivForRoom.className += "jb3-posts";
36
-        	if(room != self.controlsRoom.val()) {
37
-        		postsDivForRoom.setAttribute( 'style', 'display:none' )
38
-        	}
39
-        	postsContainer.appendChild(postsDivForRoom);
40
-        	self.rooms[room].postsDiv = postsDivForRoom;
32
+        for (var room in self.rooms) {
33
+            var postsDivForRoom = document.createElement("div");
34
+            postsDivForRoom.dataset.room = room;
35
+            postsDivForRoom.className += "jb3-posts";
36
+            if (room != self.controlsRoom.val()) {
37
+                postsDivForRoom.setAttribute('style', 'display:none')
38
+            }
39
+            postsContainer.appendChild(postsDivForRoom);
40
+            self.rooms[room].postsDiv = postsDivForRoom;
41 41
         }
42 42
 
43 43
         $('#jb3-visio-link').attr('href', "/visio?room=" + self.controlsRoom.val());
... ...
@@ -61,39 +61,39 @@ jb3 = {
61 61
                     event.preventDefault();
62 62
                 }
63 63
             } else if (event.keyCode === 13) {
64
-            	self.postCurrentMessage();
64
+                self.postCurrentMessage();
65 65
             }
66 66
         });
67
-        if($('header').css('display') === 'block') {
67
+        if ($('header').css('display') === 'block') {
68 68
             $('#jb3-show-controls').html("←");
69 69
         } else {
70 70
             $('#jb3-show-controls').html("≡");
71 71
         }
72
-        $('#jb3-show-controls').click(function() {
73
-        	var header = $('header');
74
-        	var layout = $('#jb3-layout');
75
-                var button = $('#jb3-show-controls');
76
-        	if(header.css('display') === 'block') {
77
-                    header.css('display', 'none');
78
-                    layout.css('top', '0px');
79
-                    button.html("≡");
80
-        	} else {
81
-                    header.css('display', 'block');
82
-                    layout.css('top', '57px');
83
-                    button.html("←");
84
-        	}
85
-        	var roster = $('#jb3-roster');
86
-        	if(roster.css('display') === 'flex') {
87
-        		roster.css('display', 'none');
88
-        	} else {
89
-        		roster.css('display', 'flex');
90
-        	}
72
+        $('#jb3-show-controls').click(function () {
73
+            var header = $('header');
74
+            var layout = $('#jb3-layout');
75
+            var button = $('#jb3-show-controls');
76
+            if (header.css('display') === 'block') {
77
+                header.css('display', 'none');
78
+                layout.css('top', '0px');
79
+                button.html("≡");
80
+            } else {
81
+                header.css('display', 'block');
82
+                layout.css('top', '57px');
83
+                button.html("←");
84
+            }
85
+            var roster = $('#jb3-roster');
86
+            if (roster.css('display') === 'flex') {
87
+                roster.css('display', 'none');
88
+            } else {
89
+                roster.css('display', 'flex');
90
+            }
91 91
         });
92
-        $("#jb3-controls-message-post").click(function() {
93
-        	self.postCurrentMessage();
92
+        $("#jb3-controls-message-post").click(function () {
93
+            self.postCurrentMessage();
94 94
         });
95
-        $("#jb3-controls-message-attach").click(function() {
96
-        	self.pasteModal.trigger('show');
95
+        $("#jb3-controls-message-attach").click(function () {
96
+            self.pasteModal.trigger('show');
97 97
         });
98 98
         $('.jb3-posts').on('click', '.jb3-post-time', function (e) {
99 99
             var postId = $(e.target).parent().attr('id');
... ...
@@ -145,32 +145,36 @@ jb3 = {
145 145
         self.coin.postMessage({type: "connect", url: wurl.toString()});
146 146
         self.updateMessages();
147 147
         self.initTrollometre();
148
-        setTimeout(function(){ self.refreshDlfpToken(); }, 1000);
149
-        setInterval(function(){ self.refreshDlfpToken(); }, 60 * 60 * 1000);
148
+        setTimeout(function () {
149
+            self.refreshDlfpToken();
150
+        }, 1000);
151
+        setInterval(function () {
152
+            self.refreshDlfpToken();
153
+        }, 60 * 60 * 1000);
150 154
     },
151
-    postCurrentMessage: function() {
155
+    postCurrentMessage: function () {
152 156
         var selectedRoom = this.controlsRoom.val();
153 157
         var auth = localStorage.getItem("dlfp-auth")
154
-        if(this.checkAuth(auth, selectedRoom)) {
158
+        if (this.checkAuth(auth, selectedRoom)) {
155 159
             this.postMessage(this.controlsNickname.val(), this.controlsMessage.val(), selectedRoom, auth);
156 160
             this.controlsMessage.val('');
157 161
         }
158 162
     },
159
-    checkAuth: function(auth, selectedRoom) {
160
-        if(selectedRoom === 'dlfp') {
161
-            if(this.checkIfDlfpTokenIsExpired(auth)) {
163
+    checkAuth: function (auth, selectedRoom) {
164
+        if (selectedRoom === 'dlfp') {
165
+            if (this.checkIfDlfpTokenIsExpired(auth)) {
162 166
                 window.location.href = "/dlfp/connect";
163 167
                 return false;
164 168
             }
165 169
         }
166 170
         return true;
167 171
     },
168
-    checkIfDlfpTokenIsExpired: function(authStr) {
169
-        if(!authStr) {
172
+    checkIfDlfpTokenIsExpired: function (authStr) {
173
+        if (!authStr) {
170 174
             return true;
171 175
         }
172 176
         var auth = JSON.parse(authStr);
173
-        if(!auth.expires_timestamp) {
177
+        if (!auth.expires_timestamp) {
174 178
             return true;
175 179
         }
176 180
         return auth.expires_timestamp < Date.now();
... ...
@@ -185,31 +189,31 @@ jb3 = {
185 189
     onCoinMessage: function (event) {
186 190
         var self = this;
187 191
         var message = event.data;
188
-        if(message.posts) {
192
+        if (message.posts) {
189 193
             self.newMessages = self.newMessages.concat(message.posts);
190 194
         }
191
-        if(message.disconnected) {
195
+        if (message.disconnected) {
192 196
             self.moulesRoster.trigger('clear-presences');
193 197
         }
194
-        if(message.connected) {
198
+        if (message.connected) {
195 199
             self.moulesRoster.trigger('clear-presences');
196 200
             self.refreshMessages();
197
-            self.coin.postMessage({type: "nickname", nickname: jb3_common.getNickname()});        	
201
+            self.coin.postMessage({type: "nickname", nickname: jb3_common.getNickname()});
198 202
         }
199
-        if(message.presence) {
203
+        if (message.presence) {
200 204
             self.moulesRoster.trigger('presence', message.presence);
201 205
         }
202
-        if(message.webdirectcoin_not_available) {
203
-        	console.log("webdirectcoin is not available");
206
+        if (message.webdirectcoin_not_available) {
207
+            console.log("webdirectcoin is not available");
204 208
         }
205
-        if(message.norloge) {
206
-        	self.updateCite(message.norloge);
209
+        if (message.norloge) {
210
+            self.updateCite(message.norloge);
207 211
         }
208 212
     },
209 213
     norlogeFormat: "HH:mm:ss",
210 214
     norlogeFullFormat: "YYYY-MM-DD HH:mm:ss",
211 215
     initNickname: function () {
212
-    	var self = this;
216
+        var self = this;
213 217
         self.controlsNickname.val(jb3_common.getNickname());
214 218
         self.controlsNickname.change(function () {
215 219
             jb3_common.setNickname(self.controlsNickname.val());
... ...
@@ -220,8 +224,8 @@ jb3 = {
220 224
         self.moulesRoster = riot.mount('jb3-moules-roster')[0];
221 225
         self.revisionsModal = riot.mount('jb3-revisions-modal')[0];
222 226
         self.pasteModal = riot.mount('jb3-paste-modal')[0];
223
-        self.pasteModal.on('pasted', function(pastedText) {
224
-        	self.insertTextInMessageControl(pastedText);        	
227
+        self.pasteModal.on('pasted', function (pastedText) {
228
+            self.insertTextInMessageControl(pastedText);
225 229
         });
226 230
     },
227 231
     highlightPostAndReplies: function (postId, showPopup) {
... ...
@@ -255,7 +259,7 @@ jb3 = {
255 259
     },
256 260
     isPostsContainerAtBottom: function () {
257 261
         var postContainer = $('#jb3-posts-container');
258
-        return Math.ceil(postContainer.scrollTop() + postContainer.innerHeight()) >=  postContainer[0].scrollHeight;
262
+        return Math.ceil(postContainer.scrollTop() + postContainer.innerHeight()) >= postContainer[0].scrollHeight;
259 263
     },
260 264
     scrollPostsContainerToBottom: function () {
261 265
         var postContainer = $('#jb3-posts-container');
... ...
@@ -267,8 +271,8 @@ jb3 = {
267 271
             var userNickname = $('#jb3-controls-nickname').val();
268 272
             var wasAtbottom = self.isPostsContainerAtBottom();
269 273
             for (var d in data) {
270
-            	var message = data[d];
271
-            	this.trollometre.feed(message);
274
+                var message = data[d];
275
+                this.trollometre.feed(message);
272 276
                 self.onMessage(userNickname, message);
273 277
             }
274 278
             self.updateNorloges();
... ...
@@ -288,9 +292,27 @@ jb3 = {
288 292
     insertMessageDiv: function (messageDiv, message) {
289 293
         var existingDiv = document.getElementById(message.id);
290 294
         if (!existingDiv) {
291
-        	var container = this.rooms[message.room].postsDiv;
295
+            var container = this.rooms[message.room].postsDiv;
296
+            var dates = container.getElementsByClassName("jb3-posts-date");
297
+            var day = moment(message.time);
298
+            var date = null;
299
+            for (var d = 0; d < dates.length; ++d) {
300
+                if (moment(dates[d].dataset.date).isSame(day, 'day')) {
301
+                    date = dates[d];
302
+                    break;
303
+                }
304
+            }
305
+            if(!date) {
306
+                date = document.createElement('div');
307
+                date.classList.add("jb3-posts-date");
308
+                date.dataset.date = day.format("YYYY-MM-DD");
309
+                var dateTitle = document.createElement('time');
310
+                dateTitle.appendChild(document.createTextNode(day.format("dddd D MMMM YYYY")));
311
+                date.appendChild(dateTitle);
312
+                container.insertAdjacentElement('beforeend', date);
313
+            }
292 314
             var t = message.time;
293
-            var posts = container.getElementsByClassName('jb3-post');
315
+            var posts = date.getElementsByClassName('jb3-post');
294 316
             for (var p = 0; p < posts.length; ++p) {
295 317
                 var post = posts[p];
296 318
                 if (t < post.dataset.time) {
... ...
@@ -298,14 +320,14 @@ jb3 = {
298 320
                     return;
299 321
                 }
300 322
             }
301
-            container.insertAdjacentHTML('beforeend', messageDiv);
323
+            date.insertAdjacentHTML('beforeend', messageDiv);
302 324
         } else {
303 325
             existingDiv.outerHTML = messageDiv;
304 326
         }
305 327
 
306 328
     },
307 329
     updateNorloges: function () {
308
-    	var self = this;
330
+        var self = this;
309 331
         $('.jb3-cite-raw').each(function () {
310 332
             var cite = $(this);
311 333
             var postId = cite.data('ref');
... ...
@@ -315,7 +337,7 @@ jb3 = {
315 337
                 cite.text(citedNorloge.text());
316 338
                 cite.removeClass('jb3-cite-raw');
317 339
             } else {
318
-                self.coin.postMessage({type: "send", destination: "getNorloge", body: { messageId: postId } });
340
+                self.coin.postMessage({type: "send", destination: "getNorloge", body: {messageId: postId}});
319 341
             }
320 342
             if (cited.hasClass('jb3-post-is-mine')) {
321 343
                 cited.addClass('jb3-cited-by-me');
... ...
@@ -388,7 +410,7 @@ jb3 = {
388 410
     insertTextWithSpacesAroundInMessageControl: function (text) {
389 411
         var control = document.getElementById("jb3-controls-message");
390 412
         var textBefore = control.value.substring(0, control.selectionStart);
391
-        if(/.*\S$/.test(textBefore)) {
413
+        if (/.*\S$/.test(textBefore)) {
392 414
             textBefore = textBefore.concat(" ");
393 415
         }
394 416
         var textAfter = control.value.substr(control.selectionStart);
... ...
@@ -398,20 +420,20 @@ jb3 = {
398 420
         control.focus();
399 421
         control.setSelectionRange(caretPos, caretPos);
400 422
     },
401
-    updateCite: function(norloge) {
402
-    	var self = this;
403
-    	$(".jb3-cite-raw[data-ref='" + norloge.messageId + "']").each(function(){
423
+    updateCite: function (norloge) {
424
+        var self = this;
425
+        $(".jb3-cite-raw[data-ref='" + norloge.messageId + "']").each(function () {
404 426
             var cite = $(this);
405 427
             cite.text(moment(norloge.time).format(self.norlogeFullFormat));
406 428
             cite.removeClass('jb3-cite-raw');
407
-    	} );
429
+        });
408 430
     },
409
-    initTrollometre: function() {
410
-    	this.trollometre = new Trollometre(document.getElementById("trollometre"));
431
+    initTrollometre: function () {
432
+        this.trollometre = new Trollometre(document.getElementById("trollometre"));
411 433
     },
412
-    refreshDlfpToken: function() {
434
+    refreshDlfpToken: function () {
413 435
         var dlfpAuth = localStorage.getItem("dlfp-auth");
414
-        if(dlfpAuth) {
436
+        if (dlfpAuth) {
415 437
             var xhr = new XMLHttpRequest();
416 438
             xhr.onreadystatechange = function (event) {
417 439
                 if (xhr.readyState === 4) {
... ...
@@ -1,7 +1,19 @@
1 1
 .jb3-posts {
2
-	border-spacing: 2px 1px;
2
+    border-spacing: 2px 1px;
3 3
 }
4 4
 
5
+.jb3-posts-date>time {
6
+    border-bottom: 2px solid #adbfee;
7
+    border-top: 1px solid #9fc5eb;
8
+    margin: 0;
9
+    padding: .2em;
10
+    text-align: center;
11
+    width: 100%;
12
+    display: block;
13
+    font-weight: bold;
14
+}
15
+
16
+
5 17
 .jb3-post:target {
6 18
     border: 1px solid #FFD202;
7 19
     border-radius: 8px;
... ...
@@ -21,95 +33,95 @@
21 33
 }
22 34
 
23 35
 .jb3-revisions {
24
-	display: none;
36
+    display: none;
25 37
 }
26 38
 
27 39
 .jb3-revisions-button {
28
-	margin-left: 4px;
29
-	cursor: pointer;
30
-	-webkit-user-select: none;
31
-	-moz-user-select: none;
32
-	-ms-user-select: none;
33
-	user-select: none;
40
+    margin-left: 4px;
41
+    cursor: pointer;
42
+    -webkit-user-select: none;
43
+    -moz-user-select: none;
44
+    -ms-user-select: none;
45
+    user-select: none;
34 46
 }
35 47
 
36 48
 .jb3-revise-button {
37
-	margin-left: 4px;
38
-	-webkit-user-select: none;
39
-	-moz-user-select: none;
40
-	-ms-user-select: none;
41
-	user-select: none;
49
+    margin-left: 4px;
50
+    -webkit-user-select: none;
51
+    -moz-user-select: none;
52
+    -ms-user-select: none;
53
+    user-select: none;
42 54
 }
43 55
 
44 56
 .jb3-post .jb3-revise-button {
45
-	color: rgba(0, 0, 0, 0.0);
57
+    color: rgba(0, 0, 0, 0.0);
46 58
 }
47 59
 
48 60
 .jb3-post-is-mine:hover .jb3-revise-button {
49
-	color: initial;
50
-        cursor: pointer;
61
+    color: initial;
62
+    cursor: pointer;
51 63
 }
52 64
 
53 65
 .jb3-post:nth-of-type(odd) {
54
-	background-color: #FBFBFB;
66
+    background-color: #FBFBFB;
55 67
 }
56 68
 
57 69
 .jb3-post-time {
58
-	padding-right: 5px;
59
-	padding-left: 5px;
60
-	text-align: center;
61
-	color: black;
62
-	font-weight: bold;
63
-	white-space: nowrap;
64
-	border-radius: 8px;
65
-	border: 1px solid grey;
66
-	display: inline-block;
67
-	vertical-align: text-top;
70
+    padding-right: 5px;
71
+    padding-left: 5px;
72
+    text-align: center;
73
+    color: black;
74
+    font-weight: bold;
75
+    white-space: nowrap;
76
+    border-radius: 8px;
77
+    border: 1px solid grey;
78
+    display: inline-block;
79
+    vertical-align: text-top;
68 80
 }
69 81
 
70 82
 .jb3-post-room {
71
-	padding-right: 5px;
72
-	padding-left: 5px;
73
-	color: #25662D;
74
-	font-weight: normal;
75
-	display: inline-block;
76
-	word-break: break-all;
77
-	border-radius: 8px;
78
-	border: 1px solid grey;
79
-	vertical-align: text-top;
83
+    padding-right: 5px;
84
+    padding-left: 5px;
85
+    color: #25662D;
86
+    font-weight: normal;
87
+    display: inline-block;
88
+    word-break: break-all;
89
+    border-radius: 8px;
90
+    border: 1px solid grey;
91
+    vertical-align: text-top;
80 92
 }
81 93
 
82 94
 .jb3-post-nickname {
83
-	padding-right: 5px;
84
-	padding-left: 5px;
85
-	color: #833;
86
-	display: inline-block;
87
-	word-break: break-all;
88
-	border-radius: 8px;
89
-	border: 1px solid grey;
90
-	vertical-align: text-top;
95
+    padding-right: 5px;
96
+    padding-left: 5px;
97
+    color: #833;
98
+    display: inline-block;
99
+    word-break: break-all;
100
+    border-radius: 8px;
101
+    border: 1px solid grey;
102
+    vertical-align: text-top;
91 103
 }
92 104
 
93 105
 .jb3-post-message {
94
-	padding-right: 5px;
95
-	padding-left: 5px;
96
-	color: black;
97
-	word-break: break-all;
98
-	display: block;
99
-	vertical-align: text-top;
106
+    padding-right: 5px;
107
+    padding-left: 5px;
108
+    color: black;
109
+    word-break: break-all;
110
+    display: block;
111
+    vertical-align: text-top;
100 112
 }
101 113
 
102 114
 .jb3-post-message a {
103
-	font-weight: bold;
104
-	color: #1690f3;
115
+    font-weight: bold;
116
+    color: #1690f3;
105 117
 }
106 118
 
107 119
 .jb3-post-message a:hover {
108
-	text-decoration: underline;
120
+    text-decoration: underline;
109 121
 }
110 122
 
111 123
 .jb3-post-message a:visited {
112
-	color: #0b78d0;
124
+    color: #0b78d0;
113 125
 }
114 126
 
115 127
 .jb3-post-message code {
... ...
@@ -137,100 +149,100 @@
137 149
 }
138 150
 
139 151
 .jb3-cite {
140
-	color: #5F7FBF;
141
-        cursor: pointer; 
152
+    color: #5F7FBF;
153
+    cursor: pointer; 
142 154
 }
143 155
 
144 156
 .jb3-cite-mine {
145
-	font-weight: bold;
146
-	color: #C00;
157
+    font-weight: bold;
158
+    color: #C00;
147 159
 }
148 160
 
149 161
 .jb3-cited-by-me .jb3-post-time {
150
-	font-weight: bold;
151
-	color: #C00;
162
+    font-weight: bold;
163
+    color: #C00;
152 164
 }
153 165
 
154 166
 .jb3-cited .jb3-post-time {
155
-	font-weight: bold;
156
-	color: #5F7FBF;
167
+    font-weight: bold;
168
+    color: #5F7FBF;
157 169
 }
158 170
 
159 171
 .jb3-highlight {
160
-	background-color: #FFD202 !important;
172
+    background-color: #FFD202 !important;
161 173
 }
162 174
 
163 175
 .jb3-totoz {
164
-	position: relative;
165
-	font-weight: bold;
166
-	color: #0A1;
176
+    position: relative;
177
+    font-weight: bold;
178
+    color: #0A1;
167 179
 }
168 180
 
169 181
 .jb3-totoz img {
170
-	display: none;
182
+    display: none;
171 183
 }
172 184
 
173 185
 .jb3-totoz:hover img {
174
-	display: inline;
175
-	position: absolute;
176
-	bottom: 100%;
186
+    display: inline;
187
+    position: absolute;
188
+    bottom: 100%;
177 189
 }
178 190
 
179 191
 .jb3-bigorno {
180
-	border: 1px solid #F00;
192
+    border: 1px solid #F00;
181 193
 }
182 194
 
183 195
 .jb3-post-icon {
184
-	background-repeat: no-repeat;
185
-	vertical-align: text-top;
196
+    background-repeat: no-repeat;
197
+    vertical-align: text-top;
186 198
 }
187 199
 
188 200
 .jb3-post-is-reply-to-mine .jb3-post-icon {
189
-	background-image: url("/assets/common/icons/post/reply-to-mine.png");
190
-	width: 16px;
191
-	height: 16px;
192
-	display: inline-block;
201
+    background-image: url("/assets/common/icons/post/reply-to-mine.png");
202
+    width: 16px;
203
+    height: 16px;
204
+    display: inline-block;
193 205
 }
194 206
 
195 207
 .jb3-post-is-bigorno .jb3-post-icon {
196
-	background-image: url("/assets/common/icons/post/bigorno.png");
197
-	width: 16px;
198
-	height: 16px;
199
-	display: inline-block;
208
+    background-image: url("/assets/common/icons/post/bigorno.png");
209
+    width: 16px;
210
+    height: 16px;
211
+    display: inline-block;
200 212
 }
201 213
 
202 214
 .jb3-post-is-mine .jb3-post-icon {
203
-	background-image: url("/assets/common/icons/post/mine.png");
204
-	width: 16px;
205
-	height: 16px;
206
-	display: inline-block;
215
+    background-image: url("/assets/common/icons/post/mine.png");
216
+    width: 16px;
217
+    height: 16px;
218
+    display: inline-block;
207 219
 }
208 220
 
209 221
 /* desktop */
210 222
 @media only screen and (min-width: 768px) {
211
-	.jb3-post-time {
212
-		border: none;
213
-	}
214
-	.jb3-post-nickname {
215
-		width: 8em;
216
-		border: none;
217
-		white-space: nowrap;
218
-		overflow: hidden;
219
-		text-overflow: ellipsis;
220
-	}
221
-	.jb3-post-room {
222
-		width: 8em;
223
-		border: none;
224
-		white-space: nowrap;
225
-		overflow: hidden;
226
-		text-overflow: ellipsis;
227
-	}
228
-	.jb3-post-message {
229
-		display: inline;
230
-	}
231
-	.jb3-post-icon {
232
-		width: 16px;
233
-		height: 16px;
234
-		display: inline-block;
235
-	}
223
+    .jb3-post-time {
224
+        border: none;
225
+    }
226
+    .jb3-post-nickname {
227
+        width: 8em;
228
+        border: none;
229
+        white-space: nowrap;
230
+        overflow: hidden;
231
+        text-overflow: ellipsis;
232
+    }
233
+    .jb3-post-room {
234
+        width: 8em;
235
+        border: none;
236
+        white-space: nowrap;
237
+        overflow: hidden;
238
+        text-overflow: ellipsis;
239
+    }
240
+    .jb3-post-message {
241
+        display: inline;
242
+    }
243
+    .jb3-post-icon {
244
+        width: 16px;
245
+        height: 16px;
246
+        display: inline-block;
247
+    }
236 248
 }
237 249
\ No newline at end of file
... ...
@@ -24,7 +24,6 @@
24 24
 			</div>
25 25
 			<div id="jb3-layout-vertical">
26 26
 				<div id="jb3-posts-container">
27
-					<div class="jb3-posts"></div>
28 27
 				</div>
29 28
 				<div id="jb3-controls">
30 29
 					<div id="jb3-controls-message-container" class="c-input-group">