Fossil SCM

Improved(?) the way forum post expansion is handled, based on forum feedback. Added a narrow "tap zone" to the right of the post scrollbars to expand/collapse. When a post is collapsed the first time, it is shrunken much smaller than its original size. When collapsing a post, we now scroll its parent element (post header), rather than the next post, into view.

stephan 2020-08-09 14:43 trunk
Commit ebbd20c63841472ae4ef45f117be75cb30b7430a56deec6e27b918cf22930385
Parent 84f697e570a8043…
2 files changed +30 -1 +13 -3
~ src/default.css ~ src/fossil.page.forumpost.js
M src/default.css
+30 -1
--- src/default.css
+++ src/default.css
@@ -775,11 +775,11 @@
775775
 div.forumHierRoot > div > form {
776776
 margin: 0.5em 0;
777777
 }
778778
 .forum-post-collapser {
779779
 font-size: 0.8em;
780
- margin-top: 0.2em;
780
+ margin: 0.2em 0 0 0;
781781
 padding: 0;
782782
 height: 1.75em;
783783
 line-height: 1.75em;
784784
 /* ^^^ Those sizes are finely tuned for the current selection of
785785
 arrow characters. If those change, these should, too. Remember that
@@ -803,15 +803,44 @@
803803
 .forum-post-collapser:not(.expanded) > span::before {
804804
 content: "⇣⇣⇣";
805805
 }
806806
 div.forumPostBody{
807807
 max-height: 50em;
808
+ /*overflow: auto;*/
809
+}
810
+div.forumPostBody.with-expander {
811
+ display: flex;
812
+ flex-direction: row;
813
+ overflow: auto;
814
+}
815
+div.forumPostBody.with-expander div:nth-of-type(1){
816
+ /* Main content DIV */
808817
 overflow: auto;
818
+}
819
+div.forumPostBody.with-expander.expanded div:nth-of-type(1) {
820
+ margin-bottom: 0.5em /* try to suppress scroll bar */;
821
+}
822
+div.forumPostBody.with-expander div:nth-of-type(2){
823
+ /* "Tap zone" for expansion of the post, sits to the right of the
824
+ post's content. */
825
+ min-width: 1.25em;
826
+ max-width: 1.25em;
827
+ /*for testing only:*//*background: magenta;*/
828
+ margin: 0 0 0 0.5em /* leave a gap between this and the neighboring scrollbar */;
829
+ overflow: hidden;
830
+ background-color: #777;
831
+ opacity: 0.3;
809832
 }
810833
 div.forumPostBody.expanded {
811834
 max-height: initial;
812835
 }
836
+div.forumPostBody.shrunken {
837
+ /* When an expandable post is un-expanded, it is shrunkend down
838
+ to this size instead of its original size. */
839
+ max-height: 8em;
840
+}
841
+
813842
 div.forumSel {
814843
 background-color: #cef;
815844
 }
816845
 div.forumObs {
817846
 color: #bbb;
818847
--- src/default.css
+++ src/default.css
@@ -775,11 +775,11 @@
775 div.forumHierRoot > div > form {
776 margin: 0.5em 0;
777 }
778 .forum-post-collapser {
779 font-size: 0.8em;
780 margin-top: 0.2em;
781 padding: 0;
782 height: 1.75em;
783 line-height: 1.75em;
784 /* ^^^ Those sizes are finely tuned for the current selection of
785 arrow characters. If those change, these should, too. Remember that
@@ -803,15 +803,44 @@
803 .forum-post-collapser:not(.expanded) > span::before {
804 content: "⇣⇣⇣";
805 }
806 div.forumPostBody{
807 max-height: 50em;
 
 
 
 
 
 
 
 
 
808 overflow: auto;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
809 }
810 div.forumPostBody.expanded {
811 max-height: initial;
812 }
 
 
 
 
 
 
813 div.forumSel {
814 background-color: #cef;
815 }
816 div.forumObs {
817 color: #bbb;
818
--- src/default.css
+++ src/default.css
@@ -775,11 +775,11 @@
775 div.forumHierRoot > div > form {
776 margin: 0.5em 0;
777 }
778 .forum-post-collapser {
779 font-size: 0.8em;
780 margin: 0.2em 0 0 0;
781 padding: 0;
782 height: 1.75em;
783 line-height: 1.75em;
784 /* ^^^ Those sizes are finely tuned for the current selection of
785 arrow characters. If those change, these should, too. Remember that
@@ -803,15 +803,44 @@
803 .forum-post-collapser:not(.expanded) > span::before {
804 content: "⇣⇣⇣";
805 }
806 div.forumPostBody{
807 max-height: 50em;
808 /*overflow: auto;*/
809 }
810 div.forumPostBody.with-expander {
811 display: flex;
812 flex-direction: row;
813 overflow: auto;
814 }
815 div.forumPostBody.with-expander div:nth-of-type(1){
816 /* Main content DIV */
817 overflow: auto;
818 }
819 div.forumPostBody.with-expander.expanded div:nth-of-type(1) {
820 margin-bottom: 0.5em /* try to suppress scroll bar */;
821 }
822 div.forumPostBody.with-expander div:nth-of-type(2){
823 /* "Tap zone" for expansion of the post, sits to the right of the
824 post's content. */
825 min-width: 1.25em;
826 max-width: 1.25em;
827 /*for testing only:*//*background: magenta;*/
828 margin: 0 0 0 0.5em /* leave a gap between this and the neighboring scrollbar */;
829 overflow: hidden;
830 background-color: #777;
831 opacity: 0.3;
832 }
833 div.forumPostBody.expanded {
834 max-height: initial;
835 }
836 div.forumPostBody.shrunken {
837 /* When an expandable post is un-expanded, it is shrunkend down
838 to this size instead of its original size. */
839 max-height: 8em;
840 }
841
842 div.forumSel {
843 background-color: #cef;
844 }
845 div.forumObs {
846 color: #bbb;
847
M src/fossil.page.forumpost.js
+13 -3
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -11,11 +11,16 @@
1111
 return function(ev){
1212
 if(ev) ev.preventDefault();
1313
 const wasExpanded = widget.classList.contains('expanded');
1414
 widget.classList.toggle('expanded');
1515
 contentElem.classList.toggle('expanded');
16
- if(wasExpanded) widget.scrollIntoView();
16
+ if(wasExpanded){
17
+ contentElem.classList.add('shrunken');
18
+ contentElem.parentElement.scrollIntoView();
19
+ }else{
20
+ contentElem.classList.remove('shrunken');
21
+ }
1722
 return false;
1823
 };
1924
 };
2025
 /* Adds an Expand/Collapse toggle to all div.forumPostBody
2126
 elements which are deemed "too large" (those for which
@@ -24,12 +29,15 @@
2429
 document.querySelectorAll(
2530
 'div.forumHier, div.forumTime, div.forumHierRoot'
2631
 ).forEach(function(forumPostWrapper){
2732
 const content = forumPostWrapper.querySelector('div.forumPostBody');
2833
 if(!content || !scrollbarIsVisible(content)) return;
29
- const widget = D.div(),
34
+ const parent = content.parentElement,
35
+ rightTapZone = D.div(),
36
+ widget = D.div(),
3037
 widgetEventHandler = getWidgetHandler(widget, content);
38
+ content.classList.add('with-expander');
3139
 widget.classList.add('forum-post-collapser');
3240
 widget.addEventListener('click', widgetEventHandler, false);
3341
 /** Append 3 children, which CSS will evenly space across the
3442
 widget. This improves visibility over having the label
3543
 in only the left, right, or center. */
@@ -42,10 +50,12 @@
4250
 }
4351
 /** A double-click toggle will select "the current word" on the
4452
 post, which is minorly annoying but otherwise harmless. Such
4553
 a toggle has proven convenient on "excessive" posts,
4654
 though. */
47
- content.addEventListener('dblclick', widgetEventHandler);
55
+ //content.addEventListener('dblclick', widgetEventHandler);
56
+ content.appendChild(rightTapZone);
57
+ rightTapZone.addEventListener('click', widgetEventHandler, false);
4858
 });
4959
 })/*onload callback*/;
5060
5161
 })(window.fossil);
5262
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -11,11 +11,16 @@
11 return function(ev){
12 if(ev) ev.preventDefault();
13 const wasExpanded = widget.classList.contains('expanded');
14 widget.classList.toggle('expanded');
15 contentElem.classList.toggle('expanded');
16 if(wasExpanded) widget.scrollIntoView();
 
 
 
 
 
17 return false;
18 };
19 };
20 /* Adds an Expand/Collapse toggle to all div.forumPostBody
21 elements which are deemed "too large" (those for which
@@ -24,12 +29,15 @@
24 document.querySelectorAll(
25 'div.forumHier, div.forumTime, div.forumHierRoot'
26 ).forEach(function(forumPostWrapper){
27 const content = forumPostWrapper.querySelector('div.forumPostBody');
28 if(!content || !scrollbarIsVisible(content)) return;
29 const widget = D.div(),
 
 
30 widgetEventHandler = getWidgetHandler(widget, content);
 
31 widget.classList.add('forum-post-collapser');
32 widget.addEventListener('click', widgetEventHandler, false);
33 /** Append 3 children, which CSS will evenly space across the
34 widget. This improves visibility over having the label
35 in only the left, right, or center. */
@@ -42,10 +50,12 @@
42 }
43 /** A double-click toggle will select "the current word" on the
44 post, which is minorly annoying but otherwise harmless. Such
45 a toggle has proven convenient on "excessive" posts,
46 though. */
47 content.addEventListener('dblclick', widgetEventHandler);
 
 
48 });
49 })/*onload callback*/;
50
51 })(window.fossil);
52
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -11,11 +11,16 @@
11 return function(ev){
12 if(ev) ev.preventDefault();
13 const wasExpanded = widget.classList.contains('expanded');
14 widget.classList.toggle('expanded');
15 contentElem.classList.toggle('expanded');
16 if(wasExpanded){
17 contentElem.classList.add('shrunken');
18 contentElem.parentElement.scrollIntoView();
19 }else{
20 contentElem.classList.remove('shrunken');
21 }
22 return false;
23 };
24 };
25 /* Adds an Expand/Collapse toggle to all div.forumPostBody
26 elements which are deemed "too large" (those for which
@@ -24,12 +29,15 @@
29 document.querySelectorAll(
30 'div.forumHier, div.forumTime, div.forumHierRoot'
31 ).forEach(function(forumPostWrapper){
32 const content = forumPostWrapper.querySelector('div.forumPostBody');
33 if(!content || !scrollbarIsVisible(content)) return;
34 const parent = content.parentElement,
35 rightTapZone = D.div(),
36 widget = D.div(),
37 widgetEventHandler = getWidgetHandler(widget, content);
38 content.classList.add('with-expander');
39 widget.classList.add('forum-post-collapser');
40 widget.addEventListener('click', widgetEventHandler, false);
41 /** Append 3 children, which CSS will evenly space across the
42 widget. This improves visibility over having the label
43 in only the left, right, or center. */
@@ -42,10 +50,12 @@
50 }
51 /** A double-click toggle will select "the current word" on the
52 post, which is minorly annoying but otherwise harmless. Such
53 a toggle has proven convenient on "excessive" posts,
54 though. */
55 //content.addEventListener('dblclick', widgetEventHandler);
56 content.appendChild(rightTapZone);
57 rightTapZone.addEventListener('click', widgetEventHandler, false);
58 });
59 })/*onload callback*/;
60
61 })(window.fossil);
62

Keyboard Shortcuts

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