Skip to content

New "messenger style" conversation view

Announcements
49 4 19.7k 1
  • @DownPW said in New "messenger style" conversation view:

    Could you provide your JS+CSS code so that I can test it and appropriate it on my dev environment?

    I was dreading anyone asking for this 🙂 Let me put it together. Glad it’s well recieved.

    wrote on last edited by
    #12

    @phenomlab

    Dreading ?

    Oups sorry sorry

  • @phenomlab

    Dreading ?

    Oups sorry sorry

    wrote on last edited by
    #13

    @DownPW Not at all. Just that it’s quite complex and I’ll need to put together concise steps etc. Should have worded that better 🙂 This is more popular than I expected it to be !

  • wrote on last edited by
    #14

    anyone can help to me for this style?

  • anyone can help to me for this style?

    wrote on last edited by
    #15

    @cagatay said in New "messenger style" conversation view:

    anyone can help to me for this style?

    That’ll be me 🙂 I will provide a write up, but it’s not a simple affair. You should try this in a dev environment first.

  • @cagatay said in New "messenger style" conversation view:

    anyone can help to me for this style?

    That’ll be me 🙂 I will provide a write up, but it’s not a simple affair. You should try this in a dev environment first.

    wrote on last edited by
    #16

    @phenomlab yes i know that is you 🙂 i dont have dev 😞 but i think that you know my css and js type coz of fixed iframely. 🙂

  • @phenomlab yes i know that is you 🙂 i dont have dev 😞 but i think that you know my css and js type coz of fixed iframely. 🙂

    wrote on last edited by
    #17

    @cagatay I do know it, yes, but this code contains breaking changes so I would not recommend for this to be deployed in live without thorough testing first. It’s possible to inject and test CSS code on the fly, but it’s not reliable and if the site is reloaded, you lose your changes.

    You really should consider a DEV environment for things like this.

  • @cagatay I do know it, yes, but this code contains breaking changes so I would not recommend for this to be deployed in live without thorough testing first. It’s possible to inject and test CSS code on the fly, but it’s not reliable and if the site is reloaded, you lose your changes.

    You really should consider a DEV environment for things like this.

    wrote on last edited by
    #18

    @phenomlab got the point thank you.

  • @crazycells Do you mean in a messenger type view ? Yes, of course, but the conversation would all be one way woudn’t it ?

    wrote on last edited by
    #19

    @phenomlab said in New "messenger style" conversation view:

    @crazycells Do you mean in a messenger type view ? Yes, of course, but the conversation would all be one way woudn’t it ?

    oh yes sorry, let me further explain what I meant…

    In a normal NodeBB Persona theme, the main problem on pages containing posts lists such as:

    /posts
    /best
    /controversial

    is that avatar is forced to be on the right side of the page, and since the username and timestamp come after the avatar, there is a dead space created on the right side of the avatar on the mobile version of the website.

    I was wondering if this re-ordering that you have just made with the messenger-style theme can be applied to these pages, so the username and timestamp can come before the avatar, just like how I see my posts on a regular thread here under this title…

    I guess, in a sense, this is also compatible with your new theme since people will see their posts always with their avatar being on the right side of the page?

    And on these posts list pages like /best , /controversial you look at your own posts lists anyways…

  • wrote on last edited by
    #20

    by the way, we have to come up with another solution with the background of own posts… because this white background eliminates “quotes” as well… I cannot distinguish quotes in my post… Do you think keeping the gray border of the quote but not the background will solve the issue?

  • wrote on last edited by
    #21

    on a side note… you are such a great person 🙂 you should let us upvote you 20 times a day 🙂 6 is too low…

    Screen Shot 2022-10-21 at 14.38.22.png

  • on a side note… you are such a great person 🙂 you should let us upvote you 20 times a day 🙂 6 is too low…

    Screen Shot 2022-10-21 at 14.38.22.png

    wrote on last edited by
    #22

    @crazycells heh, that limit is set by the extension and hard coded. Not by me I have to add.

  • by the way, we have to come up with another solution with the background of own posts… because this white background eliminates “quotes” as well… I cannot distinguish quotes in my post… Do you think keeping the gray border of the quote but not the background will solve the issue?

    wrote on last edited by
    #23

    @crazycells can you send me a screenshot ? I think I know what you mean - the quote background is close (or perhaps the same) as the reply background, yes ?

  • @crazycells can you send me a screenshot ? I think I know what you mean - the quote background is close (or perhaps the same) as the reply background, yes ?

    wrote on last edited by
    #24

    @phenomlab said in New "messenger style" conversation view:

    @crazycells can you send me a screenshot ? I think I know what you mean - the quote background is close (or perhaps the same) as the reply background, yes ?

    here it is…

    Screen Shot 2022-10-21 at 16.41.27.png

  • @phenomlab said in New "messenger style" conversation view:

    @crazycells can you send me a screenshot ? I think I know what you mean - the quote background is close (or perhaps the same) as the reply background, yes ?

    here it is…

    Screen Shot 2022-10-21 at 16.41.27.png

    wrote on last edited by
    #25

    @crazycells can you reload the page (f5 refresh) and then from the swatch selector, choose the daylight theme and let me know what you see ?

    That screenshot you sent doesn’t look like the swatch is fully loaded.

  • @crazycells can you reload the page (f5 refresh) and then from the swatch selector, choose the daylight theme and let me know what you see ?

    That screenshot you sent doesn’t look like the swatch is fully loaded.

    wrote on last edited by
    #26

    @phenomlab said in New "messenger style" conversation view:

    @crazycells can you reload the page (f5 refresh) and then from the swatch selector, choose the daylight theme and let me know what you see ?

    That screenshot you sent doesn’t look like the swatch is fully loaded.

    I reloaded the page and after selecting “Daylight” it looks like this:

    Screen Shot 2022-10-21 at 17.01.36.png

    but right after I reload the page again… the blue color goes away, and it becomes the “default” theme with no color distinction again…

  • @phenomlab said in New "messenger style" conversation view:

    @crazycells can you reload the page (f5 refresh) and then from the swatch selector, choose the daylight theme and let me know what you see ?

    That screenshot you sent doesn’t look like the swatch is fully loaded.

    I reloaded the page and after selecting “Daylight” it looks like this:

    Screen Shot 2022-10-21 at 17.01.36.png

    but right after I reload the page again… the blue color goes away, and it becomes the “default” theme with no color distinction again…

    wrote on last edited by
    #27

    @crazycells you shouldn’t need to reload the page? (At least, not a hard refresh)

  • @crazycells you shouldn’t need to reload the page? (At least, not a hard refresh)

    wrote on last edited by
    #28

    @phenomlab said in New "messenger style" conversation view:

    @crazycells you shouldn’t need to reload the page? (At least, not a hard refresh)

    yeah, what I mean is that the “daylight” does not stay on the page as the theme (a bug?), although the rest of the themes stay active when I reload the page.

  • @phenomlab said in New "messenger style" conversation view:

    @crazycells you shouldn’t need to reload the page? (At least, not a hard refresh)

    yeah, what I mean is that the “daylight” does not stay on the page as the theme (a bug?), although the rest of the themes stay active when I reload the page.

    wrote on last edited by
    #29

    @crazycells does this only happen with daylight ?

  • @crazycells does this only happen with daylight ?

    wrote on last edited by
    #30

    @phenomlab said in New "messenger style" conversation view:

    @crazycells does this only happen with daylight ?

    Yes, I changed them one by one, it only happens with “daylight”.
    Can you please send a screenshot of your page with the daylight theme?

  • @phenomlab said in New "messenger style" conversation view:

    @crazycells does this only happen with daylight ?

    Yes, I changed them one by one, it only happens with “daylight”.
    Can you please send a screenshot of your page with the daylight theme?

    wrote on last edited by
    #31

    @crazycells I think I see what you mean - do you see something like this, where the CSS does not appear to be applied?

    ed06a23a-daf8-4fe2-bc90-851c16b56f99-image.png

    Here’s where it gets interesting - I am using SCSS variable --self-post for this specific setting, and it does not seem to be applied

    b8f8440e-1962-45bc-b3f0-096463cf496c-image.png

    Notice the “–self-post is not defined”. And you are right - this only seems to be happening with the daylight theme, which is odd.


Related Topics
  • Ch..ch..ch..ch..changes!

    Announcements themes layout
    16
    2
    15 Votes
    16 Posts
    5k Views
    JAC
    @phenomlab of course, to be recognised is fantastic. @phenomlab said in Ch..ch..ch..ch..changes!: Sadly, no. Web crawlers and scrapers are often JS based and read text only, so styles don’t have any bearing. I’ve read mixed things about this, but no that does make sense, it was something I read a many years back when using Wordpress.
  • Planned sunset of NTFY plugin

    Pinned Announcements push nodebb ntfy
    7
    1
    8 Votes
    7 Posts
    4k Views
    phenomlab
    I’ve noticed that I’m the only one subscribed to the push notifications on this site. If you were using NTFY previously, and have noticed that you’ve not had any alerts for a while, it’s because this feature has been disabled. You’ll now need to use the push notification to replace NTFY as mentioned in the first post.
  • ANNOUNCEMENT: Social Login Changes

    Announcements openid oauth
    4
    1
    6 Votes
    4 Posts
    2k Views
    phenomlab
    @DownPW Always looking for ways to improve the overall experience.
  • ANNOUCEMENT: New NTFY Server

    Announcements ntfy push alerts
    9
    1
    7 Votes
    9 Posts
    3k Views
    phenomlab
    @crazycells that’s as good a test as any
  • Theme retirement

    Announcements themes switcher
    21
    16 Votes
    21 Posts
    9k Views
    phenomlab
    I relented somewhat here and added another swatch - one I missed, which was previous called “blackout”. This specific one has been adapted to work on the new theming engine, but the others have been reclassified, and renamed to suit. [image: image.png] As a result, the theme you might have had will probably be reflecting something else, so you (might) need to change your themes accordingly. The changes are as follows Light -> No Change Cloudy -> Is now the old “Dim” Dim -> Is now the old “Dark” Dark -> Now a new theme based on the revamped “Blackout”
  • Clustering for NodeBB enabled

    Announcements cluster
    22
    1
    16 Votes
    22 Posts
    8k Views
    phenomlab
    @Madchatthew True. I think this is the reason as to why most Open Source projects are abandoned because they are not sustainable in the long-term.
  • Testing out Webdock.io

    Moved Announcements webdock recovery speed
    2
    5
    5 Votes
    2 Posts
    2k Views
    phenomlab
    Just coming back to this thread for review (as I often do), and it looks like Webdock have increased their available offerings - some are extremely powerful, yet very competitive from the pricing perspective. [image: image.png] 10 CPU cores, plus 20Gb RAM? Well worth a look (and the asking price) - there’s also a fixed IP which is hugely beneficial. Clearly, this is well beyond what most people will want to spend - it’s more of an example (but interestingly, Sudonix runs on something not too different from the above). However, not all that glitters is gold - just have a walk through the benchmark report I found below and you’ll see a huge difference between Heztner and Webdock https://www.vpsbenchmarks.com/compare/hetzner_vs_webdock That being said, the amount of HTTP requests that Webdock handles in relation to Hetzner is superior - @DownPW you might want to have a look at this - there’s a free 24 hour trial… [image: 5203639b-2f62-47e6-b87b-37580ce5deae-image.png]
  • Fancybox now used for image handling

    Announcements fancybox
    16
    6 Votes
    16 Posts
    6k Views
    dave1904
    And it seems to be less conflicting!