How to add timestamp in mobile view?

[ghost]

I'im currently using TitleWrap and I wouldn't mind if news titles have to take more lines to fit the date and time the article was published in mobile view. I haven't coded a lot in html/css so I don't know where to look exactly to add such feature to mobile view. If someone can pinpoint me in the right direction, which file should I modify, I'll google my way from there, so I'd be more than grateful :)

[Frenzie]

In template.css, there's an @media max-width:840px: https://github.com/FreshRSS/FreshRSS/blob/e3457f7d7b56509048e3c1f53f05f278656e976c/p/themes/base-theme/template.css#L1245-L1252

It immediately starts by hiding a number of elements:

    .header,
    .flux_header .item.website span,
    .item.date, .day .date,
    .dropdown-menu > .no-mobile,
    .no-mobile {
        display: none;
    }

You can override that using the CustomCSS extension, for example:

@media (max-width: 840px) {
    .item.date {
        display: table-cell; /* or block, etc. */
    }
}

[ghost]

Thank you! That indeed worked, but date overlapped with title and other stuff, so I had to change it (I wanted to customize it either way). So I used date format extension from aledeg and modified it a bit (this is the file changed https://github.com/aledeg/FreshRSS-extensions/blob/master/xExtension-DateFormat/static/date-format.js) My modified function:

const adjustedDates = function (e) {
    let content = e.innerHTML;
    let date = moment(e.dateTime);
    let zoneDate = moment.parseZone(e.dateTime);
    // code that can't be commented
    content = content.replace(zoneDate.format('HH:mm'), date.format('HH:mm'));
    content = content.replace(zoneDate.format('MMMM'), date.format('M'));
    content = content.replace(zoneDate.format('D'), date.format('D'));
    content = content.replace(zoneDate.format('YYYY'), date.format('YYYY'));
    content = content.replace(zoneDate.format('Do').replace(/[0-9]/g, ''), date.format('Do').replace(/[0-9]/g, ''));
   // my custom code, change the order and formatting to your liking
   content= date.format('HH:mm') + '<BR>' + date.format('D') + '/' + date.format('M') + '/' + date.format('YYYY');
    e.innerHTML = content;
}

The custom css code added:

@media (max-width: 840px) {
    .item.date {
        display: table-cell; /* or block, etc. */
    }
}

.flux .item.date {
    width: 60px; /* adjust it to your preference: 75px, 80px, et c*/
    text-align: center; /* adjust it to you preference: right, center or left */
    overflow: hidden;
}

For some reason, I couldn't comment out the original code, even though I think I'm not even using it, but I don't know much about java :P. The \<BR> thingy is to break the date (hour-linebreak-date) into two lines, so it's up to your preference, you could simply replace with a blank space for a single line. The end result:

I'm pretty sure I can even do some vertical-center aligning for the date, but for the time being, this is more than enough. Also, this will affect too how the timestamp is displayed on the desktop interface. I don't know if it's possible to only apply the custom format date for mobile. Don't forget to enable the extension and toggle the "adjusted dates" in the config window for the extension.

Hopefully this helps someone, it was fun digging and googling stuff :)

[Frenzie]

It should work if you wrap it in something like if (window.matchMedia('(max-width: 700px)')). Something like this:

const adjustedDates = function (e) {
  if (window.matchMedia('(max-width: 840px)')) {
    let content = e.innerHTML;
    let date = moment(e.dateTime);
    let zoneDate = moment.parseZone(e.dateTime);
    // my custom code, change the order and formatting to your liking
    content = date.format('HH:mm') + '<BR>' + date.format('D') + '/' + date.format('M') + '/' + date.format('YYYY');
    e.innerHTML = content;
  }
};

[ghost]

That works...... and I have no idea why XD is there any criteria to choose the value for max-wdith? I tested with critical values like 40px and the result is the same, or is it irrelevant? Thanks again!

[ghost]

Okay, I have spotted an issue, since I didnt have the time to tst it properly. The new date format is applied only to the first "page" loaded, the following entries are not affected by this new format. I can confirm this is a Firefox issue, since I have been able to test it in Chrome and it works fine. I will report this issue in aledeg repo.

[Frenzie]

I don't know where 840 came from. It was probably a simple observation that the main layout became too cramped on less.

Pinging @aledeg

[aledeg]

@maguilara I've updated the DateFormat extension. You can now use a custom format to display dates. It supports the things you want to do without modifying the extension itself. Let me know what you think.

Here is the new release -> https://github.com/aledeg/FreshRSS-extensions/releases/tag/v0.2.0-date

[ghost]

@aledeg Works like a charm! Thanks a lot, I didn't want to make an specific request, but hopefully this will help others :)

[aledeg]

@maguilara I am not using that extension. I build it for others anyway. Every time there is a request for date configuration, I added it in the extension since it won't make it to the core. This way, it becomes more useful through out the iterations. I am glad it helped!