From a219e11f8f43e87b2489e3cc1cc43d5091191763 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Wed, 18 Apr 2018 13:09:13 +0200 Subject: [PATCH] Add tooltips to more places --- mixins/AnimeList.pixy | 2 +- pages/amv/amv.pixy | 2 +- pages/character/character.pixy | 2 +- pages/companies/popular.pixy | 2 +- pages/company/company.pixy | 4 ++++ pages/users/users.scarlet | 3 ++- styles/tip.scarlet | 14 ++++++++------ 7 files changed, 18 insertions(+), 11 deletions(-) diff --git a/mixins/AnimeList.pixy b/mixins/AnimeList.pixy index 4958897a..3bcf21fd 100644 --- a/mixins/AnimeList.pixy +++ b/mixins/AnimeList.pixy @@ -24,7 +24,7 @@ component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn //- else if item.Anime().EpisodeByNumber(item.Episodes + 1) != nil for _, link := range item.Anime().EpisodeByNumber(item.Episodes + 1).Links - a(href=link, title="Watch episode " + toString(item.Episodes + 1) + " on twist.moe", target="_blank", rel="noopener") + a.tip(href=link, aria-label="Watch episode " + toString(item.Episodes + 1), target="_blank", rel="noopener") RawIcon("eye") .anime-list-item-airing-date diff --git a/pages/amv/amv.pixy b/pages/amv/amv.pixy index 39c54919..11a6f634 100644 --- a/pages/amv/amv.pixy +++ b/pages/amv/amv.pixy @@ -42,7 +42,7 @@ component AMVPage(amv *arn.AMV, user *arn.User) component AnimeGridSmall(animes []*arn.Anime, user *arn.User) each anime in animes - a.mountable(href=anime.Link(), title=anime.Title.ByUser(user)) + a.tip.mountable(href=anime.Link(), aria-label=anime.Title.ByUser(user)) img.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) component AMVTabs(amv *arn.AMV, user *arn.User) diff --git a/pages/character/character.pixy b/pages/character/character.pixy index aafe93b6..e7a2decd 100644 --- a/pages/character/character.pixy +++ b/pages/character/character.pixy @@ -37,7 +37,7 @@ component CharacterDetails(character *arn.Character, characterAnime []*arn.Anime .character-anime.mountable each anime in characterAnime - a.character-anime-item.mountable(href=anime.Link(), title=anime.Title.ByUser(user), data-mountable-type="anime") + a.character-anime-item.tip.mountable(href=anime.Link(), aria-label=anime.Title.ByUser(user), data-mountable-type="anime") img.character-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) if len(quotes) > 0 && (len(quotes) > 1 || mainQuote != quotes[0]) diff --git a/pages/companies/popular.pixy b/pages/companies/popular.pixy index 8ad35d26..250e1238 100644 --- a/pages/companies/popular.pixy +++ b/pages/companies/popular.pixy @@ -22,6 +22,6 @@ component PopularCompaniesScrollable(companies []*arn.Company, companyToAnime ma .popular-company-footer .company-anime each anime in utils.MaxAnime(companyToAnime[company.ID], 12) - CompanyAnime(anime, user) + CompanyAnimeNoTip(anime, user) //- span= " (" + strconv.Itoa(popularity[company.ID]) + ")" \ No newline at end of file diff --git a/pages/company/company.pixy b/pages/company/company.pixy index af590996..614d0900 100644 --- a/pages/company/company.pixy +++ b/pages/company/company.pixy @@ -56,6 +56,10 @@ component CompanyAnimes(label string, animes []*arn.Anime, user *arn.User) CompanyAnime(anime, user) component CompanyAnime(anime *arn.Anime, user *arn.User) + a.company-anime-item.tip(href=anime.Link(), aria-label=anime.Title.ByUser(user)) + img.company-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) + +component CompanyAnimeNoTip(anime *arn.Anime, user *arn.User) a.company-anime-item(href=anime.Link(), title=anime.Title.ByUser(user)) img.company-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) diff --git a/pages/users/users.scarlet b/pages/users/users.scarlet index c50f0842..d8f4f808 100644 --- a/pages/users/users.scarlet +++ b/pages/users/users.scarlet @@ -12,7 +12,8 @@ .profile-image-container flex-basis 170px - height 140px + flex-grow 0 + height 230px margin calc(content-padding / 2) position relative border ui-border diff --git a/styles/tip.scarlet b/styles/tip.scarlet index 409dd7de..1d19c442 100644 --- a/styles/tip.scarlet +++ b/styles/tip.scarlet @@ -1,4 +1,6 @@ const tip-opacity = 0.94 +const tip-transform-hidden = rotate(0.02deg) translateX(-50%) translateY(-80%) +const tip-transform-visible = rotate(0.02deg) translateX(-50%) translateY(-100%) .tip position relative @@ -6,12 +8,12 @@ const tip-opacity = 0.94 :before content attr(aria-label) position absolute - top 0 + top -10px left 50% z-index 100000 pointer-events none opacity 0 - transform translateX(-50%) translateY(-80%) + transform tip-transform-hidden color text-color text-shadow none padding 0.2rem 0.7rem @@ -25,7 +27,7 @@ const tip-opacity = 0.94 :after content "" position absolute - top 0 + top -4px left 50% z-index 100001 pointer-events none @@ -35,14 +37,14 @@ const tip-opacity = 0.94 border-style solid border-width 8px 8px 0 8px border-color ui-background transparent transparent transparent - transform translateX(-50%) translateY(-80%) + transform tip-transform-hidden default-transition :hover :before opacity tip-opacity - transform translateX(-50%) translateY(calc(-100% - 10px)) + transform tip-transform-visible :after opacity tip-opacity - transform translateX(-50%) translateY(calc(-100% - 4px)) \ No newline at end of file + transform tip-transform-visible \ No newline at end of file