Thread Widgets

div.thread-parent { border: 2px solid rgba(0, 0, 0, 0.5); min-height: 300px; }

a.thread-child { display: flex; align-items: center; justify-content: flex-start; border: 1px solid rgba(255, 255, 255, 0.3); padding: 0 0 0 5px; border-radius: 5px; }

div.thread-profile-image { flex-basis: 40px; margin-right: 5px; height: 40px; }

div.thread-profile-image img { object-fit: cover; width: 32px; height: 32px; aspect-ratio: 1/1; border-radius: 50%; margin: 0 auto; }

div.thread-title { flex-basis: 80%; font-weight: 550; opacity: 0.8; color: beige; }

div.thread-notif { display: flex; flex-direction: column; font-size: 0.9rem; font-weight: 400; opacity: 0.7; margin: 3px; color: white; margin-left: auto; align-items: flex-end; line-height: 0.9rem; flex: 0 0 auto; opacity: 0.4; }

window.addEventListener('load', async() => { const parent_widget_thread = document.querySelector('.thread-parent');

await loadThread();

async function loadThread() { await initFunctions(['supabase', 'moment']); let { data, error } = await supabase.from('sth_threads').select('id, title, date, images, category_id(title), user_id(prof_img, country)').order('date', {ascending: false});

if (error) { window.alert(`${error.message}`); return; }

data.forEach(async(item) => { // getting comment counts let comment_count = 0; let data = await supabase.from('sth_comments').select('*', { count: 'exact', head: true }).eq('thread_id', item.id);

if(data.count) comment_count = data.count;

parent_widget_thread.innerHTML += ` ${item.title}

${moment(item.date).fromNow()} ${comment_count == 0 ? ``: ` ${countComment(comment_count)} `} `; }); }

function countComment(num) { // returns the comment and number return num > 1 ? `${num} comment`: `${num} comments`; } }, false);

Hi there Catters!

Our Battle Cats Mods is in the latest version. Please click the links below!

Subscribe now to PTC Reborn™

StoreHaccounts (Battle Cats Community)

Thread Widgets