Leahnaya/juxtaposition-ui
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/juxtaposition-ui.git synced 2026-04-26 01:47:21 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added notifications page to web

Browse Source
This commit is contained in:
CaramelKat 2022-02-26 17:14:42 -06:00 committed by Jay
parent 570d4c079c
commit 532f79538e
7 changed files with 175 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/services/juxt-web/routes/web/login.js
View File

@ -16,7 +16,7 @@ router.post('/', async (req, res) => {
const { username, password } = req.body;
let user = await database.getUserByUsername(username);
if(!user) {
res.cookie('error', 'User not found.', { domain: '.pretendo.cc' });
res.cookie('error', 'User not found.', { domain: '.miiverse.cc' });
return res.redirect('/account/login');
}
let password_hash = await util.data.nintendoPasswordHash(password, user.pid);
@ -51,7 +51,7 @@ router.post('/', async (req, res) => {
if (!error && response.statusCode === 200) {
parseString(body, async function (err, result) {
token = result.service_token.token[0];
res.cookie('access_token', token, { domain : '.pretendo.cc' });
res.cookie('access_token', token, { domain : '.miiverse.cc' });
res.redirect('/activity-feed');
});
}

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

@ -17,7 +17,7 @@
</head>
<body>
<div id="main">
<%- include('nav_bar', { selection: 1 }); %>
<%- include('nav_bar', { selection: 2 }); %>
<div id="toast"></div>
<div id="wrapper">
<h2 id="title" class="page-header"><%= lang.all_communities.text %></h2>

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

@ -17,7 +17,7 @@
</head>
<body>
<div id="main">
<%- include('nav_bar', { selection: 1 }); %>
<%- include('nav_bar', { selection: 2 }); %>
<div id="toast"></div>
<div id="wrapper">
<h2 id="title" class="page-header"><%= lang.global.communities %></h2>

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

@ -41,6 +41,16 @@ a:hover {
list-style: none;
user-select: none;
}
.badge {
position: absolute;
background: var(--btn);
padding: 3px 8px;
border-radius: 1em;
color: var(--text);
margin-left: 1.25em;
}
body {
background-color: var(--background);
margin: 0;
@ -55,9 +65,11 @@ header {
flex-direction: column;
position: fixed;
}
header a {
header > a, header > a:hover {
text-decoration: none;
}
header .logo-link, header .logo-link svg {
display: block;
width: 5em;
@ -83,10 +95,22 @@ header > a > p {
padding-left: 1em;
}
header > .selected {
background: var(--background-alt);
border-radius: 1em;
font-weight: bold;
color: var(--theme-light);
}
header > .selected > svg {
stroke: var(--theme-light);
}
#main {
width: 95%;
max-width: 1300px;
margin: 0 auto;
overflow: hidden;
}
.post-meta-wrapper {
@ -139,6 +163,20 @@ header > a > p {
background: var(--text-secondary);
}
.user-icon.verified {
border: solid 4px var(--btn);
width: 60px;
height: 60px;
}
.verified-badge {
background: var(--btn);
padding: 1px 5px;
border-radius: 1em;
color: var(--text);
margin-left: 0.25em;
}
.painting {
image-rendering: pixelated;
border-radius: 1em;
@ -225,7 +263,6 @@ header > a > p {
display: grid;
grid-template-areas: 'icon main' 'icon footer';
gap: 0;
width: fit-content;
cursor: pointer;
background: var(--background-alt);
padding: 1em;
@ -263,7 +300,45 @@ header > a > p {
iframe {
width: 100%;
height: fit-content;
height: 20em;
border-radius: 1em;
margin-top: 1em;
}
.notifications-list-content {
background: var(--background-alt);
width: 600px;
min-height: 4em;
margin: 0;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 2px solid var(--btn-secondary);
user-select: none;
cursor: pointer;
}
.notifications-list-content:hover {
text-decoration: none;
background: var(--btn-secondary);
}
.notifications-list-content:first-of-type {
border-top-left-radius: 1em;
border-top-right-radius: 1em;
}
.notifications-list-content:last-of-type {
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
}
.unread-badge {
padding: 0.25em;
border-radius: 1em;
margin: 1em;
background-color: var(--btn);
}
@media screen and (max-width: 1350px) {
@ -296,6 +371,13 @@ iframe {
width: 2em;
height: 2em;
}
.user-icon.verified {
border: none;
width: 2em;
height: 2em;
}
.post-buttons-wrapper {
margin-top: 0.5em;
margin-bottom: -0.5em;
@ -310,6 +392,7 @@ iframe {
bottom: 0;
border-top: 1px solid var(--text-secondary);
}
header > a:first-child {
display: none;
}
@ -325,6 +408,17 @@ iframe {
header svg {
scale: 0.75;
}
header > .selected {
background: var(--background-alt);
border-radius: 1em;
font-weight: bold;
color: var(--theme-light);
}
header > .selected > svg {
stroke: var(--theme-light);
}
#load-more-posts-button {
width: 95vw;
@ -347,4 +441,9 @@ iframe {
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.notifications-list-content {
width: 90vw;
min-height: 4em;
}
}

12
src/webfiles/web/nav_bar.ejs
View File

@ -2,39 +2,41 @@
<a href="/" class="logo-link">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.63 100.33" style=""><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#9d6ff3;}.cls-3{font-size:30.54px;fill:#59c9a5;font-family:Poppins-Bold, Poppins;font-weight:700;}</style></defs><path class="cls-1" d="M25.62,0H40V40.2c0,12.69-7.73,19.41-19.41,19.41C8.49,59.61,0,52.55,0,39.28H14.28c0,5,2.19,7.47,5.88,7.47,3.45,0,5.46-2.18,5.46-6.55Z"/><path class="cls-1" d="M51.33,0H65.69V35.33c0,7,3.45,11,10.25,11s10.42-4,10.42-11V0h14.37v35.2c0,16.3-11.43,24.37-25,24.37S51.33,51.54,51.33,35.24Z"/><path class="cls-1" d="M134.92,41,124.33,59H108l18.91-30L107.61,0h16.72l11.85,17.81L146.6,0h16.29L144.16,29.78,163.65,59H146.93Z"/><path class="cls-2" d="M119.86,18.41,126.94,29,108,59h16.3L134.92,41l12,18.06h16.72L144.16,29.78,162.89,0H146.6L136.18,17.85l-7-10.54A70.15,70.15,0,0,0,119.86,18.41Z"/><path class="cls-2" d="M167.68,0H213.3V11.51H197.67V59H183.31V11.51H167.68Z"/><circle class="cls-2" cx="225.67" cy="52.02" r="6.96"/><text class="cls-3" transform="translate(77.71 100.33)">BETA</text></svg>
</a>
<a href="/users/me">
<a href="/users/me" <% if(selection === 0) {%>class="selected"<%}%>>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="48" viewBox="0 0 24 24" fill="none" stroke="#A1A8D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
<p><%= lang.global.user_page %></p>
</a>
<a href="/activity-feed">
<a href="/activity-feed" <% if(selection === 1) {%>class="selected"<%}%>>
<svg id="test" xmlns="http://www.w3.org/2000/svg" width="40" height="48" viewBox="0 0 24 24" fill="none" stroke="#A1A8D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-inbox">
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>
<p><%= lang.global.activity_feed %></p>
</a>
<a href="/communities">
<a href="/communities" <% if(selection === 2) {%>class="selected"<%}%>>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="48" viewBox="0 0 24 24" fill="none" stroke="#A1A8D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<p><%= lang.global.communities %></p>
</a>
<a href="/messages">
<a href="/messages" <% if(selection === 3) {%>class="selected"<%}%>>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="48" viewBox="0 0 24 24" fill="none" stroke="#A1A8D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
<span id="messages-badge" class="badge" style=""></span>
<p><%= lang.global.messages %></p>
</a>
<a href="/news">
<a href="/news" <% if(selection === 4) {%>class="selected"<%}%>>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="48" viewBox="0 0 24 24" fill="none" stroke="#A1A8D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
</svg>
<span id="news-badge" class="badge" style=""></span>
<p><%= lang.global.notifications %></p>
</a>
</header>

60
src/webfiles/web/notifications.ejs Normal file
View File

@ -0,0 +1,60 @@
<html>
<head>
<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>
</head>
<body>
<div id="main">
<%- include('nav_bar', { selection: 4 }); %>
<div id="toast"></div>
<div id="wrapper">
<h2 id="title" class="page-header"><%= lang.global.notifications %></h2>
<% if(user.notification_list.length === 0) {%>
<p class="no-posts-text"><%= lang.notifications.none %></p>
<%} else { %>
<% for(let i = user.notification_list.length - 1; i >= 0; i--) { %>
<% var content; if(user.notification_list[i].content.indexOf('NEW_FOLLOWER') !== -1) content = user.notification_list[i].content.replace('NEW_FOLLOWER', lang.notifications.new_follower); else content = user.notification_list[i].content %>
<a class="notifications-list-content" href="<%=user.notification_list[i].link%>">
<div class="unread-badge" <%if(user.notification_list[i].read) {%>style="background-color: unset"<%}%>></div>
<h3><%= content %><span style="color: var(--text-secondary)"> - <%= moment(user.notification_list[i].created_at).fromNow() %></span></h3>
</a>
<%}%>
<%}%>
</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>

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

@ -1,14 +1,9 @@
<div class="posts-wrapper" id="<%= post.id %>">
<div class="post-user-info-wrapper" id="<%= post.id %>">
<%if(post.verified) {%>
<img class="user-icon verified" src="https://pretendo-cdn.b-cdn.net<%= post.mii_face_url.substr(26) %>" data-pjax="/users/show?pid=<%= post.pid %>">
<span class="community-page-verified-user-badge community-page-verified" style="" data-pjax="/users/show?pid=<%= post.pid %>"></span>
<%} else {%>
<img class="user-icon" src="https://pretendo-cdn.b-cdn.net<%= post.mii_face_url.substr(26) %>" data-pjax="/users/show?pid=<%= post.pid %>">
<span class="community-page-verified-user-badge community-page-verified" style="display: none;" data-pjax="/users/show?pid=<%= post.pid %>"></span>
<%}%>
<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>
<h4><%= moment(post.created_at).fromNow() %> - <a href="/communities/<%=post.community_id%>"><%= communityMap.get(post.community_id) %></a></h4>
</div>
</div>