Skip to content

Switch between list and card view function

Moved Let's Build It
107 4 56.6k 1
  • @phenomlab said in Switch between list and card view function:

    Can you locate this css block

    .category-card .lastpost a img { margin-top: 10px; margin-left: -185px;}
    and change it to

    .category-card .lastpost a img, span.avatar.avatar-tooltip.not-responsive.avatar-rounded { margin-top: 10px; margin-left: -178px;}
    I did not account for the usage of standard avatars (the ones were it uses the first letter of the username) - I use a custom “guest” or “no upload” image defined here

    Whereas your site doesn’t have this and therefore replaces the CSS class which we have not previously targeted

    I’m confident that this will resolve the issue (famous last words)…

    Seems to work 🙂

    So actually all the avatars where the problem occurs are account avatars which have no profile image (very good remark)

    If i set default avatar, the bug is resolved.

    wrote on last edited by phenomlab
    #78

    @DownPW Yes, but it’s not a “bug” - it’s something I didn’t consider during the design, but the updated CSS will address that. Glad it works!!

    Updated CSS committed.

    https://github.com/phenomlab/harmony-card-view/commit/f0d95fff9fc545a7155ae50055336a173ffe4064

  • wrote on last edited by
    #79

    Yes, I completely understand what you mean.

    Finally the first code should work but it’s a blessing in disguise. I think the no external stylesheet approach is much better.

  • Yes, I completely understand what you mean.

    Finally the first code should work but it’s a blessing in disguise. I think the no external stylesheet approach is much better.

    wrote on last edited by phenomlab
    #80

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

    I think the no external stylesheet approach is much better.

    Yes it’s better to have it all in one place, but the custom css is not minified so not optimised out of the gate. Easy to address but if you frequently change css then you’d have to reverse the minify each time to make what you have readable.

  • wrote on last edited by
    #81

    oh yeahh, actually I hadn’t thought about that 🙂

  • wrote on last edited by DownPW
    #82

    I notice this my friend whe we use this css:

    .category-card .lastpost a img, span.avatar.avatar-tooltip.not-responsive.avatar-rounded {    
        margin-top: 10px;    
        margin-left: -178px;
    }
    
    

    with no default avatar on ACP (OK with default avatar on ACP)

    image.png

  • I notice this my friend whe we use this css:

    .category-card .lastpost a img, span.avatar.avatar-tooltip.not-responsive.avatar-rounded {    
        margin-top: 10px;    
        margin-left: -178px;
    }
    
    

    with no default avatar on ACP (OK with default avatar on ACP)

    image.png

    wrote on last edited by
    #83

    @DownPW that’s odd. I’ll need to check that. When I looked at your dev server earlier with the default avatar left blank, I used the custom css which worked fine.

  • I notice this my friend whe we use this css:

    .category-card .lastpost a img, span.avatar.avatar-tooltip.not-responsive.avatar-rounded {    
        margin-top: 10px;    
        margin-left: -178px;
    }
    
    

    with no default avatar on ACP (OK with default avatar on ACP)

    image.png

    wrote on last edited by phenomlab
    #84

    My bad. That should be

    .category-card .lastpost a img, .category-card span.avatar.avatar-tooltip.not-responsive.avatar-rounded {    
        margin-top: 10px;    
        margin-left: -178px;
    }
    
  • wrote on last edited by DownPW
    #85

    Hi,

    seems to broke Users display

    image.png

  • Hi,

    seems to broke Users display

    image.png

    wrote on last edited by
    #86

    @DownPW OK. That’s just css. I’ll issue a fix for that.

  • wrote on last edited by
    #87

    you hit the right point

    Thanks dude.

  • you hit the right point

    Thanks dude.

    wrote on last edited by
    #88

    @DownPW Hmm, yes, that CSS is very greedy and is likely to have been taken from existing code (sorry).

    Find this block

    .category-card ul.topics-list li, .category-card li[component="chat/message"], .category-card [component="chat/recent/room"], div#users-container a
    

    Replace it with

    .category-card ul.topics-list li
    

    That will resolve it. I’ve also updated this in GIT

    https://github.com/phenomlab/harmony-card-view/commit/35224d77563c7c8fabe84a9747e6246a5df7ebd3

  • wrote on last edited by
    #89

    Work like a charm now 😉

  • wrote on last edited by cagatay
    #90

    Mark hi,
    When the use those codes, the sub forums seems as below photo

    image.png

    When disabled seems as below;

    image.png

  • Mark hi,
    When the use those codes, the sub forums seems as below photo

    image.png

    When disabled seems as below;

    image.png

    wrote on last edited by
    #91

    @cagatay Yes, that’s a bug. It’s going to be just CSS, so will issue a fix shortly.

  • Mark hi,
    When the use those codes, the sub forums seems as below photo

    image.png

    When disabled seems as below;

    image.png

    wrote on last edited by
    #92

    @cagatay Fixed. Not with CSS as I planned, but with an updated function

    https://github.com/phenomlab/harmony-card-view/commit/e2ae2e5af1bfb933f733f43a0f257473c4b2fef6

    This should be used to replace the existing function(s) you have in /admin/appearance/customise#custom-js

    Full code here

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

  • wrote on last edited by
    #93

    worked thank you Mark.

  • wrote on last edited by
    #94

    Hi Mark, I am having some bugs on my laptop screen (Firefox , OS 13.6.4) , fyi…

    Screenshot 2024-03-08 at 16.54.34.png

  • Hi Mark, I am having some bugs on my laptop screen (Firefox , OS 13.6.4) , fyi…

    Screenshot 2024-03-08 at 16.54.34.png

    wrote on last edited by
    #95

    @crazycells thanks. What resolution are you running?

  • @crazycells thanks. What resolution are you running?

    wrote on last edited by
    #96

    @phenomlab ~1285 px

  • wrote on last edited by
    #97

    @crazycells thanks. I’ll need to check this


Related Topics
  • 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
  • CSS code customization for the link preview plugin

    Solved Customisation css nodebb
    6
    2
    3 Votes
    6 Posts
    3k Views
    phenomlab
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • 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.
  • The theme came with space on left side

    Solved WordPress css
    7
    3 Votes
    7 Posts
    2k Views
    Sala
    @phenomlab yes it’s a different theme. The other one was not offering much on editable sidebar. It was like flarum hahah
  • Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    19k Views
    DownPW
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    3k Views
    phenomlab
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png] You can increase the top and bottom padding by increasing the values above.
  • Discourse Design Change

    Customisation design change css html
    25
    7 Votes
    25 Posts
    10k Views
    RiekMedia
    @phenomlab okay
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    4k Views
    phenomlab
    @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.