Improved tooltips

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)
+	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)
+		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

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

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)

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"
 	})

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) {

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))

styles/widgets.scarlet

@@ -21,10 +21,8 @@
 
 .widget
 	vertical
-	// flex-basis 100%
 	flex 1
 	margin calc(content-padding / 2)
-	overflow hidden
 
 .widget-section
 	vertical