Skip to content

Switch between list and card view function

Moved Let's Build It
107 4 56.6k 1
  • @DownPW All good comments, thanks. Don’t forget that your CSS is also very customized over the stock that comes with NodeBB, but I’m quite surprised by this

    @DownPW said in Switch between list and card view function:

    The topic selection check box is difficult to check: most of the time I enter the topic rather than checking the box

    Perhaps I missed some final modifications here, but I cannot reproduce that - will need to check

    @DownPW said in Switch between list and card view function:

    I still have the problem displaying tags :

    Again, surprised by that as it was addressed in the final code. Will need to check

    @DownPW said in Switch between list and card view function:

    If you have a pinned topic with the pinned label, the line is visible behind the label

    Yes, I’m aware of that one - the CSS you propose would work, but not for those without custom CSS

    @DownPW said in Switch between list and card view function:

    Why not take the same width as the toolbar here ?

    Because you cannot fit 32% into 100% even with simple math 🙂 It needs either padding or margin - both of which will be negative, but I’ve done it here

    fb23ef77-84e2-4fc0-af92-5011eaf10e06-image.png

    I’m going to release a vanilla harmony CSS file (working on it now) shortly. This will be the starting point that will fit most users, but obvously, the more customized CSS you have, the more work it needs.

    wrote on last edited by
    #22

    @phenomlab said in Switch between list and card view function:

    If you have a pinned topic with the pinned label, the line is visible behind the label

    I decided to leave this as is. It’s transparent in the stock harmony CSS, so if you want to change it to suit your needs, then feel free. The categories and tags have been moved to the right anyway in this modified version of code, therefore, the “bug” (it’s not really, but…) is no longer present.

  • wrote on last edited by DownPW
    #23

    Great

    I put the code on prod.
    I see this bug on a few topics but impossible to know why

    image.png

    ab51fee1-a0d9-4b5a-a761-4c7dae743a31-image.png

    abe1b94e-670c-42bf-ac9d-03664253a3e5-image.png

  • Great

    I put the code on prod.
    I see this bug on a few topics but impossible to know why

    image.png

    ab51fee1-a0d9-4b5a-a761-4c7dae743a31-image.png

    abe1b94e-670c-42bf-ac9d-03664253a3e5-image.png

    wrote on last edited by
    #24

    @DownPW does it resolve itself if you click the home button again? I’ve seen this in dev but can’t reproduce it in prod.

  • @DownPW does it resolve itself if you click the home button again? I’ve seen this in dev but can’t reproduce it in prod.

    wrote on last edited by DownPW
    #25

    @phenomlab said in Switch between list and card view function:

    @DownPW does it resolve itself if you click the home button again? I’ve seen this in dev but can’t reproduce it in prod.

    nope, the bug persist.

    it seem problem with .category-card .lastpost a img but what’s strange is that it doesn’t do it for all topics

  • @phenomlab said in Switch between list and card view function:

    @DownPW does it resolve itself if you click the home button again? I’ve seen this in dev but can’t reproduce it in prod.

    nope, the bug persist.

    it seem problem with .category-card .lastpost a img but what’s strange is that it doesn’t do it for all topics

    wrote on last edited by
    #26

    @DownPW yes, it seems to be an issue with the ajax callback but not sure where currently it originates from.

    Does it happen on page load also?

  • @DownPW yes, it seems to be an issue with the ajax callback but not sure where currently it originates from.

    Does it happen on page load also?

    wrote on last edited by DownPW
    #27

    @phenomlab said in Switch between list and card view function:

    @DownPW yes, it seems to be an issue with the ajax callback but not sure where currently it originates from.

    Does it happen on page load also?

    can you be more specific?

    If I refresh the page while keeping Card View activated it’s the same.
    Same if I deactivate/reactivate Card View

    Here, we see, we have not .category-card .lastpost a img add to class

    image.png

  • @phenomlab said in Switch between list and card view function:

    @DownPW yes, it seems to be an issue with the ajax callback but not sure where currently it originates from.

    Does it happen on page load also?

    can you be more specific?

    If I refresh the page while keeping Card View activated it’s the same.
    Same if I deactivate/reactivate Card View

    Here, we see, we have not .category-card .lastpost a img add to class

    image.png

    wrote on last edited by
    #28

    @DownPW the class you’re referring to in the screenshot isn’t supposed to be applied to that specific element, as there is no img to be applied against.

    What I meant about the ajax callback is that not all of the styles seem to be applied. It’s almost as though they are being added to the DOM when they aren’t loaded yet.

  • wrote on last edited by DownPW
    #29

    Arf Ok sorry.
    For information, I have the same things on my test server (actually, it’s a clone of prod) if you want to see in details or play

  • Arf Ok sorry.
    For information, I have the same things on my test server (actually, it’s a clone of prod) if you want to see in details or play

    wrote on last edited by phenomlab
    #30

    @DownPW thanks. The really odd thing here is that I can’t reproduce this issue at all in prod - where I developed it originally in fact.

    I think I’m missing something somewhere, but unsure as to where it is currently.

  • wrote on last edited by
    #31

    no problem dude. I’m not sure I’ll be much help on this one.

  • no problem dude. I’m not sure I’ll be much help on this one.

    wrote on last edited by
    #32

    @DownPW no problems. Your review and findings are a great help already.

  • no problem dude. I’m not sure I’ll be much help on this one.

    wrote on last edited by phenomlab
    #33

    @DownPW I found the bug. It’s CloudFlare 😞

    91f23522-0434-4cae-9e33-d531104ec0be-image.png

    Setting the cache to bypass resolves the issue. This explains why I cannot replicate it in PROD (for me) as I only use CF for DNS resolution.

    I have modified the CSS file slightly also, so you’ll need to pick up the latest code.

    https://github.com/phenomlab/harmony-card-view/blob/main/card.css

    Not entirely sure why CF seems to think this file never changes - it’s different on each page load and suffixed with a random string! The setting in CF should also respect that - but doesn’t. So much for that

    a993abeb-2722-414a-81ee-8260994c4e87-image.png

  • wrote on last edited by
    #34

    Ok @phenomlab Thanks to you for find the solution for this problem

    so what is the good parameters in CF for this script ?
    Maybe include this on your github ?

  • Ok @phenomlab Thanks to you for find the solution for this problem

    so what is the good parameters in CF for this script ?
    Maybe include this on your github ?

    wrote on last edited by
    #35

    @DownPW yes, absolutely, although I’m not entirely sure why CF behaves in this manner as in most cases, a present query string that changes frequently (on each page load) should not present itself as an issue.

    Still checking.

  • wrote on last edited by
    #36

    It’s a shame to do without the CF cache in my opinion.

    Do you just have to activate development mode in CF?

  • It’s a shame to do without the CF cache in my opinion.

    Do you just have to activate development mode in CF?

    wrote on last edited by
    #37

    @DownPW yes, in my testing, just enable development mode and then reload the site a few times and you’ll notice it works as intended.

  • wrote on last edited by DownPW
    #38

    hmm I think they was other thing.

    I have not update the css file, I have just :

    • activated development mode in CF,
    • purge everything cache in CF,
    • and test in new incognito windows on firefox

    and I have the bug.


    Edit : Same with the CSS updated

  • hmm I think they was other thing.

    I have not update the css file, I have just :

    • activated development mode in CF,
    • purge everything cache in CF,
    • and test in new incognito windows on firefox

    and I have the bug.


    Edit : Same with the CSS updated

    wrote on last edited by
    #39

    @DownPW is this in your dev environment? I checked that earlier and the bug wasn’t present.

  • wrote on last edited by DownPW
    #40

    yes the bug is in my dev environment

  • yes the bug is in my dev environment

    wrote on last edited by
    #41

    @DownPW yes, correct.


Related Topics
  • Ch..ch..ch..ch..changes!

    Announcements themes layout
    16
    2
    15 Votes
    16 Posts
    5k Views
    JAC
    @phenomlab of course, to be recognised is fantastic. @phenomlab said in Ch..ch..ch..ch..changes!: Sadly, no. Web crawlers and scrapers are often JS based and read text only, so styles don’t have any bearing. I’ve read mixed things about this, but no that does make sense, it was something I read a many years back when using Wordpress.
  • Extended functions for Q&A NodeBB plugin

    Let's Build It q&a panels cards
    3
    4
    5 Votes
    3 Posts
    3k Views
    DownPW
    Very good like always
  • navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    3k Views
    phenomlab
    @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.
  • nodebb-user-level customisation : popover element

    Solved Customisation css user level plugin custom
    15
    6 Votes
    15 Posts
    5k Views
    DownPW
    No no, I said that in the sense that he told me it was simple ^^ I was able to see that this was not the case by targeting the elements he had advised me.
  • Bottom footer navbar button extend

    Solved Customisation css javascript customisation footer navbar
    32
    9 Votes
    32 Posts
    15k Views
    phenomlab
    @DownPW said in Bottom footer navbar button extend: Oh my god, it’s beautiful mark I liked this design so much, I’ve implemented it here. I intend to do a lot more with the footer in due course, so hiding it makes a lot of sense. Thanks @DownPW for the idea and initial concept
  • New message CSS problem

    Unsolved Customisation css
    11
    1
    2 Votes
    11 Posts
    4k Views
    phenomlab
    @DownPW hi. Sorry for digging up an old post, but I’m going through items still unresolved and was looking to get an understanding of where you are currently with this?
  • [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.
  • Minor cosmetic layout chages

    Announcements layout
    4
    2
    0 Votes
    4 Posts
    2k Views
    JAC
    @phenomlab said in Minor cosmetic layout chages: @jac I like a challenge