Fossil

Check-in [670732a68f]
Login
Home Timeline Docs Branches Tickets Wiki DownloadMore...

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

Overview
Comment:CSS tweaks to attempt to counter some Safari message spacing problems - cannot test locally. Also limit the chat image preview to 40% of the viewport width/height, to avoid it taking up the whole screen for a large image.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | chat-safari-breaks-here | chat-safari-experiments
Files: files | file ages | folders
SHA3-256: 670732a68ffb57eb650a474de0aa81d7e1ae55e248804e58d7af028a4ec97fb1
User & Date: stephan 2020-12-27 01:07:26.143
References
2020-12-27
04:50
chat: reintegrated partial changes from [b0ab6cbd3] and [670732a6]: remove skin-induced div.content margins in chat-only mode and cap image preview size to avoid screen overflow. Moved #dbgMessage element out of the way at app startup to avoid it potentially influencing our flexbox layout, and include that element in the to-hide list for chat-only mode. Edit: Martin G. reports that this one also causes Grief with Safari, but in different ways that before. Closed-Leaf check-in: 7c3cf7a189 user: stephan tags: no-joy
Context
2020-12-27
01:58
chat: Safari has a severe allergic reaction to CSS vh units, so calculate the size of the affected DOM element in JS code at app startup and when the window resizes. Closed-Leaf check-in: 8747d85ea0 user: stephan tags: chat-safari-breaks-here, chat-safari-experiments
01:07
CSS tweaks to attempt to counter some Safari message spacing problems - cannot test locally. Also limit the chat image preview to 40% of the viewport width/height, to avoid it taking up the whole screen for a large image. check-in: 670732a68f user: stephan tags: chat-safari-breaks-here, chat-safari-experiments
00:32
Force bottom-up chat mode, now that the toggle is removed but it might still be set in some localStorage storage. Closed-Leaf check-in: a6650eb776 user: stephan tags: chat-safari-breaks-here
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.js.
︙︙
654
655
656
657
658
659
660
661
662

663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686

687
688
689
690
691
692
693

      }
    },{
      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")+".");
      }
    }];

    /**
       Rebuild the menu each time it's shown so that the toggles can
       show their current values.
    */
    settingsPopup.options.refresh = function(){
      D.clearElement(this.e);
      settingsOps.forEach(function(op){

        const line = D.addClass(D.span(), 'menu-entry');
        const btn = D.append(D.addClass(D.span(), 'button'), op.label);
        D.attr(btn, 'role', 'button');
        const callback = function(ev){
          settingsPopup.hide();
          op.callback.call(this,ev);
        };








|

>







|
















>








654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695

      }
    },{
      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",
      disable: true,
      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")+".");
      }
    }];

    /**
       Rebuild the menu each time it's shown so that the toggles can
       show their current values.
    */
    settingsPopup.options.refresh = function(){
      D.clearElement(this.e);
      settingsOps.forEach(function(op){
        if(op.disable) return;
        const line = D.addClass(D.span(), 'menu-entry');
        const btn = D.append(D.addClass(D.span(), 'button'), op.label);
        D.attr(btn, 'role', 'button');
        const callback = function(ev){
          settingsPopup.hide();
          op.callback.call(this,ev);
        };
︙︙
Changes to src/default.css.
︙︙
1495
1496
1497
1498
1499
1500
1501

1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518

  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 0.5em;
  margin-top: 0;
  min-width: 9em /*avoid unsightly "underlap" with the neighboring
                   .message-widget-tab element*/;
  white-space: pre-wrap/*needed for multi-line edits*/;

}
body.chat.monospace-messages .message-widget-content,
body.chat.monospace-messages textarea,
body.chat.monospace-messages input[type=text]{
  font-family: monospace;  
}
/* User name and timestamp (a LEGEND-like element) */
body.chat .message-widget .message-widget-tab {
  border-radius: 0.25em 0.25em 0 0;
  margin: 0 0.25em 0em 0.15em;
  padding: 0 0.5em 0.15em 0.5em;
  cursor: pointer;
  white-space: nowrap;
}
body.chat .fossil-tooltip.help-buttonlet-content {
  font-size: 80%;
}








>









|








1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519

  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 0.5em;
  margin-top: 0;
  min-width: 9em /*avoid unsightly "underlap" with the neighboring
                   .message-widget-tab element*/;
  white-space: pre-wrap/*needed for multi-line edits*/;
  flex: 1 1 auto;
}
body.chat.monospace-messages .message-widget-content,
body.chat.monospace-messages textarea,
body.chat.monospace-messages input[type=text]{
  font-family: monospace;  
}
/* User name and timestamp (a LEGEND-like element) */
body.chat .message-widget .message-widget-tab {
  border-radius: 0.25em 0.25em 0 0;
  margin: 0.25em 0.25em 0em 0.15em;
  padding: 0 0.5em 0.15em 0.5em;
  cursor: pointer;
  white-space: nowrap;
}
body.chat .fossil-tooltip.help-buttonlet-content {
  font-size: 80%;
}
︙︙
1639
1640
1641
1642
1643
1644
1645

1646
1647
1648
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665

/** Container for the list of /chat messages. */
body.chat #chat-messages-wrapper {
  display: flex;
  flex-direction: column;
  overflow: auto;
  width: 100%;
  flex: 1 1 auto;

}
body.chat.chat-bottom-up #chat-messages-wrapper {
  flex-direction: column-reverse;
  z-index: 99 /* so that it scrolls under input area. If it's
                 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;








>












<








1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659

1660
1661
1662
1663
1664
1665
1666

/** Container for the list of /chat messages. */
body.chat #chat-messages-wrapper {
  display: flex;
  flex-direction: column;
  overflow: auto;
  width: 100%;
  flex: 1 1 auto;
  justify-content: flex-start;
}
body.chat.chat-bottom-up #chat-messages-wrapper {
  flex-direction: column-reverse;
  z-index: 99 /* so that it scrolls under input area. If it's
                 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;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: 85vh /* rough approximate */;
}
body.chat.chat-bottom-up div.content {
  flex-direction: column-reverse;
︙︙
1739
1740
1741
1742
1743
1744
1745
1746







/* Widget holding the details of a selected/dropped file/image. */
body.chat #chat-drop-details {
  flex: 0 1 auto;
  padding: 0.5em 1em;
  margin-left: 0.5em;
  white-space: pre;
  font-family: monospace;
}















>
>
>
>
>
>

1740
1741
1742
1743
1744
1745
1746
1747
1748
1749
1750
1751
1752
1753

/* Widget holding the details of a selected/dropped file/image. */
body.chat #chat-drop-details {
  flex: 0 1 auto;
  padding: 0.5em 1em;
  margin-left: 0.5em;
  white-space: pre;
  font-family: monospace;
}
body.chat #chat-drop-details img {
  /* If we don't artificially limit the img preview size, they can be
     so big that the user cannot navigate to the buttons. */
  max-height: 40vh;
  max-width: 40vw;
}
This page was generated in about 0.02s by Fossil 2.26 [1205ec86cb] 2025-04-30 16:57:32