Mega-CSS bandaid

boomzilla

One issue with megathreads has been that they look inactive due to the OP date being displayed in non-mobile sized displays on topic lists. It's been suggested that we display the last post time there (probably requires changing the theme:

nodebb-theme-persona/templates/partials/topics_list.tpl at master · NodeBB/nodebb-theme-persona

Persona - A modern and responsive NodeBB theme. Contribute to NodeBB/nodebb-theme-persona development by creating an account on GitHub.

The first line is what you see until you make your browser wider:

<small class="hidden-xs"><span class="timeago" title="{topics.timestampISO}"></span> &bull; <a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->">{topics.user.username}</a></small>
<small class="visible-xs-inline">
	<i class="fa fa-reply"></i> &nbsp;
	<!-- IF topics.teaser.timestamp -->
		<span class="timeago" title="{topics.teaser.timestampISO}"></span>
	<!-- ELSE -->
		<span class="timeago" title="{topics.timestampISO}"></span>
	<!-- ENDIF topics.teaser.timestamp -->
</small>

So, we'd have to change topics.timestampISO to topics.teaser.timestampISO. Or maybe we should take a clue from just below there and test to make sure something's there first.

Alternatively, (because people can do this themselves or an admin could put it in the site custom CSS) we could disappear the date with some CSS:

h2 small span.timeago { display: none; }

The double dots look kind of weird.

apapadimoulis

Maybe add a ::after or whatever selector to display a block that says "megatopic"? But how to identify its a megatopic 🤔

loopback0

@boomzilla said in Mega-CSS bandaid:

So, we'd have to change topics.timestampISO to topics.teaser.timestampISO. Or maybe we should take a clue from just below there and test to make sure something's there first.

Then you'd end up with the date of the last post next to the username of the original poster. It seems like it could be confusing. Removing it seems best.

loopback0

@apapadimoulis said in Mega-CSS bandaid:

But how to identify its a megatopic 🤔

Topic ID, manually by an admin.

https://what.thedailywtf.com/topic/27289/update-on-administration-community-changes/188

There's probably some clever JS someone here could do instead.

boomzilla

@loopback0 said in Mega-CSS bandaid:

@apapadimoulis said in Mega-CSS bandaid:

But how to identify its a megatopic 🤔

Topic ID, manually by an admin.

https://what.thedailywtf.com/topic/27289/update-on-administration-community-changes/188

Yes, originally, that's what @PJH came up with to help identify popular megatopics during the disco-title-wars.

kazitor

@loopback0 said in Mega-CSS bandaid:

There's probably some clever JS someone here could do instead.

Yes; we’ll find an n-degree polynomial that yields all relevant IDs given x ∈ {0, 1, 2, …, n}. Bonus fun once the n+1 topic ID is reached. It’s brillant, I tell ya.

loopback0

Does anyone know if that template syntax supports something like this?

E.g.:

<!-- IF topics.postcount > 1000 -->
    <span class="megatopic">{topics.title}</span><br />
<!-- ELSE -->
    <span>{topics.title}</span><br />
<!-- END -->

Then add the CSS for megatopic.

loopback0

@loopback0 said in Mega-CSS bandaid:

Does anyone know if that template syntax supports something like this?

Seems not but we could add a "helper" for something like IF topics.isMega

Templating System - NodeBB Documentation

GitHub - benchpressjs/benchpressjs: ultralight javascript templating framework

ultralight javascript templating framework. Contribute to benchpressjs/benchpressjs development by creating an account on GitHub.

edit: at this point though, hiding the topic creation date or maintaining a manual list of megathreads is easier.

Zecc

@boomzilla said in Mega-CSS bandaid:

The double dots look kind of weird.

GuyWhoKilledBear

@boomzilla said in Mega-CSS bandaid:

One issue with megathreads has been that they look inactive due to the OP date being displayed in non-mobile sized displays on topic lists.

While we're patching the CSS to fix this issue, have we considered making the number of posts in the topic more prominent than the number of votes?

They're currently displayed as Votes/Posts/Views. Maybe changing it to Posts/Votes/Views would make it more obvious which topics are active?

ChaosTheEternal

@boomzilla said in Mega-CSS bandaid:

One issue with megathreads has been that they look inactive due to the OP date being displayed without context in non-mobile sized displays on topic lists.

So why not be silly?

h2 small.hidden-xs span.timeago:before {
    content: 'created';
    margin-right: 0.33rem;
}

Obviously, the better option for this change would be to make the context part of the code side (for localization purposes).

Also think that it might help if the OP timestamp was more a date stamp, either once you get past the relative items or just in general, but that might require more work (either on the NodeBB side or the timeago library they're using).

Also, a problem with the alternative of hiding the timestamp as-is, it hides the timestamp in mode as well. To fix that, you'd have to do:

h2 small.hidden-xs span.timeago { display: none; }

boomzilla

@ChaosTheEternal said in Mega-CSS bandaid:

So why not be silly?

It still leaves those old dates sitting there where people are going to see them. Not sure I trust the likes of to realize the potential difference between created and fucktons of posts, the last one being, but yeah, that's an alternative.

DogsB

@boomzilla said in Mega-CSS bandaid:

One issue with megathreads has been that they look inactive due to the OP date being displayed in non-mobile sized displays on topic lists. It's been suggested that we display the last post time there (probably requires changing the theme

O_o I know I shouldn't but the view is sorted by most recently posted by default. Who looks at the date in that view and decides they're inactive? Surely the time on the far right gives away that it's recent.

ChaosTheEternal

@GuyWhoKilledBear said in Mega-CSS bandaid:

While we're patching the CSS to fix this issue, have we considered making the number of posts in the topic more prominent than the number of votes?

They're currently displayed as Votes/Posts/Views. Maybe changing it to Posts/Votes/Views would make it more obvious which topics are active?

Don't think it'd be feasible to swap the column order with CSS, since CSS isn't used for the column order in the first place. That'd have to be a code level change.

Personally, I think the votes column is useless, and have this in my Custom CSS to just hide the column completely:

.stats-votes { visibility: hidden; }

boomzilla

@DogsB said in Mega-CSS bandaid:

@boomzilla said in Mega-CSS bandaid:

One issue with megathreads has been that they look inactive due to the OP date being displayed in non-mobile sized displays on topic lists. It's been suggested that we display the last post time there (probably requires changing the theme

O_o I know I shouldn't but the view is sorted by most recently posted by default. Who looks at the date in that view and decides they're inactive? Surely the time on the far right gives away that it's recent.

Indeed, the user assumed those were the recent goings on. But they looked to him like a lot of the most "recent" stuff was pretty old. Obviously mistaken, but that's an honest take on how a user interacted with the site, which actually seems pretty reasonable from a UX perspective to me.

I'm certainly not going to criticize users for when looking at a webpage.

boomzilla

@hungrier said in Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: All these new threads:

@remi said in Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: All these new threads:

(the double dots look weird indeed but that's not really a big deal). But I think a wider solution [...] would be even better.

Not sure if this is better but you asked for it
h2[component="topic/header"] .timeago {
    visibility: hidden;
}

Definitely better than mine in several ways!

Tsaukpaetra

@ChaosTheEternal said in Mega-CSS bandaid:

have this in my Custom CSS to just hide the column completely:

Yoinked!

OP Votes is indeed a rather useless measure indeed.

ChaosTheEternal

@boomzilla said in Mega-CSS bandaid:

the potential difference between created and fucktons of posts, the last one being, but yeah, that's an alternative

Could always do labels on each item then, instead of just the one:

h2 small.hidden-xs span.timeago:before {
    content: 'created ';
}
div.teaser a.permalink span.timeago:before {
    content: 'posted ';
}
h2 small.visible-xs-inline span.timeago:before {
    content: 'last post ';
}

Switched it up to including whitespace instead of a margin due to the teaser one (doing a margin puts a break in the link):

As I implied previously, I don't think the data by itself is bad, but the lack of context for the data can be bad. That's why my proposal has been to add the context instead of hiding or removing data, though doing it the right way, in the NodeBB code and with localized content, is easily much more work than the inaccessible and English-only CSS content route I'm demoing.

Though, if you do want to go the "hide the original post time" in full width and with just CSS, here's an option that attempts to hide the double dots as well:

h2 small.hidden-xs {
    margin-left: -0.775rem;
}
h2 small.hidden-xs span.timeago {
    display: none;
}

That works best on the stock font. May not work as cleanly on other fonts and not tested on any other skins:

loopback0

@boomzilla The eyes were better than the gap causing the username to be floating in space randomly.

Is there a way of having template changes in the themes which aren't going to get overwritten the next time one of them gets updated upstream?

loopback0

@loopback0 said in Mega-CSS bandaid:

The eyes were better than the gap causing the username to be floating in space randomly.

Or get rid of the name.

![0_1595535802673_d5d398c9-e3c5-496f-a2bf-066e27a23866-image.png](Uploading 100%)

hungrier

@loopback0 said in Mega-CSS bandaid:

The eyes were better than the gap causing the username to be floating in space randomly.

This one was a bit tougher but I got there in the end

h2[component="topic/header"] .timeago {
  visibility: hidden;
  width: 1em;
  display: inline-block;
  white-space: nowrap;
}
h2[component="topic/header"] .timeago:before {
  content: '\1F440';
  visibility: visible;
}

boomzilla

@loopback0 said in Mega-CSS bandaid:

@boomzilla The eyes were better than the gap causing the username to be floating in space randomly.

Is there a way of having template changes in the themes which aren't going to get overwritten the next time one of them gets updated upstream?

If we're just doing custom CSS then that gets saved in the DB. We could also fork the theme and submit PRs. We could fork and maintain our own theme. We could make a patch that gets applied to our instance (similar to maintaining our fork but we'd only need to update anything if the origin source changes).

hungrier

Somewhat related: Whenever all the admin/mod stuff is figured out (or even before, if such a thing is possible), we should have a forum customization category for CSS hacks, userscripts, etc

PleegWat

@boomzilla said in Mega-CSS bandaid:

fork the theme

Problem there is that not everyone is on the same threme.

loopback0

@PleegWat said in Mega-CSS bandaid:

@boomzilla said in Mega-CSS bandaid:

fork the theme

Problem there is that not everyone is on the same threme.

Everyone's on the same theme but they're not all on the same skin.

boomzilla

@loopback0 said in Mega-CSS bandaid:

@PleegWat said in Mega-CSS bandaid:

@boomzilla said in Mega-CSS bandaid:

fork the theme

Problem there is that not everyone is on the same threme.

Everyone's on the same theme but they're not all on the same skin.

Correct. The theme is set from the admin panel:

Themes are technically NodeBB extensions. Most of the UI comes from them. It's pretty much just the admin stuff that's in the "base" NodeBB repo.

PleegWat

@boomzilla Obviously.

pie_flavor

Personally I think it should be solved with behavior, not CSS. An ability to mark a topic as a megatopic when you create it, and retroactive megatopicking for some sane heuristic involving quantity concentration of posts over several months, which stays in place after for topics that become one but weren't originally intended like blakey's. When a topic is a megatopic, not only does it not show the creation date in the list, but after you view the OP, the thread is marked as read so future visits land at the bottom, and there's a toast that pops up when this happens which you can click to undo that.

boomzilla

@pie_flavor PRs...who knows? Unless you can make an extension for it. This is stuff we can do easily to address the issue.

PleegWat

@pie_flavor said in Mega-CSS bandaid:

future visits land at the bottom

At least for myself, I would definitely prefer megatopics to open at the last read marker just like every other topic. If I want to skip the history I'll do that manually.

Sending everyone to the bottom by default implies the posts shouldn't be read at all, and at that point why are you making them? For that one person who keeps the status thread open in a tab all the time?

pie_flavor

@PleegWat They would open at the last read marker normally. But the very first time you open the thread ever, it would set your read marker to the bottom for next time because it would assume you don't actually need to read the seven years of history. If you did, that's what the toast is for.

PleegWat

@pie_flavor Ah, that makes more sense.

hungrier

@PleegWat said in Mega-CSS bandaid:

At least for myself, I would definitely prefer megatopics to open at the last read marker just like every other topic. If I want to skip the history I'll do that manually.

Recently I did this with the dumb and random video thread. I had kept it half-read for a while, intending to maybe someday catch up, but eventually gave up on that and just went to the end.

M_Adams

@hungrier said in Mega-CSS bandaid:

@PleegWat said in Mega-CSS bandaid:

At least for myself, I would definitely prefer megatopics to open at the last read marker just like every other topic. If I want to skip the history I'll do that manually.

Recently I did this with the dumb and random video thread. I had kept it half-read for a while, intending to maybe someday catch up, but eventually gave up on that and just went to the end.

I would like it if it actually opened at the last read marker instead of ±rand(25) posts away.

topspin

@M_Adams I would like it if entering the thread somewhere else through a direct link wouldn’t forever lose your read marker (after the toaster is gone).