Fossil

Check-in [7e6d2f0a11]
Login

Check-in [7e6d2f0a11]

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

Overview
Comment:Experimentally removed the left/right split of me/everyone else messages, per chatroom discussion. Added a min-width to messages to keep the user name from being longer than short messages (unless the user name is really long). Update: The experiment didn't work out. Moved to a branch.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | no-joy
Files: files | file ages | folders
SHA3-256: 7e6d2f0a1168c897554966da812d984f8618b97226074c124034ee836336c759
User & Date: stephan 2020-12-23 03:52:37.813
Original Comment: Experimentally removed the left/right split of me/everyone else messages, per chatroom discussion. Added a min-width to messages to keep the user name from being longer than short messages (unless the user name is really long).
References
2020-12-23
04:39
Re-added .message-content min-width which was lost when we rolled back [7e6d2f0a1]. ... (check-in: 67e5bd67d5 user: stephan tags: chatroom-dev)
Context
2020-12-23
03:52
Experimentally removed the left/right split of me/everyone else messages, per chatroom discussion. Added a min-width to messages to keep the user name from being longer than short messages (unless the user name is really long). Update: The experiment didn't work out. Moved to a branch. ... (Closed-Leaf check-in: 7e6d2f0a11 user: stephan tags: no-joy)
02:58
Show only the HH:MM part of the date for each chat message. ... (check-in: bc65900dae user: drh tags: chatroom-dev)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.js.
︙︙
32
33
34
35
36
37
38




39



40
41
42
43
44
45
46

    for(i=0; i<jx.msgs.length; ++i){
      let m = jx.msgs[i];
      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.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');








>
>
>
>
|
>
>
>








32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

    for(i=0; i<jx.msgs.length; ++i){
      let m = jx.msgs[i];
      let row = document.createElement("fieldset");
      if( m.msgid>mxMsg ) mxMsg = m.msgid;
      row.classList.add('message-row');
      injectMessage(row);
      const eWho = document.createElement('legend');
      if(false){
        /* Experimentally disabled, per (ahem) chat discussion.  Might
           be turned into a toggle or responsive design reaction
           later. */
        eWho.setAttribute('align', (m.xfrom===_me ? 'right' : 'left'));
      }else{
        eWho.setAttribute('align', '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');
︙︙
Changes to src/default.css.
︙︙
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

  /*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;

}
/* 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.25em;
  padding: 0 0.5em 0em 0.5em;
  margin-bottom: 0.4em;
}
/* 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;
}








>



>
>
>
>
>
>








>






|



<
<
<
<
<
<

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







  /*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. */
/*experimentally disabled per chat discussion
.message-row.user-is-me {
  justify-content: flex-end;
}
.message-row.user-is-me .message-user {
  margin-left: 0;
  margin-right: 0.25em;
}
*/

/* 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: 10em /*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;
}