Fossil SCM

Consolidated the common styles of the bottom- and right-side forum post expansion toggles and resolved a layout quirk which could cause the right-side expander to sit too far to the left.

stephan 2020-08-14 18:54 trunk
Commit db1afa75be73a5343c34039892031df7f352cefc53a9f7f238a5b6117bb6c165
Parent 2121b1f7a765114…
2 files changed +22 -21 +8 -3
~ src/default.css ~ src/fossil.page.forumpost.js
M src/default.css
+22 -21
--- src/default.css
+++ src/default.css
@@ -774,37 +774,41 @@
774774
 div.forumTime > div > form,
775775
 div.forumHierRoot > div > form {
776776
 margin: 0.5em 0;
777777
 }
778778
 .forum-post-collapser {
779
+ /* Common style for the bottom-of-post and right-of-post
780
+ expand/collapse widgets. */
779781
 font-size: 0.8em;
780
- margin: 0 0 0.4em 0;
781782
 padding: 0;
783
+ border: 1px solid rgba(0, 0, 0, 0.2);
784
+ border-radius: 0 0 0.5em 0.5em;
785
+ background-color: rgba(0, 0, 0, 0.05);
786
+ opacity: 0.8;
787
+ cursor: pointer;
788
+}
789
+.forum-post-collapser.bottom {
790
+ margin: 0 0 0.4em 0;
782791
 height: 1.75em;
783792
 line-height: 1.75em;
784793
 /* ^^^ Those sizes are finely tuned for the current selection of
785794
 arrow characters. If those change, these should, too. Remember that
786795
 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;
792796
 display: flex;
793797
 flex-direction: row;
794798
 justify-content: space-between;
795799
 }
796
-.forum-post-collapser > span {
800
+.forum-post-collapser.bottom > span {
797801
 margin: 0 1em 0 1em;
798802
 vertical-align: middle;
799803
 }
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
+.forum-post-collapser.bottom > span::before {
804805
 content: "⇣⇣⇣";
805806
 }
807
+.forum-post-collapser.bottom.expanded > span::before {
808
+ content: "⇡⇡⇡" /*reminder: FF/Chrome cannot agree on alignment of ⮝*/;
809
+}
806810
 div.forumPostBody{
807811
 max-height: 50em;
808812
 overflow: auto;
809813
 }
810814
 div.forumPostBody.with-expander {
@@ -814,41 +818,38 @@
814818
 }
815819
 div.forumPostBody.with-expander:not(.expanded) > :first-child {
816820
 overflow-y: hidden;
817821
 }
818822
 div.forumPostBody.with-expander > *:first-child {
819
- /* Main content DIV */
823
+ /* Main content DIV/PRE */
820824
 overflow: auto;
825
+ flex: 10 1 auto;
821826
 }
822827
 div.forumPostBody.with-expander.expanded > *:first-child {
823828
 margin-bottom: 0.5em /* try to suppress scroll bar */;
824829
 }
825
-div.forumPostBody.with-expander > *:nth-child(2) {
830
+div.forumPostBody.with-expander .forum-post-collapser.right {
826831
 /* "Tap zone" for expansion of the post, sits to the right of the
827832
 post's content. */
833
+ flex: 1 10 auto;
828834
 min-width: 1.25em;
829835
 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 */;
836
+ margin: 0 0 0 0.2em;
832837
 overflow: hidden;
833838
 display: flex;
834839
 flex-direction: column;
835840
 justify-content: space-around;
836841
 align-items: center;
837842
 border-radius: 0.1em;
838843
 cursor: pointer;
839
- background-color: rgba(0, 0, 0, 0.05);
840
- border: 1px solid rgba(0, 0, 0, 0.1);
841844
 border-bottom: 0;
842845
 border-radius: 0 0.5em 0 0;
843
- border-color: rgba(0, 0, 0, 0.2);
844
- opacity: 0.8;
845846
 }
846
-div.forumPostBody.with-expander > *:nth-child(2) > span:before {
847
+div.forumPostBody.with-expander .forum-post-collapser.right > span:before {
847848
 content: "⇣";
848849
 }
849
-div.forumPostBody.with-expander.expanded > *:nth-child(2) > span:before {
850
+div.forumPostBody.with-expander.expanded .forum-post-collapser.right > span:before {
850851
 content: "⇡";
851852
 }
852853
 div.forumPostBody.expanded {
853854
 max-height: initial;
854855
 }
855856
--- src/default.css
+++ src/default.css
@@ -774,37 +774,41 @@
774 div.forumTime > div > form,
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 }
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 }
810 div.forumPostBody.with-expander {
@@ -814,41 +818,38 @@
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 }
822 div.forumPostBody.with-expander.expanded > *:first-child {
823 margin-bottom: 0.5em /* try to suppress scroll bar */;
824 }
825 div.forumPostBody.with-expander > *:nth-child(2) {
826 /* "Tap zone" for expansion of the post, sits to the right of the
827 post's content. */
 
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
--- src/default.css
+++ src/default.css
@@ -774,37 +774,41 @@
774 div.forumTime > div > form,
775 div.forumHierRoot > div > form {
776 margin: 0.5em 0;
777 }
778 .forum-post-collapser {
779 /* Common style for the bottom-of-post and right-of-post
780 expand/collapse widgets. */
781 font-size: 0.8em;
 
782 padding: 0;
783 border: 1px solid rgba(0, 0, 0, 0.2);
784 border-radius: 0 0 0.5em 0.5em;
785 background-color: rgba(0, 0, 0, 0.05);
786 opacity: 0.8;
787 cursor: pointer;
788 }
789 .forum-post-collapser.bottom {
790 margin: 0 0 0.4em 0;
791 height: 1.75em;
792 line-height: 1.75em;
793 /* ^^^ Those sizes are finely tuned for the current selection of
794 arrow characters. If those change, these should, too. Remember that
795 FF/Chrome simply do not agree on alignment with most values :/. */
 
 
 
 
 
796 display: flex;
797 flex-direction: row;
798 justify-content: space-between;
799 }
800 .forum-post-collapser.bottom > span {
801 margin: 0 1em 0 1em;
802 vertical-align: middle;
803 }
804 .forum-post-collapser.bottom > span::before {
 
 
 
805 content: "⇣⇣⇣";
806 }
807 .forum-post-collapser.bottom.expanded > span::before {
808 content: "⇡⇡⇡" /*reminder: FF/Chrome cannot agree on alignment of ⮝*/;
809 }
810 div.forumPostBody{
811 max-height: 50em;
812 overflow: auto;
813 }
814 div.forumPostBody.with-expander {
@@ -814,41 +818,38 @@
818 }
819 div.forumPostBody.with-expander:not(.expanded) > :first-child {
820 overflow-y: hidden;
821 }
822 div.forumPostBody.with-expander > *:first-child {
823 /* Main content DIV/PRE */
824 overflow: auto;
825 flex: 10 1 auto;
826 }
827 div.forumPostBody.with-expander.expanded > *:first-child {
828 margin-bottom: 0.5em /* try to suppress scroll bar */;
829 }
830 div.forumPostBody.with-expander .forum-post-collapser.right {
831 /* "Tap zone" for expansion of the post, sits to the right of the
832 post's content. */
833 flex: 1 10 auto;
834 min-width: 1.25em;
835 max-width: 1.25em;
836 margin: 0 0 0 0.2em;
 
837 overflow: hidden;
838 display: flex;
839 flex-direction: column;
840 justify-content: space-around;
841 align-items: center;
842 border-radius: 0.1em;
843 cursor: pointer;
 
 
844 border-bottom: 0;
845 border-radius: 0 0.5em 0 0;
 
 
846 }
847 div.forumPostBody.with-expander .forum-post-collapser.right > span:before {
848 content: "⇣";
849 }
850 div.forumPostBody.with-expander.expanded .forum-post-collapser.right > span:before {
851 content: "⇡";
852 }
853 div.forumPostBody.expanded {
854 max-height: initial;
855 }
856
M src/fossil.page.forumpost.js
+8 -3
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -35,12 +35,18 @@
3535
 'div.forumHier, div.forumTime, div.forumHierRoot'
3636
 ).forEach(function f(forumPostWrapper){
3737
 const content = forumPostWrapper.querySelector('div.forumPostBody');
3838
 if(!content || !scrollbarIsVisible(content)) return;
3939
 const parent = content.parentElement,
40
- rightTapZone = D.div(),
41
- widget = D.div();
40
+ widget = D.addClass(
41
+ D.div(),
42
+ 'forum-post-collapser','bottom'
43
+ ),
44
+ rightTapZone = D.addClass(
45
+ D.div(),
46
+ 'forum-post-collapser','right'
47
+ );
4248
 /* Repopulates the rightTapZone with arrow indicators. Because
4349
 of the wildly varying height of these elements, This has to
4450
 be done dynamically at init time and upon collapse/expand. Will not
4551
 work until the rightTapZone has been added to the DOM. */
4652
 const refillTapZone = function f(){
@@ -59,11 +65,10 @@
5965
 }while(rtzHeight>0);
6066
 };
6167
 const handlerStep1 = getWidgetHandler(widget, content);
6268
 const widgetEventHandler = ()=>{ handlerStep1(); refillTapZone(); };
6369
 content.classList.add('with-expander');
64
- widget.classList.add('forum-post-collapser');
6570
 widget.addEventListener('click', widgetEventHandler, false);
6671
 /** Append 3 children, which CSS will evenly space across the
6772
 widget. This improves visibility over having the label
6873
 in only the left, right, or center. */
6974
 var i = 0;
7075
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -35,12 +35,18 @@
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(){
@@ -59,11 +65,10 @@
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
68 in only the left, right, or center. */
69 var i = 0;
70
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -35,12 +35,18 @@
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 widget = D.addClass(
41 D.div(),
42 'forum-post-collapser','bottom'
43 ),
44 rightTapZone = D.addClass(
45 D.div(),
46 'forum-post-collapser','right'
47 );
48 /* Repopulates the rightTapZone with arrow indicators. Because
49 of the wildly varying height of these elements, This has to
50 be done dynamically at init time and upon collapse/expand. Will not
51 work until the rightTapZone has been added to the DOM. */
52 const refillTapZone = function f(){
@@ -59,11 +65,10 @@
65 }while(rtzHeight>0);
66 };
67 const handlerStep1 = getWidgetHandler(widget, content);
68 const widgetEventHandler = ()=>{ handlerStep1(); refillTapZone(); };
69 content.classList.add('with-expander');
 
70 widget.addEventListener('click', widgetEventHandler, false);
71 /** Append 3 children, which CSS will evenly space across the
72 widget. This improves visibility over having the label
73 in only the left, right, or center. */
74 var i = 0;
75

Keyboard Shortcuts

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