Fossil SCM

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.

stephan 2020-12-27 04:50 trunk
Commit 7c3cf7a189f075ab34786c340535d35ab2bfc2636e4d5d53d9c93a6d6a273b38
Parent d488f5c66c10b35…
2 files changed +15 -2 +12 -2
~ src/chat.js ~ src/default.css
M src/chat.js
+15 -2
--- src/chat.js
+++ src/chat.js
@@ -7,10 +7,20 @@
77
 const E1 = function(selector){
88
 const e = document.querySelector(selector);
99
 if(!e) throw new Error("missing required DOM element: "+selector);
1010
 return e;
1111
 };
12
+
13
+ (function(){
14
+ let dbg = document.querySelector('#debugMsg');
15
+ if(dbg){
16
+ /* This can inadvertently influence our flexbox layouts, so move
17
+ it out of the way. */
18
+ D.append(document.body,dbg);
19
+ }
20
+ })();
21
+
1222
 const isInViewport = function(e) {
1323
 const rect = e.getBoundingClientRect();
1424
 return (
1525
 rect.top >= 0 &&
1626
 rect.left >= 0 &&
@@ -30,11 +40,11 @@
3040
 bcl = document.body.classList;
3141
 const resized = function(){
3242
 const wh = window.innerHeight,
3343
 mult = bcl.contains('chat-only-mode') ? 0.95 : 0.85;
3444
 contentArea.style.maxHeight = (wh * mult)+"px";
35
- console.debug("resized.",wh, mult, window.getComputedStyle(contentArea).maxHeight);
45
+ //console.debug("resized.",wh, mult, window.getComputedStyle(contentArea).maxHeight);
3646
 };
3747
 var doit;
3848
 window.addEventListener('resize',function(ev){
3949
 clearTimeout(doit);
4050
 doit = setTimeout(resized, 100);
@@ -179,11 +189,14 @@
179189
 */
180190
 chatOnlyMode: function f(yes){
181191
 if(undefined === f.elemsToToggle){
182192
 f.elemsToToggle = [];
183193
 document.querySelectorAll(
184
- "body > div.header, body > div.mainmenu, body > div.footer"
194
+ ["body > div.header",
195
+ "body > div.mainmenu",
196
+ "body > div.footer",
197
+ "#debugMsg"].join(',')
185198
 ).forEach((e)=>f.elemsToToggle.push(e));
186199
 }
187200
 if(!arguments.length) yes = true;
188201
 if(yes === this.isChatOnlyMode()) return this;
189202
 if(yes){
190203
--- src/chat.js
+++ src/chat.js
@@ -7,10 +7,20 @@
7 const E1 = function(selector){
8 const e = document.querySelector(selector);
9 if(!e) throw new Error("missing required DOM element: "+selector);
10 return e;
11 };
 
 
 
 
 
 
 
 
 
 
12 const isInViewport = function(e) {
13 const rect = e.getBoundingClientRect();
14 return (
15 rect.top >= 0 &&
16 rect.left >= 0 &&
@@ -30,11 +40,11 @@
30 bcl = document.body.classList;
31 const resized = function(){
32 const wh = window.innerHeight,
33 mult = bcl.contains('chat-only-mode') ? 0.95 : 0.85;
34 contentArea.style.maxHeight = (wh * mult)+"px";
35 console.debug("resized.",wh, mult, window.getComputedStyle(contentArea).maxHeight);
36 };
37 var doit;
38 window.addEventListener('resize',function(ev){
39 clearTimeout(doit);
40 doit = setTimeout(resized, 100);
@@ -179,11 +189,14 @@
179 */
180 chatOnlyMode: function f(yes){
181 if(undefined === f.elemsToToggle){
182 f.elemsToToggle = [];
183 document.querySelectorAll(
184 "body > div.header, body > div.mainmenu, body > div.footer"
 
 
 
185 ).forEach((e)=>f.elemsToToggle.push(e));
186 }
187 if(!arguments.length) yes = true;
188 if(yes === this.isChatOnlyMode()) return this;
189 if(yes){
190
--- src/chat.js
+++ src/chat.js
@@ -7,10 +7,20 @@
7 const E1 = function(selector){
8 const e = document.querySelector(selector);
9 if(!e) throw new Error("missing required DOM element: "+selector);
10 return e;
11 };
12
13 (function(){
14 let dbg = document.querySelector('#debugMsg');
15 if(dbg){
16 /* This can inadvertently influence our flexbox layouts, so move
17 it out of the way. */
18 D.append(document.body,dbg);
19 }
20 })();
21
22 const isInViewport = function(e) {
23 const rect = e.getBoundingClientRect();
24 return (
25 rect.top >= 0 &&
26 rect.left >= 0 &&
@@ -30,11 +40,11 @@
40 bcl = document.body.classList;
41 const resized = function(){
42 const wh = window.innerHeight,
43 mult = bcl.contains('chat-only-mode') ? 0.95 : 0.85;
44 contentArea.style.maxHeight = (wh * mult)+"px";
45 //console.debug("resized.",wh, mult, window.getComputedStyle(contentArea).maxHeight);
46 };
47 var doit;
48 window.addEventListener('resize',function(ev){
49 clearTimeout(doit);
50 doit = setTimeout(resized, 100);
@@ -179,11 +189,14 @@
189 */
190 chatOnlyMode: function f(yes){
191 if(undefined === f.elemsToToggle){
192 f.elemsToToggle = [];
193 document.querySelectorAll(
194 ["body > div.header",
195 "body > div.mainmenu",
196 "body > div.footer",
197 "#debugMsg"].join(',')
198 ).forEach((e)=>f.elemsToToggle.push(e));
199 }
200 if(!arguments.length) yes = true;
201 if(yes === this.isChatOnlyMode()) return this;
202 if(yes){
203
M src/default.css
+12 -2
--- src/default.css
+++ src/default.css
@@ -1654,10 +1654,18 @@
16541654
 changes #chat-messages-wrapper's "gravity" for purposes of
16551655
 scrolling! If we instead use flex-direction:column then each new
16561656
 message pushes #chat-input-area down further off the screen!
16571657
 */
16581658
 align-items: stretch;
1659
+}
1660
+body.chat.chat-only-mode div.content {
1661
+ /*max-height: 95vh*//*larger than approx. this is too big for Firefox on Android*/;
1662
+ /* Some skins set margins and a max-width on div.content, but we
1663
+ needn't(?) honor those in chat-only mode. */
1664
+ margin: 0;
1665
+ width: 100%;
1666
+ max-width: 100%;
16591667
 }
16601668
 /* Wrapper for /chat user input controls */
16611669
 body.chat #chat-input-area {
16621670
 display: flex;
16631671
 flex-direction: column;
@@ -1664,12 +1672,10 @@
16641672
 padding: 0.5em 1em;
16651673
 border-bottom: none;
16661674
 border-top: 1px solid black;
16671675
 margin-bottom: 0;
16681676
 margin-top: 0.5em;
1669
- position: initial /*sticky currently disabled due to scrolling-related issues*/;
1670
- bottom: 0;
16711677
 }
16721678
 /* Widget holding the chat message input field, send button, and
16731679
 settings button. */
16741680
 body.chat #chat-input-line {
16751681
 display: flex;
@@ -1720,6 +1726,10 @@
17201726
 flex: 0 1 auto;
17211727
 padding: 0.5em 1em;
17221728
 margin-left: 0.5em;
17231729
 white-space: pre;
17241730
 font-family: monospace;
1731
+}
1732
+body.chat #chat-drop-details img {
1733
+ max-width: 45%;
1734
+ max-height: 45%;
17251735
 }
17261736
--- src/default.css
+++ src/default.css
@@ -1654,10 +1654,18 @@
1654 changes #chat-messages-wrapper's "gravity" for purposes of
1655 scrolling! If we instead use flex-direction:column then each new
1656 message pushes #chat-input-area down further off the screen!
1657 */
1658 align-items: stretch;
 
 
 
 
 
 
 
 
1659 }
1660 /* Wrapper for /chat user input controls */
1661 body.chat #chat-input-area {
1662 display: flex;
1663 flex-direction: column;
@@ -1664,12 +1672,10 @@
1664 padding: 0.5em 1em;
1665 border-bottom: none;
1666 border-top: 1px solid black;
1667 margin-bottom: 0;
1668 margin-top: 0.5em;
1669 position: initial /*sticky currently disabled due to scrolling-related issues*/;
1670 bottom: 0;
1671 }
1672 /* Widget holding the chat message input field, send button, and
1673 settings button. */
1674 body.chat #chat-input-line {
1675 display: flex;
@@ -1720,6 +1726,10 @@
1720 flex: 0 1 auto;
1721 padding: 0.5em 1em;
1722 margin-left: 0.5em;
1723 white-space: pre;
1724 font-family: monospace;
 
 
 
 
1725 }
1726
--- src/default.css
+++ src/default.css
@@ -1654,10 +1654,18 @@
1654 changes #chat-messages-wrapper's "gravity" for purposes of
1655 scrolling! If we instead use flex-direction:column then each new
1656 message pushes #chat-input-area down further off the screen!
1657 */
1658 align-items: stretch;
1659 }
1660 body.chat.chat-only-mode div.content {
1661 /*max-height: 95vh*//*larger than approx. this is too big for Firefox on Android*/;
1662 /* Some skins set margins and a max-width on div.content, but we
1663 needn't(?) honor those in chat-only mode. */
1664 margin: 0;
1665 width: 100%;
1666 max-width: 100%;
1667 }
1668 /* Wrapper for /chat user input controls */
1669 body.chat #chat-input-area {
1670 display: flex;
1671 flex-direction: column;
@@ -1664,12 +1672,10 @@
1672 padding: 0.5em 1em;
1673 border-bottom: none;
1674 border-top: 1px solid black;
1675 margin-bottom: 0;
1676 margin-top: 0.5em;
 
 
1677 }
1678 /* Widget holding the chat message input field, send button, and
1679 settings button. */
1680 body.chat #chat-input-line {
1681 display: flex;
@@ -1720,6 +1726,10 @@
1726 flex: 0 1 auto;
1727 padding: 0.5em 1em;
1728 margin-left: 0.5em;
1729 white-space: pre;
1730 font-family: monospace;
1731 }
1732 body.chat #chat-drop-details img {
1733 max-width: 45%;
1734 max-height: 45%;
1735 }
1736

Keyboard Shortcuts

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