Added show more button to profile tags

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")
+					.profile-tag.action.tip.mountable.never-unmount(data-action="showMore", data-trigger="click", aria-label="Show more", data-mountable-type="header")
-					//- 	RawIcon("archive")
+						RawIcon("ellipsis-h")
 
-					//- if user != nil && (user.Role == "editor" || user.Role == "admin")
+					if viewUser.Website != ""
-					//- 	a.profile-tag.tip.mountable.never-unmoun(href="/+" + viewUser.Nick + "/log", aria-label="Log", data-mountable-type="header")
+						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("edit")
+							RawIcon("globe")
 
-					//- if viewUser.Website != ""
+					if viewUser.Accounts.Osu.Nick != "" && viewUser.Accounts.Osu.PP >= 100
-					//- 	a.profile-tag.tip.mountable.never-unmount(href=viewUser.WebsiteURL(), target="_blank", rel="nofollow", aria-label=viewUser.WebsiteShortURL(), data-mountable-type="header")
+						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("globe")
+							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

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

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

scripts/Actions/FollowUser.ts

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

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"))
+}

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"