Elk Development => Theme development => Topic started by: radu81 on January 11, 2022, 03:40:38 am
Title: Click to expand quote
Post by: radu81 on January 11, 2022, 03:40:38 am
I often see users on my forum abusing the quote function, they use it even if there is no need to use. I happens on boths forums, xf and elkarte, so nothing to complain about software. Sometimes they do quote (without reason) very long posts and on elkarte I end up to scroll a full page with only a quote, while on XF the quote is "compressed" (I hope it's the right term)
I attach a couple of screens from XF and one from my elkarte forum. What do you think about it, it has sense to be added on elkarte? Thank you
Title: Re: Click to expand quote
Post by: Spuds on January 11, 2022, 08:42:03 am
Thats easy to address .... at least I feel so. I'll post some code once I take a look
Title: Re: Click to expand quote
Post by: augras on January 12, 2022, 07:21:04 am
It's a very good idea.
An other one, maybe : select text and then click to Quote, and just the selected text will be quoted ?
Title: Re: Click to expand quote
Post by: radu81 on January 12, 2022, 08:48:34 am
There is an add-on for that https://www.elkarte.net/community/index.php?topic=3456
Title: Re: Click to expand quote
Post by: Spuds on January 12, 2022, 09:49:16 am
Quote from: radu81 – I often see users on my forum abusing the quote function, they use it even if there is no need to use. I happens on boths forums, xf and elkarte, so nothing to complain about software.
Sometimes they do quote (without reason) very long posts and on elkarte I end up to scroll a full page with only a quote, while on XF the quote is "compressed" (I hope it's the right term)
I attach a couple of screens from XF and one from my elkarte forum. What do you think about it, it has sense to be added on elkarte? Thank you
Quick Demo of what I think you want. Hope this works! ETA: Seems to work, now some notes. - There is no collapse back option, once expanded that is it (yes I could probably add that). - In this example the quote length is almost the same as what is allowed so the effect is not as pronounced. On a long quote you would see the page transition, hopefully smoothly (see example below) - This is all CSS no JS is needed. - Have not tested this on mobile. - Does not work with nested quotes
Title: Re: Click to expand quote
Post by: Spuds on January 12, 2022, 09:50:54 am
Some sample text to quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt dui ut ornare lectus sit amet. Lorem mollis aliquam ut porttitor leo a diam. Vel elit scelerisque mauris pellentesque pulvinar. Quam pellentesque nec nam aliquam sem. Mi tempus imperdiet nulla malesuada pellentesque elit eget. Egestas pretium aenean pharetra magna ac placerat. Nibh ipsum consequat nisl vel pretium. Cursus risus at ultrices mi tempus imperdiet nulla. Donec ultrices tincidunt arcu non sodales neque. Suspendisse sed nisi lacus sed viverra tellus. Scelerisque purus semper eget duis at tellus at urna condimentum. Ornare arcu odio ut sem. Tortor consequat id porta nibh. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim.
Tincidunt id aliquet risus feugiat in. Diam vulputate ut pharetra sit amet aliquam id. Quis hendrerit dolor magna eget. Proin sed libero enim sed faucibus turpis in eu mi. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Sit amet massa vitae tortor condimentum lacinia quis. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Ac placerat vestibulum lectus mauris ultrices eros. Mi bibendum neque egestas congue quisque egestas diam in arcu. In vitae turpis massa sed elementum. Pretium viverra suspendisse potenti nullam ac tortor. Integer eget aliquet nibh praesent tristique magna. Tristique senectus et netus et malesuada fames ac turpis egestas. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh.
Vel risus commodo viverra maecenas accumsan lacus. Sit amet dictum sit amet justo donec enim diam. Fringilla est ullamcorper eget nulla facilisi. Dignissim diam quis enim lobortis scelerisque. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Phasellus egestas tellus rutrum tellus. Augue interdum velit euismod in pellentesque massa placerat duis. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Sed odio morbi quis commodo. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Ut diam quam nulla porttitor massa id neque. Elementum eu facilisis sed odio morbi quis. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Amet venenatis urna cursus eget. Luctus accumsan tortor posuere ac ut. Sit amet facilisis magna etiam tempor orci eu. Leo urna molestie at elementum eu facilisis sed.
Facilisi etiam dignissim diam quis enim. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac turpis egestas integer eget aliquet nibh praesent. Quam quisque id diam vel quam elementum pulvinar etiam. Ut etiam sit amet nisl purus in mollis. Nisi vitae suscipit tellus mauris a. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam phasellus vestibulum lorem sed risus. Imperdiet sed euismod nisi porta lorem mollis. Eget est lorem ipsum dolor sit amet consectetur. Interdum velit euismod in pellentesque. Nec ullamcorper sit amet risus nullam eget. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus.
Eget velit aliquet sagittis id consectetur purus. Habitasse platea dictumst vestibulum rhoncus. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Adipiscing vitae proin sagittis nisl rhoncus. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida. Id neque aliquam vestibulum morbi. Id donec ultrices tincidunt arcu. Tristique sollicitudin nibh sit amet commodo nulla. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Nunc sed id semper risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt dui ut ornare lectus sit amet. Lorem mollis aliquam ut porttitor leo a diam. Vel elit scelerisque mauris pellentesque pulvinar. Quam pellentesque nec nam aliquam sem. Mi tempus imperdiet nulla malesuada pellentesque elit eget. Egestas pretium aenean pharetra magna ac placerat. Nibh ipsum consequat nisl vel pretium. Cursus risus at ultrices mi tempus imperdiet nulla. Donec ultrices tincidunt arcu non sodales neque. Suspendisse sed nisi lacus sed viverra tellus. Scelerisque purus semper eget duis at tellus at urna condimentum. Ornare arcu odio ut sem. Tortor consequat id porta nibh. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim.
Tincidunt id aliquet risus feugiat in. Diam vulputate ut pharetra sit amet aliquam id. Quis hendrerit dolor magna eget. Proin sed libero enim sed faucibus turpis in eu mi. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Sit amet massa vitae tortor condimentum lacinia quis. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Ac placerat vestibulum lectus mauris ultrices eros. Mi bibendum neque egestas congue quisque egestas diam in arcu. In vitae turpis massa sed elementum. Pretium viverra suspendisse potenti nullam ac tortor. Integer eget aliquet nibh praesent tristique magna. Tristique senectus et netus et malesuada fames ac turpis egestas. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh.
Vel risus commodo viverra maecenas accumsan lacus. Sit amet dictum sit amet justo donec enim diam. Fringilla est ullamcorper eget nulla facilisi. Dignissim diam quis enim lobortis scelerisque. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Phasellus egestas tellus rutrum tellus. Augue interdum velit euismod in pellentesque massa placerat duis. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Sed odio morbi quis commodo. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Ut diam quam nulla porttitor massa id neque. Elementum eu facilisis sed odio morbi quis. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Amet venenatis urna cursus eget. Luctus accumsan tortor posuere ac ut. Sit amet facilisis magna etiam tempor orci eu. Leo urna molestie at elementum eu facilisis sed.
Facilisi etiam dignissim diam quis enim. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac turpis egestas integer eget aliquet nibh praesent. Quam quisque id diam vel quam elementum pulvinar etiam. Ut etiam sit amet nisl purus in mollis. Nisi vitae suscipit tellus mauris a. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam phasellus vestibulum lorem sed risus. Imperdiet sed euismod nisi porta lorem mollis. Eget est lorem ipsum dolor sit amet consectetur. Interdum velit euismod in pellentesque. Nec ullamcorper sit amet risus nullam eget. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus.
Eget velit aliquet sagittis id consectetur purus. Habitasse platea dictumst vestibulum rhoncus. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Adipiscing vitae proin sagittis nisl rhoncus. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida. Id neque aliquam vestibulum morbi. Id donec ultrices tincidunt arcu. Tristique sollicitudin nibh sit amet commodo nulla. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Nunc sed id semper risus.
Title: Re: Click to expand quote
Post by: Spuds on January 12, 2022, 09:51:42 am
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt dui ut ornare lectus sit amet. Lorem mollis aliquam ut porttitor leo a diam. Vel elit scelerisque mauris pellentesque pulvinar. Quam pellentesque nec nam aliquam sem. Mi tempus imperdiet nulla malesuada pellentesque elit eget. Egestas pretium aenean pharetra magna ac placerat. Nibh ipsum consequat nisl vel pretium. Cursus risus at ultrices mi tempus imperdiet nulla. Donec ultrices tincidunt arcu non sodales neque. Suspendisse sed nisi lacus sed viverra tellus. Scelerisque purus semper eget duis at tellus at urna condimentum. Ornare arcu odio ut sem. Tortor consequat id porta nibh. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim.
Tincidunt id aliquet risus feugiat in. Diam vulputate ut pharetra sit amet aliquam id. Quis hendrerit dolor magna eget. Proin sed libero enim sed faucibus turpis in eu mi. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Sit amet massa vitae tortor condimentum lacinia quis. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Ac placerat vestibulum lectus mauris ultrices eros. Mi bibendum neque egestas congue quisque egestas diam in arcu. In vitae turpis massa sed elementum. Pretium viverra suspendisse potenti nullam ac tortor. Integer eget aliquet nibh praesent tristique magna. Tristique senectus et netus et malesuada fames ac turpis egestas. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh.
Vel risus commodo viverra maecenas accumsan lacus. Sit amet dictum sit amet justo donec enim diam. Fringilla est ullamcorper eget nulla facilisi. Dignissim diam quis enim lobortis scelerisque. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Phasellus egestas tellus rutrum tellus. Augue interdum velit euismod in pellentesque massa placerat duis. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Sed odio morbi quis commodo. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Ut diam quam nulla porttitor massa id neque. Elementum eu facilisis sed odio morbi quis. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Amet venenatis urna cursus eget. Luctus accumsan tortor posuere ac ut. Sit amet facilisis magna etiam tempor orci eu. Leo urna molestie at elementum eu facilisis sed.
Facilisi etiam dignissim diam quis enim. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac turpis egestas integer eget aliquet nibh praesent. Quam quisque id diam vel quam elementum pulvinar etiam. Ut etiam sit amet nisl purus in mollis. Nisi vitae suscipit tellus mauris a. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam phasellus vestibulum lorem sed risus. Imperdiet sed euismod nisi porta lorem mollis. Eget est lorem ipsum dolor sit amet consectetur. Interdum velit euismod in pellentesque. Nec ullamcorper sit amet risus nullam eget. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus.
Eget velit aliquet sagittis id consectetur purus. Habitasse platea dictumst vestibulum rhoncus. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Adipiscing vitae proin sagittis nisl rhoncus. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida. Id neque aliquam vestibulum morbi. Id donec ultrices tincidunt arcu. Tristique sollicitudin nibh sit amet commodo nulla. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Nunc sed id semper risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt dui ut ornare lectus sit amet. Lorem mollis aliquam ut porttitor leo a diam. Vel elit scelerisque mauris pellentesque pulvinar. Quam pellentesque nec nam aliquam sem. Mi tempus imperdiet nulla malesuada pellentesque elit eget. Egestas pretium aenean pharetra magna ac placerat. Nibh ipsum consequat nisl vel pretium. Cursus risus at ultrices mi tempus imperdiet nulla. Donec ultrices tincidunt arcu non sodales neque. Suspendisse sed nisi lacus sed viverra tellus. Scelerisque purus semper eget duis at tellus at urna condimentum. Ornare arcu odio ut sem. Tortor consequat id porta nibh. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim.
Tincidunt id aliquet risus feugiat in. Diam vulputate ut pharetra sit amet aliquam id. Quis hendrerit dolor magna eget. Proin sed libero enim sed faucibus turpis in eu mi. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Sit amet massa vitae tortor condimentum lacinia quis. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Ac placerat vestibulum lectus mauris ultrices eros. Mi bibendum neque egestas congue quisque egestas diam in arcu. In vitae turpis massa sed elementum. Pretium viverra suspendisse potenti nullam ac tortor. Integer eget aliquet nibh praesent tristique magna. Tristique senectus et netus et malesuada fames ac turpis egestas. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh.
Vel risus commodo viverra maecenas accumsan lacus. Sit amet dictum sit amet justo donec enim diam. Fringilla est ullamcorper eget nulla facilisi. Dignissim diam quis enim lobortis scelerisque. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Phasellus egestas tellus rutrum tellus. Augue interdum velit euismod in pellentesque massa placerat duis. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Sed odio morbi quis commodo. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Ut diam quam nulla porttitor massa id neque. Elementum eu facilisis sed odio morbi quis. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Amet venenatis urna cursus eget. Luctus accumsan tortor posuere ac ut. Sit amet facilisis magna etiam tempor orci eu. Leo urna molestie at elementum eu facilisis sed.
Facilisi etiam dignissim diam quis enim. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac turpis egestas integer eget aliquet nibh praesent. Quam quisque id diam vel quam elementum pulvinar etiam. Ut etiam sit amet nisl purus in mollis. Nisi vitae suscipit tellus mauris a. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam phasellus vestibulum lorem sed risus. Imperdiet sed euismod nisi porta lorem mollis. Eget est lorem ipsum dolor sit amet consectetur. Interdum velit euismod in pellentesque. Nec ullamcorper sit amet risus nullam eget. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus.
Eget velit aliquet sagittis id consectetur purus. Habitasse platea dictumst vestibulum rhoncus. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Adipiscing vitae proin sagittis nisl rhoncus. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida. Id neque aliquam vestibulum morbi. Id donec ultrices tincidunt arcu. Tristique sollicitudin nibh sit amet commodo nulla. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Nunc sed id semper risus.
Now lets see what this does ... If you see nothing new, or its broken, please refresh your cache (ctrl+f5)
Title: Re: Click to expand quote
Post by: radu81 on January 12, 2022, 10:56:29 am
Just tested on Firefox (desktop & mobile) and works fine. I'd say there is no need for a collapse back button. Thanks for adding it to Elkarte
Title: Re: Click to expand quote
Post by: radu81 on January 12, 2022, 11:04:39 am
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt dui ut ornare lectus sit amet. Lorem mollis aliquam ut porttitor leo a diam. Vel elit scelerisque mauris pellentesque pulvinar. Quam pellentesque nec nam aliquam sem. Mi tempus imperdiet nulla malesuada pellentesque elit eget. Egestas pretium aenean pharetra magna ac placerat. Nibh ipsum consequat nisl vel pretium. Cursus risus at ultrices mi tempus imperdiet nulla. Donec ultrices tincidunt arcu non sodales neque. Suspendisse sed nisi lacus sed viverra tellus. Scelerisque purus semper eget duis at tellus at urna condimentum. Ornare arcu odio ut sem. Tortor consequat id porta nibh. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim.
Tincidunt id aliquet risus feugiat in. Diam vulputate ut pharetra sit amet aliquam id. Quis hendrerit dolor magna eget. Proin sed libero enim sed faucibus turpis in eu mi. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Sit amet massa vitae tortor condimentum lacinia quis. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Ac placerat vestibulum lectus mauris ultrices eros. Mi bibendum neque egestas congue quisque egestas diam in arcu. In vitae turpis massa sed elementum. Pretium viverra suspendisse potenti nullam ac tortor. Integer eget aliquet nibh praesent tristique magna. Tristique senectus et netus et malesuada fames ac turpis egestas. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh.
Vel risus commodo viverra maecenas accumsan lacus. Sit amet dictum sit amet justo donec enim diam. Fringilla est ullamcorper eget nulla facilisi. Dignissim diam quis enim lobortis scelerisque. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Phasellus egestas tellus rutrum tellus. Augue interdum velit euismod in pellentesque massa placerat duis. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Sed odio morbi quis commodo. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Ut diam quam nulla porttitor massa id neque. Elementum eu facilisis sed odio morbi quis. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Amet venenatis urna cursus eget. Luctus accumsan tortor posuere ac ut. Sit amet facilisis magna etiam tempor orci eu. Leo urna molestie at elementum eu facilisis sed.
Facilisi etiam dignissim diam quis enim. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac turpis egestas integer eget aliquet nibh praesent. Quam quisque id diam vel quam elementum pulvinar etiam. Ut etiam sit amet nisl purus in mollis. Nisi vitae suscipit tellus mauris a. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam phasellus vestibulum lorem sed risus. Imperdiet sed euismod nisi porta lorem mollis. Eget est lorem ipsum dolor sit amet consectetur. Interdum velit euismod in pellentesque. Nec ullamcorper sit amet risus nullam eget. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus.
Eget velit aliquet sagittis id consectetur purus. Habitasse platea dictumst vestibulum rhoncus. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Adipiscing vitae proin sagittis nisl rhoncus. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida. Id neque aliquam vestibulum morbi. Id donec ultrices tincidunt arcu. Tristique sollicitudin nibh sit amet commodo nulla. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Nunc sed id semper risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt dui ut ornare lectus sit amet. Lorem mollis aliquam ut porttitor leo a diam. Vel elit scelerisque mauris pellentesque pulvinar. Quam pellentesque nec nam aliquam sem. Mi tempus imperdiet nulla malesuada pellentesque elit eget. Egestas pretium aenean pharetra magna ac placerat. Nibh ipsum consequat nisl vel pretium. Cursus risus at ultrices mi tempus imperdiet nulla. Donec ultrices tincidunt arcu non sodales neque. Suspendisse sed nisi lacus sed viverra tellus. Scelerisque purus semper eget duis at tellus at urna condimentum. Ornare arcu odio ut sem. Tortor consequat id porta nibh. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim.
Tincidunt id aliquet risus feugiat in. Diam vulputate ut pharetra sit amet aliquam id. Quis hendrerit dolor magna eget. Proin sed libero enim sed faucibus turpis in eu mi. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Sit amet massa vitae tortor condimentum lacinia quis. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Ac placerat vestibulum lectus mauris ultrices eros. Mi bibendum neque egestas congue quisque egestas diam in arcu. In vitae turpis massa sed elementum. Pretium viverra suspendisse potenti nullam ac tortor. Integer eget aliquet nibh praesent tristique magna. Tristique senectus et netus et malesuada fames ac turpis egestas. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh.
Vel risus commodo viverra maecenas accumsan lacus. Sit amet dictum sit amet justo donec enim diam. Fringilla est ullamcorper eget nulla facilisi. Dignissim diam quis enim lobortis scelerisque. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Phasellus egestas tellus rutrum tellus. Augue interdum velit euismod in pellentesque massa placerat duis. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Sed odio morbi quis commodo. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Ut diam quam nulla porttitor massa id neque. Elementum eu facilisis sed odio morbi quis. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Amet venenatis urna cursus eget. Luctus accumsan tortor posuere ac ut. Sit amet facilisis magna etiam tempor orci eu. Leo urna molestie at elementum eu facilisis sed.
Facilisi etiam dignissim diam quis enim. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac turpis egestas integer eget aliquet nibh praesent. Quam quisque id diam vel quam elementum pulvinar etiam. Ut etiam sit amet nisl purus in mollis. Nisi vitae suscipit tellus mauris a. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam phasellus vestibulum lorem sed risus. Imperdiet sed euismod nisi porta lorem mollis. Eget est lorem ipsum dolor sit amet consectetur. Interdum velit euismod in pellentesque. Nec ullamcorper sit amet risus nullam eget. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus.
Eget velit aliquet sagittis id consectetur purus. Habitasse platea dictumst vestibulum rhoncus. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Adipiscing vitae proin sagittis nisl rhoncus. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida. Id neque aliquam vestibulum morbi. Id donec ultrices tincidunt arcu. Tristique sollicitudin nibh sit amet commodo nulla. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Nunc sed id semper risus.
Now lets see what this does ... If you see nothing new, or its broken, please refresh your cache (ctrl+f5)
Title: Re: Click to expand quote
Post by: radu81 on January 12, 2022, 11:12:42 am
If I am not asking too much, can this be enabled only for quotes longer than 4-5 rows? As you can see in the post above it is showing "Read more" even there is nothing more to read.
Title: Re: Click to expand quote
Post by: badmonkey on January 12, 2022, 11:32:15 am
On a Samsung S20 using Chrome, I'm getting full quotes and a checkbox?
Title: Re: Click to expand quote
Post by: radu81 on January 12, 2022, 11:39:43 am
You need to clear the cache first, then it will work ;)
Title: Re: Click to expand quote
Post by: badmonkey on January 12, 2022, 01:35:25 pm
Unfortunately that's a no go. Let's try it in another browser...
**Edit - apparently a cache cleaning and a restart are required to appease the Samsung deities. ;D
That's way cool!
Title: Re: Click to expand quote
Post by: Spuds on January 12, 2022, 01:56:54 pm
I think I have the nested quotes figured out, I sure do hate those things! Not only the code but actually seeing them in use LOL
Now onto the one line / short quote issue .... that may take some JS to fix, not sure yet! Now if CSS container query were here I could fix it easy, but thats a ways off I'm afraid.
Clearing the cache on some devices is really difficult, notably mobile :iphone: , some just don't like to do it
Title: Re: Click to expand quote
Post by: Spuds on January 12, 2022, 03:07:11 pm
Looks like the short quote is now partially working, some are now simple quotes and some are still collapsed. More investigation is required!
Title: Re: Click to expand quote
Post by: Spuds on January 12, 2022, 04:18:22 pm
OK I think the short lines are now sorted.
With quotes I'm sure there are many use cases that could make things misbehave, but this seems like a good start.
Title: Re: Click to expand quote
Post by: Spuds on January 12, 2022, 04:24:07 pm
With quotes I'm sure there are many use cases that could make things misbehave, but this seems like a good start.
Short Quote Test
Title: Re: Click to expand quote
Post by: radu81 on January 12, 2022, 05:31:19 pm
seems to work fine now :thumbsup:
Title: Re: Click to expand quote
Post by: augras on January 14, 2022, 02:19:36 am
Quote from: radu81 – There is an add-on for that https://www.elkarte.net/community/index.php?topic=3456
Very good : thank you @radu81. Il will try it.
For the test here with the "read more" it works fine for me : thank you @spuds !
Title: Re: Click to expand quote
Post by: Antechinus on February 16, 2022, 05:26:25 pm
It would be easy to add a re-collapse button. The extra code is pretty insignificant, so might as well have it IMO.
(Swap text via PHP when checkbox is checked, and that triggers uncheck for collapse).
Title: Re: Click to expand quote
Post by: Spuds on February 17, 2022, 12:02:42 pm
In doing some more testing I found a couple of, surprise, surprise, edge cases that needed fixing. I've updated the code on my local with the changes, and cleaned up some of my left over test code that I had forgotten to remove.
Title: Re: Click to expand quote
Post by: Antechinus on February 17, 2022, 03:16:50 pm
I just took a quick look at the markup and CSS that is currently running here. I have a suspicion you are making it more difficult than it needs to be.
You are setting the hidden overflow and initial max-height on the blockquote, which I suspect is why you are running into issues with edge cases (particularly given that .quoteheader is currently separate).
My instinct would be to wallop the critter that is best suited to walloping, namely the div.quote-read-more parent element for the whole shebang. If that has the max-height and overflow set on it, any content becomes irrelevant. It will just plain work, regardless of what is nested inside it. "Edge cases" would be no problem.
ETA: Just thought, given the necessity to put the checkbox before the critter you are walloping (for a pure CSS solution) this may be a case where it makes sense to use jQ (or vanilla js) to do the job.
But it could still be done with pure CSS. You'd just need a suitable parent that contained the checkbox and the div.quote-read-more, then all the nested whatevers still get bunged into that.
Title: Re: Click to expand quote
Post by: Spuds on February 17, 2022, 04:41:15 pm
It now wraps the parent quote with the read more markup, which is:
<div class="quote-read-more"> .. relative <div class="quoteheader"></div> .. same as always <blockquote class="bbc_quote"></blockquote> .. with a max height that is removed on input click <input type="checkbox" class="quote-show-more"> .. absolute over the blockquote </div>
nested quotes (if any) inside that parent get the standard
The primary issue was detecting when you had a long enough quote, by itself or due to the nested quotes inside, to warrant the parent wrapping. A single quote was easy but nested quotes are a bit more involved. Anyway now it will only have that wrap if the quoted text of that outer quote is more than 250 characters (random choice ATM) otherwise its just the same old quote markup we always had.
I can move the max height to the outer div vs the outer blockquote and the input click just overlays the bottom of that, should be easy to test.
Title: Re: Click to expand quote
Post by: Antechinus on April 26, 2022, 08:44:38 pm
Oi Spudseses,
I remember waffling about simplifying quote markup a while back, but can't find where it was. Anyway, this was what I had in mind. It uses the same basic markup as SMF 2.1, which I think is the most sensible way of doing it. I've bunged all the sources stuff into one file, with the CSS done as comments.
/* The "Quote:" and "Code:" header parts... *//* .codeheader, blockquote > cite { color: var(--body_text); border-color: var(--primary_border); background: var(--primary_white); }
*/
// Fancy stuffz from BBCParser.php... (Ant liketh not teh fancy stuffz. :P ) protected function alternateQuoteStyle(array &$tag) { // Start with standard $quote_alt = false; $first_quote = 0;
foreach ($this->open_tags as $open_quote) { if (isset($open_quote[Codes::ATTR_TAG]) && $open_quote[Codes::ATTR_TAG] === 'quote') { $quote_alt = !$quote_alt; $first_quote++; } } if ($first_quote === 0) { // First quote (of nested or single) receives a wrapper so its markup will be: // <div class="quote-read-more"> .. relative //<input type="checkbox" class="quote-show-more">.. absolute over the blockquote //<blockquote> .. same as always ... with a max height that is removed on input click // </div> $tag[Codes::ATTR_BEFORE] = str_replace('<blockquote>', '<div class="quote-read-more"><input type="checkbox" class="quote-show-more"><blockquote>', $tag[Codes::ATTR_BEFORE]); $tag[Codes::ATTR_AFTER] = str_replace('</blockquote>', '</blockquote></div>', $tag[Codes::ATTR_AFTER]); } else { // Nested quotes, located inside the above parent quote // @NOTE: I might be missing something, but I can't see why you would need anything extra here. // With the proposed change in quote markup, a simple max-height and hidden overflow on the first quote should deal with all child elements. } }
?>
Title: Re: Click to expand quote
Post by: Spuds on April 26, 2022, 09:37:09 pm
Thanks :cool:
I'll give that new markup a try, but I reserve the option to add in some fancy :hot_pepper: sauce here and there. I have a branch with a bunch of theme cleanup (well what I consider cleanup ha) that I can make those changes in.
Title: Re: Click to expand quote
Post by: Antechinus on April 26, 2022, 09:50:54 pm
Oh yeah, one bit I forgot. The cites would have to be declared as display: block; in index.css (cites are inline by default).
Title: Re: Click to expand quote
Post by: Spuds on April 27, 2022, 10:11:54 am
I updated my local with those changes (and a few other tweaks where .bbc_quote in the css needs to now be blockquote) Seems to work fine and saves some markup which is good.
I will need to update all of the parse_bbc tests since the output markup has changed. Also need to check on the editor and wizzy toggling just to make sure nothing got (way) out of wack there.
Question .... as the new markup specifically targets the blockquote tag (as its class-less), any concerns with un-intended spillover? We could do blockquote class="bbc_quote" as well.
Title: Re: Click to expand quote
Post by: Antechinus on April 27, 2022, 05:43:33 pm
AFAIK blockquotes are not used in any other context, so the class should not be necessary. Quotes in portal blocks call the same markup and CSS as in standard posts, and even if someone did want an unusual use and/or presentation they should be able to get that with a descendant. SMF 2.1 is just using the tag, sans class, and is fine with that.
But sure, keep the class if you want to. It won't do any harm, particularly if it also means less code to edit. Although I probably wouldn't bother keeping .quoteheader for the cites.
Title: Re: Click to expand quote
Post by: Spuds on April 27, 2022, 07:19:40 pm
QuoteSMF 2.1 is just using the tag, sans class, and is fine with that
You are making a compelling reason to add the class :smiley_cat:
QuoteBut sure, keep the class if you want to. It won't do any harm, particularly if it also means less code to edit. Although I probably wouldn't bother keeping .quoteheader for the cites.
That is pretty much what I did, Uh Huh that's right.
Title: Re: Click to expand quote
Post by: Spuds on April 30, 2022, 09:27:45 pm
Should now be updated with the new markup .... but not the tests just yet, you know life and all that.
Title: Re: Click to expand quote
Post by: Antechinus on May 04, 2022, 05:00:00 pm
Have you given any thought to allowing a limitation on nested quotes? That's one of the things that gets me about SMF and Elk: You can disable nested quotes entirely, but often in a discussion it is useful to allow at least one level of nested quotes.
The problem is that if you allow nested quotes you will inevitably get people who just keep hitting the quote button, so the number of nested quotes starts going sky high. You can deal with the presentation in the thread, by using CSS to hide any quotes past any level you want, but that doesn't work in the editor. So if you want to edit a post, or reply to it, you're back to having stacks of redundant nested quotes to deal with. Not only is this a PITA for posting, it also bloats the db.
One thing phpBB did right is to allow the admin to set a limit on the number of nested quotes. Anything further down the stack gets dropped before the post is saved in the db. This solves all the problems, while keeping the good points.
Arranging this should be easier now. The new markup should mean you only have to look for quote tags, and don't have to deal with quoteheader tags as a separate issue.
Title: Re: Click to expand quote
Post by: Spuds on May 04, 2022, 07:02:35 pm
Had not thought about that, but its a good idea, I kind of hate anything more than one quote anyway.
Would you drop the inner quotes or the outer quotes when over the limit? So say you set a limit of 2 levels deep and you have original Quote -> Quote 1 -> Quote 2 Do you leave Quote -> Quote 1 or Quote 1 -> Quote 2 ?? I guess its what do we think the reply is in reference to, the original or the latest ? Any idea what PHPBB does in this regard (yes that is lazy of me, but WTH)
Title: Re: Click to expand quote
Post by: Antechinus on May 04, 2022, 10:36:38 pm
Ok, example:
Quote from: Third reply lol
Quote from: Second reply* the entire text of War & Peace here *
Quote from: First reply internet warrior psycho rant here
Quote from: Original post some text here
In this example (which accurately represents an average internet discussion) if the admin setting was 1 level of nested quotes, you would see this...
Quote from: Third reply lol
Quote from: Second reply* the entire text of War & Peace here *
If the admin setting was 2 level of nested quotes, you would see this...
Quote from: Third reply lol
Quote from: Second reply* the entire text of War & Peace here *
Quote from: First reply internet warrior psycho rant here
Title: Re: Click to expand quote
Post by: Spuds on May 06, 2022, 10:39:34 pm
I have what I think will work on my local.
Have to do more testing to be sure, because quotes really bite the big one. Basically it will change the remove nested quotes option to a allowed number, 0 = the current remove all, 1 = ummm one nested ...etc etc. This change will change what is actually saved in the DB or sent to the post page, which will save some space in the DB.
An alternative is to simply hide nested quotes, over a the limit. The benefit here is that it is, not destructive, meaning if the admin changed their mind, and increased allowed quotes depth, they would simply show up as normal. The downside is no saving in the DB, which is kind of how it is today if you allow nested quotes.
Preferences / Thoughts ?
Title: Re: Click to expand quote
Post by: Antechinus on May 06, 2022, 10:58:42 pm
My 2c: kill it. If the admin changes their mind later, that's their problem.
All the original thread content will still be traceable via the existing linked quote headers, so there's no actual loss of discussion content. There's only a loss of pointless repetition. :)
Title: Re: Click to expand quote
Post by: Spuds on May 16, 2022, 03:03:50 pm
That should now be implemented and live.
I set it at a level 2. Of course it will only effect quotes going forward, previous deeply nested quotes would still show, although those could be hidden via CSS if really wanted.
Title: Re: Click to expand quote
Post by: radu81 on May 17, 2022, 03:02:31 am
Just a test
QuoteLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
QuoteLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
QuoteLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
QuoteLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Looks fine to me, the "More" button is now displayed only if there is something more to display. Great!
Title: Re: Click to expand quote
Post by: Antechinus on May 18, 2022, 06:49:29 pm
Ok, here's a bug for you. When I test post a code box containing regex*, it breaks at one of the code tags nested in the regex.
IOW, it can't recognise that anything inside a code tag is code, even if it's another BBC tag.
This may be a general Elk bug, not specifically a bug in handling nested quotes. Not sure yet. I grabbed this example regex at random, just noticed the result, and haven't yet done any further testing. :)
Admittedly this is a particularly nasty edge case. Not sure it is worth attempting a bulletproof fix. Check it out in the BBC editor mode to see what is happening. ;)
*(example is from an updated phpBB > SMF/Elk converter I'm working on)
Title: Re: Click to expand quote
Post by: Spuds on May 18, 2022, 09:33:28 pm
Interesting, that blew right through the tag ... to investigate! Thanks for the report.
Title: Re: Click to expand quote
Post by: Arantor on May 19, 2022, 03:56:11 am
I’d argue not a bug… how could it possibly know that [/code] is on this one occasion is different to [/code] to indicate “I’m done with the code now”?
The only way around this would be to assume that the end of a code block must start on a new line which will play hell with converters, not to mention making the code tag even more of a special case than it already is (and behave differently to everything else, e.g. quote where the end tag doesn’t have to be the only thing on the line)
Title: Re: Click to expand quote
Post by: Spuds on May 20, 2022, 06:07:49 pm
After taking a quick look at that, I'm going to agree with not a :bug: :D
I thought there may be a way in preparse to catch/fix the issue but there really is no great or even good way to do that. Its even worse as the open/close tags are not balanced in the example which just makes it even worse as its already nested inside another parent tag.
There may be potential to catch it in the editor, but that will be very specific use case. I'm thinking you use the toolbar to open a set of code tags, then one could capture all the items added between those markers and protect them, but there are others ways to add stuff that will cause that to fail.
Title: Re: Click to expand quote
Post by: Antechinus on May 21, 2022, 06:41:03 pm
Fair enough. No point turning such an edge case into a major bunfight. Any time I really need to post something like that in a code box I can easily do [ /code] for the example (with a note about the extra space). Anyone messing with regex will know enough to be able to figure that out. ;)
Title: Re: Click to expand quote
Post by: Spuds on June 20, 2022, 03:02:18 pm
Just to close this (maybe :D) I made the last tweaks where I finally added a touch of JavaScript to control the overlay. The pure PHP/CSS thing worked well enough but was not as responsive as it needed to be. It was basically having to look at content length (words or newlines) and decide when to add or not the overlay. It was just a fun little experiment.
That was is of course is a problem when you shrink your screen etc, so JavaScript :star_struck: to the rescue. Now it simply applies the overlay to everything, JS checks the height of the overall quote and leaves, or removes, the overlay. Pretty similar to how code blocks work. Anyway should look the same but just be a bit more sensible in how it acts on all screen sizes.
Title: Re: Click to expand quote
Post by: radu81 on November 27, 2022, 05:41:38 am
I would like to suggest a minor change for this: add own translation for the text "More". If I am not wrong it uses the same "More" text from here: (Link-10160) In this way it's much easier to translate. In my case "More" under every post is translated as "Other options" while "More" under the quoted text should be something like "Read more" or "Click to expand". What do you think?
Title: Re: Click to expand quote
Post by: Spuds on November 27, 2022, 07:51:21 am
Indeed I reused the string, providing a unique one is a good idea.
We can just add a new $txt['quote_expand'] = '???; to the same file. Expand Quote, Show More, Show Entire Quote, Read More or Click to expand all seem like good choices.