Skip to content

Whitespace fixes in Nodebb

Solved Customisation
18 3 3.2k 1
  • @Panda just circling back on this based on your list concerning badges overlapping.

    This is what I see on my mobile

    Screenshot_2023-06-29-21-11-41-68_e4424258c8b8649f6e67d283a50a2cbc.jpg

  • This is exactly why I never really liked CSS. It can so easily go wrong on different resolution screens!
    When I wrote games, I would use Javascript on Canvas, with my own font so that everything was scaled as % of screen width and height.
    I had my own library for this. It was the only way to guarantee everything works on all devices.

    Look at this: its a mess, and Flip4 is not an uncommon device
    Screenshot_20230629_235950_Chrome~2.jpg

    What does having this extra Tag saying Author really add?
    I dont want to be critical, but it might be better to have the user group badges as shorter names, then that would reduce overlaps?

  • This is exactly why I never really liked CSS. It can so easily go wrong on different resolution screens!
    When I wrote games, I would use Javascript on Canvas, with my own font so that everything was scaled as % of screen width and height.
    I had my own library for this. It was the only way to guarantee everything works on all devices.

    Look at this: its a mess, and Flip4 is not an uncommon device
    Screenshot_20230629_235950_Chrome~2.jpg

    What does having this extra Tag saying Author really add?
    I dont want to be critical, but it might be better to have the user group badges as shorter names, then that would reduce overlaps?

    @Panda it looks to me like you’re using enlarged fonts at least. Can you confirm? You can’t cater for literally every device of course.

  • @Panda it looks to me like you’re using enlarged fonts at least. Can you confirm? You can’t cater for literally every device of course.

    @phenomlab yes thats a point that font size is an Android system setting, so another variable.
    Screenshot_20230630_070745_Settings~2.jpg

    So its not on largest but more than half way up

  • @phenomlab yes thats a point that font size is an Android system setting, so another variable.
    Screenshot_20230630_070745_Settings~2.jpg

    So its not on largest but more than half way up

    @Panda yes, that will play havoc with rendering. I’m curious to know if setting it to the normal size resolves it.

  • Yes with text 4/8 size its fine.
    Screenshot_20230630_173532_Chrome~2.jpg
    Athough my suggestion to have shorter group names might be worth taking.
    Collaborator is quite a long badge name,
    Whats your list of all the group categories? Is Sage top, how did you chose these names?

  • Yes with text 4/8 size its fine.
    Screenshot_20230630_173532_Chrome~2.jpg
    Athough my suggestion to have shorter group names might be worth taking.
    Collaborator is quite a long badge name,
    Whats your list of all the group categories? Is Sage top, how did you chose these names?

    @Panda said in Whitespace fixes in Nodebb:

    Collaborator is quite a long badge name,

    Yes, I need to re-think these names actually.

    @Panda said in Whitespace fixes in Nodebb:

    Whats your list of all the group categories? Is Sage top, how did you chose these names?

    See below

    08a3a12c-3a1c-4855-bfbe-54269c8ce8bf-image.png

    In actual fact, even “Supreme” won’t be the top rank - at 50,000 upvotes, you’d need to be almost god-like 🙂

  • @Panda said in Whitespace fixes in Nodebb:

    Collaborator is quite a long badge name,

    Yes, I need to re-think these names actually.

    @Panda said in Whitespace fixes in Nodebb:

    Whats your list of all the group categories? Is Sage top, how did you chose these names?

    See below

    08a3a12c-3a1c-4855-bfbe-54269c8ce8bf-image.png

    In actual fact, even “Supreme” won’t be the top rank - at 50,000 upvotes, you’d need to be almost god-like 🙂

    @phenomlab
    Interesting. Because it is not obvious which name is what rank, I suggest an alphabetical list.
    For example, something like
    ACE (highest)
    COMMANDER
    EXPERT
    GURU
    ROOKIE
    STARTER (lowest)

  • @phenomlab
    Interesting. Because it is not obvious which name is what rank, I suggest an alphabetical list.
    For example, something like
    ACE (highest)
    COMMANDER
    EXPERT
    GURU
    ROOKIE
    STARTER (lowest)

    @Panda I see your point, but I won’t be changing to an alphabetic system - but would consider stars. I know @crazycells uses ranking like this.

  • @Panda I see your point, but I won’t be changing to an alphabetic system - but would consider stars. I know @crazycells uses ranking like this.

    @phenomlab yeap, I like the stars… very intuitive…

    we have them from 1 to 5, but I am considering extending it to 7. additionally we have small icons such as a youtube sign for users with youtube channels, etc.

    Screen Shot 2023-06-30 at 12.47.43.png

    in the past , forums used to have military rankings… captain, major, general etc. that is what the initial recommendation by our users was… sometimes these ranks would have lines and stars next to it… so the idea in the forum evolved to have only stars as ranks… users are happy with this…

  • @phenomlab yeap, I like the stars… very intuitive…

    we have them from 1 to 5, but I am considering extending it to 7. additionally we have small icons such as a youtube sign for users with youtube channels, etc.

    Screen Shot 2023-06-30 at 12.47.43.png

    in the past , forums used to have military rankings… captain, major, general etc. that is what the initial recommendation by our users was… sometimes these ranks would have lines and stars next to it… so the idea in the forum evolved to have only stars as ranks… users are happy with this…

    @crazycells You’re both raising really good points here. The wording in all honesty was to get it started, but it’s become much more than that - particularly as original members have much higher rankings. I’ll take a look at this over the weekend.

  • This is exactly why I never really liked CSS. It can so easily go wrong on different resolution screens!
    When I wrote games, I would use Javascript on Canvas, with my own font so that everything was scaled as % of screen width and height.
    I had my own library for this. It was the only way to guarantee everything works on all devices.

    Look at this: its a mess, and Flip4 is not an uncommon device
    Screenshot_20230629_235950_Chrome~2.jpg

    What does having this extra Tag saying Author really add?
    I dont want to be critical, but it might be better to have the user group badges as shorter names, then that would reduce overlaps?

    @Panda said in Whitespace fixes in Nodebb:

    What does having this extra Tag saying Author really add?

    Missed this question. This specific tag adds “author” to who originally created the topic. It’s a useful way of identifying the original poster throughout a long thread.

  • @phenomlab
    Interesting. Because it is not obvious which name is what rank, I suggest an alphabetical list.
    For example, something like
    ACE (highest)
    COMMANDER
    EXPERT
    GURU
    ROOKIE
    STARTER (lowest)

    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them.

    More importantly, if you reload the site, you’ll notice that the ranks are now icons.

    I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • how to prevent DDoS attacks ?

    Solved Vulnerability ddos nodebb
    34
    17 Votes
    34 Posts
    7k Views
    @phenomlab thank you very much, this was helpful. Everything looks ok
  • Composer Zen icon?

    Solved Configure nodebb
    8
    1
    2 Votes
    8 Posts
    1k Views
    @DownPW exactly. Not really a new concept, and in all honesty, not something I’ve ever used. If you consider the need to add links and references, or citations, you’d need to be able to see other parts of the screen!
  • NodeBB: The global Search option

    Solved Configure search nodebb
    5
    0 Votes
    5 Posts
    799 Views
    @mventures Yes, exactly. The other icon will restart NodeBB whilst the first icon I referenced will rebuild (recompile) it. The huge strength of NodeBB over Flarum (for example) is that the code is precompiled, and called once at boot. PHP’s code has to repeatedly reload code from source making it much slower.
  • 36 Votes
    55 Posts
    12k Views
    @DownPW I see why. The code relies on the existence of [component="topic/quickreply/container"] However, this by definition means that the below has to be enabled [image: 1679077966615-aeef638f-4188-489d-a9f2-f3a26dbca9d8-image.png] It will then work [image: 1679077992245-7fb38631-e0f3-46ef-b652-00929d927b13-image.png] For some unknown reason, this is hidden in Harmony, and only shows if you select it. In v2, it seems that the <section> is deleted altogether in Persona if “Quick Reply” is disabled, meaning it won’t fire as it can’t locate that specific component. The downside is that you might not want the quick reply function, but I think it’s a PITA to scroll up to the top of the post just to reply, so I have it on
  • Changing Background on NodeBB

    Solved Customisation background image nodebb
    4
    0 Votes
    4 Posts
    1k Views
    @cagatay You’d target the body tag and use the below line of CSS background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed; Obviously, you need to change the path to suit where your image is being stored. More info around the background property can be found here https://www.w3schools.com/cssref/css3_pr_background.php
  • [NODEBB] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    2k Views
    @downpw ooops. Forgot that. Thanks for adding.
  • Iframely (Nodebb)

    Solved Configure
    40
    4 Votes
    40 Posts
    7k Views
    @DownPW This is now resolved. The issue was an incorrect URL specified in the Nodebb plugin. I’ve corrected this, and now it works as intended.
  • How to set a signature in NodeBB?

    Solved Customisation
    4
    2 Votes
    4 Posts
    1k Views
    @phenomlab said in How to set a signature in NodeBB?: @jac No issues at all with copying. This is set using the signature for the user you are posting as. In the case of Hostrisk, it’s set like the below [image: 1633427929198-7bf04183-f6e8-4d72-b0eb-c9a05c9cd24b-image.png] You can set the signature by using https://domain.com/user/theuser/edit Mamy thanks Mark, I’ll set this up later .