diff --git a/pages/calendar/calendar.pixy b/pages/calendar/calendar.pixy index 6f698c19..22925d59 100644 --- a/pages/calendar/calendar.pixy +++ b/pages/calendar/calendar.pixy @@ -8,5 +8,8 @@ component Calendar(days []*utils.CalendarDay, user *arn.User) .calendar-entries each entry in day.Entries .calendar-entry - .calendar-entry-title= entry.Anime.Title.ByUser(user) - .calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number) \ No newline at end of file + a.ajax(href=entry.Anime.Link()) + .calendar-entry-title= entry.Anime.Title.ByUser(user) + .calendar-entry-info + .calendar-entry-time.utc-date-absolute(data-date=entry.Episode.AiringDate.Start) + .calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number) \ No newline at end of file diff --git a/pages/calendar/calendar.scarlet b/pages/calendar/calendar.scarlet index 89cc1fb5..14363294 100644 --- a/pages/calendar/calendar.scarlet +++ b/pages/calendar/calendar.scarlet @@ -12,21 +12,30 @@ .weekday-name text-align center + margin-bottom 1rem .calendar-entries vertical .calendar-entry ui-element - padding 0.75rem 1rem + padding 0.5rem 1rem margin-bottom 0.5rem overflow hidden +.calendar-entry-info + horizontal + .calendar-entry-title clip-long-text +.calendar-entry-time + opacity 0.85 + font-size 0.9rem + flex 1 + .calendar-entry-episode - opacity 0.75 + opacity 0.65 text-align right font-size 0.9rem diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 667a6156..0c748e24 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -8,7 +8,7 @@ import { Analytics } from "./Analytics" import { SideBar } from "./SideBar" import { InfiniteScroller } from "./InfiniteScroller" import { ServiceWorkerManager } from "./ServiceWorkerManager" -import { displayAiringDate, displayDate } from "./DateView" +import { displayAiringDate, displayDate, displayTime } from "./DateView" import { findAll, delay, canUseWebP, swapElements } from "./Utils" import * as actions from "./Actions" import { darkTheme } from "./Actions"; @@ -362,6 +362,10 @@ export class AnimeNotifier { for(let element of findAll("utc-date")) { displayDate(element, now) } + + for(let element of findAll("utc-date-absolute")) { + displayTime(element, now) + } } reloadContent(cached?: boolean) { diff --git a/scripts/DateView.ts b/scripts/DateView.ts index 21abfe11..57344439 100644 --- a/scripts/DateView.ts +++ b/scripts/DateView.ts @@ -55,7 +55,7 @@ function getRemainingTime(remaining: number): string { if(remainingAbs >= oneSecond) { return plural(Math.round(remaining / oneSecond), " second") } - + return "Just now" } @@ -75,7 +75,7 @@ export function displayAiringDate(element: HTMLElement, now: Date) { h = endDate.getHours() m = endDate.getMinutes() let endTime = (h <= 9 ? "0" + h : h) + ":" + (m <= 9 ? "0" + m : m) - + let airingVerb = "will be airing" let remaining = startDate.getTime() - now.getTime() @@ -106,7 +106,7 @@ export function displayDate(element: HTMLElement, now: 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) @@ -118,4 +118,19 @@ export function displayDate(element: HTMLElement, now: Date) { element.innerText = remainingString element.title = dayNames[startDate.getDay()] + " " + startTime +} + +export function displayTime(element: HTMLElement, now: Date) { + if(element.dataset.date === "") { + element.innerText = "" + return + } + + 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) + + element.innerText = startTime } \ No newline at end of file