Leahnaya/juxtaposition-ui
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/juxtaposition-ui.git synced 2026-03-21 17:34:24 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added user and community page to web

Browse Source
This commit is contained in:
CaramelKat 2022-02-26 23:54:51 -06:00 committed by Jay
parent 532f79538e
commit 69df3f8c69
7 changed files with 434 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/services/juxt-web/routes/console/communities.js
View File

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

1
src/webfiles/web/all_communities.ejs
View File

@ -13,7 +13,6 @@
gtag('js', new Date());
gtag('config', 'UA-195842548-1');
</script>
</head>
<body>
<div id="main">

116
src/webfiles/web/community.ejs Normal file
View File

@ -0,0 +1,116 @@
<html>
<head>
<title>Juxt - <%= community.name %></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="<%= /*cdnURL*/ %>/css/juxt.css">
<script src="https://portal.cdn.pretendo.cc/js/pjax.min.js"></script>
<script src="https://portal.cdn.pretendo.cc/js/juxt.js"></script>
<link rel="manifest" href="/web/manifest.json">
<!-- Global site tag (gtag.js) - Google Analytics Testing-->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-195842548-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-195842548-1');
</script>
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="Juxt - <%= community.name %>">
<%if(user.profile_comment_visibility){%><meta itemprop="description" content="<%= community.description %>"> <%}%>
<meta itemprop="image" content="https://cdn.olv.pretendo.cc/icons/<%= community.community_id %>.png">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Juxt - <%= community.name %>"/>
<%if(user.profile_comment_visibility){%><meta property="og:description" content="<%= community.description %>"/><%}%>
<meta property="og:url" content="https://juxt.pretendo.cc/communities/<%= community.community_id %>/new"/>
<meta property="og:image" content="https://cdn.olv.pretendo.cc/icons/<%= community.community_id %>.png"/>
<meta property="og:site_name" content="Juxtaposition" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Juxt - <%= community.name %>"/>
<%if(user.profile_comment_visibility){%><meta name="twitter:description" content="<%= community.description %>"/><%}%>
<meta name="twitter:site" content="@PretendoNetwork"/>
<meta name="twitter:image" content="https://cdn.olv.pretendo.cc/icons/<%= community.community_id %>.png"/>
<meta name="twitter:creator" content="@PretendoNetwork"/>
</head>
<body>
<div id="main">
<%- include('nav_bar', { selection: 0 }); %>
<div id="toast"></div>
<div id="wrapper" class="community-page-post-box">
<h2 id="title" class="page-header"><%= lang.global.communities %></h2>
<div class="community-top">
<div class="community-info">
<img class="user-icon" src="https://cdn.olv.pretendo.cc/icons/<%= community.community_id %>.png">
<h2 class="community-title"><%= community.name %></h2>
</div>
<h4 class="community-description"><%= community.description %></h4>
<span class="community-page-follow-button-text" id="<%= community.community_id %>"></span>
<div class="info-boxes-wrapper">
<div>
<h4><%= lang.community.followers %></h4>
<h4><%= community.followers %></h4>
</div>
<div>
<h4><%= lang.community.posts %></h4>
<h4><%=totalNumPosts%></h4>
</div>
<div>
<h4><%= lang.community.tags %></h4>
<h4>N/A</h4>
</div>
</div>
</div>
<% if(newPosts.length === 0) {%>
<p class="no-posts-text"><%= lang.activity_feed.empty %></p>
<%} else { %>
<% newPosts.forEach(function(post) { %>
<%- include('post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: false }); %>
<% }); %>
<%}%>
</div>
<table class="community-page-posts-header switcher">
<tbody>
<tr>
<td>
<h4 id="recent-tab" onclick="loadPosts(0)" class="community-page-posts-header-tab active"><%= lang.community.recent %></h4>
</td>
<td>
<h4 id="popular-tab" onclick="loadPosts(1)" class="community-page-posts-header-tab"><%= lang.community.popular %></h4>
</td>
<td>
<h4 id="verified-tab" onclick="loadPosts(2)" class="community-page-posts-header-tab"><%= lang.community.verified %></h4>
</td>
</tr>
</tbody>
</table>
<div id="wrapper">
<button id="load-more-posts-button" data-offset="20" onclick="loadCommunityPosts(this)"><%= lang.global.more %></button>
</div>
</div>
<script>
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
document.getElementById('load-more-posts-button').click();
}
};
function copyToClipboard(text) {
let inputc = document.getElementsByTagName("header")[0].appendChild(document.createElement("input"));
inputc.value = text;
inputc.focus();
inputc.select();
document.execCommand('copy');
inputc.parentNode.removeChild(inputc);
Toast("Copied to clipboard.");
}
function Toast(text) {
var x = document.getElementById("toast");
x.innerText = text;
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>
</body>
</html>

81
src/webfiles/web/css/juxt.css
View File

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

118
src/webfiles/web/me_page.ejs Normal file
View File

@ -0,0 +1,118 @@
<html>
<head>
<title>Juxt - <%= user.user_id %></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="<%= /*cdnURL*/ %>/css/juxt.css">
<script src="https://portal.cdn.pretendo.cc/js/pjax.min.js"></script>
<script src="https://portal.cdn.pretendo.cc/js/juxt.js"></script>
<link rel="manifest" href="/web/manifest.json">
<!-- Global site tag (gtag.js) - Google Analytics Testing-->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-195842548-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-195842548-1');
</script>
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="Juxt - <%= user.user_id %>">
<%if(user.profile_comment_visibility){%><meta itemprop="description" content="<%= user.profile_comment %>"> <%}%>
<meta itemprop="image" content="https://pretendo-cdn.b-cdn.net/mii/<%= user.pid %>/smile_open_mouth.png">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Juxt - <%= user.user_id %>"/>
<%if(user.profile_comment_visibility){%><meta property="og:description" content="<%= user.profile_comment %>"/><%}%>
<meta property="og:url" content="https://juxt.pretendo.cc/users/show?pid=<%= user.pid %>"/>
<meta property="og:image" content="https://pretendo-cdn.b-cdn.net/mii/<%= user.pid %>/smile_open_mouth.png"/>
<meta property="og:site_name" content="Juxtaposition" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Juxt - <%= user.user_id %>"/>
<%if(user.profile_comment_visibility){%><meta name="twitter:description" content="<%= user.profile_comment %>"/><%}%>
<meta name="twitter:site" content="@PretendoNetwork"/>
<meta name="twitter:image" content="https://pretendo-cdn.b-cdn.net/mii/<%= user.pid %>/smile_open_mouth.png"/>
<meta name="twitter:creator" content="@PretendoNetwork"/>
</head>
<body>
<div id="main">
<%- include('nav_bar', { selection: 0 }); %>
<div id="toast"></div>
<div id="wrapper">
<h2 id="title" class="page-header"><%= lang.global.user_page %></h2>
<div class="community-top">
<div class="community-info">
<img class="user-icon <%if(user.official) {%>verified<%}%>" src="https://pretendo-cdn.b-cdn.net/mii/<%= user.pid %>/normal_face.png">
<h2 class="community-title"><%= user.user_id %> (<%= user.pnid %>)<span class="verified-badge" style="<%if(!user.official) {%>display: none;<%}%>">✓</span></h2>
</div>
<h4 class="community-description"><%if(user.profile_comment_visibility){%> <%= user.profile_comment %> <%}else {%><%= lang.global.private %><%}%></h4>
<div class="info-boxes-wrapper">
<div>
<h4><%= lang.user_page.country %></h4>
<h4><%if(user.country_visibility){%><%=user.country%><%}else {%><%= lang.global.private %><%}%></h4>
</div>
<div>
<h4><%= lang.user_page.birthday %></h4>
<h4><%if(user.birthday_visibility){%><%=moment.utc(user.birthday).format("MMM Do")%><%}else {%><%= lang.global.private %><%}%></h4>
</div>
<div>
<h4><%= lang.user_page.game_experience %></h4>
<h4>
<%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 %>
<%}%>
</h4>
</div>
<div>
<h4><%= lang.global.yeahs %></h4>
<h4>0</h4>
</div>
</div>
</div>
<% if(newPosts.length === 0) {%>
<p class="no-posts-text"><%= lang.activity_feed.empty %></p>
<%} else { %>
<% newPosts.forEach(function(post) { %>
<%- include('post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: false }); %>
<% }); %>
<%}%>
</div>
<div id="wrapper">
<button id="load-more-posts-button" data-offset="20" onclick="loadUserPosts(this, '<%= user.pid %>')"><%= lang.global.more %></button>
</div>
</div>
<script>
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
document.getElementById('load-more-posts-button').click();
}
};
function copyToClipboard(text) {
let inputc = document.getElementsByTagName("header")[0].appendChild(document.createElement("input"));
inputc.value = text;
inputc.focus();
inputc.select();
document.execCommand('copy');
inputc.parentNode.removeChild(inputc);
Toast("Copied to clipboard.");
}
function Toast(text) {
var x = document.getElementById("toast");
x.innerText = text;
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>
</body>
</html>

2
src/webfiles/web/post_template.ejs
View File

@ -3,7 +3,7 @@
<img class="user-icon <%if(post.verified) {%>verified<%}%>" src="https://pretendo-cdn.b-cdn.net<%= post.mii_face_url.substr(26) %>" data-pjax="/users/show?pid=<%= post.pid %>">
<div class="post-meta-wrapper">
<h3><a href="/users/show?pid=<%= post.pid %>"><%= post.screen_name %></a></h3>
<span class="verified-badge" style="<%if(!post.verified) {%>display: none;<%}%>" data-pjax="/users/show?pid=<%= post.pid %>">✓</span>
<span class="verified-badge" style="<%if(!post.verified) {%>display: none;<%}%>">✓</span>
<h4><%= moment(post.created_at).fromNow() %> - <a href="/communities/<%=post.community_id%>"><%= communityMap.get(post.community_id) %></a></h4>
</div>
</div>

118
src/webfiles/web/user_page.ejs Normal file
View File

@ -0,0 +1,118 @@
<html>
<head>
<title>Juxt - <%= user.user_id %></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="<%= /*cdnURL*/ %>/css/juxt.css">
<script src="https://portal.cdn.pretendo.cc/js/pjax.min.js"></script>
<script src="https://portal.cdn.pretendo.cc/js/juxt.js"></script>
<link rel="manifest" href="/web/manifest.json">
<!-- Global site tag (gtag.js) - Google Analytics Testing-->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-195842548-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-195842548-1');
</script>
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="Juxt - <%= user.user_id %>">
<%if(user.profile_comment_visibility){%><meta itemprop="description" content="<%= user.profile_comment %>"> <%}%>
<meta itemprop="image" content="https://pretendo-cdn.b-cdn.net/mii/<%= user.pid %>/smile_open_mouth.png">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Juxt - <%= user.user_id %>"/>
<%if(user.profile_comment_visibility){%><meta property="og:description" content="<%= user.profile_comment %>"/><%}%>
<meta property="og:url" content="https://juxt.pretendo.cc/users/show?pid=<%= user.pid %>"/>
<meta property="og:image" content="https://pretendo-cdn.b-cdn.net/mii/<%= user.pid %>/smile_open_mouth.png"/>
<meta property="og:site_name" content="Juxtaposition" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Juxt - <%= user.user_id %>"/>
<%if(user.profile_comment_visibility){%><meta name="twitter:description" content="<%= user.profile_comment %>"/><%}%>
<meta name="twitter:site" content="@PretendoNetwork"/>
<meta name="twitter:image" content="https://pretendo-cdn.b-cdn.net/mii/<%= user.pid %>/smile_open_mouth.png"/>
<meta name="twitter:creator" content="@PretendoNetwork"/>
</head>
<body>
<div id="main">
<%- include('nav_bar', { selection: 0 }); %>
<div id="toast"></div>
<div id="wrapper">
<h2 id="title" class="page-header"><%= lang.global.user_page %></h2>
<div class="community-top">
<div class="community-info">
<img class="user-icon <%if(user.official) {%>verified<%}%>" src="https://pretendo-cdn.b-cdn.net/mii/<%= user.pid %>/normal_face.png">
<h2 class="community-title"><%= user.user_id %> (<%= user.pnid %>)<span class="verified-badge" style="<%if(!user.official) {%>display: none;<%}%>">✓</span></h2>
</div>
<h4 class="community-description"><%if(user.profile_comment_visibility){%> <%= user.profile_comment %> <%}else {%><%= lang.global.private %><%}%></h4>
<div class="info-boxes-wrapper">
<div>
<h4><%= lang.user_page.country %></h4>
<h4><%if(user.country_visibility){%><%=user.country%><%}else {%><%= lang.global.private %><%}%></h4>
</div>
<div>
<h4><%= lang.user_page.birthday %></h4>
<h4><%if(user.birthday_visibility){%><%=moment.utc(user.birthday).format("MMM Do")%><%}else {%><%= lang.global.private %><%}%></h4>
</div>
<div>
<h4><%= lang.user_page.game_experience %></h4>
<h4>
<%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 %>
<%}%>
</h4>
</div>
<div>
<h4><%= lang.global.yeahs %></h4>
<h4>0</h4>
</div>
</div>
</div>
<% if(newPosts.length === 0) {%>
<p class="no-posts-text"><%= lang.activity_feed.empty %></p>
<%} else { %>
<% newPosts.forEach(function(post) { %>
<%- include('post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: false }); %>
<% }); %>
<%}%>
</div>
<div id="wrapper">
<button id="load-more-posts-button" data-offset="20" onclick="loadUserPosts(this, '<%= user.pid %>')"><%= lang.global.more %></button>
</div>
</div>
<script>
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
document.getElementById('load-more-posts-button').click();
}
};
function copyToClipboard(text) {
let inputc = document.getElementsByTagName("header")[0].appendChild(document.createElement("input"));
inputc.value = text;
inputc.focus();
inputc.select();
document.execCommand('copy');
inputc.parentNode.removeChild(inputc);
Toast("Copied to clipboard.");
}
function Toast(text) {
var x = document.getElementById("toast");
x.innerText = text;
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>
</body>
</html>