Skip to content

v3 & Harmony diary / thoughts / code snippets

Announcements
55 4 30.4k 1
  • @phenomlab it seems i gonne use v2 end of this year. because i see that v2 very fast than v3 i mean page speed, user test etc.

    wrote on last edited by phenomlab
    #15

    @cagatay said in v3 / Harmony diary:

    it seems i gonne use v2 end of this year. because i see that v2 very fast than v3 i mean page speed, user test etc

    Yes, I’m glad I’m not the only one to witness this. I am going to raise this with the NodeBB team

    EDIT - raised in the v3 Bug thread
    https://community.nodebb.org/topic/16914/3-0-0-bug-report-thread/76?_=1675420990079

  • @cagatay said in v3 / Harmony diary:

    it seems i gonne use v2 end of this year. because i see that v2 very fast than v3 i mean page speed, user test etc

    Yes, I’m glad I’m not the only one to witness this. I am going to raise this with the NodeBB team

    EDIT - raised in the v3 Bug thread
    https://community.nodebb.org/topic/16914/3-0-0-bug-report-thread/76?_=1675420990079

    wrote on last edited by
    #16

    Ok, spun up the dev VM I started working on

    9097e069-c077-40e4-a949-0b4aeacecca2-image.png

    And here’s a video of the reworked pagination / scroller utility I wrote that fires on pages

    https://sudonix.com/assets/uploads/files/screen-capture.webm

    This was originally designed to work in tandem with the Persona scroller / navigation, but would be simple to convert to Harmony and BS5.

  • Ok, spun up the dev VM I started working on

    9097e069-c077-40e4-a949-0b4aeacecca2-image.png

    And here’s a video of the reworked pagination / scroller utility I wrote that fires on pages

    https://sudonix.com/assets/uploads/files/screen-capture.webm

    This was originally designed to work in tandem with the Persona scroller / navigation, but would be simple to convert to Harmony and BS5.

    wrote on last edited by
    #17

    Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

  • Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

    wrote on last edited by
    #18

    @phenomlab

    Oh It’s very good. I love it 😊

  • Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

    wrote on last edited by
    #19

    @phenomlab waiting 🙂

  • wrote on last edited by DownPW
    #20

    @phenomlab said in v3 / Harmony diary:

    Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

    Hello Mark,

    I just tested the functioning of the scroll bar and I saw this bug:

    https://i.imgur.com/VQw5zw5.mp4

    It should be moved to the left so as not to encroach on the collapse button of the custom footer navbar.

    Then, when we play with the collapse button of the custom footer navbar we should:

    • When the custom footer navbar is deactivated: it sticks to the bottom right while not encroaching on the right sidebar. All this taking into account the collapse of the right sidebar (not obvious, I don’t know if I’m clear 🙂 )

    • When the custom footer navbar is activated: it moves just to the left of the floatright block or can be above the floatright block?

    The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

    Keep the good work my friend 😉

  • @phenomlab said in v3 / Harmony diary:

    Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

    Hello Mark,

    I just tested the functioning of the scroll bar and I saw this bug:

    https://i.imgur.com/VQw5zw5.mp4

    It should be moved to the left so as not to encroach on the collapse button of the custom footer navbar.

    Then, when we play with the collapse button of the custom footer navbar we should:

    • When the custom footer navbar is deactivated: it sticks to the bottom right while not encroaching on the right sidebar. All this taking into account the collapse of the right sidebar (not obvious, I don’t know if I’m clear 🙂 )

    • When the custom footer navbar is activated: it moves just to the left of the floatright block or can be above the floatright block?

    The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

    Keep the good work my friend 😉

    wrote on last edited by
    #21
  • @phenomlab said in v3 / Harmony diary:

    Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

    Hello Mark,

    I just tested the functioning of the scroll bar and I saw this bug:

    https://i.imgur.com/VQw5zw5.mp4

    It should be moved to the left so as not to encroach on the collapse button of the custom footer navbar.

    Then, when we play with the collapse button of the custom footer navbar we should:

    • When the custom footer navbar is deactivated: it sticks to the bottom right while not encroaching on the right sidebar. All this taking into account the collapse of the right sidebar (not obvious, I don’t know if I’m clear 🙂 )

    • When the custom footer navbar is activated: it moves just to the left of the floatright block or can be above the floatright block?

    The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

    Keep the good work my friend 😉

    wrote on last edited by
    #22

    @DownPW fixed in Dev. Have a look. Many improvements and I think you’ll like it. Try it on both desktop and mobile.

  • @phenomlab said in v3 / Harmony diary:

    Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

    Hello Mark,

    I just tested the functioning of the scroll bar and I saw this bug:

    https://i.imgur.com/VQw5zw5.mp4

    It should be moved to the left so as not to encroach on the collapse button of the custom footer navbar.

    Then, when we play with the collapse button of the custom footer navbar we should:

    • When the custom footer navbar is deactivated: it sticks to the bottom right while not encroaching on the right sidebar. All this taking into account the collapse of the right sidebar (not obvious, I don’t know if I’m clear 🙂 )

    • When the custom footer navbar is activated: it moves just to the left of the floatright block or can be above the floatright block?

    The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

    Keep the good work my friend 😉

    wrote on last edited by
    #23

    @DownPW said in v3 / Harmony diary:

    The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

    Nope. The newest version of Harmony appears to have the same pagination as Flarum and Discourse, so it’s been moved into the content area 😁

  • @DownPW said in v3 / Harmony diary:

    The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

    Nope. The newest version of Harmony appears to have the same pagination as Flarum and Discourse, so it’s been moved into the content area 😁

    wrote on last edited by
    #24

    @phenomlab

    yessss fixed. Love it 😁 😍

  • @phenomlab

    yessss fixed. Love it 😁 😍

    wrote on last edited by DownPW
    #25

    @phenomlab

    No javascript ?

    I wanted to inspect the code but I can’t find any JS

  • @phenomlab

    No javascript ?

    I wanted to inspect the code but I can’t find any JS

    wrote on last edited by
    #26

    @DownPW it’s definitely there. Won’t work without it 😉

  • @DownPW it’s definitely there. Won’t work without it 😉

    wrote on last edited by
    #27

    @phenomlab

    I guess, I don’t find it in inspector lol .I will search 🙂

  • @phenomlab

    I guess, I don’t find it in inspector lol .I will search 🙂

    wrote on last edited by DownPW
    #28

    @phenomlab

    Can I test it on my dev env ?

    EDIT: I test it. If you don’t want tell me Mark

    If I have problem, can I ask you @phenomlab ?

  • @phenomlab

    Can I test it on my dev env ?

    EDIT: I test it. If you don’t want tell me Mark

    If I have problem, can I ask you @phenomlab ?

    wrote on last edited by
    #29

    @DownPW no problems.

  • wrote on last edited by DownPW
    #30

    @phenomlab said in v3 / Harmony diary:

    @DownPW no problems.

    Seems I miss something 😑 @phenomlab but good start 😉

    [- https://i.imgur.com/cN0YeN0.mp4 -]

    EDIT: Maybe find

    EDIT 2: @phenomlab

    Find --> I have forget toAbove and toBottom css directives
    It’s better now, just seems toBottom doesn’t work :

    b64bdc12-435e-468d-9818-c966b4cbc148-image.png

    .toBottom {
      bottom: 0px !important;
      right: 0px!important;
    }
    
    .toAbove {
      bottom: -5px !important;
      right: 400px !important;
    }
    
  • @phenomlab said in v3 / Harmony diary:

    @DownPW no problems.

    Seems I miss something 😑 @phenomlab but good start 😉

    [- https://i.imgur.com/cN0YeN0.mp4 -]

    EDIT: Maybe find

    EDIT 2: @phenomlab

    Find --> I have forget toAbove and toBottom css directives
    It’s better now, just seems toBottom doesn’t work :

    b64bdc12-435e-468d-9818-c966b4cbc148-image.png

    .toBottom {
      bottom: 0px !important;
      right: 0px!important;
    }
    
    .toAbove {
      bottom: -5px !important;
      right: 400px !important;
    }
    
    wrote on last edited by
    #31

    @DownPW likely you are missing z-index on that class. As you are using position: absolute the index is needed to bring that specific element forward. By default, it’ll sit behind the progress bar meaning it cannot be clicked, but can be seen.

  • @DownPW likely you are missing z-index on that class. As you are using position: absolute the index is needed to bring that specific element forward. By default, it’ll sit behind the progress bar meaning it cannot be clicked, but can be seen.

    wrote on last edited by
    #32

    @phenomlab

    Thanks for your reply my friend 😉

    I will test tomorrow and again, it’s a very great job, I like it a lot.

  • @phenomlab

    Thanks for your reply my friend 😉

    I will test tomorrow and again, it’s a very great job, I like it a lot.

    wrote on last edited by phenomlab
    #33

    @DownPW no problems. Let me know if you have issues and I can take a look. Can’t release the code formally yet as it’s still beta (and does have very minor bugs).

  • @DownPW no problems. Let me know if you have issues and I can take a look. Can’t release the code formally yet as it’s still beta (and does have very minor bugs).

    wrote on last edited by phenomlab
    #34

    Not sure why, but for a while I’ve been looking at the size of the CSS file that runs the dev site, and I couldn’t understand why it was almost twice the size of what it should be in terms of overall lines.

    This eventually got the better of me and I landed up going through the file and removing what appears to be a large amount of duplicated CSS. I primarily work offline using VSCode (my go-to editor), but periodically “fix” things on the fly. The problem with this is that if you make changes online then copy these from the CSS editor in the ACP back to VSCode, they seem to be copied twice - in other words, appended to the existing file despite all text being selected, which should in fact overwrite, but it doesn’t 😱

    Just something for everyone else to watch out for. I spent a fair amount of time this afternoon purging duplicate classes, and the end result is a much leaner file.


Related Topics
  • NodeBB v4.0.0

    General nodebb sudonix version 4
    28
    4 Votes
    28 Posts
    8k Views
    phenomlab
    @Panda said in NodeBB v4.0.0: the workings of World aren’t intuitive Its not easy to get World populating when a forum is new to it This is a good point and one I’ve considered also. It’s a little confusing to be honest.
  • Bug Report

    Solved Bugs nodebb bugs
    47
    1
    26 Votes
    47 Posts
    20k Views
    phenomlab
    @crazycells Good points, thanks. I completely forgot that classes are added - makes life much simpler! EDIT - seems this is pretty straightforward, and only needs the below CSS .upvoted i { color: var(--bs-user-level) !important; } This then yields [image: 3f072f8a-ebfa-4910-8723-73c493b8e4eb-image.png] However, the caveat here is that the .upvoted class will only show for your upvotes, and nobody else’s. However, this does satisfy the original request however I would love to see my upvoted posts more clearly, because currently, when I upvote, nothing on the post tool is changing, it would be nicer if there is an indication that I have upvoted (like a filled or colored triangle?)
  • NodeBB v3

    Announcements nodebb v3 nodebb
    2
    3 Votes
    2 Posts
    1k Views
    phenomlab
    @cagatay JS will work fine - no changes there, and there are no plans to drop support for jQuery. More of an issue is the CSS - for which there are quite a few breaking changes. Keep an eye on sudonix.dev (my development site) where you can see progress in relation to how I am tackling the compatibility issues.
  • fading in /tags page

    Solved Customisation nodebb
    32
    1
    30 Votes
    32 Posts
    13k Views
    DownPW
    Fix working perfectly
  • [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    5k Views
    phenomlab
    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example body { font-family: "Poppins"; font-size: 16px; } Essentially, you use the font-size CSS directive.
  • [NODEBB] Reply Button/arrow answer

    Solved Customisation css nodebb
    25
    4
    4 Votes
    25 Posts
    12k Views
    DownPW
    Topic open https://sudonix.com/topic/207/nodebb-help-for-my-custom-css
  • [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    3k Views
    JAC
    @jac said in [NodeBB] custom Gravatar image not showing: @phenomlab said in [NodeBB] custom Gravatar image not showing: @jac are you using Custom ? Sure am mate Confirmed Fixed
  • Easier to read code and pre blocks

    Announcements code pre
    1
    1 Votes
    1 Posts
    929 Views
    No one has replied