Fossil

Check-in [22b0faad3a]
Login

Check-in [22b0faad3a]

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

Overview
Comment:Disabled the top-down/bottom-up chat toggle, per chat discussion. Removed explicit setting of div.content margins, in chat,except in chat-only mode, so that we honor skin-level margin settings (resolves layout breakage in Xekri skin).
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | chat-safari-breaks-here
Files: files | file ages | folders
SHA3-256: 22b0faad3a7c7eb4bede4d817711a8eea1ec2e009fccbe46efce765f34fcbde5
User & Date: stephan 2020-12-27 00:22:07.588
Context
2020-12-27
00:27
Remove skin-installed div.content max-width limitations when running in chat-only mode, and expand to the full width. ... (check-in: b0ab6cbd3b user: stephan tags: chat-safari-breaks-here)
00:22
Disabled the top-down/bottom-up chat toggle, per chat discussion. Removed explicit setting of div.content margins, in chat,except in chat-only mode, so that we honor skin-level margin settings (resolves layout breakage in Xekri skin). ... (check-in: 22b0faad3a user: stephan tags: chat-safari-breaks-here)
2020-12-26
23:57
Found what seems to be a more or less viable solution for the chat layout in which the input area is effectively sticky while not actually being so. New messages do not scroll to the start of the list except for when a user locally posts a message, but instead, if a new message arrives and is scrolled out of view, a toast is shown to gently alert the user that a new message has arrived. ... (check-in: 0a00a10312 user: stephan tags: chat-safari-breaks-here)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.js.
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
      }
    },{
      label: "Left-align my posts",
      boolValue: ()=>!document.body.classList.contains('my-messages-right'),
      callback: function f(){
        document.body.classList.toggle('my-messages-right');
      }
    },{
      label: "Bottom-up chat",
      boolValue: ()=>document.body.classList.contains('chat-bottom-up'),
      callback: function(){
        document.body.classList.toggle('chat-bottom-up');
        Chat.settings.set('bottom-up',
                          document.body.classList.contains('chat-bottom-up'));
        setTimeout(()=>Chat.e.inputWrapper.scrollIntoView(), 0);
      }
    },{
      label: "Images inline",
      boolValue: ()=>Chat.settings.getBool('images-inline'),
      callback: function(){
        const v = Chat.settings.getBool('images-inline',true);
        Chat.settings.set('images-inline', !v);
        F.toast.message("Image mode set to "+(v ? "hyperlink" : "inline")+".");
      }







|








|







652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
      }
    },{
      label: "Left-align my posts",
      boolValue: ()=>!document.body.classList.contains('my-messages-right'),
      callback: function f(){
        document.body.classList.toggle('my-messages-right');
      }
    }/**,{
      label: "Bottom-up chat",
      boolValue: ()=>document.body.classList.contains('chat-bottom-up'),
      callback: function(){
        document.body.classList.toggle('chat-bottom-up');
        Chat.settings.set('bottom-up',
                          document.body.classList.contains('chat-bottom-up'));
        setTimeout(()=>Chat.e.inputWrapper.scrollIntoView(), 0);
      }
    }*/,{
      label: "Images inline",
      boolValue: ()=>Chat.settings.getBool('images-inline'),
      callback: function(){
        const v = Chat.settings.getBool('images-inline',true);
        Chat.settings.set('images-inline', !v);
        F.toast.message("Image mode set to "+(v ? "hyperlink" : "inline")+".");
      }
Changes to src/default.css.
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665
1666
1667
1668
1669

1670
1671
1672
1673
1674
1675
1676
                 lower than div.content then mouse events to it
                 are blocked!*/;
}
body.chat.chat-only-mode #chat-message-wrapper {
}

body.chat div.content {
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: 85vh /* rough approximate */;
}
body.chat.chat-bottom-up div.content {
  flex-direction: column-reverse;
}
body.chat.chat-only-mode div.content {
  max-height: 95vh/*larger than approx. this is too big for Firefox on Android*/;

}
/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid black;
  padding: 0.5em 1em 0 0.5em;







<












>







1650
1651
1652
1653
1654
1655
1656

1657
1658
1659
1660
1661
1662
1663
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673
1674
1675
1676
                 lower than div.content then mouse events to it
                 are blocked!*/;
}
body.chat.chat-only-mode #chat-message-wrapper {
}

body.chat div.content {

  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: 85vh /* rough approximate */;
}
body.chat.chat-bottom-up div.content {
  flex-direction: column-reverse;
}
body.chat.chat-only-mode div.content {
  max-height: 95vh/*larger than approx. this is too big for Firefox on Android*/;
  margin: 0;
}
/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid black;
  padding: 0.5em 1em 0 0.5em;