Skip to content

ineffecient use of space on mobile

Solved Customisation
  • Hi @phenomlab ,

    When I access these pages that show posts on mobile:

    /posts
    /best
    /controversial

    I see something like this:
    Screen Shot 2022-05-12 at 1.11.28 PM.png

    This is how it looks on default. Our forum is the same, NodeBB community forum is the same…

    Although this page design does not bother me on desktop, I feel on mobile ~40% of the page is wasted for space…

    1. I wonder your opinion about this.

    2. Do you think these pages can be re-designed with CSS codes?

    I thought something like this, as in the topics… so, the blue line and avatar goes to the right side edge… username comes next to avatar, date goes to the left side… And of course “the post area” will be expanded to whole page…

    Screen Shot 2022-05-12 at 1.11.28 PM copy.jpg

  • @crazycells I knew that was coming 😄 - here it is

    @media (max-width: 767px) {
    .posts-list .posts-list-item {
        width: auto;
    }
    .posts-list .posts-list-item .post-body {
        border-right: none !important;
        width: 100%;
    }
    .posts-list .posts-list-item .post-info {
        position: revert;
        left: 0px;
        width: 500px;
    }
    .posts-list .posts-list-item .post-info .post-author {
        max-width: none !important;
        display: flex;
    }
    .posts-list .posts-list-item .post-info .post-author span {
        margin-left: 10px;
    }
    }
    

    Some other adjustments to get even more estate on mobile (30px either side) - your tastes may vary

    @media (max-width: 767px) {
    .posts-list .posts-list-item {
        width: auto;
    }
    .posts-list .posts-list-item .post-info {
        position: revert;
        left: 0px;
        width: 100%;
        margin-left: 15px;
    }
    .posts-list .posts-list-item .post-info .post-author {
        max-width: none !important;
        display: flex;
    }
    .posts-list .posts-list-item .post-body {
        border-right: none !important;
        width: 100%;
    }
    .posts-list .posts-list-item .post-info .post-author span {
        margin-left: 10px;
    }
    }
    

    The second CSS block gives you this

    1a9607f4-c011-4521-ba7b-e1b5fe44a045-image.png

    A final note that this of course does not include the colour scheme. This is from “Midnight” - a new theme I’ve developed in DEV which is almost ready for release, but has a few bugs I need to iron out first. I’ll publish a blog post on this new theme set soon.

  • @crazycells Funny you should mention that ! I was looking at this in my DEV environment yesterday and decided to alter the layout a bit

    bae79dbc-d2ef-4ceb-b25b-1bbcc24561bd-image.png

    My personal thoughts are that this looks much better and is easier to read 🙂

  • @phenomlab said in ineffecient use of space on mobile:

    @crazycells Funny you should mention that ! I was looking at this in my DEV environment yesterday and decided to alter the layout a bit

    lol, let’s say “great minds think alike” 😄

  • @phenomlab yes, I think this is definitely way better than the current form…

    Is this all CSS? or have you changed the codes in files as well?

  • @crazycells It’s all CSS !

  • @phenomlab said in ineffecient use of space on mobile:

    @crazycells It’s all CSS !

    great. Can you please share it when it is ready? I am looking forward to it.

    I have realized this recently, after using “/best-posts” plugin… it is very hard to follow these posts on mobile…

  • @crazycells I knew that was coming 😄 - here it is

    @media (max-width: 767px) {
    .posts-list .posts-list-item {
        width: auto;
    }
    .posts-list .posts-list-item .post-body {
        border-right: none !important;
        width: 100%;
    }
    .posts-list .posts-list-item .post-info {
        position: revert;
        left: 0px;
        width: 500px;
    }
    .posts-list .posts-list-item .post-info .post-author {
        max-width: none !important;
        display: flex;
    }
    .posts-list .posts-list-item .post-info .post-author span {
        margin-left: 10px;
    }
    }
    

    Some other adjustments to get even more estate on mobile (30px either side) - your tastes may vary

    @media (max-width: 767px) {
    .posts-list .posts-list-item {
        width: auto;
    }
    .posts-list .posts-list-item .post-info {
        position: revert;
        left: 0px;
        width: 100%;
        margin-left: 15px;
    }
    .posts-list .posts-list-item .post-info .post-author {
        max-width: none !important;
        display: flex;
    }
    .posts-list .posts-list-item .post-body {
        border-right: none !important;
        width: 100%;
    }
    .posts-list .posts-list-item .post-info .post-author span {
        margin-left: 10px;
    }
    }
    

    The second CSS block gives you this

    1a9607f4-c011-4521-ba7b-e1b5fe44a045-image.png

    A final note that this of course does not include the colour scheme. This is from “Midnight” - a new theme I’ve developed in DEV which is almost ready for release, but has a few bugs I need to iron out first. I’ll publish a blog post on this new theme set soon.

  • @phenomlab said in ineffecient use of space on mobile:

    @crazycells I knew that was coming - here it is

    lol of course 😄

    Thanks a lot. It is definitely much better than the previous version…

    Since we have not adapted posts as boxes yet, I would like to separate the posts by a line from edge to edge… but not sure what classes should I use? I know the code will be something like this:

    .posts-list .posts-list-item .post-info {
    border-bottom: 1px solid #000;
    }
    

    but this does not extend from edge to edge. Do you have any other suggestions to separate posts from each other?

    Actually, it looks good when I add:

        margin-bottom: 35px;
    

    but, I wanted to ask in case you have a better solution.

  • @crazycells This is fine. The generally accepted way of adding a space between elements is to use margin so you’re on the right track.

  • phenomlabundefined phenomlab has marked this topic as solved on
  • crazycellsundefined crazycells referenced this topic on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • Bug Report

    Solved Bugs
    47
    26 Votes
    47 Posts
    2k Views

    @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

    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?)

  • Threaded post support for NodeBB

    Let's Build It
    146
    50 Votes
    146 Posts
    21k Views

    Updated git for above change

    https://github.com/phenomlab/nodebb-harmony-threading/commit/14a4e277521d83d219065ffb14154fd5f5cfac69

  • optional "snow falling" theme

    Solved Customisation
    6
    6 Votes
    6 Posts
    371 Views

    @Sala ok, but that’s still the same loop which is going to have an impact on the CPU.

  • 11 Votes
    23 Posts
    2k Views

    @DownPW No issues. Thanks to the Google Chrome “bug”, it does have some restrictions, but works fine other than that. I have an odd issue where it doesn’t work on Firefox mobile, but works fine on Firefox desktop.

  • [NodeBB] greeting message

    Solved Customisation
    2
    3 Votes
    2 Posts
    628 Views

    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here

    https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358

  • NodeBB 1.19.3

    Solved Performance
    33
    4 Votes
    33 Posts
    3k Views

    @phenomlab

    I find the problem Mark 😉

    The error message indicated this path :

    http://localhost:4567/assets/plugins/nodebb-plugin-emoji/emoji/styles.css?v=6983dobg16u

    I change the path url on config.json

    47bacc80-f141-41e4-a261-3f8d650cc6f6-image.png

    And all it’s good 🙂

    Weird, I didn’t have to change that path before 1.19.3

    But this does not prevent the problem from a clean install with Emoji Plugin

    EDIT: After test, that resolv the problem installation for 1.18.x but not for 1.19.x (I have other error message when I run ./nodebb Setup

    For resume: NodeJS 16_x with 1.18.x is ok

  • 5 Votes
    9 Posts
    1k Views

    is there any way to see whose reputation is changed by this plugin?

  • Anyone using Ghost ?

    Customisation
    47
    12 Votes
    47 Posts
    3k Views

    @phenomlab I’m really looking forward to trying out ghost fairly soon. Should I underestimate the fact I’m not a writer? 😉.