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
    #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.

  • wrote on last edited by DownPW
    #42

    yes the bug is in my dev environment. tested now

  • yes the bug is in my dev environment. tested now

    wrote on last edited by
    #43

    @DownPW it wasn’t there when I tested incognito.

  • wrote on last edited by DownPW
    #44

    I do all my tets in incognito too
    I will test with another account

    You must scroll down a little to see

  • I do all my tets in incognito too
    I will test with another account

    You must scroll down a little to see

    wrote on last edited by
    #45

    @DownPW I scrolled through but found no issues

  • wrote on last edited by DownPW
    #46

    yes same with admin account in new incognito

    image.png

  • yes same with admin account in new incognito

    image.png

    wrote on last edited by
    #47

    @DownPW can you target both the correctly positioned elements and the incorrectly positioned and compare the results?

    I’m guessing they are different, but shouldn’t be.

  • wrote on last edited by
    #48

    correctly positionned :

    891bb641-cfbc-4e49-aa8f-ddc3466a9fd7-image.png
    428e9115-7af1-4043-8685-91332636dbb1-image.png

    incorrectly positioned :

    07648995-1a18-445e-b3e1-64cad7f8a89c-image.png
    5ba06a13-8122-4ac1-9cd1-f24733546cfe-image.png

  • correctly positionned :

    891bb641-cfbc-4e49-aa8f-ddc3466a9fd7-image.png
    428e9115-7af1-4043-8685-91332636dbb1-image.png

    incorrectly positioned :

    07648995-1a18-445e-b3e1-64cad7f8a89c-image.png
    5ba06a13-8122-4ac1-9cd1-f24733546cfe-image.png

    wrote on last edited by
    #49

    @DownPW so the class isn’t being applied. Thanks. Let me have another look at this.

  • wrote on last edited by
    #50

    @DownPW from my further testing, this is 100% CF, but I don’t know why. I’ve tried Page Rules, Cache Rules, setting security in the page rules to “Essentially Off” - nothing seems to work (for me at least). I’ve stripped back my testing domain and disabled CF completely, and everything works as intended.

    I was never able to reproduce the issue here, and that’s because I don’t use CF !

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


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
  • How to style tool tip of nodebb-plugin-user-level

    Solved Customisation user level css
    4
    1
    5 Votes
    4 Posts
    3k Views
    phenomlab
    @DownPW thanks. I forgot about that.
  • 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
  • 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
  • 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] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    63k Views
    phenomlab
    @DownPW as discussed in PM Seems to have been solved with the new JS code that you added allowing the version CSS file change!! Cache problem therefore with the JS of the Switcher theme Based on this, I will close this thread and reference https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27