Skip to content

Whitespace fixes in Nodebb

Solved Customisation
18 3 4.0k 1
  • What screen size are you using, and what device? I’m not seeing that issue on my OnePlus 9 Pro

    @phenomlab Samsung Flip4
    3088 high
    x 1440 wide

    Perhaps it is my device then, it has narrower screen in comparison to height

  • Pandaundefined Panda has marked this topic as solved on
  • @phenomlab Samsung Flip4
    3088 high
    x 1440 wide

    Perhaps it is my device then, it has narrower screen in comparison to height

    @Panda With a resolution like that, it shouldn’t be an issue. However, there are a number of things you can do with custom CSS. I wouldn’t recommend creating a new theme unless you really have to

  • @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
  • Nodebb vs Wordpress vs Other

    General wordpress nodebb woocomerce business
    4
    2 Votes
    4 Posts
    600 Views
    PrestaShop + modules IA https://www.prestashop.com Magento https://developer.adobe.com/open/magento
  • Nodebb design

    Solved General nodebb
    2
    1 Votes
    2 Posts
    952 Views
    @Panda said in Nodebb design: One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum. From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over. @Panda said in Nodebb design: The “write api” is preferred for server-to-server interactions. This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write. A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase. You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.
  • Forum Icons NodeBB

    Solved Customisation icons forum nodebb
    13
    0 Votes
    13 Posts
    3k Views
    @cagatay That matches what I see [image: 1667218162107-4f0f858d-9812-42b1-9f61-ffb13d31dccd-image.png]
  • NodeBB inline videoplayer

    Solved Customisation nodebb
    12
    3 Votes
    12 Posts
    3k Views
    @phenomlab YAY! It works Thanks so much
  • Dark Theme Upper Padding

    Solved Customisation nodebb
    7
    1
    6 Votes
    7 Posts
    2k Views
    @DownPW great! thanks a lot… this code solves my problem.
  • nodebb dropdown menu

    Solved Configure nodebb
    5
    1
    0 Votes
    5 Posts
    2k Views
    @phenomlab said in nodebb dropdown menu: @kurulumu-net You set it like the below example taken from this site [image: 1637939951821-aae36790-3257-4bb2-ad5a-0d744309876a-image.png] Which presents this [image: 1637939983445-77f47260-2941-4afe-9614-8e17dcfc8c19-image.png] Very interesting… I actually thought this wasn’t possible, as I remember it being asked in the NodeBB forum. Is this something new that’s been implemented? I’ll 100% be doing that when I’m on the laptop over the weekend.
  • nodebb-plugin-customize error

    Solved Customisation
    25
    2 Votes
    25 Posts
    11k Views
    @phenomlab it work, thanks
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    2k Views
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.