Card view with CSS and some custom JS

julian

@phenomlab I think the video doesn't embed because sudonix.org is sending a cross-origin-resource-policy of same-origin

phenomlab

@julian yes, probably. I've added a direct link anyway

phenomlab

Original post has been updated with new code designed to work with Stock Harmony CSS Enjoy!

phenomlab

@baris is there any discernible difference between load and ajaxify.end ? I have a custom CSS file being applied on toggle which is experiencing odd issues.

For example, if I load the page, some of the elements are not placed correctly although the css file is being loaded and the styles applied. If I reload the page (using F5) it's the same, but if I click the Home icon, everything looks normal.

The functions I'm using are

$(document).ready(function() {
    $(window).on('action:ajaxify.end', function(data) {
        cardView();
    });
});
$(document).ready(function() {
    $(window).on('action:posts.edited', function(data) {
        cardView();
    });
});
$(document).ready(function() {
    $(window).on('action:posts.loaded', function(data) {
        cardView();
    });
});

The actual cardView function itself is in this GIT link (see functions.js)

GitHub - phenomlab/harmony-card-view: A card view for Harmony theme on NodeBB

A card view for Harmony theme on NodeBB. Contribute to phenomlab/harmony-card-view development by creating an account on GitHub.

GitHub (github.com)

<baris>

action:ajaxify.end should fire whenever you navigate between pages by clicking links and whenever you reload the page with f5, put a console log in the function to see if it gets triggered.

phenomlab

@baris seems it does fire but the page doesn't load correctly until you click home, recent, etc when it does render correctly.

phenomlab

And so, the issue is CLOUDFLARE. Place the domain into development mode so the cache is bypassed and everything works as expected. This also explains why I couldn't reproduce the issue in PROD, because I don't use CF there

I knew there was a reason as to why I dislike CF so much, and this has just reminded me exactly why that is.

phenomlab

@baris something is definitely wrong here. I've disabled CF for my DEV domain which resolves most of the issues, although one still persists. I have the below code

function cardView() {
    $(document).ready(function() {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableCardView').length === 0) {
                var cardView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
              <input class="form-check-input" id="enableCardView" type="checkbox" data-field="enableCardView"> \
              <label class=" d-none d-md-inline fw-semibold" for="enableCardView"><i class="fa fa-fw fa-columns-3 right"></i></label> \
          </div></form></div>');
                $('.topic-list-header [component="category/controls"]').append(cardView);
                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableCardViewState');
                if (storedState === 'true') {
                    $('#enableCardView').prop('checked', true);
                }
            }
            // Append or remove the css file when the checkbox changes state
            $('#enableCardView').on('change', function() {
                var isChecked = $(this).is(':checked');
                var theTooltip = isChecked ? "List View" : "Card View"; // Update tooltip message
                if (isChecked) {
                    console.log('Card view is active.');
                    $('.category').addClass("category-card");

                    // Append new CSS link with a fresh timestamp
                    var string = new Date().getTime();
                    var href = "/assets/customcss/card.css?ver=" + string;
                    $('<link id="cardcss" rel="stylesheet" type="text/css" href="' + href + '">').appendTo("head");
                } else {
                    console.log('Card view is inactive.');
                    var cssLink = $('link[id="cardcss"]');
                    if (cssLink.length) {
                        cssLink.remove();
                        $('.category').removeClass("category-card");
                    }
                }
                // Update the tooltip title
                $(this).attr('data-original-title', theTooltip).tooltip('dispose').tooltip({
                    placement: 'bottom',
                    title: theTooltip,
                    trigger: 'hover'
                });
                // Store the checkbox state in localStorage
                localStorage.setItem('enableCardViewState', isChecked);
            });

            // Check for changes in the checkbox state when the page loads
            $('#enableCardView').trigger('change');
        }
    });
}

function applyNoReplyClass() {
    $("[component='topic/teaser'] .lastpost .text-xs").each(function() {
        if ($(this).text().trim() === "No one has replied") {
            $(this).addClass("no-reply");
        }
    });
}

$(document).ready(function() {
    // Ensure cardView and applyNoReplyClass are called after AJAX operations
    $(window).on('action:ajaxify.end action:posts.edited action:posts.loaded', function() {
        cardView();
        applyNoReplyClass(); // Make sure this is called to apply changes to dynamically loaded content
    });
});

The function applyNoReplyClass should add the additional class of no-reply to the elements targeted above. On page load and clicking the home icon, it works. However, when new posts are added to the DOM, the class isn't being added. Even worse, if I then scroll back up the page, the previously added class is removed?

This leads me to think it's not CF after all. Any ideas?

<baris>

Looks like you are on the topic list page but you are using hook names for topic page. You will need a listener like this.

$(document).ready(function() {
    // Ensure cardView and applyNoReplyClass are called after AJAX operations
    $(window).on('action:ajaxify.end action:topics.loaded', function() {
        cardView();
        applyNoReplyClass(); // Make sure this is called to apply changes to dynamically loaded content
    });
});

The hooks action:posts.edited action:posts.loaded are for the topic page itself.

phenomlab

@baris OMG. Thanks

EDIT: That has fixed it - can't believe I missed that...

phenomlab

Quick update for those using Cloudflare. I have a working version in dev presently and will release this once ready - ideally tomorrow.

phenomlab

@baris one final issue I'm encountering (which is an odd one) is as follows

When the site is loaded in "Card View" 2 elements are misplaced as is clear from the video I'm posting below. However, when you scroll down the page, the newly added posts are perfect in format. What makes the situation even more bizarre is that if you scroll to the top of the page again, the misplaced elements are perfectly aligned? My thought here is that the original topics disappear from the viewport and are then added back in action:topics.loaded hence the correct alignment.

Demo here

Video Upload & Annotation - Gemoo

Record you and your screen to clarify your points. Get vidoes organized as mind map, calendar, or any layout. And share it with a link to boost your productivity.

(gemoo.com)

It seems odd to me that page load executes the same function as clicking the home button, although the behaviour appears to be different.

Any thoughts?

<baris>

Easiest way for you to debug would be to inspect both elements in your browsers dev tools to see if there are missing styles, seems like some timestamps are not position correctly for some of them.

phenomlab

@baris The styles are there - the video was meant to show you this (sorry - should have explained this better) - but do not seem to be applied. My original suspicion was that these elements were placed into the DOM later than the CSS, although subsequent Ajax loads are not affected - it is only on load where I see the issue.

Here's an example

As you can see, the first set of data being returned is misplaced, whereas the second set is in the correct position - both use the same CSS!

<baris>

Is everything done with css? Or do you modify the markup as well? Seems like a issue with css to be honest if some of them are aligned correctly and some are not.

phenomlab

@baris It's all done with CSS. However, I need to point out the issue I remarked on in the above posts. The screenshot above clearly shows that the same CSS is being used for the same elements, yet the first set of topics returned by Ajax have the alignment issue, whereas the subsequent fetch does not have this issue - but it uses the same CSS.

From the above post

@phenomlab said in Card view with CSS and some custom JS:

As you can see, the first set of data being returned is misplaced, whereas the second set is in the correct position - both use the same CSS

phenomlab

This post is deleted!

<baris>

The screenshot only shows one element selected that has absolute positioning, which is probably a bad idea as well. Is this available somewhere public so I can inspect the elements?

phenomlab

@baris said in Card view with CSS and some custom JS:

The screenshot only shows one element selected that has absolute positioning, which is probably a bad idea as well

The screenshot shows multiple elements selected with the same class? They are essentially all derivatives of

I'm also not keen on the absolute positioning either but it won't with with relative.

@baris said in Card view with CSS and some custom JS:

Is this available somewhere public so I can inspect the elements?

Yes, it's available at https://sudonix.dev which is a closed site and will require you to sign up. It's an old replica of prod (.org) and you have an account there so it should exist in dev also.

<baris>

Can't login on https://sudonix.dev with my saved password and reset password doesn't seem to work there.