Skip to content

Switch between list and card view function

Moved Let's Build It
107 4 56.6k 1
  • wrote on last edited by DownPW
    #51

    Too bad. I will therefore not be able to use this function or perhaps by just deleting the problematic avatar if that is possible

  • Too bad. I will therefore not be able to use this function or perhaps by just deleting the problematic avatar if that is possible

    wrote on last edited by
    #52

    @DownPW you could use `display: none’ to hide that specific class? I do intend to try and identify the issue with CF but it’s difficult because I don’t traditionally use it.

  • wrote on last edited by DownPW
    #53

    I can possibly use this code if you find a solution (or not)
    With just a left border on post-content

    .category-card .lastpost .post-content {
        border-left: 2px solid grey;
    }
    
    .category-card .lastpost a img {
        display: none;
    }
    
    .category-card .line-clamp-sm-2 {
        margin-left: 38px !important;
    }
    

    Result :

    8235af26-ad1f-49de-8463-27314ed8d0bb-image.png

  • wrote on last edited by DownPW
    #54

    hmmm, on my website, in fact the elements on the class have not been applied are still displayed 😞

    c5b2d73d-de9f-4fa7-ab4f-fcc6ab610549-image.png

    Is there a way to prevent them from showing up either?

  • I can possibly use this code if you find a solution (or not)
    With just a left border on post-content

    .category-card .lastpost .post-content {
        border-left: 2px solid grey;
    }
    
    .category-card .lastpost a img {
        display: none;
    }
    
    .category-card .line-clamp-sm-2 {
        margin-left: 38px !important;
    }
    

    Result :

    8235af26-ad1f-49de-8463-27314ed8d0bb-image.png

    wrote on last edited by
    #55

    @DownPW that looks really good!

  • wrote on last edited by DownPW
    #56

    hmm no @phenomlab
    it’s ok on your site but not on mine 😞

    look at the screens above


    if I not display this class too, I have no avatar on all the site because it’s the original class .

    In fact I can’t do anything. In all cases, avatars with the wrong location are displayed in the same way

    or you would have to make sure that this element never appears with card view on this page but I’m not even sure that would work

  • wrote on last edited by
    #57

    if you have solution for me, I take it

  • if you have solution for me, I take it

    wrote on last edited by phenomlab
    #58

    @DownPW I’ll need to put something together based on your dev site.

    EDIT: If you have a look at sudonix.dev (closed dev site, so you’ll need to login) you’ll see that this is no longer exposed to CF, and works as intended.

  • wrote on last edited by
    #59

    Yes I believe you that it works without CF 🙂

    I would just like to see if a solution is possible with CF even if it means deleting this d**n avatar on post-content

  • Yes I believe you that it works without CF 🙂

    I would just like to see if a solution is possible with CF even if it means deleting this d**n avatar on post-content

    wrote on last edited by phenomlab
    #60

    @DownPW I’m sure we can do something here.

    Actually, can you try and remove the minification etc on CSS and JS in CF for your domain and see if this makes any difference?

  • @DownPW I’m sure we can do something here.

    Actually, can you try and remove the minification etc on CSS and JS in CF for your domain and see if this makes any difference?

    wrote on last edited by DownPW
    #61

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

    Actually, can you try and remove the minification etc on CSS and JS in CF for your domain and see if t

    Sorry my friend, can you be more specific ?

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

    Actually, can you try and remove the minification etc on CSS and JS in CF for your domain and see if t

    Sorry my friend, can you be more specific ?

    wrote on last edited by
    #62

    @DownPW this setting

    27c7b6e7-2f63-4fbe-94f4-e46279093008-image.png

  • wrote on last edited by
    #63

    hello.

    how OK

    minification etc on CSS and JS in CF is already disabled

  • hello.

    how OK

    minification etc on CSS and JS in CF is already disabled

    wrote on last edited by
    #64

    @DownPW thanks. Just wanted to eliminate a thought I had around the JS being executed in the wrong order.

  • hmmm, on my website, in fact the elements on the class have not been applied are still displayed 😞

    c5b2d73d-de9f-4fa7-ab4f-fcc6ab610549-image.png

    Is there a way to prevent them from showing up either?

    wrote on last edited by phenomlab
    #65

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

    Is there a way to prevent them from showing up either?

    You should be able to use the below CSS to hide that specific avatar

    .category-card .lastpost a img {
        margin-top: 10px;
        margin-left: -185px;
        display: none;
    }
    

    And

    .category-card span.avatar.avatar-tooltip.not-responsive.avatar-rounded {
        display: none;
    }
    
  • Too bad. I will therefore not be able to use this function or perhaps by just deleting the problematic avatar if that is possible

    wrote on last edited by
    #66

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

    Too bad. I will therefore not be able to use this function or perhaps by just deleting the problematic avatar if that is possible

    FIXED: Looks like I was using an incorrect hook 😞 have rectified that now, so can you please pull the latest functions.js and test?

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

  • wrote on last edited by
    #67

    I switched my domain back to CF, and all the previous bugs came back 😞 However, I’ve re-written the code to use custom CSS instead of external CSS, and this so far looks good in test. I want to evaluate this a bit more before I release the updated code, but so far, this looks like it’s going to work.

  • wrote on last edited by phenomlab
    #68

    @DownPW I think I might finally have it - code that works in CF with no bugs… 🐛

    Can you please test this code (which is running in sudonix.dev) and let me know what you think? It’s not ready for publish just yet but will be once I’ve tidied up a few things.

  • wrote on last edited by
    #69

    Hello Mark

    It looks pretty good on your test platform. I didn’t notice the bug there.

    Let’s see what it looks like on another server with CF.

  • Hello Mark

    It looks pretty good on your test platform. I didn’t notice the bug there.

    Let’s see what it looks like on another server with CF.

    wrote on last edited by
    #70

    @DownPW Great. There is still one small bug I noticed, but I think that might be a caching issue. This new code is refactored, and has structurally changed. I’ll post the new code in the main topic, plus updated instructions.


Related Topics
  • Material View Support for Stock NodeBB

    Unsolved Let's Build It material view javascript css
    51
    4
    15 Votes
    51 Posts
    27k Views
    DownPW
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • Create a dynamic category list

    Moved Let's Build It dynamic categories api
    16
    3
    14 Votes
    16 Posts
    7k Views
    phenomlab
    Hmm - seems I never committed this code. I’ll do that now… EDIT - here it is https://github.com/phenomlab/category-list/tree/main
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    7k Views
    phenomlab
    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
  • Quote design CSS

    Solved Customisation css quote
    15
    1
    4 Votes
    15 Posts
    6k Views
    phenomlab
    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning. Good spot
  • Blinking text Effect

    Customisation nodebb text effect css
    3
    5 Votes
    3 Posts
    2k Views
    DownPW
    @phenomlab I love it too @phenomlab said in Blinking text Effect: Has that “broken neon light” look that you see in films. It’s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too
  • [NodeBB] greeting message

    Solved Customisation css nodebb javascript
    2
    1
    3 Votes
    2 Posts
    2k Views
    phenomlab
    @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] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    9k Views
    phenomlab
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.
  • 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.