Redesigned community search bar in portal. Added view all communities button.

This commit is contained in:
CaramelKat
2021-03-31 23:30:12 -05:00
committed by jay.poff@outlook.com
parent 2374deadac
commit 720b49b963
22 changed files with 180 additions and 137 deletions

View File

@@ -18,7 +18,7 @@ router.get('/me', function (req, res) {
pid = 1000000000;
let user = await database.getUserByPID(pid);
let newPosts = await database.getPostsByUserID(pid);
let numPosts = await database.getNumberPostsByUserID(pid);
let numPosts = await database.getNumberUserPostsByID(pid);
if(isAJAX) {
res.render('ctr/ctr_user_page_ajax.ejs', {
// EJS variable and server-side variable

View File

@@ -44,7 +44,39 @@ router.get('/', function (req, res) {
});
});
router.get('/:communityID/new', function (req, res) {
router.get('/all', function (req, res) {
res.header('X-Nintendo-WhiteList','1|http,youtube.com,,2|https,youtube.com,,2|http,.youtube.com,,2|https,.youtube.com,,2|http,.ytimg.com,,2|https,.ytimg.com,,2|http,.googlevideo.com,,2|https,.googlevideo.com,,2|https,youtube.com,/embed/,6|https,youtube.com,/e/,6|https,youtube.com,/v/,6|https,www.youtube.com,/embed/,6|https,www.youtube.com,/e/,6|https,www.youtube.com,/v/,6|https,youtube.googleapis.com,/e/,6|https,youtube.googleapis.com,/v/,6|http,maps.googleapis.com,/maps/api/streetview,2|https,maps.googleapis.com,/maps/api/streetview,2|http,cbk0.google.com,/cbk,2|https,cbk0.google.com,/cbk,2|http,cbk1.google.com,/cbk,2|https,cbk1.google.com,/cbk,2|http,cbk2.google.com,/cbk,2|https,cbk2.google.com,/cbk,2|http,cbk3.google.com,/cbk,2|https,cbk3.google.com,/cbk,2|https,.cloudfront.net,,2|https,www.google-analytics.com,/,2|https,stats.g.doubleclick.net,,2|https,www.google.com,/ads/,2|https,ssl.google-analytics.com,,2|http,fonts.googleapis.com,,2|fonts.googleapis.com,,2|https,www.googletagmanager.com,,2');
var isAJAX = ((req.query.ajax+'').toLowerCase() === 'true')
database.connect().then(async e => {
let communities = await database.getCommunities(90);
if(isAJAX) {
res.render('portal/portal_all_communities_ajax.ejs', {
communities: communities,
});
}
else {
res.render('portal/portal_all_communities.ejs', {
communities: communities,
});
}
}).catch(error => {
res.set("Content-Type", "application/xml");
res.statusCode = 400;
response = {
result: {
has_error: 1,
version: 1,
code: 400,
error_code: 15,
message: "SERVER_ERROR"
}
};
res.send("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n" + xml(response));
});
});
router.get('/:communityID', function (req, res) {
res.header('X-Nintendo-WhiteList','1|http,youtube.com,,2|https,youtube.com,,2|http,.youtube.com,,2|https,.youtube.com,,2|http,.ytimg.com,,2|https,.ytimg.com,,2|http,.googlevideo.com,,2|https,.googlevideo.com,,2|https,youtube.com,/embed/,6|https,youtube.com,/e/,6|https,youtube.com,/v/,6|https,www.youtube.com,/embed/,6|https,www.youtube.com,/e/,6|https,www.youtube.com,/v/,6|https,youtube.googleapis.com,/e/,6|https,youtube.googleapis.com,/v/,6|http,maps.googleapis.com,/maps/api/streetview,2|https,maps.googleapis.com,/maps/api/streetview,2|http,cbk0.google.com,/cbk,2|https,cbk0.google.com,/cbk,2|http,cbk1.google.com,/cbk,2|https,cbk1.google.com,/cbk,2|http,cbk2.google.com,/cbk,2|https,cbk2.google.com,/cbk,2|http,cbk3.google.com,/cbk,2|https,cbk3.google.com,/cbk,2|https,.cloudfront.net,,2|https,www.google-analytics.com,/,2|https,stats.g.doubleclick.net,,2|https,www.google.com,/ads/,2|https,ssl.google-analytics.com,,2|http,fonts.googleapis.com,,2|fonts.googleapis.com,,2|https,www.googletagmanager.com,,2');
var isAJAX = ((req.query.ajax+'').toLowerCase() === 'true')
database.connect().then(async e => {

View File

@@ -48,7 +48,7 @@ router.get('/', function (req, res) {
{
let popularCommunities = await database.getMostPopularCommunities(9);
let newCommunities = await database.getNewCommunities(6);
res.render('portal/portal_show.ejs', {
res.render('portal/portal_communities.ejs', {
popularCommunities: popularCommunities,
newCommunities: newCommunities
});

View File

@@ -1,15 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.111" height="15.111" viewBox="0 0 15.111 15.111">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #673db6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
</style>
</defs>
<path id="Path_52" data-name="Path 52" class="cls-1" d="M15.611,10.056A5.556,5.556,0,1,1,10.056,4.5,5.556,5.556,0,0,1,15.611,10.056Z" transform="translate(-3.5 -3.5)"/>
<path id="Path_53" data-name="Path 53" class="cls-1" d="M28,28l-3.021-3.021" transform="translate(-14.561 -14.561)"/>
</svg>

Before

Width:  |  Height:  |  Size: 600 B

View File

@@ -1,14 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="5.849" height="5.849" viewBox="0 0 5.849 5.849">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #673db6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
</style>
</defs>
<path id="Path_53" data-name="Path 53" class="cls-1" d="M28,28l-3.021-3.021" transform="translate(-23.561 -23.561)"/>
</svg>

Before

Width:  |  Height:  |  Size: 425 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 761 KiB

File diff suppressed because one or more lines are too long

View File

@@ -1,15 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.111" height="15.111" viewBox="0 0 15.111 15.111">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #673db6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
</style>
</defs>
<path id="Path_52" data-name="Path 52" class="cls-1" d="M15.611,10.056A5.556,5.556,0,1,1,10.056,4.5,5.556,5.556,0,0,1,15.611,10.056Z" transform="translate(-3.5 -3.5)"/>
<path id="Path_53" data-name="Path 53" class="cls-1" d="M28,28l-3.021-3.021" transform="translate(-14.561 -14.561)"/>
</svg>

Before

Width:  |  Height:  |  Size: 600 B

View File

@@ -1,14 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="5.849" height="5.849" viewBox="0 0 5.849 5.849">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #673db6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
</style>
</defs>
<path id="Path_53" data-name="Path 53" class="cls-1" d="M28,28l-3.021-3.021" transform="translate(-23.561 -23.561)"/>
</svg>

Before

Width:  |  Height:  |  Size: 425 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 125 KiB

View File

@@ -62,7 +62,7 @@ function exit() {
wiiuBrowser.closeApplication();
}
function loadTab(element) {
if(/*element.getAttribute('data-url') === 'activity-feed' || */element.getAttribute('data-url') === 'news')
if(element.getAttribute('data-url') === 'activity-feed' || element.getAttribute('data-url') === 'news')
{
alert('Not Implemented. Check back soon!');
return;
@@ -98,13 +98,13 @@ function loadCommunityPage(communityID) {
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("main").innerHTML = this.responseText;
history.pushState({}, 'Community', '/communities/' + communityID + '/new');
history.pushState({}, 'Community', '/communities/' + communityID);
}
else if (this.readyState === 4){
wiiuErrorViewer.openByCodeAndMessage(5981000 + this.status, 'Error: "' + this.statusText + '"\nPlease send code to Jemma on Discord with what you were doing');
}
};
xhttp.open("GET", "/communities/" + communityID + "/new" + '?ajax=true', true);
xhttp.open("GET", "/communities/" + communityID + '?ajax=true', true);
xhttp.send();
wiiuSound.playSoundByName("SE_WAVE_MENU", 1);
@@ -516,7 +516,7 @@ function loadPosts(type) {
}
else if(this.readyState === 4 && this.status === 204)
{
document.getElementById('community-posts-inner-body').innerHTML = '<p>No Posts</p>';
document.getElementById('community-posts-inner-body').innerHTML = '<p class="no-posts-text">No Posts</p>';
wiiuBrowser.showLoadingIcon(false);
}
else if (this.readyState === 4){

View File

@@ -30,59 +30,35 @@
<li id="nav-bar-exit" class="" onclick="exit()"><a href="">Close</a></li>
</menu>
<div id="main">
<h1 class="page-header">Communities</h1>
<!--<div class="search-container">
<form action="/">
<img id="search-icon" src="/icons/Icon-feather-search.svg"></img>
<h1 class="page-header">All Communities</h1>
<div class="search-container">
<form action="/communities/search">
<div id="search-icon"></div>
<input id="search-bar" type="text" placeholder="Search communities..." name="search">
</form>
</div>-->
<div id="popular" class="communities-wrapper">
<h1 class="communities-header">Popular Places</h1>
<table>
<tbody>
<tr>
<% for(var i = 0; i < popularCommunities.length; i++) {%>
<td>
<div class="community-list-wrapper" onclick="loadCommunityPage('<%= popularCommunities[i].community_id %>')">
<img class="community-list-icon" src="<%= popularCommunities[i].browser_icon %>">
<h2 class="community-list-title"><%= popularCommunities[i].name %></h2>
<h4 class="community-list-followers"><%= popularCommunities[i].followers %> followers</h4>
</div>
</td>
<% if( (i + 1) % 3 === 0) { %>
</tr>
<tr>
<% } %>
<% } %>
</tr>
</tbody>
</table>
</div>
<div id="new" class="communities-wrapper">
<h1 class="communities-header">New communities</h1>
<table>
<div id="popular" class="communities-wrapper">
<table style="margin-top: 30px">
<tbody>
<tr>
<% for(var j = 0; j < newCommunities.length; j++) {%>
<% for(var h = 0; h < 5; h++) { for(var i = 0; i < communities.length; i++) {%>
<td>
<div class="community-list-wrapper" onclick="loadCommunityPage('<%= newCommunities[j].community_id %>')">
<img class="community-list-icon" src="<%= newCommunities[j].browser_icon %>">
<h2 class="community-list-title"><%= newCommunities[j].name %></h2>
<h4 class="community-list-followers"><%= newCommunities[j].followers %> followers</h4>
<div class="community-list-wrapper" onclick="loadCommunityPage('<%= communities[i].community_id %>')">
<img class="community-list-icon" src="<%= communities[i].browser_icon %>">
<h2 class="community-list-title"><%= communities[i].name %></h2>
<h4 class="community-list-followers"><%= communities[i].followers %> followers</h4>
</div>
</td>
<% if( (j + 1) % 3 === 0) { %>
<% if( (i + 1) % 3 === 0) { %>
</tr>
<tr>
<% } %>
<% } %>
<% }} %>
</tr>
</tbody>
</table>
</div>
</div>
<body onload="stopLoading();wiiuSound.playSoundByName('BGM_OLV_MAIN', 3);">
<body onload="stopLoading()">
</body>
</html>

View File

@@ -0,0 +1,28 @@
<h1 class="page-header">All Communities</h1>
<div class="search-container">
<form action="/communities/search">
<div id="search-icon"></div>
<input id="search-bar" type="text" placeholder="Search communities..." name="search">
</form>
</div>
<div id="popular" class="communities-wrapper">
<table style="margin-top: 30px">
<tbody>
<tr>
<% for(var h = 0; h < 5; h++) { for(var i = 0; i < communities.length; i++) {%>
<td>
<div class="community-list-wrapper" onclick="loadCommunityPage('<%= communities[i].community_id %>')">
<img class="community-list-icon" src="<%= communities[i].browser_icon %>">
<h2 class="community-list-title"><%= communities[i].name %></h2>
<h4 class="community-list-followers"><%= communities[i].followers %> followers</h4>
</div>
</td>
<% if( (i + 1) % 3 === 0) { %>
</tr>
<tr>
<% } %>
<% }} %>
</tr>
</tbody>
</table>
</div>

View File

@@ -38,7 +38,18 @@
</form>
</div>-->
<div id="popular" class="communities-wrapper">
<h1 class="communities-header">Popular Places</h1>
<table style="padding-top: 20px">
<tbody>
<tr>
<td>
<h1 class="communities-header">Popular Places</h1>
</td>
<td>
<button class="outlined-button" style="margin-left: 575px; margin-top: -20px" onclick="loadCommunityPage('all')">Show All</button>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
@@ -82,6 +93,6 @@
</table>
</div>
</div>
<body onload="stopLoading()">
<body onload="stopLoading();wiiuSound.playSoundByName('BGM_OLV_MAIN', 3);">
</body>
</html>

View File

@@ -6,7 +6,18 @@
</form>
</div>-->
<div id="popular" class="communities-wrapper">
<h1 class="communities-header">Popular Places</h1>
<table style="padding-top: 20px">
<tbody>
<tr>
<td>
<h1 class="communities-header">Popular Places</h1>
</td>
<td>
<button class="outlined-button" style="margin-left: 560px; margin-top: -30px" onclick="loadCommunityPage('all')">Show All</button>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>

View File

@@ -192,7 +192,7 @@
</table>
<div id="community-posts-inner-body">
<% if(totalNumPosts === 0) {%>
<p>No Posts</p>
<p class="no-posts-text">No Posts</p>
<%} else { %>
<button id="load-more-posts-button" onclick="loadCommunityPosts()">Load More Posts</button>
<% newPosts.forEach(function(post) { %>

View File

@@ -165,7 +165,7 @@
</table>
<div id="community-posts-inner-body">
<% if(totalNumPosts === 0) {%>
<p>No Posts</p>
<p class="no-posts-text">No Posts</p>
<%} else { %>
<button id="load-more-posts-button" onclick="loadCommunityPosts()">Load More Posts</button>
<% newPosts.forEach(function(post) { %>

View File

@@ -185,7 +185,7 @@
</div>
<div class="community-page-posts-wrapper" <% if(numPosts === 0) {%>style="height: 110px"<%}%>>
<% if(numPosts === 0) {%>
<p style="font-size: xx-large; margin-left: 443px;">No Posts</p>
<p class="no-posts-text">No Posts</p>
<%} else { %>
<button id="load-more-posts-button" onclick="loadUserPosts()">Load More Posts</button>
<% newPosts.forEach(function(post) { %>

View File

@@ -153,7 +153,7 @@
</div>
<div class="community-page-posts-wrapper" <% if(numPosts === 0) {%>style="height: 110px"<%}%>>
<% if(numPosts === 0) {%>
<p style="font-size: xx-large; margin-left: 443px;">No Posts</p>
<p class="no-posts-text">No Posts</p>
<%} else { %>
<button id="load-more-posts-button" onclick="loadUserPosts()">Load More Posts</button>
<% newPosts.forEach(function(post) { %>

View File

@@ -123,7 +123,7 @@
</div>
<div class="community-page-posts-wrapper">
<% if(numPosts === 0) {%>
<p>No Posts</p>
<p class="no-posts-text">No Posts</p>
<%} else { %>
<button id="load-more-posts-button" onclick="loadUserPosts()">Load More Posts</button>
<% newPosts.forEach(function(post) { %>
@@ -136,7 +136,7 @@
<span class="community-page-verified-user-badge community-page-verified" style="display: none;"></span>
<%}%>
<h2 class="community-page-post-username"><%= post.screen_name %></h2>
<h4 class="community-page-post-time-stamp"><%= post.created_at %> - <%= communityMap.get(post.title_id) %></h4>
<h4 class="community-page-post-time-stamp"><%= moment(post.created_at).fromNow()%> - <%= communityMap.get(post.title_id) %></h4>
<div class="community-page-post-yeah-button-wrapper <%if(user.likes.indexOf(post.id) !== -1){ %> selected <%}%>">
<div class="community-page-post-yeah-button" onclick="yeah(this.parentNode, <%= post.id %>)"></div>

View File

@@ -91,7 +91,7 @@
</div>
<div class="community-page-posts-wrapper">
<% if(numPosts === 0) {%>
<p>No Posts</p>
<p class="no-posts-text">No Posts</p>
<%} else { %>
<button id="load-more-posts-button" onclick="loadUserPosts()">Load More Posts</button>
<% newPosts.forEach(function(post) { %>
@@ -104,7 +104,7 @@
<span class="community-page-verified-user-badge community-page-verified" style="display: none;"></span>
<%}%>
<h2 class="community-page-post-username"><%= post.screen_name %></h2>
<h4 class="community-page-post-time-stamp"><%= post.created_at %> - <%= communityMap.get(post.title_id) %></h4>
<h4 class="community-page-post-time-stamp"><%= moment(post.created_at).fromNow()%> - <%= communityMap.get(post.title_id) %></h4>
<div class="community-page-post-yeah-button-wrapper <%if(user.likes.indexOf(post.id) !== -1){ %> selected <%}%>">
<div class="community-page-post-yeah-button" onclick="yeah(this.parentNode, <%= post.id %>)"></div>