diff --git a/mixins/Avatar.pixy b/mixins/Avatar.pixy index 36d9d069..7f7151bc 100644 --- a/mixins/Avatar.pixy +++ b/mixins/Avatar.pixy @@ -2,7 +2,7 @@ component Avatar(user *arn.User) CustomAvatar(user, user.Link(), user.Nick) component CustomAvatar(user *arn.User, link string, title string) - a.user(href=link, title=title) + a.user.tip(href=link, aria-label=title) AvatarNoLink(user) component AvatarNoLink(user *arn.User) diff --git a/pages/editlog/editlog.pixy b/pages/editlog/editlog.pixy index 634e3934..b2a7cb96 100644 --- a/pages/editlog/editlog.pixy +++ b/pages/editlog/editlog.pixy @@ -52,7 +52,7 @@ component EditLogScrollable(entries []*arn.EditLogEntry, user *arn.User) RawIcon("minus-circle") .edit-log-user - a.edit-log-user-link(href=entry.User().Link(), title=entry.User().Nick) + a.edit-log-user-link.tip(href=entry.User().Link(), aria-label=entry.User().Nick) AvatarNoLink(entry.User()) .edit-log-object diff --git a/pages/editlog/editlog.scarlet b/pages/editlog/editlog.scarlet index 1b06ebb8..a4c790a9 100644 --- a/pages/editlog/editlog.scarlet +++ b/pages/editlog/editlog.scarlet @@ -27,7 +27,6 @@ .user-image width calc(avatar-size / 1.5) height calc(avatar-size / 1.5) - margin-right 0.5rem .edit-log-user-link horizontal diff --git a/pages/profile/profile.pixy b/pages/profile/profile.pixy index 0074739a..7b91ac42 100644 --- a/pages/profile/profile.pixy +++ b/pages/profile/profile.pixy @@ -7,7 +7,7 @@ component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList, .profile-watching-list.mountable each item in animeList.Items if item.Status == arn.AnimeListStatusWatching || item.Status == arn.AnimeListStatusCompleted - a.profile-watching-list-item(href=item.Anime().Link(), title=item.Anime().Title.ByUser(user) + " (" + toString(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")") + a.profile-watching-list-item.tip(href=item.Anime().Link(), aria-label=item.Anime().Title.ByUser(user) + " (" + toString(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")") img.profile-watching-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", data-color=item.Anime().AverageColor(), alt=item.Anime().Title.ByUser(user)) .footer diff --git a/scripts/Actions/Theme.ts b/scripts/Actions/Theme.ts index 839fb9da..45873651 100644 --- a/scripts/Actions/Theme.ts +++ b/scripts/Actions/Theme.ts @@ -76,7 +76,7 @@ export function lightTheme(arn: AnimeNotifier) { export function darkTheme(arn: AnimeNotifier) { let root = document.documentElement - if(arn.user.dataset.pro !== "true") { + if(!arn.user || arn.user.dataset.pro !== "true") { arn.statusMessage.showInfo("Previewing Dark theme for 30 seconds. If you would like to use it permanently, please support us.", 5000) // After 30 seconds, switch back to default theme if the user doesn't own a PRO account diff --git a/styles/tip.scarlet b/styles/tip.scarlet new file mode 100644 index 00000000..12d8cb11 --- /dev/null +++ b/styles/tip.scarlet @@ -0,0 +1,46 @@ +.tip + position relative + + :before + content attr(aria-label) + position absolute + top 0 + left 50% + z-index 100000 + pointer-events none + opacity 0 + transform translateX(-50%) translateY(-80%) + color text-color + text-shadow none + padding 0.2rem 0.7rem + background ui-background + border 1px solid ui-border-color + border-radius ui-element-border-radius + box-shadow shadow-light + white-space nowrap + default-transition + + :after + content "" + position absolute + top 0 + left 50% + z-index 100001 + pointer-events none + opacity 0 + width 0 + height 0 + border-style solid + border-width 8px 8px 0 8px + border-color ui-background transparent transparent transparent + transform translateX(-50%) translateY(-80%) + default-transition + + :hover + :before + opacity 1 + transform translateX(-50%) translateY(calc(-100% - 10px)) + + :after + opacity 1 + transform translateX(-50%) translateY(calc(-100% - 4px)) \ No newline at end of file