feat: added user page tabs on web

PretendoNetwork · Jul 29, 2024 · 1bd9146 · 1bd9146
1 parent 4f28fb9
commit 1bd9146
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 11 deletions.
diff --git a/src/services/juxt-web/routes/console/userpage.js b/src/services/juxt-web/routes/console/userpage.js
@@ -281,7 +281,7 @@ async function userRelations(req, res, userID) {
 	if (req.params.type === 'friends') {
 		followers = await SETTINGS.find({ pid: friends });
 		communities = [];
-		selection = 2;
+		selection = 1;
 	} else if (req.params.type === 'followers') {
 		followers = await database.getFollowingUsers(userContent);
 		communities = [];
@@ -371,13 +371,18 @@ async function morePosts(req, res, userID) {
 
 async function moreYeahPosts(req, res, userID) {
 	let offset = parseInt(req.query.offset);
-	const parentUserContent = await database.getUserContent(userID);
 	const userContent = await database.getUserContent(req.pid);
 	const communityMap = await util.getCommunityHash();
 	if (!offset) {
 		offset = 0;
 	}
-	const likesArray = await userContent.likes.slice().reverse();
+	let likesArray;
+	try {
+		likesArray = await userContent.likes.slice().reverse();
+	} catch (e) {
+		console.log(e);
+		likesArray = [];
+	}
 	const posts = await POST.aggregate([
 		{ $match: { id: { $in: likesArray }, removed: false } },
 		{$addFields: {

diff --git a/src/webfiles/web/css/web.css b/src/webfiles/web/css/web.css
@@ -794,12 +794,12 @@ input[type="radio"] {
 .buttons.tabs {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
 }
 
 .buttons.tabs > a,
 .buttons.tabs > button {
-  width: 100%;
-  margin: 0 1ch;
+  margin: 0.2em 1ch;
   border: 1px solid var(--text-secondary);
   cursor: pointer;
   border-radius: 1em;
@@ -1016,6 +1016,31 @@ input[type="radio"] {
 .feeling-button-puzzled:checked {
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3C/svg%3E") !important;
 }
+.supporter-star.mario>svg {
+	fill:rgba(255,132,132,.2);
+	color:#ff8484
+}
+.supporter-star.super>svg {
+	fill:rgba(89,201,165,.3);
+	color:#59c9a5
+}
+.supporter-star.mega>svg {
+	fill:rgba(202,177,251,.3);
+	color:#cab1fb
+}
+.supporter-star.dev>svg {
+	color:#fff;
+	fill:url(#rainbow)
+}
+.supporter-star.admin>svg {
+	fill:rgba(220,226,27,.3);
+	color:#dce21b
+}
+.supporter-star.tester>svg {
+	fill:rgba(23,212,237,.3);
+	color:#17d4ed;
+	-webkit-transform:translate(0,15%)
+}
 
 #button-wrapper {
   display: flex;
@@ -1430,7 +1455,7 @@ li.reports .button-spacer {
   }
 
   .info-boxes-wrapper > div {
-    width: 100%;
+    padding: 0.5em;
   }
 
   .community-info > .user-icon.verified {

diff --git a/src/webfiles/web/css/web.min.css b/src/webfiles/web/css/web.min.css
diff --git a/src/webfiles/web/partials/following_list.ejs b/src/webfiles/web/partials/following_list.ejs
@@ -0,0 +1,27 @@
+<ul class="list-content-with-icon-and-text arrow-list accounts" id="news-list-content">
+	<% bundle.followers.forEach(function(user) { %>
+		<%if(user.pid === 0) return %>
+		<li id="<%= user.pid %>">
+			<div class="hover">
+				<a href="/users/<%= user.pid %>" data-pjax="#body" class="icon-container notify">
+				<img src="https://pretendo-cdn.b-cdn.net/mii/<%= user.pid %>/normal_face.png" class="icon">
+			</a>
+			<a class="body" href="/users/<%= user.pid %>">
+				<span class="text"><span class="nick-name"><%= user.screen_name %></span>
+			</a>
+			</div>
+		</li>
+	<% }); %>
+	<% bundle.communities.forEach(function(community) { %>
+		<li id="<%= community %>">
+			<div class="hover">
+				<a href="/titles/<%= community %>/new" data-pjax="#body" class="icon-container notify">
+					<img src="https://pretendo-cdn.b-cdn.net/icons/<%= community %>/128.png" class="icon">
+				</a>
+				<a class="body" href="/titles/<%= community %>/new">
+					<span class="text"><span class="nick-name"><%= bundle.communityMap.get(community) %></span>
+				</a>
+			</div>
+		</li>
+	<% }); %>
+</ul>
diff --git a/src/webfiles/web/partials/head.ejs b/src/webfiles/web/partials/head.ejs
@@ -1,5 +1,5 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link rel="stylesheet" type="text/css" href="/css/web.css">
+<link rel="stylesheet" type="text/css" href="/css/web.min.css">
 <script src="/js/pjax.min.js"></script>
 <script src="/js/web.min.js"></script>
 <link rel="manifest" href="https://juxt-web-cdn.b-cdn.net/web/manifest.json">

diff --git a/src/webfiles/web/user_page.ejs b/src/webfiles/web/user_page.ejs
@@ -27,7 +27,7 @@
     <h2 id="title" class="page-header"><%= lang.global.user_page %></h2>
     <%- include('partials/nav_bar', { selection: -1, pid: pid }); %>
     <div id="toast"></div>
-    <div id="wrapper">
+    <div id="wrapper" class="community-page-post-box">
         <div class="community-top">
             <img class="banner" src="/images/banner.png" alt="">
             <div class="community-info">
@@ -43,7 +43,7 @@
             </div>
 			<% if (!pnid.deleted && !banned) { %>
             <h4 class="community-description">
-                <!--<%if(userSettings.profile_comment_visibility){%> <%= userSettings.profile_comment%> <%}else {%><%= lang.global.private %><%}%>
+                <%if(userSettings.profile_comment_visibility){%> <%= userSettings.profile_comment%> <%}else {%><%= lang.global.private %><%}%>
                     <%if(pnid.tierName) {%>
                     <%if(pnid.tierName === 'Mario') {%>
                         <span class="supporter-star mario">|
@@ -85,7 +85,7 @@
                         <span class="supporter-star tester">|
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256" fill="none" stroke="currentColor"><path d="M104,32V93.8a8.4,8.4,0,0,1-1.1,4.1l-63.6,106A8,8,0,0,0,46.1,216H209.9a8,8,0,0,0,6.8-12.1l-63.6-106a8.4,8.4,0,0,1-1.1-4.1V32" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="88" y1="32" x2="168" y2="32" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M62.6,165c11.8-8.7,32.1-13.6,65.4,3,35.7,17.9,56.5,10.8,67.9,1.1" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </span>
-                    <%}%>-->
+                    <%}%>
             </h4>
             <div class="info-boxes-wrapper">
                 <div>
@@ -131,6 +131,13 @@
 				<% } %>
             </div>
         </div>
+		<div class="buttons tabs">
+			<a id="tab-header-post" class="<%if(selection === 0){ %>selected<%}%>" href="<%= link %>"><%= lang.user_page.posts %></a>
+			<a id="tab-header-friends" class="<%if(selection === 1){ %>selected<%}%>" href="<%= link %>friends"><%= lang.user_page.friends %></a>
+			<a id="tab-header-following" class="<%if(selection === 2){ %>selected<%}%>" href="<%= link %>following"><%= lang.user_page.following %></a>
+			<a id="tab-header-followers" class="<%if(selection === 3){ %>selected<%}%>" href="<%= link %>followers"><%= lang.user_page.followers %></a>
+			<a id="tab-header-yeahs" class="<%if(selection === 4){ %>selected<%}%>" href="<%= link %>yeahs"><%= lang.global.yeahs %></a>
+		</div>
         <%- include('partials/' + template, { bundle }); %>
 		<% } %>
     </div>