Switch between list and card view function

[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)

[phenomlab]

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

[phenomlab]

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;
}

[DownPW]

Hi,

seems to broke Users display

[phenomlab]

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

[DownPW]

you hit the right point

Thanks dude.

[phenomlab]

@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

[DownPW]

Work like a charm now

[cagatay]

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

When disabled seems as below;

[phenomlab]

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

[phenomlab]

@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

[cagatay]

worked thank you Mark.

[crazycells]

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

[phenomlab]

@crazycells thanks. What resolution are you running?

[crazycells]

@phenomlab ~1285 px

[phenomlab]

@crazycells thanks. I’ll need to check this

[phenomlab]

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

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]

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

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

[phenomlab]

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