Skip to content
Sudonix

Switch between list and card view function

Moved Let's Build It
107 4 58.7k 1
  • DownPW DownPW

    Still doesn’t work for me 😞

    I’m in DNS only mode in CF,

    ba6cbcbd-6439-44b4-9340-3877b96bb657-image.png

    I deactivated CF and it’s the same :

    e619cf13-0d4b-4a77-93bc-c326f7b45652-image.png

    I deleted all my custom CSS and JS on nodebb ACP, leaving only those for the card view and I have the same problem.

    I admit that I don’t understand anything anymore.

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #74

    @DownPW I think I see why.

    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

    55b58cdb-cda4-4ff7-9fa3-bbc08aa8c900-image.png

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

    ae0bb9e5-65ca-471f-a393-4c08e335dae6-image.png

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

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    DownPW 1 Reply
    0
  • DownPW
    DownPW
    DownPW
    wrote on
    #75

    I’m with my childs, test asap 🙂

    PW and WS Spirit alive

    0
  • DownPW DownPW

    I’m with my childs, test asap 🙂

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #76

    @DownPW I see you set a default avatar 🙂 ?

    83f97f4c-2471-40b5-a58d-ff2d4860ec3e-image.png

    On checking your site, this has resolved the issue, but you should still have that CSS I defined above. As soon as you validate, I will add this to the code.

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • phenomlab phenomlab

    @DownPW I think I see why.

    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

    55b58cdb-cda4-4ff7-9fa3-bbc08aa8c900-image.png

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

    ae0bb9e5-65ca-471f-a393-4c08e335dae6-image.png

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

    DownPW
    DownPW
    DownPW
    wrote on
    #77

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

    PW and WS Spirit alive

    0
  • DownPW DownPW

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

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #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

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    👍
    1
  • DownPW
    DownPW
    DownPW
    wrote on
    #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.

    PW and WS Spirit alive

    0
  • DownPW DownPW

    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.

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #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.

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    1
  • DownPW
    DownPW
    DownPW
    wrote on
    #81

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

    PW and WS Spirit alive

    0
  • DownPW
    DownPW
    DownPW
    wrote on
    #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

    PW and WS Spirit alive

    phenomlab 2 Replies
    0
  • DownPW DownPW

    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

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #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.

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • DownPW DownPW

    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

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #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;
}

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • DownPW
    DownPW
    DownPW
    wrote on
    #85

    Hi,

    seems to broke Users display

    image.png

    PW and WS Spirit alive

    0
  • DownPW DownPW

    Hi,

    seems to broke Users display

    image.png

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #86

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

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    1
  • DownPW
    DownPW
    DownPW
    wrote on
    #87

    you hit the right point

    Thanks dude.

    PW and WS Spirit alive

    0
  • DownPW DownPW

    you hit the right point

    Thanks dude.

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #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

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    1
  • DownPW
    DownPW
    DownPW
    wrote on
    #89

    Work like a charm now 😉

    PW and WS Spirit alive

    1
  • cagatay
    cagatay
    cagatay
    wrote on
    #90

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

    image.png

    When disabled seems as below;

    image.png

    phenomlab 2 Replies
    0
  • cagatay cagatay

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

    image.png

    When disabled seems as below;

    image.png

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #91

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

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    1
  • cagatay cagatay

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

    image.png

    When disabled seems as below;

    image.png

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #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

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    1
  • cagatay
    cagatay
    cagatay
    wrote on
    #93

    worked thank you Mark.

    1
Log in to reply

Related Topics
  • phenomlab

    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.
  • crazycells

    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.
  • phenomlab

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

    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.
  • DownPW

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

    answers appearance css code request

    Solved Customisation css answers
    11
    1
    1 Votes
    11 Posts
    4k Views
    phenomlab
    @DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.
  • DownPW

    [NodeBB] [JS SCRIPT/CSS] Theme Switcher

    Customisation theme switcher javascript css theme
    8
    4 Votes
    8 Posts
    5k Views
    phenomlab
    @DownPW done
  • DownPW

    [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    258
    49 Votes
    258 Posts
    175k Views
    cagatay
    mark hi, Refused to apply style from ‘https://efelsefe.com/assets/customfonts/FontAwesome-6-Pro/pro/css/v4-font-face.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. I keep getting this error.