From 69df3f8c6926670699d3100c8459d6d37eadee79 Mon Sep 17 00:00:00 2001 From: CaramelKat <32065563+caramelkat@users.noreply.github.com> Date: Sat, 26 Feb 2022 23:54:51 -0600 Subject: [PATCH] Added user and community page to web --- .../juxt-web/routes/console/communities.js | 2 + src/webfiles/web/all_communities.ejs | 1 - src/webfiles/web/community.ejs | 116 +++++++++++++++++ src/webfiles/web/css/juxt.css | 81 +++++++++++- src/webfiles/web/me_page.ejs | 118 ++++++++++++++++++ src/webfiles/web/post_template.ejs | 2 +- src/webfiles/web/user_page.ejs | 118 ++++++++++++++++++ 7 files changed, 434 insertions(+), 4 deletions(-) create mode 100644 src/webfiles/web/community.ejs create mode 100644 src/webfiles/web/me_page.ejs create mode 100644 src/webfiles/web/user_page.ejs diff --git a/src/services/juxt-web/routes/console/communities.js b/src/services/juxt-web/routes/console/communities.js index 9e23825..62bd884 100644 --- a/src/services/juxt-web/routes/console/communities.js +++ b/src/services/juxt-web/routes/console/communities.js @@ -80,6 +80,7 @@ router.get('/:communityID/:type', async function (req, res) { if(req.params.communityID === 'announcements') res.redirect('/communities/announcements') let community = await database.getCommunityByID(req.params.communityID.toString()); + if(!community) return res.sendStatus(404); let communityMap = await util.data.getCommunityHash(); let newPosts = await database.getNumberNewCommunityPostsByID(community, config.post_limit); let totalNumPosts = await database.getTotalPostsByCommunity(community) @@ -104,6 +105,7 @@ router.get('/:communityID/:type/loadPosts', async function (req, res) { let communityMap = await util.data.getCommunityHash(); let posts; let community = await database.getCommunityByID(req.params.communityID) + if(!community) return res.sendStatus(404); if(!offset) offset = 0; switch (req.params.type) { diff --git a/src/webfiles/web/all_communities.ejs b/src/webfiles/web/all_communities.ejs index abb0fc6..a2f756a 100644 --- a/src/webfiles/web/all_communities.ejs +++ b/src/webfiles/web/all_communities.ejs @@ -13,7 +13,6 @@ gtag('js', new Date()); gtag('config', 'UA-195842548-1'); -
diff --git a/src/webfiles/web/community.ejs b/src/webfiles/web/community.ejs new file mode 100644 index 0000000..de9963b --- /dev/null +++ b/src/webfiles/web/community.ejs @@ -0,0 +1,116 @@ + + + Juxt - <%= community.name %> + + + + + + + + + + + <%if(user.profile_comment_visibility){%> <%}%> + + + + + <%if(user.profile_comment_visibility){%><%}%> + + + + + + + + <%if(user.profile_comment_visibility){%><%}%> + + + + + + +
+ <%- include('nav_bar', { selection: 0 }); %> +
+
+

<%= lang.global.communities %>

+
+
+ +

<%= community.name %>

+
+

<%= community.description %>

+ +
+
+

<%= lang.community.followers %>

+

<%= community.followers %>

+
+
+

<%= lang.community.posts %>

+

<%=totalNumPosts%>

+
+
+

<%= lang.community.tags %>

+

N/A

+
+
+
+ <% if(newPosts.length === 0) {%> +

<%= lang.activity_feed.empty %>

+ <%} else { %> + <% newPosts.forEach(function(post) { %> + <%- include('post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: false }); %> + <% }); %> + <%}%> +
+ + + + + + + + +
+

<%= lang.community.recent %>

+ 		+

<%= lang.community.popular %>

+ 		+

<%= lang.community.verified %>

+
+
+ +
+
+ + + diff --git a/src/webfiles/web/css/juxt.css b/src/webfiles/web/css/juxt.css index e5e7d04..0efe1ab 100644 --- a/src/webfiles/web/css/juxt.css +++ b/src/webfiles/web/css/juxt.css @@ -9,11 +9,12 @@ --theme-light: #A185D6; --text-secondary-2: #8990C1; --border: rgba(255, 255, 255, 0.1); + --background-alt-alt: #383f6b; } button { cursor: pointer; - background: #383f6b; + background: var(--background-alt-alt); border: none; border-radius: 1em; color: var(--text); @@ -81,6 +82,7 @@ header a { padding: 0.25em 1.5em 0.25em 1em; border-radius: 2em; display: flex; + margin: 0.1em; } header a:first-child { @@ -159,7 +161,7 @@ header > .selected { .user-icon { width: 64px; height: 64px; - border-radius: 100%; + border-radius: 0.5em; background: var(--text-secondary); } @@ -180,11 +182,13 @@ header > .selected { .painting { image-rendering: pixelated; border-radius: 1em; + width: 100%; } .screenshot { border-radius: 1em; margin-bottom: 1em; + width: 100%; } .post-content { @@ -341,6 +345,48 @@ iframe { background-color: var(--btn); } +.community-top { + background: var(--background-alt); + margin-bottom: 1em; + padding: 1em; + border-radius: 1em; + width: 600px; + } + +.community-info { + display: flex; +} +.info-boxes-wrapper { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; +} +.info-boxes-wrapper > div { + background: var(--background-alt-alt); + /*! width: 30%; */ + border-radius: 1em; + display: flex; + flex-direction: column; + align-items: center; + margin: 0.5em; + flex-grow: 1; +} +.info-boxes-wrapper > div > h4:first-child { + margin: 0.75em 0 0 0; + color: var(--theme-light); + font-size: small; + font-weight: bolder; +} +.info-boxes-wrapper > div > h4:last-child { + margin: 0.75em 0 0.75em 0; + color: var(--text-secondary); + font-size: small; +} + +.community-title { + padding-left: 0.5em; +} + @media screen and (max-width: 1350px) { .communities-wrapper { max-width: 600px; @@ -414,6 +460,7 @@ iframe { border-radius: 1em; font-weight: bold; color: var(--theme-light); + margin: unset; } header > .selected > svg { @@ -446,4 +493,34 @@ iframe { width: 90vw; min-height: 4em; } + + community-info > .user-icon.verified { + width: 60px; + height: 60px; + } + + community-info > .user-icon { + width: 64px; + height: 64px; + } + + .community-top { + width: 90vw; + } + + .info-boxes-wrapper > div { + width: 100%; + } + + .community-info > .user-icon.verified { + border: solid 4px var(--btn); + width: 60px; + height: 60px; + } + + .community-info > .user-icon { + width: 64px; + height: 64px; + } + } \ No newline at end of file diff --git a/src/webfiles/web/me_page.ejs b/src/webfiles/web/me_page.ejs new file mode 100644 index 0000000..c3ce296 --- /dev/null +++ b/src/webfiles/web/me_page.ejs @@ -0,0 +1,118 @@ + + + Juxt - <%= user.user_id %> + + + + + + + + + + + <%if(user.profile_comment_visibility){%> <%}%> + + + + + <%if(user.profile_comment_visibility){%><%}%> + + + + + + + + <%if(user.profile_comment_visibility){%><%}%> + + + + + + +
+ <%- include('nav_bar', { selection: 0 }); %> +
+
+

<%= lang.global.user_page %>

+
+
+ +

<%= user.user_id %> (<%= user.pnid %>)✓

+
+

<%if(user.profile_comment_visibility){%> <%= user.profile_comment %> <%}else {%><%= lang.global.private %><%}%>

+
+
+

<%= lang.user_page.country %>

+

<%if(user.country_visibility){%><%=user.country%><%}else {%><%= lang.global.private %><%}%>

+
+
+

<%= lang.user_page.birthday %>

+

<%if(user.birthday_visibility){%><%=moment.utc(user.birthday).format("MMM Do")%><%}else {%><%= lang.global.private %><%}%>

+
+
+

<%= lang.user_page.game_experience %>

+

+ <%if(user.game_skill_visibility){%> + <%if(user.game_skill === 0) {%> + <%= lang.setup.experience_text.beginner %> + <%} else if(user.game_skill === 1) {%> + <%= lang.setup.experience_text.intermediate %> + <%} else if(user.game_skill === 2) {%> + <%= lang.setup.experience_text.expert %> + <%} else {%> + N/A + <%}%> + <%}else {%> + <%= lang.global.private %> + <%}%> +

+
+
+

<%= lang.global.yeahs %>

+

0

+
+
+
+ <% if(newPosts.length === 0) {%> +

<%= lang.activity_feed.empty %>

+ <%} else { %> + <% newPosts.forEach(function(post) { %> + <%- include('post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: false }); %> + <% }); %> + <%}%> +
+
+ +
+
+ + + diff --git a/src/webfiles/web/post_template.ejs b/src/webfiles/web/post_template.ejs index 6e5a229..d1dc1e0 100644 --- a/src/webfiles/web/post_template.ejs +++ b/src/webfiles/web/post_template.ejs @@ -3,7 +3,7 @@

<%= post.screen_name %>

- ✓ + ✓

<%= moment(post.created_at).fromNow() %> - <%= communityMap.get(post.community_id) %>

diff --git a/src/webfiles/web/user_page.ejs b/src/webfiles/web/user_page.ejs new file mode 100644 index 0000000..c3ce296 --- /dev/null +++ b/src/webfiles/web/user_page.ejs @@ -0,0 +1,118 @@ + + + Juxt - <%= user.user_id %> + + + + + + + + + + + <%if(user.profile_comment_visibility){%> <%}%> + + + + + <%if(user.profile_comment_visibility){%><%}%> + + + + + + + + <%if(user.profile_comment_visibility){%><%}%> + + + + + + +
+ <%- include('nav_bar', { selection: 0 }); %> +
+
+

<%= lang.global.user_page %>

+
+
+ +

<%= user.user_id %> (<%= user.pnid %>)✓

+
+

<%if(user.profile_comment_visibility){%> <%= user.profile_comment %> <%}else {%><%= lang.global.private %><%}%>

+
+
+

<%= lang.user_page.country %>

+

<%if(user.country_visibility){%><%=user.country%><%}else {%><%= lang.global.private %><%}%>

+
+
+

<%= lang.user_page.birthday %>

+

<%if(user.birthday_visibility){%><%=moment.utc(user.birthday).format("MMM Do")%><%}else {%><%= lang.global.private %><%}%>

+
+
+

<%= lang.user_page.game_experience %>

+

+ <%if(user.game_skill_visibility){%> + <%if(user.game_skill === 0) {%> + <%= lang.setup.experience_text.beginner %> + <%} else if(user.game_skill === 1) {%> + <%= lang.setup.experience_text.intermediate %> + <%} else if(user.game_skill === 2) {%> + <%= lang.setup.experience_text.expert %> + <%} else {%> + N/A + <%}%> + <%}else {%> + <%= lang.global.private %> + <%}%> +

+
+
+

<%= lang.global.yeahs %>

+

0

+
+
+
+ <% if(newPosts.length === 0) {%> +

<%= lang.activity_feed.empty %>

+ <%} else { %> + <% newPosts.forEach(function(post) { %> + <%- include('post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: false }); %> + <% }); %> + <%}%> +
+
+ +
+
+ + +