From 8545a3f43bc15de5cb4bba63e4e68f5a2afd278d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Z=C3=B6ller?= Date: Wed, 3 Dec 2025 23:05:37 +0100 Subject: [PATCH] Follower UI --- .../controller/ProfileViewController.java | 30 ++++ src/main/resources/static/css/fitpub.css | 11 ++ .../templates/profile/followers.html | 139 ++++++++++++++++++ .../templates/profile/following.html | 139 ++++++++++++++++++ .../resources/templates/profile/public.html | 28 +++- 5 files changed, 339 insertions(+), 8 deletions(-) create mode 100644 src/main/resources/templates/profile/followers.html create mode 100644 src/main/resources/templates/profile/following.html diff --git a/src/main/java/org/operaton/fitpub/controller/ProfileViewController.java b/src/main/java/org/operaton/fitpub/controller/ProfileViewController.java index e8c3f93..0d376c5 100644 --- a/src/main/java/org/operaton/fitpub/controller/ProfileViewController.java +++ b/src/main/java/org/operaton/fitpub/controller/ProfileViewController.java @@ -64,4 +64,34 @@ public class ProfileViewController { model.addAttribute("username", username); return "profile/public"; } + + /** + * User followers page. + * Shows list of people who follow this user. + * + * @param username the username + * @param model the model + * @return followers template + */ + @GetMapping("/profile/{username}/followers") + public String userFollowers(@PathVariable String username, Model model) { + model.addAttribute("pageTitle", "Followers - @" + username); + model.addAttribute("username", username); + return "profile/followers"; + } + + /** + * User following page. + * Shows list of people this user follows. + * + * @param username the username + * @param model the model + * @return following template + */ + @GetMapping("/profile/{username}/following") + public String userFollowing(@PathVariable String username, Model model) { + model.addAttribute("pageTitle", "Following - @" + username); + model.addAttribute("username", username); + return "profile/following"; + } } diff --git a/src/main/resources/static/css/fitpub.css b/src/main/resources/static/css/fitpub.css index 20c557c..29c0792 100644 --- a/src/main/resources/static/css/fitpub.css +++ b/src/main/resources/static/css/fitpub.css @@ -199,6 +199,17 @@ body { padding: 1rem; } +.stat-card-hover { + transition: background-color 0.2s, transform 0.2s; + cursor: pointer; + border-radius: var(--border-radius); +} + +.stat-card-hover:hover { + background-color: var(--light-color); + transform: translateY(-2px); +} + .stat-value { font-size: 2rem; font-weight: 700; diff --git a/src/main/resources/templates/profile/followers.html b/src/main/resources/templates/profile/followers.html new file mode 100644 index 0000000..4188cd0 --- /dev/null +++ b/src/main/resources/templates/profile/followers.html @@ -0,0 +1,139 @@ + + + + + Followers + + + +
+ +
+ +

Loading followers...

+
+ + + + + +
+ +
+
+

+ + + + Followers +

+

People who follow @

+
+
+ + +
+
+ +
+ +
+ + +
+ +

No followers yet

+
+
+
+
+
+ + + + + + + diff --git a/src/main/resources/templates/profile/following.html b/src/main/resources/templates/profile/following.html new file mode 100644 index 0000000..07be08d --- /dev/null +++ b/src/main/resources/templates/profile/following.html @@ -0,0 +1,139 @@ + + + + + Following + + + +
+ +
+ +

Loading following...

+
+ + + + + +
+ +
+
+

+ + + + Following +

+

People that @ follows

+
+
+ + +
+
+ +
+ +
+ + +
+ +

Not following anyone yet

+
+
+
+
+
+ + + + + + + diff --git a/src/main/resources/templates/profile/public.html b/src/main/resources/templates/profile/public.html index b303502..e26c3e2 100644 --- a/src/main/resources/templates/profile/public.html +++ b/src/main/resources/templates/profile/public.html @@ -64,16 +64,20 @@
-
-
0
-
Followers
-
+ +
+
0
+
Followers
+
+
-
-
0
-
Following
-
+ +
+
0
+
Following
+
+
@@ -179,6 +183,14 @@ document.getElementById('avatarPlaceholder').classList.add('d-none'); } + // Follower/following counts + if (user.followersCount !== undefined) { + document.getElementById('followersCount').textContent = user.followersCount; + } + if (user.followingCount !== undefined) { + document.getElementById('followingCount').textContent = user.followingCount; + } + // Joined date const joinedDate = new Date(user.createdAt); document.getElementById('joinedDate').textContent = joinedDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });