Improved tooltips

mixins/Postable.pixy

@@ -23,7 +23,7 @@ component Postable(post arn.Postable, user *arn.User, highlightAuthorID string)
 							Icon("close")
 							span Cancel
 			
-			.post-date.utc-date(data-date=post.Created())
+			.post-date.utc-date.no-tip(data-date=post.Created())
 
 			.post-toolbar(id="toolbar-" + post.ID())
 				.spacer

mixins/Rating.pixy

@@ -1,5 +1,5 @@
 component Rating(value float64, userCount int, user *arn.User)
 	if user == nil
-		.anime-rating(title="Rated by " + arn.Plural(userCount, "user"))= fmt.Sprintf("%.1f", value)
+		.anime-rating.tip(aria-label="Rated by " + arn.Plural(userCount, "user"))= fmt.Sprintf("%.1f", value)
 	else
-		.anime-rating(title="Rated by " + arn.Plural(userCount, "user"))= fmt.Sprintf("%." + strconv.Itoa(user.Settings().Format.RatingsPrecision) + "f", value)
+		.anime-rating.tip(aria-label="Rated by " + arn.Plural(userCount, "user"))= fmt.Sprintf("%." + strconv.Itoa(user.Settings().Format.RatingsPrecision) + "f", value)

pages/anime/anime.pixy

@@ -78,32 +78,33 @@ component AnimeRatings(anime *arn.Anime, user *arn.User)
 		h3.anime-section-name Ratings
 
 		table.anime-info-table
-			tr.mountable(data-mountable-type="info")
+			tbody
-				td.anime-info-key
-					if anime.Status == "upcoming"
-						span Hype:
-					else
-						span Overall:
-				td.anime-info-value
-					Rating(anime.Rating.Overall, anime.Rating.Count.Overall, user)
-
-			if anime.Rating.Count.Story > 0
 				tr.mountable(data-mountable-type="info")
-					td.anime-info-key Story:
+					td.anime-info-key
+						if anime.Status == "upcoming"
+							span Hype:
+						else
+							span Overall:
 					td.anime-info-value
-						Rating(anime.Rating.Story, anime.Rating.Count.Story, user)
+						Rating(anime.Rating.Overall, anime.Rating.Count.Overall, user)
 
-			if anime.Rating.Count.Visuals > 0
+				if anime.Rating.Count.Story > 0
-				tr.mountable(data-mountable-type="info")
+					tr.mountable(data-mountable-type="info")
-					td.anime-info-key Visuals:
+						td.anime-info-key Story:
-					td.anime-info-value
+						td.anime-info-value
-						Rating(anime.Rating.Visuals, anime.Rating.Count.Visuals, user)
+							Rating(anime.Rating.Story, anime.Rating.Count.Story, user)
 
-			if anime.Rating.Count.Soundtrack > 0
+				if anime.Rating.Count.Visuals > 0
-				tr.mountable(data-mountable-type="info")
+					tr.mountable(data-mountable-type="info")
-					td.anime-info-key Soundtrack:
+						td.anime-info-key Visuals:
-					td.anime-info-value
+						td.anime-info-value
-						Rating(anime.Rating.Soundtrack, anime.Rating.Count.Soundtrack, user)
+							Rating(anime.Rating.Visuals, anime.Rating.Count.Visuals, user)
+
+				if anime.Rating.Count.Soundtrack > 0
+					tr.mountable(data-mountable-type="info")
+						td.anime-info-key Soundtrack:
+						td.anime-info-value
+							Rating(anime.Rating.Soundtrack, anime.Rating.Count.Soundtrack, user)
 
 component AnimePopularity(anime *arn.Anime)
 	if anime.Popularity.Total() > 0

pages/anime/anime.scarlet

@@ -58,8 +58,15 @@
 			margin 0.25rem
 
 .anime-info-table
+	vertical
 	margin 0
 
+	tr
+		horizontal
+
+.anime-info-key
+	flex 1
+
 .anime-info-value
 	text-align right
 
@@ -152,9 +159,8 @@
 	margin-top 0.6rem
 	margin-bottom 0.4rem
 
-< 800px
+.anime-rating
-	.anime-rating-categories
+	// ...
-		vertical
 
 .anime-friends
 	.user-avatars

pages/animelist/animelist.pixy

@@ -3,7 +3,7 @@ component AnimeListPage(animeListItems []*arn.AnimeListItem, nextIndex int, view
 
 	if user.ID != viewUser.ID
 		.anime-list-user-avatar
-			Avatar(viewUser)
+			AvatarNoTip(viewUser)
 	
 	StatusTabs("/+" + viewUser.Nick + "/animelist")
 	AnimeListItems(animeListItems, nextIndex, viewUser, user)

pages/editlog/editlog.scarlet

@@ -70,8 +70,8 @@
 .edit-log-date
 	display flex
 	align-items center
-	opacity 0.5
 	flex-basis 120px
+	half-opacity-text
 
 .edit-log-empty
 	opacity 0.25

pages/quotes/quotes.scarlet

@@ -23,13 +23,7 @@
 		margin 0
 
 .quote-footer
-	text-align center
+	media-footer
-	margin-bottom 1rem
-	margin-top 0.4rem
-	font-size 0.9em
-
-	span
-		opacity 0.65
 
 blockquote
 	flex-grow 1

scripts/DateView.ts

@@ -123,8 +123,14 @@ export function displayDate(element: HTMLElement, now: Date) {
 	}
 
 	element.innerText = remainingString
+	let tooltip = dayNames[startDate.getDay()] + " " + startTime
 
-	element.title = dayNames[startDate.getDay()] + " " + startTime
+	if(element.classList.contains("no-tip")) {
+		element.title = tooltip
+	} else {
+		element.setAttribute("aria-label", tooltip)
+		element.classList.add("tip")
+	}
 }
 
 export function displayTime(element: HTMLElement, now: Date) {

styles/mixins/media-footer.scarlet

@@ -5,4 +5,4 @@ mixin media-footer
 	font-size 0.9em
 
 	span
-		opacity 0.65
+		color hsla(text-color-h, text-color-s, text-color-l, 0.65)