Fossil SCM

Only right-align the self-posts if the outerWidth of the browser is less than 1000. Simplify the CSS by removing unused rules.

drh 2020-12-23 13:51 UTC chatroom-dev
Commit f3c8e8385848e4168f14135779e395c453440301a5dc503ed2c57f5a2cb2f7bd
Parent 018084c50ed4265…
2 files changed +7 -13 -11
~ src/chat.js ~ src/default.css
M src/chat.js
+7 -13
--- src/chat.js
+++ src/chat.js
@@ -184,21 +184,20 @@
184184
 row.classList.add('message-row');
185185
 injectMessage(row);
186186
 const eWho = document.createElement('legend');
187187
 eWho.dataset.timestamp = m.mtime;
188188
 eWho.addEventListener('click', handleLegendClicked, false);
189
- eWho.setAttribute('align', (m.xfrom===_me ? 'right' : 'left'));
189
+ if( m.xfrom==_me && window.outerWidth<1000 ){
190
+ eWho.setAttribute('align', 'right');
191
+ row.style.justifyContent = "flex-end";
192
+ }else{
193
+ eWho.setAttribute('align', 'left');
194
+ }
190195
 eWho.style.backgroundColor = m.uclr;
191196
 row.appendChild(eWho);
192197
 eWho.classList.add('message-user');
193
- let whoName;
194
- if( m.xfrom===_me ){
195
- whoName = 'me';
196
- row.classList.add('user-is-me');
197
- }else{
198
- whoName = m.xfrom;
199
- }
198
+ let whoName = m.xfrom;
200199
 var d = new Date(m.mtime + "Z");
201200
 if( d.getMinutes().toString()!="NaN" ){
202201
 /* Show local time when we can compute it */
203202
 eWho.append(textNode(whoName+' @ '+
204203
 d.getHours()+":"+(d.getMinutes()+100).toString().slice(1,3)
@@ -231,15 +230,10 @@
231230
 }
232231
 if(m.xmsg){
233232
 span.innerHTML += m.xmsg;
234233
 }
235234
 span.classList.add('chat-message');
236
- if( m.xfrom!=_me ){
237
- span.classList.add('chat-mx');
238
- }else{
239
- span.classList.add('chat-ms');
240
- }
241235
 }
242236
 }
243237
 async function poll(){
244238
 if(poll.running) return;
245239
 poll.running = true;
246240
--- src/chat.js
+++ src/chat.js
@@ -184,21 +184,20 @@
184 row.classList.add('message-row');
185 injectMessage(row);
186 const eWho = document.createElement('legend');
187 eWho.dataset.timestamp = m.mtime;
188 eWho.addEventListener('click', handleLegendClicked, false);
189 eWho.setAttribute('align', (m.xfrom===_me ? 'right' : 'left'));
 
 
 
 
 
190 eWho.style.backgroundColor = m.uclr;
191 row.appendChild(eWho);
192 eWho.classList.add('message-user');
193 let whoName;
194 if( m.xfrom===_me ){
195 whoName = 'me';
196 row.classList.add('user-is-me');
197 }else{
198 whoName = m.xfrom;
199 }
200 var d = new Date(m.mtime + "Z");
201 if( d.getMinutes().toString()!="NaN" ){
202 /* Show local time when we can compute it */
203 eWho.append(textNode(whoName+' @ '+
204 d.getHours()+":"+(d.getMinutes()+100).toString().slice(1,3)
@@ -231,15 +230,10 @@
231 }
232 if(m.xmsg){
233 span.innerHTML += m.xmsg;
234 }
235 span.classList.add('chat-message');
236 if( m.xfrom!=_me ){
237 span.classList.add('chat-mx');
238 }else{
239 span.classList.add('chat-ms');
240 }
241 }
242 }
243 async function poll(){
244 if(poll.running) return;
245 poll.running = true;
246
--- src/chat.js
+++ src/chat.js
@@ -184,21 +184,20 @@
184 row.classList.add('message-row');
185 injectMessage(row);
186 const eWho = document.createElement('legend');
187 eWho.dataset.timestamp = m.mtime;
188 eWho.addEventListener('click', handleLegendClicked, false);
189 if( m.xfrom==_me && window.outerWidth<1000 ){
190 eWho.setAttribute('align', 'right');
191 row.style.justifyContent = "flex-end";
192 }else{
193 eWho.setAttribute('align', 'left');
194 }
195 eWho.style.backgroundColor = m.uclr;
196 row.appendChild(eWho);
197 eWho.classList.add('message-user');
198 let whoName = m.xfrom;
 
 
 
 
 
 
199 var d = new Date(m.mtime + "Z");
200 if( d.getMinutes().toString()!="NaN" ){
201 /* Show local time when we can compute it */
202 eWho.append(textNode(whoName+' @ '+
203 d.getHours()+":"+(d.getMinutes()+100).toString().slice(1,3)
@@ -231,15 +230,10 @@
230 }
231 if(m.xmsg){
232 span.innerHTML += m.xmsg;
233 }
234 span.classList.add('chat-message');
 
 
 
 
 
235 }
236 }
237 async function poll(){
238 if(poll.running) return;
239 poll.running = true;
240
M src/default.css
-11
--- src/default.css
+++ src/default.css
@@ -1479,15 +1479,10 @@
14791479
 /*border: 1px solid rgba(0,0,0,0.2);
14801480
 border-radius: 0.25em;
14811481
 box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);*/
14821482
 border: none;
14831483
 }
1484
-/* Rows for the current user have the .user-is-me CSS class
1485
- and get right-aligned. */
1486
-.message-row.user-is-me {
1487
- justify-content: flex-end;
1488
-}
14891484
 /* The content area of a message (the body element of a FIELDSET) */
14901485
 .message-content {
14911486
 display: inline-block;
14921487
 border-radius: 0.25em;
14931488
 border: 1px solid rgba(0,0,0,0.2);
@@ -1504,11 +1499,5 @@
15041499
 margin-left: 0.15em;
15051500
 padding: 0 0.5em 0em 0.5em;
15061501
 margin-bottom: 0.4em;
15071502
 cursor: pointer;
15081503
 }
1509
-/* Reposition "my" posts to the right */
1510
-.message-row.user-is-me .message-user {
1511
- /*text-align: right; Firefox requires the 'align' attribute */
1512
- margin-left: 0;
1513
- margin-right: 0.25em;
1514
-}
15151504
--- src/default.css
+++ src/default.css
@@ -1479,15 +1479,10 @@
1479 /*border: 1px solid rgba(0,0,0,0.2);
1480 border-radius: 0.25em;
1481 box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);*/
1482 border: none;
1483 }
1484 /* Rows for the current user have the .user-is-me CSS class
1485 and get right-aligned. */
1486 .message-row.user-is-me {
1487 justify-content: flex-end;
1488 }
1489 /* The content area of a message (the body element of a FIELDSET) */
1490 .message-content {
1491 display: inline-block;
1492 border-radius: 0.25em;
1493 border: 1px solid rgba(0,0,0,0.2);
@@ -1504,11 +1499,5 @@
1504 margin-left: 0.15em;
1505 padding: 0 0.5em 0em 0.5em;
1506 margin-bottom: 0.4em;
1507 cursor: pointer;
1508 }
1509 /* Reposition "my" posts to the right */
1510 .message-row.user-is-me .message-user {
1511 /*text-align: right; Firefox requires the 'align' attribute */
1512 margin-left: 0;
1513 margin-right: 0.25em;
1514 }
1515
--- src/default.css
+++ src/default.css
@@ -1479,15 +1479,10 @@
1479 /*border: 1px solid rgba(0,0,0,0.2);
1480 border-radius: 0.25em;
1481 box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);*/
1482 border: none;
1483 }
 
 
 
 
 
1484 /* The content area of a message (the body element of a FIELDSET) */
1485 .message-content {
1486 display: inline-block;
1487 border-radius: 0.25em;
1488 border: 1px solid rgba(0,0,0,0.2);
@@ -1504,11 +1499,5 @@
1499 margin-left: 0.15em;
1500 padding: 0 0.5em 0em 0.5em;
1501 margin-bottom: 0.4em;
1502 cursor: pointer;
1503 }
 
 
 
 
 
 
1504

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button