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

  • @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.

  • 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 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 🙂

  • @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” 😄

  • @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 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?

  • @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…

  • @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.

  • @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.

  • @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.

  • @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.

    @phenomlab Thanks 🙏

  • undefined phenomlab has marked this topic as solved on 16 May 2022, 13:07
  • undefined crazycells referenced this topic on 21 Oct 2022, 04:16


1/10

12 May 2022, 17:22


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
  • 4 Votes
    28 Posts
    646 Views
    @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.
  • 7 Votes
    8 Posts
    647 Views
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • Bug Report

    Solved Bugs nodebb bugs 9 Nov 2023, 19:27
    1
    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 [image: 1718028529465-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?)
  • 1 Votes
    1 Posts
    437 Views
    No one has replied
  • 8 Votes
    35 Posts
    3k Views
    @cagatay No, you can ignore that.
  • 36 Votes
    55 Posts
    6k 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
  • 1 Votes
    2 Posts
    761 Views
    @eveh Welcome board The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; } Note, that you will need to adjust your CSS code to suit your own site / requirements.
  • 11 Votes
    23 Posts
    3k 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.