mirror of
https://github.com/PretendoNetwork/juxtaposition-ui.git
synced 2026-08-27 03:36:03 -05:00
Redesign of web interface. Added communities and all communities page
This commit is contained in:
Jay
@@ -12,7 +12,6 @@ router.get('/', async function (req, res) {
|
||||
let popularCommunities = await database.getMostPopularCommunities(9);
|
||||
let newCommunities = await database.getNewCommunities(6);
|
||||
res.render(req.directory + '/communities.ejs', {
|
||||
// EJS variable and server-side variable
|
||||
popularCommunities: popularCommunities,
|
||||
newCommunities: newCommunities,
|
||||
cdnURL: config.CDN_domain,
|
||||
|
||||
@@ -71,14 +71,6 @@ router.post('/', async (req, res) => {
|
||||
return res.send(response);
|
||||
}
|
||||
});
|
||||
|
||||
/*const tokens = apiResponse.body;
|
||||
|
||||
response.cookie('refresh_token', tokens.refresh_token, { domain : '.pretendo.cc' });
|
||||
response.cookie('access_token', tokens.access_token, { domain : '.pretendo.cc' });
|
||||
response.cookie('token_type', tokens.token_type, { domain : '.pretendo.cc' });
|
||||
|
||||
response.redirect('/account');*/
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<div class="bottom-screen">
|
||||
<div class="community-page-posts-wrapper">
|
||||
|
||||
<div id="community-posts-inner-body">
|
||||
<div id="wrapper">
|
||||
|
||||
<% if(totalNumPosts === 0) {%>
|
||||
<p class="no-posts-text">No Posts</p>
|
||||
|
||||
@@ -148,7 +148,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="community-posts-inner-body">
|
||||
<div id="wrapper">
|
||||
|
||||
<% if(totalNumPosts === 0) {%>
|
||||
<p class="no-posts-text">No Posts</p>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
<div class="bottom-screen">
|
||||
<div class="community-page-posts-wrapper">
|
||||
<div id="community-posts-inner-body">
|
||||
<div id="wrapper">
|
||||
|
||||
<% if(posts.length === 0) {%>
|
||||
<p class="no-posts-text"><%= lang.activity_feed.empty %></p>
|
||||
|
||||
@@ -773,13 +773,13 @@ function loadPosts(type) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
document.getElementById('community-posts-inner-body').innerHTML = this.responseText;
|
||||
document.getElementById('wrapper').innerHTML = this.responseText;
|
||||
cave.transition_end();
|
||||
initCommunityUsers();
|
||||
}
|
||||
else if(this.readyState === 4 && this.status === 204)
|
||||
{
|
||||
document.getElementById('community-posts-inner-body').innerHTML = '<p class="no-posts-text">No Posts</p>';
|
||||
document.getElementById('wrapper').innerHTML = '<p class="no-posts-text">No Posts</p>';
|
||||
cave.transition_end();
|
||||
}
|
||||
else if (this.readyState === 4){
|
||||
@@ -855,7 +855,7 @@ function loadFeedPosts(element) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
document.getElementById('community-posts-inner-body').innerHTML += this.responseText;
|
||||
document.getElementById('wrapper').innerHTML += this.responseText;
|
||||
}
|
||||
else if(this.readyState === 4 && this.status === 204)
|
||||
{
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
<h4 class="community-page-description"><%= community.description %></h4>
|
||||
</div>
|
||||
<div class="community-page-post-box" style="margin-top: -40px;">
|
||||
<div id="community-posts-inner-body">
|
||||
<div id="wrapper">
|
||||
<% if(totalNumPosts === 0) {%>
|
||||
<p class="no-posts-text"><%= lang.global.no_posts %></p>
|
||||
<%} else { %>
|
||||
|
||||
@@ -189,7 +189,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="community-posts-inner-body">
|
||||
<div id="wrapper">
|
||||
<% if(totalNumPosts === 0) {%>
|
||||
<p class="no-posts-text"><%= lang.global.no_posts %></p>
|
||||
<%} else { %>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<div id="main">
|
||||
<h1 id="title" class="page-header"><%= lang.global.activity_feed %></h1>
|
||||
<div class="community-page-post-box">
|
||||
<div id="community-posts-inner-body">
|
||||
<div id="wrapper">
|
||||
<% if(posts.length === 0) {%>
|
||||
<p class="no-posts-text"><%= lang.activity_feed.empty %></p>
|
||||
<%} else { %>
|
||||
|
||||
@@ -444,13 +444,13 @@ function loadPosts(type) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
document.getElementById('community-posts-inner-body').innerHTML = this.responseText;
|
||||
document.getElementById('wrapper').innerHTML = this.responseText;
|
||||
wiiuBrowser.showLoadingIcon(false);
|
||||
initCommunityUsers();
|
||||
}
|
||||
else if(this.readyState === 4 && this.status === 204)
|
||||
{
|
||||
document.getElementById('community-posts-inner-body').innerHTML = '<p class="no-posts-text">No Posts</p>';
|
||||
document.getElementById('wrapper').innerHTML = '<p class="no-posts-text">No Posts</p>';
|
||||
wiiuBrowser.showLoadingIcon(false);
|
||||
}
|
||||
else if (this.readyState === 4){
|
||||
@@ -527,7 +527,7 @@ function loadFeedPosts(element) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
document.getElementById('community-posts-inner-body').innerHTML += this.responseText;
|
||||
document.getElementById('wrapper').innerHTML += this.responseText;
|
||||
}
|
||||
else if(this.readyState === 4 && this.status === 204)
|
||||
{
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
<li id="nav-bar-profile" data-pjax="/users/me" <% if(selection === 0) {%>class="selected"<%}%>>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#373F53" 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>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
<a><%= lang.global.user_page %></a>
|
||||
</li>
|
||||
<li id="nav-bar-activity-feed" data-pjax="/activity-feed" style="margin-top: 1px;"<% if(selection === 1) {%>class="selected"<%}%>>
|
||||
@@ -16,7 +17,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#373F53" 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>
|
||||
<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>
|
||||
<a><%= lang.global.communities %></a>
|
||||
</li>
|
||||
<li id="nav-bar-messages" data-pjax="/messages" <% if(selection === 3) {%>class="selected"<%}%>>
|
||||
|
||||
35
src/webfiles/web/all_communities.ejs
Normal file
35
src/webfiles/web/all_communities.ejs
Normal file
@@ -0,0 +1,35 @@
|
||||
<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://cdn.olv.pretendo.cc/js/pjax.min.js"></script>
|
||||
<script src="https://cdn.olv.pretendo.cc/js/juxt.js"></script>
|
||||
<!-- 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: 1 }); %>
|
||||
<div id="toast"></div>
|
||||
<div id="wrapper">
|
||||
<h2 id="title" class="page-header"><%= lang.all_communities.text %></h2>
|
||||
<div id="popular" class="communities-wrapper">
|
||||
<% for(var i = 0; i < communities.length; i++) {%>
|
||||
<div class="community-list-wrapper" data-pjax="/communities/<%= communities[i].community_id %>/new">
|
||||
<img class="community-list-icon" src="<%= cdnURL %>/icons/<%= communities[i].community_id %>.png">
|
||||
<h2 class="community-list-title"><%= communities[i].name %></h2>
|
||||
<h4 class="community-list-followers"><%= communities[i].followers %> followers</h4>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
49
src/webfiles/web/communities.ejs
Normal file
49
src/webfiles/web/communities.ejs
Normal file
@@ -0,0 +1,49 @@
|
||||
<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://cdn.olv.pretendo.cc/js/pjax.min.js"></script>
|
||||
<script src="https://cdn.olv.pretendo.cc/js/juxt.js"></script>
|
||||
<!-- 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: 1 }); %>
|
||||
<div id="toast"></div>
|
||||
<div id="wrapper">
|
||||
<h2 id="title" class="page-header"><%= lang.global.communities %></h2>
|
||||
<h3 class="communities-header"><%= lang.all_communities.popular_places %></h3>
|
||||
<div id="popular" class="communities-wrapper">
|
||||
<% for(var i = 0; i < popularCommunities.length; i++) {%>
|
||||
<div class="community-list-wrapper" data-pjax="/communities/<%= popularCommunities[i].community_id %>/new">
|
||||
<img class="community-list-icon" src="<%= cdnURL %>/icons/<%= popularCommunities[i].community_id %>.png">
|
||||
<h2 class="community-list-title"><%= popularCommunities[i].name %></h2>
|
||||
<h4 class="community-list-followers"><%= popularCommunities[i].followers %> followers</h4>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<h3 class="communities-header"><%= lang.all_communities.new_communities %></h3>
|
||||
<div id="new" class="communities-wrapper">
|
||||
<% for(var j = 0; j < newCommunities.length; j++) {%>
|
||||
<div class="community-list-wrapper" data-pjax="/communities/<%= newCommunities[j].community_id %>/new">
|
||||
<img class="community-list-icon" src="<%= cdnURL %>/icons/<%= newCommunities[j].community_id %>.png">
|
||||
<h2 class="community-list-title"><%= newCommunities[j].name %></h2>
|
||||
<h4 class="community-list-followers"><%= popularCommunities[j].followers %> followers</h4>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wrapper">
|
||||
<button id="load-more-posts-button" data-offset="20" onclick="location.href='/communities/all'"><%= lang.all_communities.text %></button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -28,7 +28,6 @@ a {
|
||||
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#title {
|
||||
@@ -43,16 +42,17 @@ a:hover {
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
background-repeat: no-repeat !important;
|
||||
/*! background: #eeeeee url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwBAMAAADMe/ShAAAAHlBMVEX29vb09PTy8vL19fXz8/Px8fHw8PDv7+/u7u739/dHdNvrAAACSElEQVR4AezYNX7DMBiGcafcKTRlC0hdy7T1Z7iAcS5YOkEl38DeQlNOW24YX63fsxr+Ztm2RmvjMiu2bWbOXPmjtW2A7S8YKlfMCK4lKPzeMoJvYhROHYIJno9gggkmmGCCCSaYYIIJJphgggkmGP/PZQZf4XDHCK5JFFYtE7hXkwWYap0awEMPh8NHA7jPNQprv2EAH5zh8MsTDo9vY/xGxuCeLXFYsVMY7nNZwCm/AcM3scZhnTooPBwfafBYP4JwiZvBfgWDh7Xxkc71DmXjY916hOAbLrMxK7ZuTOfKdxC4ZMf6z1Ui2iEh/2Sdssru8L4dy+zXFVGbuVtntyPxK+cqZRc7wr1Ll0v95/qser1DVZv/yVr5bv10Bczq+ML4Rl/als/ww4WfJptbwuACMbgwhaUVfkvgt6LU1icpdkAAAADAEEz/1EKshHOBgMAnwZ7gNgG9DEwybTKpyZiLRCT6ItqUCJuIYqKoosaJlEsMJBki+ZOElwRfkpqSuElcS9Qnd4LcGN3enRUACMRQDFSDJRzg3wIKuNnNzygYA83rGbx9g1cwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPB/bFgfx7ZH4TWJ7DB0W9w5hwcdgen7MHxfp8r9IFGkKQEEU6WHWWhVZaWZTFdlg9mwWSdiAZRbJABB+FzkHoHcXuQ82cDBtlkQzVSkc1yZEMk2fRKNjZTzetkg0LlhJK1KjAYDAaDwWAwGAwGg8FgcAD3L/H6J4DLS/j67eEOl9GYoKbAV2YAAAAASUVORK5CYII='); */
|
||||
margin: 0;
|
||||
font-family: 'Conv_Poppins-Light', sans-serif;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
margin-top: 35px;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
}
|
||||
header a {
|
||||
text-decoration: none;
|
||||
@@ -61,18 +61,30 @@ header .logo-link, header .logo-link svg {
|
||||
display: block;
|
||||
width: 5em;
|
||||
}
|
||||
header nav a:first-child {
|
||||
margin-left: 40px;
|
||||
}
|
||||
header nav a {
|
||||
|
||||
header a {
|
||||
color: var(--text-secondary);
|
||||
margin: 0 17px;
|
||||
text-decoration: none;
|
||||
padding: 0.25em 1.5em 0.25em 1em;
|
||||
border-radius: 2em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header a:first-child {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
}
|
||||
|
||||
header a:hover {
|
||||
background: var(--background-alt);
|
||||
}
|
||||
|
||||
header > a > p {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 95%;
|
||||
max-width: 1590px;
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -83,6 +95,7 @@ header nav a {
|
||||
margin-left: 0.5em;
|
||||
height: 2em;
|
||||
margin-bottom: 0;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.post-meta-wrapper > h3 > a {
|
||||
@@ -103,7 +116,7 @@ header nav a {
|
||||
display: flex;
|
||||
height: 2em;
|
||||
}
|
||||
#community-posts-inner-body {
|
||||
#wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
@@ -132,12 +145,14 @@ header nav a {
|
||||
|
||||
.screenshot {
|
||||
border-radius: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 74px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.post-content > h4 {
|
||||
@@ -158,13 +173,14 @@ header nav a {
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-left: 74px;
|
||||
}
|
||||
|
||||
.post-buttons-wrapper > span {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0.25em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.post-buttons-wrapper > span:hover {
|
||||
@@ -178,7 +194,87 @@ header nav a {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
#load-more-posts-button {
|
||||
width: 632px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#toast {
|
||||
visibility: hidden;
|
||||
min-width: 250px;
|
||||
margin-left: -141px;
|
||||
background-color: var(--btn);
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
left: 50%;
|
||||
bottom: 4em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
#toast.show {
|
||||
visibility: visible;
|
||||
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
}
|
||||
|
||||
.community-list-wrapper {
|
||||
display: grid;
|
||||
grid-template-areas: 'icon main' 'icon footer';
|
||||
gap: 0;
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
background: var(--background-alt);
|
||||
padding: 1em;
|
||||
width: 90%;
|
||||
border-radius: 1em;
|
||||
grid-template-columns: 111px 152px;
|
||||
}
|
||||
.community-list-wrapper:first-child {
|
||||
}
|
||||
.community-list-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
grid-area: icon;
|
||||
margin-right: 1em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
.community-list-title {
|
||||
margin: 0.5em 0 -1em 0;
|
||||
}
|
||||
.community-list-followers {
|
||||
margin: 0.5em 0 0 0;
|
||||
}
|
||||
|
||||
.communities-wrapper {
|
||||
display: grid;
|
||||
max-width: 900px;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-row-gap: 1em;
|
||||
grid-column-gap: 1em;
|
||||
}
|
||||
|
||||
#new {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1350px) {
|
||||
.communities-wrapper {
|
||||
max-width: 600px;
|
||||
grid-template-columns: auto auto;
|
||||
grid-row-gap: 10px;
|
||||
grid-column-gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
#main {
|
||||
width: 100%;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.posts-wrapper {
|
||||
width: 90vw;
|
||||
}
|
||||
@@ -199,4 +295,46 @@ header nav a {
|
||||
margin-bottom: -0.5em;
|
||||
margin-left: 2.5em;
|
||||
}
|
||||
header {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background: var(--background);
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
bottom: 0;
|
||||
border-top: 1px solid var(--text-secondary);
|
||||
}
|
||||
header > a:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header > a > p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header a {
|
||||
padding: 0.25em 1em 0.25em 1em;
|
||||
}
|
||||
|
||||
#load-more-posts-button {
|
||||
width: 95vw;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#title {
|
||||
color: var(--text);
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid var(--text-secondary);
|
||||
margin-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.communities-wrapper {
|
||||
max-width: 600px;
|
||||
grid-template-columns: auto;
|
||||
grid-row-gap: 10px;
|
||||
grid-column-gap: 10px;
|
||||
}
|
||||
}
|
||||
@@ -86,7 +86,7 @@ form.account input {
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
color: var(--text);
|
||||
width: 100%;
|
||||
width: 93%;
|
||||
}
|
||||
|
||||
form.account input:focus {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<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="<%= cdnURL %>/js/pjax.min.js"></script>
|
||||
<script src="<%= cdnURL %>/js/juxt.js"></script>
|
||||
<script src="https://cdn.olv.pretendo.cc/js/pjax.min.js"></script>
|
||||
<script src="https://cdn.olv.pretendo.cc/js/juxt.js"></script>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics Testing-->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-195842548-1"></script>
|
||||
<script>
|
||||
@@ -17,22 +17,37 @@
|
||||
<body>
|
||||
<div id="main">
|
||||
<%- include('nav_bar', { selection: 1 }); %>
|
||||
<h1 id="title" class="page-header"><%= lang.global.activity_feed %></h1>
|
||||
<div class="community-page-post-box">
|
||||
<div id="community-posts-inner-body">
|
||||
<% if(posts.length === 0) {%>
|
||||
<p class="no-posts-text"><%= lang.activity_feed.empty %></p>
|
||||
<%} else { %>
|
||||
<% posts.forEach(function(post) { %>
|
||||
<%- include('post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: false }); %>
|
||||
<% }); %>
|
||||
<button id="load-more-posts-button" data-offset="20" onclick="loadFeedPosts(this)"><%= lang.global.more %></button>
|
||||
<%}%>
|
||||
</div>
|
||||
<div id="toast"></div>
|
||||
<div id="wrapper">
|
||||
<h2 id="title" class="page-header"><%= lang.global.activity_feed %></h2>
|
||||
<% if(posts.length === 0) {%>
|
||||
<p class="no-posts-text"><%= lang.activity_feed.empty %></p>
|
||||
<%} else { %>
|
||||
<% posts.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="loadFeedPosts(this)"><%= lang.global.more %></button>
|
||||
</div>
|
||||
|
||||
<img src="" onerror="wiiuBrowser.showLoadingIcon(!1);window.scroll(0, 0);">
|
||||
</div>
|
||||
<body onload="stopLoading();wiiuBrowser.lockUserOperation(false);">
|
||||
<script>
|
||||
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>
|
||||
|
||||
@@ -5,8 +5,6 @@
|
||||
<title>Juxtaposition Log In</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="manifest" href="/assets/site.webmanifest">
|
||||
<meta name="msapplication-config" content="/assets/browserconfig.xml">
|
||||
|
||||
<!-- windows/ios/chrome -->
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
@@ -2,11 +2,39 @@
|
||||
<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>
|
||||
<nav>
|
||||
<a href="/users/me"><%= lang.global.user_page %></a>
|
||||
<a href="/activity-feed"><%= lang.global.activity_feed %></a>
|
||||
<a href="/communities"><%= lang.global.communities %></a>
|
||||
<a href="/messages"><%= lang.global.messages %></a>
|
||||
<a href="/news"><%= lang.global.notifications %></a>
|
||||
</nav>
|
||||
<a href="/users/me">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<p><%= lang.global.messages %></p>
|
||||
</a>
|
||||
<a href="/news">
|
||||
<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>
|
||||
<p><%= lang.global.notifications %></p>
|
||||
</a>
|
||||
</header>
|
||||
@@ -3,8 +3,8 @@
|
||||
<title>Post by <%= post.screen_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="<%= cdnURL %>/js/pjax.min.js"></script>
|
||||
<script src="<%= cdnURL %>/js/juxt.js"></script>
|
||||
<script src="https://cdn.olv.pretendo.cc/js/pjax.min.js"></script>
|
||||
<script src="https://cdn.olv.pretendo.cc/js/juxt.js"></script>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics Testing-->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-195842548-1"></script>
|
||||
<script>
|
||||
@@ -49,10 +49,10 @@
|
||||
<body>
|
||||
<div id="main">
|
||||
<%- include('nav_bar', { selection: 1 }); %>
|
||||
<h1 id="title" class="page-header">Post</h1>
|
||||
<div class="community-page-post-box">
|
||||
<div id="community-posts-inner-body">
|
||||
<div id="community-posts-inner-body">
|
||||
<div id="wrapper">
|
||||
<h1 id="title" class="page-header">Post</h1>
|
||||
<div id="wrapper">
|
||||
<%- include('post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: false }); %>
|
||||
<span class="replies-line"></span>
|
||||
<% replies.forEach(function(post) { %>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<div class="post-buttons-wrapper">
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg><h4><%= post.empathy_count %></h4></span>
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 13 13.311"><g id="Icon_feather-corner-down-right" data-name="Icon feather-corner-down-right" transform="translate(-5.25 -5.25)"><path id="Path_47" data-name="Path 47" d="M22.5,15l3.594,3.594L22.5,22.188" transform="translate(-8.594 -4.688)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path id="Path_48" data-name="Path 48" d="M6,6v5.031a2.875,2.875,0,0,0,2.875,2.875H17.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg><h4><%= post.reply_count %></h4></span>
|
||||
<span onclick="Navigator.clipboard.writeText('https://juxt.pretendo.cc/posts/<%=post.id%>'); alert('Copied to clipboard')"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg></span>
|
||||
<span onclick="copyToClipboard('https://juxt.pretendo.cc/posts/<%=post.id%>');"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user