From 17c94996016d0b36c2be61b447673eec84ad32dc Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Fri, 7 Jul 2017 17:16:40 +0200 Subject: [PATCH] Added timestamps to forum --- mixins/Postable.pixy | 2 + pages/anime/anime.pixy | 2 +- pages/animelist/animelist.pixy | 2 +- pages/dashboard/dashboard.pixy | 2 +- scripts/AnimeNotifier.ts | 8 +++- scripts/DateView.ts | 71 ++++++++++------------------------ styles/forum.scarlet | 12 ++++++ 7 files changed, 44 insertions(+), 55 deletions(-) diff --git a/mixins/Postable.pixy b/mixins/Postable.pixy index 65da2aab..77fdf3b4 100644 --- a/mixins/Postable.pixy +++ b/mixins/Postable.pixy @@ -22,6 +22,8 @@ component Postable(post arn.Postable, user *arn.User, highlightAuthorID string) a.button.post-cancel-edit.action(data-action="editPost", data-trigger="click", data-id=post.ID()) Icon("close") span Cancel + + .post-date.utc-date(data-date=post.Created()) .post-toolbar(id="toolbar-" + post.ID()) .spacer diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index 8dc41907..6461d1e6 100644 --- a/pages/anime/anime.pixy +++ b/pages/anime/anime.pixy @@ -161,7 +161,7 @@ component Anime(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User, epis td.episode-actions a(href="https://translate.google.com/#ja/en/" + episode.Title.Japanese, target="_blank", rel="noopener") RawIcon("google") - td.episode-airing-date-start.utc-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman() + td.episode-airing-date-start.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman() //- h3.anime-section-name Reviews //- p Coming soon. diff --git a/pages/animelist/animelist.pixy b/pages/animelist/animelist.pixy index 0c300b61..5e59b7e1 100644 --- a/pages/animelist/animelist.pixy +++ b/pages/animelist/animelist.pixy @@ -55,7 +55,7 @@ component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User a.ajax(href=item.Link(animeList.User().Nick))= item.Anime().Title.Canonical td.anime-list-item-airing-date if item.Anime().UpcomingEpisode() != nil - span.utc-date(data-start-date=item.Anime().UpcomingEpisode().Episode.AiringDate.Start, data-end-date=item.Anime().UpcomingEpisode().Episode.AiringDate.End, data-episode-number=item.Anime().UpcomingEpisode().Episode.Number) + span.utc-airing-date(data-start-date=item.Anime().UpcomingEpisode().Episode.AiringDate.Start, data-end-date=item.Anime().UpcomingEpisode().Episode.AiringDate.End, data-episode-number=item.Anime().UpcomingEpisode().Episode.Number) td.anime-list-item-episodes .anime-list-item-episodes-watched .action(contenteditable=utils.SameUser(user, viewUser), data-field="Episodes", data-type="number", data-trigger="focusout", data-action="save")= item.Episodes diff --git a/pages/dashboard/dashboard.pixy b/pages/dashboard/dashboard.pixy index c0254df9..d0f557c1 100644 --- a/pages/dashboard/dashboard.pixy +++ b/pages/dashboard/dashboard.pixy @@ -13,7 +13,7 @@ component Dashboard(schedule []*arn.UpcomingEpisode, posts []arn.Postable, sound Icon("calendar-o") .schedule-item-title= schedule[i].Anime.Title.Canonical .spacer - .schedule-item-date.utc-date(data-start-date=schedule[i].Episode.AiringDate.Start, data-end-date=schedule[i].Episode.AiringDate.End, data-episode-number=schedule[i].Episode.Number) + .schedule-item-date.utc-airing-date(data-start-date=schedule[i].Episode.AiringDate.Start, data-end-date=schedule[i].Episode.AiringDate.End, data-episode-number=schedule[i].Episode.Number) else .widget-element .widget-element-text diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 06ba641d..3693693f 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -1,6 +1,6 @@ import { Application } from "./Application" import { Diff } from "./Diff" -import { displayLocalDate } from "./DateView" +import { displayAiringDate, displayDate } from "./DateView" import { findAll, delay } from "./Utils" import { MutationQueue } from "./MutationQueue" import * as actions from "./Actions" @@ -148,8 +148,12 @@ export class AnimeNotifier { displayLocalDates() { const now = new Date() + for(let element of findAll("utc-airing-date")) { + displayAiringDate(element, now) + } + for(let element of findAll("utc-date")) { - displayLocalDate(element, now) + displayDate(element, now) } } diff --git a/scripts/DateView.ts b/scripts/DateView.ts index 2c7360df..270e76d4 100644 --- a/scripts/DateView.ts +++ b/scripts/DateView.ts @@ -59,7 +59,7 @@ function getRemainingTime(remaining: number): string { return "Just now" } -export function displayLocalDate(element: HTMLElement, now: Date) { +export function displayAiringDate(element: HTMLElement, now: Date) { let startDate = new Date(element.dataset.startDate) let endDate = new Date(element.dataset.endDate) @@ -73,9 +73,6 @@ export function displayLocalDate(element: HTMLElement, now: Date) { let airingVerb = "will be airing" - - // let dayInfo = dayNames[startDate.getDay()] + ", " + monthNames[startDate.getMonth()] + " " + startDate.getDate() - let remaining = startDate.getTime() - now.getTime() let remainingString = getRemainingTime(remaining) @@ -86,55 +83,29 @@ export function displayLocalDate(element: HTMLElement, now: Date) { element.innerText = remainingString - // let remainingString = seconds + plural(seconds, 'second') - - // let days = seconds / (60 * ) - // if(Math.abs(days) >= 1) { - // remainingString = plural(days, 'day') - // } else { - // let hours = arn.inHours(now, timeStamp) - // if(Math.abs(hours) >= 1) { - // remainingString = plural(hours, 'hour') - // } else { - // let minutes = arn.inMinutes(now, timeStamp) - // if(Math.abs(minutes) >= 1) { - // remainingString = plural(minutes, 'minute') - // } else { - // let seconds = arn.inSeconds(now, timeStamp) - // remainingString = plural(seconds, 'second') - // } - // } - // } - - // if(isNaN(oneHour)) { - // element.style.opacity = "0" - // return - // } - - // switch(Math.floor(dayDifference)) { - // case 0: - // element.innerText = "Today" - // break - // case 1: - // element.innerText = "Tomorrow" - // break - // case -1: - // element.innerText = "Yesterday" - // break - // default: - // let text = Math.abs(dayDifference) + " days" - - // if(dayDifference < 0) { - // text += " ago" - // airingVerb = "aired" - // } else { - // element.innerText = text - // } - // } - if(remaining < 0) { airingVerb = "aired" } element.title = "Episode " + element.dataset.episodeNumber + " " + airingVerb + " " + dayNames[startDate.getDay()] + " from " + startTime + " - " + endTime +} + +export function displayDate(element: HTMLElement, now: Date) { + let startDate = new Date(element.dataset.date) + + let h = startDate.getHours() + let m = startDate.getMinutes() + let startTime = (h <= 9 ? "0" + h : h) + ":" + (m <= 9 ? "0" + m : m) + + let remaining = startDate.getTime() - now.getTime() + let remainingString = getRemainingTime(remaining) + + // Add "ago" if the date is in the past + if(remainingString.startsWith("-")) { + remainingString = remainingString.substring(1) + " ago" + } + + element.innerText = remainingString + + element.title = dayNames[startDate.getDay()] + " " + startTime } \ No newline at end of file diff --git a/styles/forum.scarlet b/styles/forum.scarlet index c882eb68..7ce5e863 100644 --- a/styles/forum.scarlet +++ b/styles/forum.scarlet @@ -41,6 +41,9 @@ post-content-padding-y = 0.75rem :hover .post-toolbar opacity 1 + + .post-date + opacity 0.25 .thread-content horizontal @@ -119,6 +122,15 @@ post-content-padding-y = 0.75rem .post-text-input min-height 200px +.post-date + position absolute + right -1rem + top 0.25rem + white-space nowrap + opacity 0 + transform translateX(100%) + default-transition + // Old // #posts