Fossil SCM

Several forum style improvements based on forum feedback.

stephan 2020-08-14 17:57 trunk
Commit 2121b1f7a765114b7a50092617e1a87937ddbaab75a3ff2ab64da2545013eaa1
Parent b99c069a2c7004f…
2 files changed +27 -8 +30 -9
~ src/default.css ~ src/fossil.page.forumpost.js
M src/default.css
+27 -8
--- src/default.css
+++ src/default.css
@@ -775,20 +775,20 @@
775775
 div.forumHierRoot > div > form {
776776
 margin: 0.5em 0;
777777
 }
778778
 .forum-post-collapser {
779779
 font-size: 0.8em;
780
- margin: 0.2em 0 0 0;
780
+ margin: 0 0 0.4em 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
786786
 FF/Chrome simply do not agree on alignment with most values :/. */
787
- border-width: 1px;
788
- border-style: solid;
789
- border-radius: 0.25em;
787
+ border: 1px solid rgba(0, 0, 0, 0.1);
788
+ border-radius: 0 0 0.5em 0.5em;
789
+ border-color: rgba(0, 0, 0, 0.2);
790790
 opacity: 0.8;
791791
 cursor: pointer;
792792
 display: flex;
793793
 flex-direction: row;
794794
 justify-content: space-between;
@@ -795,14 +795,14 @@
795795
 }
796796
 .forum-post-collapser > span {
797797
 margin: 0 1em 0 1em;
798798
 vertical-align: middle;
799799
 }
800
-.forum-post-collapser.expanded > span::before {
800
+.forum-post-collapser.expanded > span:before {
801801
 content: "⇡⇡⇡" /*reminder: FF/Chrome cannot agree on alignment of ⮝*/;
802802
 }
803
-.forum-post-collapser:not(.expanded) > span::before {
803
+.forum-post-collapser:not(.expanded) > span:before {
804804
 content: "⇣⇣⇣";
805805
 }
806806
 div.forumPostBody{
807807
 max-height: 50em;
808808
 overflow: auto;
@@ -809,10 +809,13 @@
809809
 }
810810
 div.forumPostBody.with-expander {
811811
 display: flex;
812812
 flex-direction: row;
813813
 overflow: auto;
814
+}
815
+div.forumPostBody.with-expander:not(.expanded) > :first-child {
816
+ overflow-y: hidden;
814817
 }
815818
 div.forumPostBody.with-expander > *:first-child {
816819
 /* Main content DIV */
817820
 overflow: auto;
818821
 }
@@ -825,12 +828,28 @@
825828
 min-width: 1.25em;
826829
 max-width: 1.25em;
827830
 /*for testing only:*//*background: magenta;*/
828831
 margin: 0 0 0 0.2em /* leave a gap between this and the neighboring scrollbar */;
829832
 overflow: hidden;
830
- background-color: #777;
831
- opacity: 0.3;
833
+ display: flex;
834
+ flex-direction: column;
835
+ justify-content: space-around;
836
+ align-items: center;
837
+ border-radius: 0.1em;
838
+ cursor: pointer;
839
+ background-color: rgba(0, 0, 0, 0.05);
840
+ border: 1px solid rgba(0, 0, 0, 0.1);
841
+ border-bottom: 0;
842
+ border-radius: 0 0.5em 0 0;
843
+ border-color: rgba(0, 0, 0, 0.2);
844
+ opacity: 0.8;
845
+}
846
+div.forumPostBody.with-expander > *:nth-child(2) > span:before {
847
+ content: "⇣";
848
+}
849
+div.forumPostBody.with-expander.expanded > *:nth-child(2) > span:before {
850
+ content: "⇡";
832851
 }
833852
 div.forumPostBody.expanded {
834853
 max-height: initial;
835854
 }
836855
 div.forumPostBody.shrunken {
837856
--- src/default.css
+++ src/default.css
@@ -775,20 +775,20 @@
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
786 FF/Chrome simply do not agree on alignment with most values :/. */
787 border-width: 1px;
788 border-style: solid;
789 border-radius: 0.25em;
790 opacity: 0.8;
791 cursor: pointer;
792 display: flex;
793 flex-direction: row;
794 justify-content: space-between;
@@ -795,14 +795,14 @@
795 }
796 .forum-post-collapser > span {
797 margin: 0 1em 0 1em;
798 vertical-align: middle;
799 }
800 .forum-post-collapser.expanded > span::before {
801 content: "⇡⇡⇡" /*reminder: FF/Chrome cannot agree on alignment of ⮝*/;
802 }
803 .forum-post-collapser:not(.expanded) > span::before {
804 content: "⇣⇣⇣";
805 }
806 div.forumPostBody{
807 max-height: 50em;
808 overflow: auto;
@@ -809,10 +809,13 @@
809 }
810 div.forumPostBody.with-expander {
811 display: flex;
812 flex-direction: row;
813 overflow: auto;
 
 
 
814 }
815 div.forumPostBody.with-expander > *:first-child {
816 /* Main content DIV */
817 overflow: auto;
818 }
@@ -825,12 +828,28 @@
825 min-width: 1.25em;
826 max-width: 1.25em;
827 /*for testing only:*//*background: magenta;*/
828 margin: 0 0 0 0.2em /* 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
--- src/default.css
+++ src/default.css
@@ -775,20 +775,20 @@
775 div.forumHierRoot > div > form {
776 margin: 0.5em 0;
777 }
778 .forum-post-collapser {
779 font-size: 0.8em;
780 margin: 0 0 0.4em 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
786 FF/Chrome simply do not agree on alignment with most values :/. */
787 border: 1px solid rgba(0, 0, 0, 0.1);
788 border-radius: 0 0 0.5em 0.5em;
789 border-color: rgba(0, 0, 0, 0.2);
790 opacity: 0.8;
791 cursor: pointer;
792 display: flex;
793 flex-direction: row;
794 justify-content: space-between;
@@ -795,14 +795,14 @@
795 }
796 .forum-post-collapser > span {
797 margin: 0 1em 0 1em;
798 vertical-align: middle;
799 }
800 .forum-post-collapser.expanded > span:before {
801 content: "⇡⇡⇡" /*reminder: FF/Chrome cannot agree on alignment of ⮝*/;
802 }
803 .forum-post-collapser:not(.expanded) > span:before {
804 content: "⇣⇣⇣";
805 }
806 div.forumPostBody{
807 max-height: 50em;
808 overflow: auto;
@@ -809,10 +809,13 @@
809 }
810 div.forumPostBody.with-expander {
811 display: flex;
812 flex-direction: row;
813 overflow: auto;
814 }
815 div.forumPostBody.with-expander:not(.expanded) > :first-child {
816 overflow-y: hidden;
817 }
818 div.forumPostBody.with-expander > *:first-child {
819 /* Main content DIV */
820 overflow: auto;
821 }
@@ -825,12 +828,28 @@
828 min-width: 1.25em;
829 max-width: 1.25em;
830 /*for testing only:*//*background: magenta;*/
831 margin: 0 0 0 0.2em /* leave a gap between this and the neighboring scrollbar */;
832 overflow: hidden;
833 display: flex;
834 flex-direction: column;
835 justify-content: space-around;
836 align-items: center;
837 border-radius: 0.1em;
838 cursor: pointer;
839 background-color: rgba(0, 0, 0, 0.05);
840 border: 1px solid rgba(0, 0, 0, 0.1);
841 border-bottom: 0;
842 border-radius: 0 0.5em 0 0;
843 border-color: rgba(0, 0, 0, 0.2);
844 opacity: 0.8;
845 }
846 div.forumPostBody.with-expander > *:nth-child(2) > span:before {
847 content: "⇣";
848 }
849 div.forumPostBody.with-expander.expanded > *:nth-child(2) > span:before {
850 content: "⇡";
851 }
852 div.forumPostBody.expanded {
853 max-height: initial;
854 }
855 div.forumPostBody.shrunken {
856
M src/fossil.page.forumpost.js
+30 -9
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -13,30 +13,55 @@
1313
 const wasExpanded = widget.classList.contains('expanded');
1414
 widget.classList.toggle('expanded');
1515
 contentElem.classList.toggle('expanded');
1616
 if(wasExpanded){
1717
 contentElem.classList.add('shrunken');
18
- contentElem.parentElement.scrollIntoView();
18
+ contentElem.parentElement.scrollIntoView({
19
+ /* This is non-standard, but !(MSIE, Safari) supposedly support it:
20
+ https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#Browser_compatibility
21
+ */ behavior: 'smooth'
22
+ });
1923
 }else{
2024
 contentElem.classList.remove('shrunken');
2125
 }
2226
 return false;
2327
 };
2428
 };
29
+
2530
 /* Adds an Expand/Collapse toggle to all div.forumPostBody
2631
 elements which are deemed "too large" (those for which
2732
 scrolling is currently activated because they are taller than
2833
 their max-height). */
2934
 document.querySelectorAll(
3035
 'div.forumHier, div.forumTime, div.forumHierRoot'
31
- ).forEach(function(forumPostWrapper){
36
+ ).forEach(function f(forumPostWrapper){
3237
 const content = forumPostWrapper.querySelector('div.forumPostBody');
3338
 if(!content || !scrollbarIsVisible(content)) return;
3439
 const parent = content.parentElement,
3540
 rightTapZone = D.div(),
36
- widget = D.div(),
37
- widgetEventHandler = getWidgetHandler(widget, content);
41
+ widget = D.div();
42
+ /* Repopulates the rightTapZone with arrow indicators. Because
43
+ of the wildly varying height of these elements, This has to
44
+ be done dynamically at init time and upon collapse/expand. Will not
45
+ work until the rightTapZone has been added to the DOM. */
46
+ const refillTapZone = function f(){
47
+ if(!f.baseTapIndicatorHeight){
48
+ /* To figure out how often to place an arrow in the rightTapZone,
49
+ we simply grab the first header element from the page and use
50
+ its hight as our basis for calculation. */
51
+ const h1 = document.querySelector('h1, h2');
52
+ f.baseTapIndicatorHeight = h1.getBoundingClientRect().height;
53
+ }
54
+ D.clearElement(rightTapZone);
55
+ var rtzHeight = parseInt(window.getComputedStyle(rightTapZone).height);
56
+ do {
57
+ D.append(rightTapZone, D.span());
58
+ rtzHeight -= f.baseTapIndicatorHeight * 8;
59
+ }while(rtzHeight>0);
60
+ };
61
+ const handlerStep1 = getWidgetHandler(widget, content);
62
+ const widgetEventHandler = ()=>{ handlerStep1(); refillTapZone(); };
3863
 content.classList.add('with-expander');
3964
 widget.classList.add('forum-post-collapser');
4065
 widget.addEventListener('click', widgetEventHandler, false);
4166
 /** Append 3 children, which CSS will evenly space across the
4267
 widget. This improves visibility over having the label
@@ -46,16 +71,12 @@
4671
 if(content.nextSibling){
4772
 forumPostWrapper.insertBefore(widget, content.nextSibling);
4873
 }else{
4974
 forumPostWrapper.appendChild(widget);
5075
 }
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);
5676
 content.appendChild(rightTapZone);
5777
 rightTapZone.addEventListener('click', widgetEventHandler, false);
78
+ refillTapZone();
5879
 });
5980
 })/*onload callback*/;
6081
6182
 })(window.fossil);
6283
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -13,30 +13,55 @@
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
27 scrolling is currently activated because they are taller than
28 their max-height). */
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
@@ -46,16 +71,12 @@
46 if(content.nextSibling){
47 forumPostWrapper.insertBefore(widget, content.nextSibling);
48 }else{
49 forumPostWrapper.appendChild(widget);
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
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -13,30 +13,55 @@
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 /* This is non-standard, but !(MSIE, Safari) supposedly support it:
20 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#Browser_compatibility
21 */ behavior: 'smooth'
22 });
23 }else{
24 contentElem.classList.remove('shrunken');
25 }
26 return false;
27 };
28 };
29
30 /* Adds an Expand/Collapse toggle to all div.forumPostBody
31 elements which are deemed "too large" (those for which
32 scrolling is currently activated because they are taller than
33 their max-height). */
34 document.querySelectorAll(
35 'div.forumHier, div.forumTime, div.forumHierRoot'
36 ).forEach(function f(forumPostWrapper){
37 const content = forumPostWrapper.querySelector('div.forumPostBody');
38 if(!content || !scrollbarIsVisible(content)) return;
39 const parent = content.parentElement,
40 rightTapZone = D.div(),
41 widget = D.div();
42 /* Repopulates the rightTapZone with arrow indicators. Because
43 of the wildly varying height of these elements, This has to
44 be done dynamically at init time and upon collapse/expand. Will not
45 work until the rightTapZone has been added to the DOM. */
46 const refillTapZone = function f(){
47 if(!f.baseTapIndicatorHeight){
48 /* To figure out how often to place an arrow in the rightTapZone,
49 we simply grab the first header element from the page and use
50 its hight as our basis for calculation. */
51 const h1 = document.querySelector('h1, h2');
52 f.baseTapIndicatorHeight = h1.getBoundingClientRect().height;
53 }
54 D.clearElement(rightTapZone);
55 var rtzHeight = parseInt(window.getComputedStyle(rightTapZone).height);
56 do {
57 D.append(rightTapZone, D.span());
58 rtzHeight -= f.baseTapIndicatorHeight * 8;
59 }while(rtzHeight>0);
60 };
61 const handlerStep1 = getWidgetHandler(widget, content);
62 const widgetEventHandler = ()=>{ handlerStep1(); refillTapZone(); };
63 content.classList.add('with-expander');
64 widget.classList.add('forum-post-collapser');
65 widget.addEventListener('click', widgetEventHandler, false);
66 /** Append 3 children, which CSS will evenly space across the
67 widget. This improves visibility over having the label
@@ -46,16 +71,12 @@
71 if(content.nextSibling){
72 forumPostWrapper.insertBefore(widget, content.nextSibling);
73 }else{
74 forumPostWrapper.appendChild(widget);
75 }
 
 
 
 
 
76 content.appendChild(rightTapZone);
77 rightTapZone.addEventListener('click', widgetEventHandler, false);
78 refillTapZone();
79 });
80 })/*onload callback*/;
81
82 })(window.fossil);
83

Keyboard Shortcuts

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