From 334be053fed9af77fabc148f1edf1397ba5b0dc9 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Wed, 18 Apr 2018 16:27:08 +0200 Subject: [PATCH] Improved tooltips --- mixins/Postable.pixy | 2 +- mixins/Rating.pixy | 4 +-- pages/anime/anime.pixy | 45 +++++++++++++++--------------- pages/anime/anime.scarlet | 12 ++++++-- pages/animelist/animelist.pixy | 2 +- pages/editlog/editlog.scarlet | 2 +- pages/quotes/quotes.scarlet | 8 +----- scripts/DateView.ts | 8 +++++- styles/mixins/media-footer.scarlet | 2 +- 9 files changed, 46 insertions(+), 39 deletions(-) diff --git a/mixins/Postable.pixy b/mixins/Postable.pixy index c3dcda45..61c31ba7 100644 --- a/mixins/Postable.pixy +++ b/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 diff --git a/mixins/Rating.pixy b/mixins/Rating.pixy index 4607f535..71cb0016 100644 --- a/mixins/Rating.pixy +++ b/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) \ No newline at end of file + .anime-rating.tip(aria-label="Rated by " + arn.Plural(userCount, "user"))= fmt.Sprintf("%." + strconv.Itoa(user.Settings().Format.RatingsPrecision) + "f", value) \ No newline at end of file diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index 3236c20e..dbb2c25f 100644 --- a/pages/anime/anime.pixy +++ b/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") - 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 + tbody 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 - tr.mountable(data-mountable-type="info") - td.anime-info-key Visuals: - td.anime-info-value - Rating(anime.Rating.Visuals, anime.Rating.Count.Visuals, user) + if anime.Rating.Count.Story > 0 + tr.mountable(data-mountable-type="info") + td.anime-info-key Story: + td.anime-info-value + Rating(anime.Rating.Story, anime.Rating.Count.Story, 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) + if anime.Rating.Count.Visuals > 0 + tr.mountable(data-mountable-type="info") + td.anime-info-key Visuals: + td.anime-info-value + 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 diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index 7d9ca32b..efbe0783 100644 --- a/pages/anime/anime.scarlet +++ b/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-categories - vertical +.anime-rating + // ... .anime-friends .user-avatars diff --git a/pages/animelist/animelist.pixy b/pages/animelist/animelist.pixy index 83499b1b..5d3f4d1f 100644 --- a/pages/animelist/animelist.pixy +++ b/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) \ No newline at end of file diff --git a/pages/editlog/editlog.scarlet b/pages/editlog/editlog.scarlet index a4c790a9..847a00f3 100644 --- a/pages/editlog/editlog.scarlet +++ b/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 diff --git a/pages/quotes/quotes.scarlet b/pages/quotes/quotes.scarlet index d68be6ea..f479e833 100644 --- a/pages/quotes/quotes.scarlet +++ b/pages/quotes/quotes.scarlet @@ -23,13 +23,7 @@ margin 0 .quote-footer - text-align center - margin-bottom 1rem - margin-top 0.4rem - font-size 0.9em - - span - opacity 0.65 + media-footer blockquote flex-grow 1 diff --git a/scripts/DateView.ts b/scripts/DateView.ts index 17cbbb16..6d2ece95 100644 --- a/scripts/DateView.ts +++ b/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) { diff --git a/styles/mixins/media-footer.scarlet b/styles/mixins/media-footer.scarlet index dfa58968..d7b154e7 100644 --- a/styles/mixins/media-footer.scarlet +++ b/styles/mixins/media-footer.scarlet @@ -5,4 +5,4 @@ mixin media-footer font-size 0.9em span - opacity 0.65 \ No newline at end of file + color hsla(text-color-h, text-color-s, text-color-l, 0.65) \ No newline at end of file