TimeFormat relative time and reposition

[JRHB314]

I saw it mentioned that since Tumblr has its own timestamps now, you'll probably discontinue the Timestamps feature, and just have the option to change the TimeFormat. That makes sense, but I have two requests if/when you do.

The option to do relative time only, not just append. I was surprised to see this wasn't an option already, actually.

The other thing is I wish I could change the position of the timestamp to the top-right, the way it is now in New XKit and Xkit Rewritten timestamps. It just feels more cluttered having it directly under the usernames.

[EternityEngine]

I would also like to have the option of displaying only the relative time, as I find it easier to parse at a glance and also find the option of the entire date + relative time too long, visually. If it could also include the function where hovering over the relative time displays the proper time using the set custom format, as the Timestamps feature did, that would be fantastic.

It's odd to me that "relative time only" isn't an option, when it was in TimeFormat's predecessor.

[marcustyphoon]

What's your Old Tumblr Dashboard version number? Mine is 17.16 and I'm seeing what you were hoping for.

[EternityEngine]

That's odd. I'm also on 17.16 and it's all on one line for me. I even tried reinstalling it, and installing it with Stylus in case my use of xStyle was the culprit, to no avail. I only get timestamps on the second line if I enable Timestamps in New XKit.

(This is with none of my custom CSS enabled, so that's not the culprit either.)

[marcustyphoon]

I think the relevant Old Tumblr Dashboard css rule is this one, which... uh, let's be real, there could be any number of reasons why that didn't hit. Maybe try making it less specific?

#base-container > div.D5eCV > div > div._3xgk.Ril26 > div > div.lSyOz > main > div.Evcyl > div.zAlrA > div > div > div > div > article > div > header > div > div > div.l4Qpd > div.cPL5a.QCWsQ.zmkgk > div.x66yu > div.QOpFt {
  position: absolute;
  top: 46px;
  left: 19px;
  margin-top: -6px;
}

[EternityEngine]

Going through the HTML in the inspector, it looks like div.zAlrA is the culprit (the immediate child of div.Evcyl does not have a class assigned, at least for me). Removing .zAlrA makes it work, although the following works just as well:

header .x66yu > .QOpFt {
  position: absolute;
  top: 40px;
  left: 19px;
}

Or, to align it with the XKit timestamp (and expand the header to fit):

header .x66yu > .QOpFt {
  position: absolute;
  top: 47px;
  left: 16px;
}
.DEkbl {
  padding-bottom: 33px;
}

As a bonus, I already had CSS to shrink the post header link so it didn't overlap the XKit timestamp, so now the hover function works for that Tumblr timestamp.

.DEkbl .mYcfU {
  height: 44px;
}

Of course, just now I had a thought that changing the z-index property of the timestamps would fix the hover function, and in testing, setting their z-index to 0 or higher allows it to work. Your PR fix looks more fit-for-purpose, though.

[EternityEngine]

Coming back just to say that another reason to have an XKit solution to moving the main post timestamp (or at least decoupling it from the "[poster] reblogged" header text) is that using position: absolute to reposition it means that anytime something else is added to the header (e.g. Content Labels, "Pinned" post label), the timestamp then overlaps with the poster header due to the added element bumping the poster header downwards. It's a minor irk, and fixable with extra CSS (fortunately those two examples share a class), but still.

I've since had to revamp the CSS for my particular pair of requests due to Tumblr changing things slightly, Old Tumblr Dashboard revisions, noticing problems with search results, and the aforementioned issue, so I figured I could post the updated CSS here as well.

To move the main post timestamp to underneath the "reblogged from" text, with Old Tumblr Dashboard installed (aligned with XKit Timestamps):

header:not(.rtjhW) .x66yu > .NB_7e > .CtNGM {
  display: none;
} /* dot before header timestamp */
header:not(.rtjhW) .x66yu > .QOpFt {
  position: absolute;
  top: 45px;
  left: 16px;
} /* header timestamp */
header:not(.rtjhW) .Pl0ah + .m2Bdx .x66yu > .QOpFt {
  position: absolute;
  top: 66px;
  left: 16px;
} /* header timestamp after content label/pinned post */
.DEkbl {
  padding-bottom: 33px;
} /* post header */

To move the reblog item timestamps to the right end of the reblog item header, with Old Tumblr Dashboard installed:

#root div div#base-container div.D5eCV div.c9lq9 div._3xgk.VsR8V.f_ziq.Ril26 div.gPQR5.pTaNm div.lSyOz main.UX61Y div.Evcyl.W0qvx div.hyiL2 div.USr9U div div.So6RQ.i4aRn.YSitt div.ge_yK div.c79Av article.FtjPK div.LaNUG div div.Qb2zX span div.u2tXn div._7Vla9 div.cPL5a.Afu4V.QCWsQ {
  flex-direction: column;
  align-items: unset;
} /* allow grid search results reblog item timestamp repositioning */
#root div div#base-container div.D5eCV div.c9lq9 div._3xgk.VsR8V.f_ziq.Ril26 div.gPQR5.pTaNm div.lSyOz main.UX61Y div.Evcyl.W0qvx div.hyiL2 div.USr9U div div.So6RQ.i4aRn.YSitt div.ge_yK div.c79Av article.FtjPK div.LaNUG div div.Qb2zX span div.u2tXn div._7Vla9 div.cPL5a.Afu4V.QCWsQ div.m2Bdx.pLL0g.PCzZt {
  max-width: 100%;
} /* allow grid search results reblog item timestamp full width */
.u2tXn .pLL0g.PCzZt > .l4Qpd > .cPL5a {
  justify-content: space-between;
} /* reblog item header */

I do also have CSS to hide TimeFormat's absolute timestamps (so, only display the relative timestamps), and may as well share it (I don't hide it for reblog notes personally, but I went and got it for completeness' sake):

.QOpFt [data-formatted-time]::before, .X9zTC [data-formatted-time]::before, .zWtFe [data-formatted-time]::before {
  display: none;
} /* header & reblog item, reply notes, & reblog notes absolute timestamps */

Please note that if "Append relative time" is not enabled in TimeFormat's settings, this will just hide the timestamps entirely.

[marcustyphoon]

Hm—I guess putting nothing in the format box doesn't do this, because it just makes the default format, huh. Seems like a reasonable feature request.