From bebd6a1b7df6622ef534416333ab0ca452bc5a13 Mon Sep 17 00:00:00 2001
From: CaramelKat <32065563+caramelkat@users.noreply.github.com>
Date: Tue, 14 Sep 2021 22:28:39 -0500
Subject: [PATCH] Fixed a number of cosmetic issues for posts and communities

---
 src/webfiles/portal/all_communities.ejs |  4 +-
 src/webfiles/portal/announcements.ejs   |  2 +-
 src/webfiles/portal/communities.ejs     |  6 +--
 src/webfiles/portal/css/juxt.css        | 55 ++++++++++++++++++-------
 src/webfiles/portal/js/juxt.js          | 10 ++---
 src/webfiles/portal/post.ejs            |  2 +
 6 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/src/webfiles/portal/all_communities.ejs b/src/webfiles/portal/all_communities.ejs
index 60654d0..26fb245 100644
--- a/src/webfiles/portal/all_communities.ejs
+++ b/src/webfiles/portal/all_communities.ejs
@@ -32,7 +32,7 @@
         </form>
     </div>
     <div id="community-list" class="communities-wrapper">
-        <table style="margin-top: 30px">
+        <table style="padding-top: 30px">
             <tbody>
             <tr>
                 <% for(var i = 0; i < communities.length; i++) {%>
@@ -40,7 +40,7 @@
                         <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>
+                            <h4 class="community-list-followers" <%if(communities[i].name.length < 16) {%> style="margin-top: 45px" <%}%>><%= communities[i].followers %> followers</h4>
                         </div>
                     </td>
                     <% if( (i + 1) % 3 === 0) { %>
diff --git a/src/webfiles/portal/announcements.ejs b/src/webfiles/portal/announcements.ejs
index a832b35..efa8403 100644
--- a/src/webfiles/portal/announcements.ejs
+++ b/src/webfiles/portal/announcements.ejs
@@ -33,7 +33,7 @@
         <h2 class="community-page-title"><%= community.name %></h2>
         <h4 class="community-page-description"><%= community.description %></h4>
     </div>
-    <div class="community-page-posts-wrapper" style="margin-top: -40px;">
+    <div class="community-page-post-box" style="margin-top: -40px;">
         <div id="community-posts-inner-body">
             <% if(totalNumPosts === 0) {%>
                 <p class="no-posts-text"><%= lang.global.no_posts %></p>
diff --git a/src/webfiles/portal/communities.ejs b/src/webfiles/portal/communities.ejs
index 2b8ccd6..5bbf52f 100644
--- a/src/webfiles/portal/communities.ejs
+++ b/src/webfiles/portal/communities.ejs
@@ -23,7 +23,7 @@
         <p class="announcements-banner-text"><%= lang.all_communities.ann_string %></p>
     </div>
     <div id="popular" class="communities-wrapper">
-        <table style="padding-top: 20px">
+        <table>
             <tbody>
                 <tr>
                     <td>
@@ -45,7 +45,7 @@
                         <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>
+                            <h4 class="community-list-followers" <%if(popularCommunities[i].name.length < 16) {%> style="margin-top: 45px" <%}%>><%= popularCommunities[i].followers %> followers</h4>
                         </div>
                     </td>
                     <% if( (i + 1) % 3 === 0) { %>
@@ -67,7 +67,7 @@
                         <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"><%= newCommunities[j].followers %> followers</h4>
+                            <h4 class="community-list-followers" <%if(newCommunities[j].name.length < 16) {%> style="margin-top: 45px" <%}%>><%= newCommunities[j].followers %> followers</h4>
                         </div>
                     </td>
                     <% if( (j + 1) % 3 === 0) { %>
diff --git a/src/webfiles/portal/css/juxt.css b/src/webfiles/portal/css/juxt.css
index 96a36ee..aea3950 100644
--- a/src/webfiles/portal/css/juxt.css
+++ b/src/webfiles/portal/css/juxt.css
@@ -303,7 +303,6 @@ ul, ol, menu, li {
 }
 
 .post-user-info-wrapper {
-    background-color: rgba(255,255,255,1);
     margin-bottom: 15px;
     margin-left: 15px;
     min-width: 520px;
@@ -789,8 +788,7 @@ td.messages-list-wrapper.end  {
 
 .communities-wrapper {
     width: 1060px;
-    background-color: rgba(255,255,255,1);
-    /*border: 1.5px solid #d6d2d2;*/
+    background: -webkit-linear-gradient(#ffffff, #f9f9f9);
     box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.5);
     border-radius: 10px;
@@ -799,6 +797,7 @@ td.messages-list-wrapper.end  {
 
 .communities-header {
     padding-left: 3vh;
+    padding-top: 20px;
 }
 
 .outlined-button {
@@ -835,6 +834,8 @@ td.messages-list-wrapper.end  {
     border-radius: 10px;
     white-space: nowrap;
     overflow-x: auto;
+    box-shadow: 0 3px 15px 0 rgb(0 0 0 / 50%);
+    -webkit-box-shadow: 0 3px 15px 0 rgb(0 0 0 / 50%);
 }
 
 #search-icon {
@@ -877,7 +878,7 @@ td.messages-list-wrapper.end  {
     padding-left: 110px;
     margin-bottom: 0;
     position: absolute;
-    max-width: 195px;
+    max-width: 220px;
     line-height: 25px;
 }
 
@@ -896,7 +897,7 @@ h4 {
 
 .community-list-followers {
     position: absolute;
-    margin-top: 70px;
+    margin-top: 65px;
     margin-left: 110px;
     color: rgba(113,141,148,1);
 }
@@ -952,7 +953,8 @@ h4 {
     z-index: 3;
     width: 1060px;
     min-height: 255px;
-    background-color: rgba(255,255,255,1);
+    /* background-color: rgba(255,255,255,1); */
+    background: -webkit-linear-gradient(#ffffff, #f9f9f9);
     border: 1.5px solid #d6d2d2;
     box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.5);
@@ -985,7 +987,7 @@ h4 {
 
 .community-page-margin-line {
     border-top: 2px solid #D6D2D2;
-    width: 997px;
+    width: 1015px;
     height: 5px;
     position: absolute;
     z-index: 5;
@@ -997,9 +999,12 @@ h4 {
     z-index: 3;
     width: 240px;
     height: 60px;
+    margin-right: 5px;
     background-color: rgb(233, 233, 233);
     border: 1.5px solid #e9e9e9;
     border-radius: 10px;
+    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%);
+    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%);
 }
 
 .community-page-follow-button-wrapper {
@@ -1053,7 +1058,7 @@ h4 {
 .community-page-posts-wrapper {
     position: relative;
     z-index: 3;
-    background-color: rgba(255,255,255,1);
+    background: -webkit-linear-gradient(#ffffff, #f9f9f9);
     border: 1.5px solid #d6d2d2;
     box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.5);
@@ -1093,11 +1098,17 @@ h4 {
     width: 760px;
     border-radius: 10px;
     margin-bottom: 20px;
+    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%);
+    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%);
 }
 
 .community-page-post-painting {
     width: 760px;
     height: 285px;
+    border-radius: 10px;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%);
+    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%);
 }
 
 .community-page-post-time-stamp {
@@ -1111,7 +1122,7 @@ h4 {
 .community-page-post-yeah-button-wrapper {
     position: absolute;
     right: 148px;
-    margin-top: -82px;
+    margin-top: -110px;
     margin-bottom: 0;
 }
 
@@ -1145,7 +1156,7 @@ h4 {
     color: #673DB6;
     margin-left: 440px;
     margin-bottom: 0;
-    margin-top: -67px;
+    margin-top: -94px;
     font-weight: bold;
     font-size: large;
     position: absolute;
@@ -1200,6 +1211,8 @@ h4 {
     text-align: center;
     line-height: 18px;
     -webkit-border-radius: 20px;
+    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%);
+    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%);
 }
 
 .community-page-post-username {
@@ -1321,7 +1334,6 @@ iframe {
     margin-bottom: -10px;
     background: white;
     width: 1060px;
-    border: 1.5px solid #d6d2d2;
     box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.5);
     border-radius: 10px;
@@ -1352,6 +1364,7 @@ iframe {
 .user-page-tab.right {
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
+    width: 285px;
 }
 
 .user-page-tab-triangle {
@@ -1800,7 +1813,8 @@ iframe {
 }
 
 .posts-wrapper {
-    background-color: rgba(255,255,255,1);
+    /* background-color: rgba(255,255,255,1); */
+    background: -webkit-linear-gradient(#ffffff, #f9f9f9);
     border: 1.5px solid #d6d2d2;
     border-radius: 10px;
     margin-bottom: 30px;
@@ -1824,15 +1838,28 @@ iframe {
 
 .community-page-posts-header.switcher {
     padding: 0 15px 0 20px;
-    background-color: white;
+    /* background-color: white; */
+    background: -webkit-linear-gradient(#ffffff, #f9f9f9);
     height: 4px !important;
     border-radius: 15px;
     margin-top: 15px;
-    margin-bottom: 18px;
+    margin-bottom: 30px;
     border: 1.5px solid #d6d2d2;
     box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.5);
 }
 
 .overlay-content {
     z-index: 20;
+}
+
+.replies-line {
+    border-left: 5px solid #6e7894;
+    margin: -30px 0 0 200px;
+    height: 31px;
+    position: absolute;
+    z-index: 0;
+}
+
+.replies-line:last-child {
+    display:none;
 }
\ No newline at end of file
diff --git a/src/webfiles/portal/js/juxt.js b/src/webfiles/portal/js/juxt.js
index 0ad2630..1e4b1b2 100644
--- a/src/webfiles/portal/js/juxt.js
+++ b/src/webfiles/portal/js/juxt.js
@@ -127,7 +127,7 @@ function showOverlay() {
     document.getElementsByClassName('community-page-header')[0].style.display = 'none';
     document.getElementsByClassName('user-page-back-button')[0].style.display = 'none';
     document.getElementsByClassName('community-page-info-container')[0].style.display = 'none';
-    document.getElementsByClassName('community-page-posts-wrapper')[0].style.display = 'none';
+    document.getElementsByClassName('community-page-post-box')[0].style.display = 'none';
     document.getElementsByClassName('user-page-tab-table')[0].style.display = 'none';
     document.getElementById('main').style.marginLeft = '14vh';
     document.body.style.backgroundColor = "rgba(0,0,0, 0.5)";
@@ -139,7 +139,7 @@ function hideOverlay() {
     document.getElementsByClassName('community-page-header')[0].style.display = '';
     document.getElementsByClassName('user-page-back-button')[0].style.display = '';
     document.getElementsByClassName('community-page-info-container')[0].style.display = '';
-    document.getElementsByClassName('community-page-posts-wrapper')[0].style.display = '';
+    document.getElementsByClassName('community-page-post-box')[0].style.display = '';
     document.getElementsByClassName('user-page-tab-table')[0].style.display = '';
     document.getElementById('main').style.marginLeft = '225px';
     document.body.style.backgroundColor = "rgba(232,236,236,1)";
@@ -570,7 +570,7 @@ function loadUserPosts() {
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
         if (this.readyState === 4 && this.status === 200) {
-            document.getElementsByClassName('community-page-posts-wrapper')[0].innerHTML += this.responseText;
+            document.getElementsByClassName('community-page-post-box')[0].innerHTML += this.responseText;
         }
         else if(this.readyState === 4 && this.status === 204)
         {
@@ -600,7 +600,7 @@ function loadCommunityPosts(typeCheck) {
     }
     xhttp.onreadystatechange = function() {
         if (this.readyState === 4 && this.status === 200) {
-            document.getElementsByClassName('community-page-posts-wrapper')[0].innerHTML += this.responseText;
+            document.getElementsByClassName('community-page-post-box')[0].innerHTML += this.responseText;
             initCommunityUsers();
         }
         else if(this.readyState === 4 && this.status === 204)
@@ -677,7 +677,7 @@ function switchUserPageTabs(type, id) {
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
         if (this.readyState === 4 && this.status === 200) {
-            document.getElementsByClassName('community-page-posts-wrapper')[0].innerHTML = this.responseText;
+            document.getElementsByClassName('community-page-post-box')[0].innerHTML = this.responseText;
         }
         else if (this.readyState === 4){
             wiiuErrorViewer.openByCodeAndMessage(5983000 + this.status, 'Error: "' + this.statusText + '"\nPlease send code to Jemma on Discord with what you were doing');
diff --git a/src/webfiles/portal/post.ejs b/src/webfiles/portal/post.ejs
index 7c4bca3..e887e82 100644
--- a/src/webfiles/portal/post.ejs
+++ b/src/webfiles/portal/post.ejs
@@ -140,8 +140,10 @@
     </div>
     <div class="community-page-post-box">
         <%- include('post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: false }); %>
+        <span class="replies-line"></span>
         <% replies.forEach(function(post) { %>
             <%- include('post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: true }); %>
+            <span class="replies-line"></span>
         <% }); %>
     </div>
     <img src="" onerror="wiiuBrowser.showLoadingIcon(!1);window.scroll(0, 0);">