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

    @crazycells thanks. I’ll need to check this

  • 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 phenomlab
    #98

    @crazycells Thanks for reporting this. It’s fixed here, and should look like the below (you’ll need to reload the browser)

    b13b69f6-c6dd-4bed-8116-1a10532f1642-image.png

    This uses customised CSS when this viewport size is detected, and also needs to remove one of the tags to prevent them spilling out of the DIV

        [component="topic/tags"] a:nth-child(2) {
            display: none;
        }
    

    It’s a bit of a hack, but necessary to accommodate this screen size. Let me know if it looks good and I’ll commit it.

  • @crazycells Thanks for reporting this. It’s fixed here, and should look like the below (you’ll need to reload the browser)

    b13b69f6-c6dd-4bed-8116-1a10532f1642-image.png

    This uses customised CSS when this viewport size is detected, and also needs to remove one of the tags to prevent them spilling out of the DIV

        [component="topic/tags"] a:nth-child(2) {
            display: none;
        }
    

    It’s a bit of a hack, but necessary to accommodate this screen size. Let me know if it looks good and I’ll commit it.

    wrote on last edited by
    #99

    @phenomlab can you please check the borders agains? I think it is going well up until ~1290 px, but then, it is disrupted, and it is fixed again after ~1400 px

  • @phenomlab can you please check the borders agains? I think it is going well up until ~1290 px, but then, it is disrupted, and it is fixed again after ~1400 px

    wrote on last edited by

    @crazycells hmm. Thought that might happen. Let me have a look.

  • @phenomlab can you please check the borders agains? I think it is going well up until ~1290 px, but then, it is disrupted, and it is fixed again after ~1400 px

    wrote on last edited by

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

    can you please check the borders agains? I think it is going well up until ~1290 px, but then, it is disrupted, and it is fixed again after ~1400 px

    Should be resolved now? Obviously, no site will cater for odd browser sizes or screen resolutions - that’s not a realistic expectation, but the issue you reported should be fixed.

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

    can you please check the borders agains? I think it is going well up until ~1290 px, but then, it is disrupted, and it is fixed again after ~1400 px

    Should be resolved now? Obviously, no site will cater for odd browser sizes or screen resolutions - that’s not a realistic expectation, but the issue you reported should be fixed.

    wrote on last edited by

    @phenomlab yes, it is fixed now 👍

  • @phenomlab yes, it is fixed now 👍

    wrote on last edited by

    @crazycells thanks. I’ll commit the updated css code over the next few days.

  • wrote on last edited by
  • wrote on last edited by

    hi @phenomlab , there is a bug when there is no reply on the topic… it says “no one has replied” but when the title is spanning two lines, then it overlaps… please see below…

    Screenshot 2024-03-30 at 22.36.26.png

    Screenshot 2024-03-30 at 22.36.17.png

  • hi @phenomlab , there is a bug when there is no reply on the topic… it says “no one has replied” but when the title is spanning two lines, then it overlaps… please see below…

    Screenshot 2024-03-30 at 22.36.26.png

    Screenshot 2024-03-30 at 22.36.17.png

    wrote on last edited by phenomlab

    @crazycells ok, thanks. I thought that might happen. Will resolve later.

    EDIT - just done it. It’s a bit rough perhaps as done in a hurry!

  • wrote on last edited by

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
  • 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
  • Rotating Star Effect

    Solved Let's Build It wordpress css
    17
    12 Votes
    17 Posts
    5k Views
    Hari
    @phenomlab thanks a lot for these, both of the below are awesome! https://codepen.io/bennettfeely/pen/vYLmYJz https://codepen.io/C-L-the-selector/pen/MWZbWBo
  • 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.
  • chat list navbar

    Solved Customisation css navbar chat menu
    30
    2
    3 Votes
    30 Posts
    13k Views
    DownPW
    No no it’s ok @phenomlab I just comment the 2 lines mentionned aboves
  • 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
  • Multiple link on one ico non Navbar

    Solved Customisation links css navbar
    7
    1
    2 Votes
    7 Posts
    3k Views
    DownPW
    yeah you’re right @phenomlab. Problem of NodeBB Version