web/notify.moe
Code Issues Pull Requests Activity

Add tooltips to more places

Browse Source
This commit is contained in:
Eduard Urbach 2018-04-18 13:09:13 +02:00
parent 0913b18239
commit a219e11f8f
7 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mixins/AnimeList.pixy
View File

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

2
pages/amv/amv.pixy
View File

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

2
pages/character/character.pixy
View File

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

2
pages/companies/popular.pixy
View File

@ -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]) + ")"

4
pages/company/company.pixy
View File

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

3
pages/users/users.scarlet
View File

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

14
styles/tip.scarlet
View File

@ -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))
transform tip-transform-visible