From 0913b1823902ee6176c245bc64ccfb27e4b48454 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Wed, 18 Apr 2018 12:33:19 +0200 Subject: [PATCH] Improved tooltips --- pages/anime/character.pixy | 6 ++---- pages/anime/relations.pixy | 2 +- pages/search/search.pixy | 2 +- scripts/Actions/Notifications.ts | 2 ++ scripts/DateView.ts | 3 ++- styles/tip.scarlet | 6 ++++-- styles/widgets.scarlet | 2 -- 7 files changed, 12 insertions(+), 11 deletions(-) diff --git a/pages/anime/character.pixy b/pages/anime/character.pixy index bbc15e70..95334b20 100644 --- a/pages/anime/character.pixy +++ b/pages/anime/character.pixy @@ -5,7 +5,5 @@ component Character(character *arn.Character) .image-title-text= character.Name.Canonical component CharacterSmall(character *arn.Character) - a.character(href="/character/" + character.ID) - img.character-image.character-image-small.lazy(data-src=character.ImageLink("small"), data-webp="true", data-color=character.AverageColor(), alt=character.Name.Canonical) - .image-title - .image-title-text= character.Name.Canonical \ No newline at end of file + a.character.tip(href="/character/" + character.ID, aria-label=character.Name.Canonical) + img.character-image.character-image-small.lazy(data-src=character.ImageLink("small"), data-webp="true", data-color=character.AverageColor(), alt=character.Name.Canonical) \ No newline at end of file diff --git a/pages/anime/relations.pixy b/pages/anime/relations.pixy index 59cc1948..90ec4a12 100644 --- a/pages/anime/relations.pixy +++ b/pages/anime/relations.pixy @@ -11,7 +11,7 @@ component AnimeRelations(anime *arn.Anime, user *arn.User, standAlonePage bool) .anime-relations each relation in anime.Relations().Items if relation.Anime() != nil - a.anime-relation.mountable(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user), data-mountable-type="relation") + a.anime-relation.tip.mountable(href=relation.Anime().Link(), aria-label=relation.Anime().Title.ByUser(user), data-mountable-type="relation") img.anime-relation-image.lazy(data-src=relation.Anime().ImageLink("small"), data-webp="true", data-color=relation.Anime().AverageColor(), alt=relation.Anime().Title.ByUser(user)) .anime-relation-type= relation.HumanReadableType() .anime-relation-year diff --git a/pages/search/search.pixy b/pages/search/search.pixy index e35f1840..aa136ba4 100644 --- a/pages/search/search.pixy +++ b/pages/search/search.pixy @@ -64,7 +64,7 @@ component AnimeSearchResults(animes []*arn.Anime) else .profile-watching-list.anime-search each anime in animes - a.profile-watching-list-item.mountable(href=anime.Link(), title=anime.Title.Canonical, data-mountable-type="anime") + a.profile-watching-list-item.tip.mountable(href=anime.Link(), aria-label=anime.Title.Canonical, data-mountable-type="anime") img.anime-cover-image.anime-search-result.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.Canonical) component CharacterSearchResults(characters []*arn.Character) diff --git a/scripts/Actions/Notifications.ts b/scripts/Actions/Notifications.ts index 7f833892..d87fb284 100644 --- a/scripts/Actions/Notifications.ts +++ b/scripts/Actions/Notifications.ts @@ -18,6 +18,8 @@ export async function disableNotifications(arn: AnimeNotifier, button: HTMLEleme // Test notification export async function testNotification(arn: AnimeNotifier) { + arn.statusMessage.showInfo("Sending test notification...this might take a few seconds...") + await fetch("/api/test/notification", { credentials: "same-origin" }) diff --git a/scripts/DateView.ts b/scripts/DateView.ts index 57344439..e61cd9f1 100644 --- a/scripts/DateView.ts +++ b/scripts/DateView.ts @@ -92,7 +92,8 @@ export function displayAiringDate(element: HTMLElement, now: Date) { airingVerb = "aired" } - element.title = "Episode " + element.dataset.episodeNumber + " " + airingVerb + " " + dayNames[startDate.getDay()] + " from " + startTime + " - " + endTime + element.setAttribute("aria-label", "Episode " + element.dataset.episodeNumber + " " + airingVerb + " " + dayNames[startDate.getDay()] + " from " + startTime + " - " + endTime) + element.classList.add("tip") } export function displayDate(element: HTMLElement, now: Date) { diff --git a/styles/tip.scarlet b/styles/tip.scarlet index 12d8cb11..409dd7de 100644 --- a/styles/tip.scarlet +++ b/styles/tip.scarlet @@ -1,3 +1,5 @@ +const tip-opacity = 0.94 + .tip position relative @@ -38,9 +40,9 @@ :hover :before - opacity 1 + opacity tip-opacity transform translateX(-50%) translateY(calc(-100% - 10px)) :after - opacity 1 + opacity tip-opacity transform translateX(-50%) translateY(calc(-100% - 4px)) \ No newline at end of file diff --git a/styles/widgets.scarlet b/styles/widgets.scarlet index 9d0ed164..c456c45a 100644 --- a/styles/widgets.scarlet +++ b/styles/widgets.scarlet @@ -21,10 +21,8 @@ .widget vertical - // flex-basis 100% flex 1 margin calc(content-padding / 2) - overflow hidden .widget-section vertical