Fossil

Check-in [f3c8e83858]
Login

Check-in [f3c8e83858]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Only right-align the self-posts if the outerWidth of the browser is less than 1000. Simplify the CSS by removing unused rules.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | chatroom-dev
Files: files | file ages | folders
SHA3-256: f3c8e8385848e4168f14135779e395c453440301a5dc503ed2c57f5a2cb2f7bd
User & Date: drh 2020-12-23 13:51:47.973
Context
2020-12-23
14:21
Made chat drop zone smaller by replacing its text with a helplet button. Added 'chat' table to the list of those NOT nuked by rebuild. ... (check-in: 85939ffcbe user: stephan tags: chatroom-dev)
13:51
Only right-align the self-posts if the outerWidth of the browser is less than 1000. Simplify the CSS by removing unused rules. ... (check-in: f3c8e83858 user: drh tags: chatroom-dev)
10:41
Added a Cancel button to the drag/drop file/image field to clear the pending blob. Still need to hook it up to interact with the file input field, but that will have to wait a bit. ... (check-in: 018084c50e user: stephan tags: chatroom-dev)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.js.
︙︙
182
183
184
185
186
187
188

189




190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206

      let row = document.createElement("fieldset");
      if( m.msgid>mxMsg ) mxMsg = m.msgid;
      row.classList.add('message-row');
      injectMessage(row);
      const eWho = document.createElement('legend');
      eWho.dataset.timestamp = m.mtime;
      eWho.addEventListener('click', handleLegendClicked, false);

      eWho.setAttribute('align', (m.xfrom===_me ? 'right' : 'left'));




      eWho.style.backgroundColor = m.uclr;
      row.appendChild(eWho);
      eWho.classList.add('message-user');
      let whoName;
      if( m.xfrom===_me ){
        whoName = 'me';
        row.classList.add('user-is-me');
      }else{
        whoName = m.xfrom;
      }
      var d = new Date(m.mtime + "Z");
      if( d.getMinutes().toString()!="NaN" ){
        /* Show local time when we can compute it */
        eWho.append(textNode(whoName+' @ '+
          d.getHours()+":"+(d.getMinutes()+100).toString().slice(1,3)
        ))
      }else{








>
|
>
>
>
>



<
<
<
<
<
|
<








182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197





198

199
200
201
202
203
204
205

      let row = document.createElement("fieldset");
      if( m.msgid>mxMsg ) mxMsg = m.msgid;
      row.classList.add('message-row');
      injectMessage(row);
      const eWho = document.createElement('legend');
      eWho.dataset.timestamp = m.mtime;
      eWho.addEventListener('click', handleLegendClicked, false);
      if( m.xfrom==_me && window.outerWidth<1000 ){
        eWho.setAttribute('align', 'right');
        row.style.justifyContent = "flex-end";
      }else{
        eWho.setAttribute('align', 'left');
      }
      eWho.style.backgroundColor = m.uclr;
      row.appendChild(eWho);
      eWho.classList.add('message-user');





      let whoName = m.xfrom;

      var d = new Date(m.mtime + "Z");
      if( d.getMinutes().toString()!="NaN" ){
        /* Show local time when we can compute it */
        eWho.append(textNode(whoName+' @ '+
          d.getHours()+":"+(d.getMinutes()+100).toString().slice(1,3)
        ))
      }else{
︙︙
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247

        br.style.clear = "both";
        span.appendChild(br);
      }
      if(m.xmsg){
        span.innerHTML += m.xmsg;
      }
      span.classList.add('chat-message');
      if( m.xfrom!=_me ){
        span.classList.add('chat-mx');
      }else{
        span.classList.add('chat-ms');
      }
    }
  }
  async function poll(){
    if(poll.running) return;
    poll.running = true;
    fetch("chat-poll/" + mxMsg)
    .then(x=>x.json())








<
<
<
<
<








228
229
230
231
232
233
234





235
236
237
238
239
240
241

        br.style.clear = "both";
        span.appendChild(br);
      }
      if(m.xmsg){
        span.innerHTML += m.xmsg;
      }
      span.classList.add('chat-message');





    }
  }
  async function poll(){
    if(poll.running) return;
    poll.running = true;
    fetch("chat-poll/" + mxMsg)
    .then(x=>x.json())
︙︙
Changes to src/default.css.
︙︙
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514

  flex-direction: row;
  justify-content: flex-start;
  /*border: 1px solid rgba(0,0,0,0.2);
  border-radius: 0.25em;
  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);*/
  border: none;
}
/* Rows for the current user have the .user-is-me CSS class
   and get right-aligned. */
.message-row.user-is-me {
  justify-content: flex-end;
}
/* The content area of a message (the body element of a FIELDSET) */
.message-content {
  display: inline-block;
  border-radius: 0.25em;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
  padding: 0.25em 1em;
  margin-top: -0.75em;
  min-width: 9em /*avoid unsightly "underlap" with the user name label*/;
}
/* User name for the post (a LEGEND element) */
.message-row .message-user {
  border-radius: 0.25em 0.25em 0 0;
  padding: 0 0.5em;
  /*text-align: left; Firefox requires the 'align' attribute */
  margin-left: 0.15em;
  padding: 0 0.5em 0em 0.5em;
  margin-bottom: 0.4em;
  cursor: pointer;
}
/* Reposition "my" posts to the right */
.message-row.user-is-me .message-user {
  /*text-align: right; Firefox requires the 'align' attribute */
  margin-left: 0;
  margin-right: 0.25em;
}








<
<
<
<
<




















<
<
<
<
<
<

1477
1478
1479
1480
1481
1482
1483





1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503







  flex-direction: row;
  justify-content: flex-start;
  /*border: 1px solid rgba(0,0,0,0.2);
  border-radius: 0.25em;
  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);*/
  border: none;
}





/* The content area of a message (the body element of a FIELDSET) */
.message-content {
  display: inline-block;
  border-radius: 0.25em;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
  padding: 0.25em 1em;
  margin-top: -0.75em;
  min-width: 9em /*avoid unsightly "underlap" with the user name label*/;
}
/* User name for the post (a LEGEND element) */
.message-row .message-user {
  border-radius: 0.25em 0.25em 0 0;
  padding: 0 0.5em;
  /*text-align: left; Firefox requires the 'align' attribute */
  margin-left: 0.15em;
  padding: 0 0.5em 0em 0.5em;
  margin-bottom: 0.4em;
  cursor: pointer;
}