Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Changes In Branch forum-expand-post-revisited Excluding Merge-Ins
This is equivalent to a diff from 84f697e5 to eef9ac05
2020-08-10
| ||
12:08 | Improved handling of long posts in the forum. ... (check-in: c265daea user: drh tags: trunk) | |
05:38 | Amend OpenBSD httpd Fossil server instructions to use the mount_mfs -P option to automatically populate the chroot /dev tree as suggested by anon on the forum. ... (check-in: 4b240ec3 user: jamsek tags: trunk) | |
2020-08-09
| ||
21:45 | Merge in trunk; resolve conflicts ... (Closed-Leaf check-in: 7cfbf66a user: ashepilko tags: cmake-ide) | |
15:18 | Corrected the new CSS selectors to account for plain-text posts, which use a PRE instead of DIV wrapper. Shrunk the gap between the expansion tap zone and the scrollbar to its left. ... (Closed-Leaf check-in: eef9ac05 user: stephan tags: forum-expand-post-revisited) | |
14:54 | Re-added an important forumPostBody.overflow CSS attribute which was accidentally removed in the last edit. ... (check-in: 939b6473 user: stephan tags: forum-expand-post-revisited) | |
14:43 | 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. ... (check-in: ebbd20c6 user: stephan tags: forum-expand-post-revisited) | |
13:49 | Revise and simplify the list of 1st-tier commands that are shown by the "fossil help" command. ... (check-in: 84f697e5 user: drh tags: trunk) | |
08:28 | Edit whitespace in previous commit to make format consistent with existing code blocks. ... (check-in: d2ad5f2f user: jamsek tags: trunk) | |
Changes to src/default.css.
︙ | ︙ | |||
773 774 775 776 777 778 779 | div.forumHier > div > form, div.forumTime > div > form, div.forumHierRoot > div > form { margin: 0.5em 0; } .forum-post-collapser { font-size: 0.8em; | | | 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 | div.forumHier > div > form, div.forumTime > div > form, div.forumHierRoot > div > form { margin: 0.5em 0; } .forum-post-collapser { font-size: 0.8em; margin: 0.2em 0 0 0; padding: 0; height: 1.75em; line-height: 1.75em; /* ^^^ Those sizes are finely tuned for the current selection of arrow characters. If those change, these should, too. Remember that FF/Chrome simply do not agree on alignment with most values :/. */ border-width: 1px; |
︙ | ︙ | |||
802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 | } .forum-post-collapser:not(.expanded) > span::before { content: "⇣⇣⇣"; } div.forumPostBody{ max-height: 50em; overflow: auto; } div.forumPostBody.expanded { max-height: initial; } div.forumSel { background-color: #cef; } div.forumObs { color: #bbb; } | > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 | } .forum-post-collapser:not(.expanded) > span::before { content: "⇣⇣⇣"; } div.forumPostBody{ max-height: 50em; overflow: auto; } div.forumPostBody.with-expander { display: flex; flex-direction: row; overflow: auto; } div.forumPostBody.with-expander > *:first-child { /* Main content DIV */ overflow: auto; } div.forumPostBody.with-expander.expanded > *:first-child { margin-bottom: 0.5em /* try to suppress scroll bar */; } div.forumPostBody.with-expander > *:nth-child(2) { /* "Tap zone" for expansion of the post, sits to the right of the post's content. */ min-width: 1.25em; max-width: 1.25em; /*for testing only:*//*background: magenta;*/ margin: 0 0 0 0.2em /* leave a gap between this and the neighboring scrollbar */; overflow: hidden; background-color: #777; opacity: 0.3; } div.forumPostBody.expanded { max-height: initial; } div.forumPostBody.shrunken { /* When an expandable post is un-expanded, it is shrunkend down to this size instead of its original size. */ max-height: 8em; } div.forumSel { background-color: #cef; } div.forumObs { color: #bbb; } |
︙ | ︙ |
Changes to src/fossil.page.forumpost.js.
︙ | ︙ | |||
9 10 11 12 13 14 15 | on contentElem when the given widget is activated. */ const getWidgetHandler = function(widget, contentElem){ return function(ev){ if(ev) ev.preventDefault(); const wasExpanded = widget.classList.contains('expanded'); widget.classList.toggle('expanded'); contentElem.classList.toggle('expanded'); | | > > > > > > > | > | > > | 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | on contentElem when the given widget is activated. */ const getWidgetHandler = function(widget, contentElem){ return function(ev){ if(ev) ev.preventDefault(); const wasExpanded = widget.classList.contains('expanded'); widget.classList.toggle('expanded'); contentElem.classList.toggle('expanded'); if(wasExpanded){ contentElem.classList.add('shrunken'); contentElem.parentElement.scrollIntoView(); }else{ contentElem.classList.remove('shrunken'); } return false; }; }; /* Adds an Expand/Collapse toggle to all div.forumPostBody elements which are deemed "too large" (those for which scrolling is currently activated because they are taller than their max-height). */ document.querySelectorAll( 'div.forumHier, div.forumTime, div.forumHierRoot' ).forEach(function(forumPostWrapper){ const content = forumPostWrapper.querySelector('div.forumPostBody'); if(!content || !scrollbarIsVisible(content)) return; const parent = content.parentElement, rightTapZone = D.div(), widget = D.div(), widgetEventHandler = getWidgetHandler(widget, content); content.classList.add('with-expander'); widget.classList.add('forum-post-collapser'); widget.addEventListener('click', widgetEventHandler, false); /** Append 3 children, which CSS will evenly space across the widget. This improves visibility over having the label in only the left, right, or center. */ var i = 0; for( ; i < 3; ++i ) D.append(widget, D.span()); if(content.nextSibling){ forumPostWrapper.insertBefore(widget, content.nextSibling); }else{ forumPostWrapper.appendChild(widget); } /** A double-click toggle will select "the current word" on the post, which is minorly annoying but otherwise harmless. Such a toggle has proven convenient on "excessive" posts, though. */ //content.addEventListener('dblclick', widgetEventHandler); content.appendChild(rightTapZone); rightTapZone.addEventListener('click', widgetEventHandler, false); }); })/*onload callback*/; })(window.fossil); |