From 9ca6fd744f48588ea3b570662c155255c5cf16f5 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Wed, 14 Nov 2018 21:16:29 +0900 Subject: [PATCH] Added show more button to profile tags --- pages/profile/profile.pixy | 68 ++++++++++++++++++----------------- pages/profile/profile.scarlet | 5 +-- pages/profile/tags.scarlet | 11 ++++++ scripts/Actions/FollowUser.ts | 17 --------- scripts/Actions/User.ts | 35 ++++++++++++++++++ scripts/Actions/index.ts | 2 +- 6 files changed, 86 insertions(+), 52 deletions(-) delete mode 100644 scripts/Actions/FollowUser.ts create mode 100644 scripts/Actions/User.ts diff --git a/pages/profile/profile.pixy b/pages/profile/profile.pixy index 52cb33db..e1bba4b7 100644 --- a/pages/profile/profile.pixy +++ b/pages/profile/profile.pixy @@ -73,27 +73,7 @@ component ProfileHead(viewUser *arn.User, user *arn.User, uri string) a.profile-tag.mountable.never-unmount(href="/users/country/" + strings.ToLower(viewUser.Location.CountryName), data-mountable-type="header") Icon("map-marker") span= viewUser.Location.CountryName - - //- if viewUser.Accounts.Osu.Nick != "" && viewUser.Accounts.Osu.PP >= 100 - //- a.profile-tag.tip.mountable.never-unmount(href="https://osu.ppy.sh/u/" + viewUser.Accounts.Osu.Nick, aria-label="osu! | Level " + fmt.Sprint(int(viewUser.Accounts.Osu.Level)) + " | Accuracy: " + fmt.Sprintf("%.1f", viewUser.Accounts.Osu.Accuracy) + "%", target="_blank", rel="noopener", data-mountable-type="header") - //- Icon("trophy") - //- span= fmt.Sprint(int(viewUser.Accounts.Osu.PP)) + " pp" - //- if viewUser.Accounts.Overwatch.BattleTag != "" && viewUser.Accounts.Overwatch.SkillRating >= 1000 - //- a.profile-tag.tip.mountable.never-unmount(href="https://playoverwatch.com/en-us/career/pc/" + strings.Replace(viewUser.Accounts.Overwatch.BattleTag, "#", "-", 1), aria-label=fmt.Sprintf("Overwatch | %s", stringutils.Capitalize(viewUser.Accounts.Overwatch.Tier)), target="_blank", rel="noopener", data-mountable-type="header") - //- Icon("overwatch") - //- span= fmt.Sprint(viewUser.Accounts.Overwatch.SkillRating) + " SR" - - //- if viewUser.Accounts.FinalFantasyXIV.Nick != "" && viewUser.Accounts.FinalFantasyXIV.Class != "" - //- .profile-tag.tip.mountable.never-unmount(aria-label=fmt.Sprintf("Final Fantasy XIV | Level %d | IL %d", viewUser.Accounts.FinalFantasyXIV.Level, viewUser.Accounts.FinalFantasyXIV.ItemLevel), data-mountable-type="header") - //- Icon("gamepad") - //- span= viewUser.Accounts.FinalFantasyXIV.Class - - if viewUser.Registered != "" - .profile-tag.mountable.never-unmount(title="Member since", data-mountable-type="header") - Icon("calendar") - span= viewUser.RegisteredTime().Format("Jan 2006") - if viewUser.IsPro() a.profile-tag.mountable.never-unmount(href="/support", aria-label="Supporter", data-mountable-type="header") Icon("star") @@ -103,26 +83,50 @@ component ProfileHead(viewUser *arn.User, user *arn.User, uri string) a.profile-tag.mountable.never-unmount(href="/users/staff", aria-label="Staff member", data-mountable-type="header") Icon("rocket") span= stringutils.Capitalize(viewUser.Role) + + if viewUser.Registered != "" + .profile-tag.mountable.never-unmount(title="Member since", data-mountable-type="header") + Icon("calendar") + span= viewUser.RegisteredTime().Format("Jan 2006") if !viewUser.IsActive() .profile-tag.mountable.never-unmount(title="Hasn't been online for the past 2 weeks", data-mountable-type="header") Icon("bed") span Inactive - - //- if user != nil && user.ID != viewUser.ID - //- a.profile-tag.tip.mountable.never-unmount(href="/compare/animelist/" + user.Nick + "/" + viewUser.Nick, aria-label="Compare", data-mountable-type="header") - //- RawIcon("exchange") - //- a.profile-tag.tip.mountable.never-unmount(href="/+" + viewUser.Nick + "/recommended/anime", aria-label="Recommendations", data-mountable-type="header") - //- RawIcon("archive") + .profile-tag.action.tip.mountable.never-unmount(data-action="showMore", data-trigger="click", aria-label="Show more", data-mountable-type="header") + RawIcon("ellipsis-h") - //- if user != nil && (user.Role == "editor" || user.Role == "admin") - //- a.profile-tag.tip.mountable.never-unmoun(href="/+" + viewUser.Nick + "/log", aria-label="Log", data-mountable-type="header") - //- RawIcon("edit") + if viewUser.Website != "" + a.profile-tag.tip.mountable.never-unmount.show-more(href=viewUser.WebsiteURL(), target="_blank", rel="nofollow", aria-label=viewUser.WebsiteShortURL(), data-mountable-type="header") + RawIcon("globe") - //- if viewUser.Website != "" - //- a.profile-tag.tip.mountable.never-unmount(href=viewUser.WebsiteURL(), target="_blank", rel="nofollow", aria-label=viewUser.WebsiteShortURL(), data-mountable-type="header") - //- RawIcon("globe") + if viewUser.Accounts.Osu.Nick != "" && viewUser.Accounts.Osu.PP >= 100 + a.profile-tag.tip.mountable.never-unmount.show-more(href="https://osu.ppy.sh/u/" + viewUser.Accounts.Osu.Nick, aria-label=fmt.Sprintf("osu! | %.0f pp | Level %.0f | Accuracy: %.1f%%", viewUser.Accounts.Osu.PP, viewUser.Accounts.Osu.Level, viewUser.Accounts.Osu.Accuracy), target="_blank", rel="noopener", data-mountable-type="header") + RawIcon("trophy") + + if viewUser.Accounts.Overwatch.BattleTag != "" && viewUser.Accounts.Overwatch.SkillRating >= 1000 + a.profile-tag.tip.mountable.never-unmount.show-more(href="https://playoverwatch.com/en-us/career/pc/" + strings.Replace(viewUser.Accounts.Overwatch.BattleTag, "#", "-", 1), aria-label=fmt.Sprintf("Overwatch | %d SR | %s", viewUser.Accounts.Overwatch.SkillRating, stringutils.Capitalize(viewUser.Accounts.Overwatch.Tier)), target="_blank", rel="noopener", data-mountable-type="header") + RawIcon("overwatch") + + if viewUser.Accounts.FinalFantasyXIV.Nick != "" && viewUser.Accounts.FinalFantasyXIV.Class != "" + .profile-tag.tip.mountable.never-unmount.show-more(aria-label=fmt.Sprintf("Final Fantasy XIV | %s | Level %d | IL %d", viewUser.Accounts.FinalFantasyXIV.Class, viewUser.Accounts.FinalFantasyXIV.Level, viewUser.Accounts.FinalFantasyXIV.ItemLevel), data-mountable-type="header") + RawIcon("gamepad") + + if viewUser.Accounts.Discord.Nick != "" && viewUser.Accounts.Discord.Verified + a.profile-tag.tip.mountable.never-unmount.show-more(href="https://discord.gg/0kimAmMCeXGXuzNF", aria-label=fmt.Sprintf("Discord | %s", viewUser.Accounts.Discord.Nick), data-mountable-type="header") + RawIcon("discord") + + if user != nil && user.ID != viewUser.ID + a.profile-tag.tip.mountable.never-unmount.show-more(href="/compare/animelist/" + user.Nick + "/" + viewUser.Nick, aria-label="Compare", data-mountable-type="header") + RawIcon("exchange") + + a.profile-tag.tip.mountable.never-unmount.show-more(href="/+" + viewUser.Nick + "/recommended/anime", aria-label="Recommendations", data-mountable-type="header") + RawIcon("archive") + + if user != nil && (user.Role == "editor" || user.Role == "admin") + a.profile-tag.tip.mountable.never-unmount.show-more(href="/+" + viewUser.Nick + "/log", aria-label="Log", data-mountable-type="header") + RawIcon("list") .profile-actions if user != nil && user.ID != viewUser.ID diff --git a/pages/profile/profile.scarlet b/pages/profile/profile.scarlet index 39b33110..4defe5bb 100644 --- a/pages/profile/profile.scarlet +++ b/pages/profile/profile.scarlet @@ -52,7 +52,7 @@ const profile-image-size = 280px padding-top 0 padding-bottom 0 padding-left calc(content-padding * 2) - max-width 900px + // max-width 1200px .profile-actions position absolute @@ -105,7 +105,8 @@ const profile-image-size = 280px height 100% .profile-image-container - flex 1 + flex-basis profile-image-size + flex-shrink 0 width profile-image-size height profile-image-size max-width profile-image-size diff --git a/pages/profile/tags.scarlet b/pages/profile/tags.scarlet index 2ee9e530..ebfb4959 100644 --- a/pages/profile/tags.scarlet +++ b/pages/profile/tags.scarlet @@ -15,16 +15,27 @@ background rgba(255, 255, 255, 0.1) border-radius ui-element-border-radius margin 0.35rem + display flex + justify-content center + align-items center &.mounted opacity 0.8 + &.action + cursor pointer + :hover color hsl(0, 0%, 90%) opacity 1.0 text-shadow none background rgba(255, 255, 255, 0.2) +.show-more + &.mounted + display none + opacity 0 + > 800px .profile-tags justify-content flex-start diff --git a/scripts/Actions/FollowUser.ts b/scripts/Actions/FollowUser.ts deleted file mode 100644 index d5021a54..00000000 --- a/scripts/Actions/FollowUser.ts +++ /dev/null @@ -1,17 +0,0 @@ -import AnimeNotifier from "../AnimeNotifier" - -// Follow user -export function followUser(arn: AnimeNotifier, elem: HTMLElement) { - return arn.post(elem.dataset.api) - .then(() => arn.reloadContent()) - .then(() => arn.statusMessage.showInfo("You are now following " + document.getElementById("nick").textContent + ".")) - .catch(err => arn.statusMessage.showError(err)) -} - -// Unfollow user -export function unfollowUser(arn: AnimeNotifier, elem: HTMLElement) { - return arn.post(elem.dataset.api) - .then(() => arn.reloadContent()) - .then(() => arn.statusMessage.showInfo("You stopped following " + document.getElementById("nick").textContent + ".")) - .catch(err => arn.statusMessage.showError(err)) -} \ No newline at end of file diff --git a/scripts/Actions/User.ts b/scripts/Actions/User.ts new file mode 100644 index 00000000..8c2ef723 --- /dev/null +++ b/scripts/Actions/User.ts @@ -0,0 +1,35 @@ +import AnimeNotifier from "../AnimeNotifier" +import Diff from "scripts/Diff"; + +// Follow user +export async function followUser(arn: AnimeNotifier, element: HTMLElement) { + try { + await arn.post(element.dataset.api) + await arn.reloadContent() + arn.statusMessage.showInfo("You are now following " + document.getElementById("nick").textContent + ".") + } catch(err) { + arn.statusMessage.showError(err) + } +} + +// Unfollow user +export async function unfollowUser(arn: AnimeNotifier, element: HTMLElement) { + try { + await arn.post(element.dataset.api) + await arn.reloadContent() + arn.statusMessage.showInfo("You stopped following " + document.getElementById("nick").textContent + ".") + } catch(err) { + arn.statusMessage.showError(err) + } +} + +// Show more +export function showMore(arn: AnimeNotifier, showMoreElement: HTMLElement) { + const elements = [...document.getElementsByClassName("show-more")] + + for(let element of elements) { + Diff.mutations.queue(() => element.classList.remove("show-more")) + } + + Diff.mutations.queue(() => showMoreElement.classList.add("show-more")) +} \ No newline at end of file diff --git a/scripts/Actions/index.ts b/scripts/Actions/index.ts index feede10f..6dd6d70a 100644 --- a/scripts/Actions/index.ts +++ b/scripts/Actions/index.ts @@ -4,7 +4,7 @@ export * from "./AnimeList" export * from "./Diff" export * from "./Editor" export * from "./Explore" -export * from "./FollowUser" +export * from "./User" export * from "./Forum" export * from "./InfiniteScroller" export * from "./Install"