Added support for reporting posts on desktop

src/webfiles/web/css/web.css

@@ -452,7 +452,7 @@ iframe {
     padding-bottom: 0.5ch;
 }
 .report h4, .report p {
-    margin: 10px 0 0 0;
+    margin: 0 5px 0 0;
 }
 .list-content-with-icon-and-text li.reports {
     flex-direction: column;
@@ -468,13 +468,12 @@ button.report {
 	max-width: 630px;
 	width: 90vw;
 }
-#report-post-page {
-	position: absolute;
-	top: 0;
+#report-post-page  {
 	display: flex;
-	background: var(--background);
-	height: 100%;
+	flex-direction: column;
+	justify-content: center;
 	align-items: center;
+	padding: 1em;
 }
 #report-form {
 	display: flex;
@@ -482,12 +481,17 @@ button.report {
 	justify-content: center;
 	align-items: center;
 	padding: 1em;
+	max-width: 600px;
+	background: var(--background-alt);
+	border-radius: 1em;
+	margin-top: 4em;
 }
 .add-post-page-content.report > div {
 	display: flex;
 	justify-items: center;
 	align-items: center;
 	justify-content: center;
+	margin-top: 13px;
 }
 .report .textarea-text {
 	width: 100%;
@@ -499,6 +503,13 @@ button.report {
 	margin: 1em 0;
 	resize: none;
 }
+
+#report-post-page input[type="submit"] {
+	background: var(--btn);
+}
+#report-post-page input[type="button"] {
+	background: var(--btn-secondary);
+}
 .buttons.tabs {
 	display: flex;
 	justify-content: center;

src/webfiles/web/js/web.js

@@ -142,7 +142,7 @@ function initPostModules() {
 				return;
 			}
 			document.getElementById(hide).style.display = 'none';
-			document.getElementById(show).style.display = 'block';
+			document.getElementById(show).style.display = '';
 			if (header === 'true') {
 				document.getElementById('header').style.display = 'block';
 			} else {
@@ -332,4 +332,16 @@ function downloadURI(uri, name) {
 	link.click();
 	document.body.removeChild(link);
 	delete link;
+}
+function reportPost(post) {
+	const id = post.getAttribute('data-post');
+	const button = document.getElementById('report-launcher');
+	const form = document.getElementById('report-form');
+	const formID = document.getElementById('report-post-id');
+	if(!id || !button || !form || !formID) return;
+
+	form.action = '/posts/' + id + '/report';
+	formID.value = id;
+	console.log(id.replace(/(\d{3})(\d{4})(\d{3})(\d{4})(\d{3})(\d{4})/, "$1-$2-$3-$4-$5-$6"));
+	button.click();
 }

src/webfiles/web/partials/post_template.ejs

@@ -1,3 +1,4 @@
+<% if(locals.mainPost === undefined) locals.mainPost = false; %>
 <div class="posts-wrapper" id="<%= post.id %>">
 <% if(post.removed) {%>
 	<div class="post-body-content removed">
@@ -33,10 +34,14 @@
         <span <%if(userContent !== null) {%> data-post="<%= post.id %>" class="<%if(post.yeahs && post.yeahs.indexOf(userContent.pid) !== -1){ %> selected <%}%> <%}%>"><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 id="count-<%= post.id %>"><%= 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="copyToClipboard('https://juxt.pretendo.network/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>
+		<% if(reply && post.pid !== pid && !locals.mainPost) {%>
+		<span type="button" class="submit report" data-post="<%= post.id %>" onclick="reportPost(this)"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#ffffff" viewBox="0 0 256 256"><path stroke="currentColor" stroke-width="4" d="M34.76,42A8,8,0,0,0,32,48V216a8,8,0,0,0,16,0V171.77c26.79-21.16,49.87-9.75,76.45,3.41,16.4,8.11,34.06,16.85,53,16.85,13.93,0,28.54-4.75,43.82-18a8,8,0,0,0,2.76-6V48A8,8,0,0,0,210.76,42c-28,24.23-51.72,12.49-79.21-1.12C103.07,26.76,70.78,10.79,34.76,42ZM208,164.25c-26.79,21.16-49.87,9.74-76.45-3.41-25-12.35-52.81-26.13-83.55-8.4V51.79c26.79-21.16,49.87-9.75,76.45,3.4,25,12.35,52.82,26.13,83.55,8.4Z"></path></svg></span>
+		<%}%>
+	</div>
 <%}%>
 </div>
 <%if(locals.mainPost && !post.removed) {%>
-    <button class="report" onclick="ignore(this)" data-id="<%=post.id%>">Report Post</button>
+	<button id="header-communities-button" class="report" href="#" data-post="<%= post.id %>" onclick="reportPost(this)">Report Post</button>
+	<a id="report-launcher" style="display: none" data-module-hide="post" data-module-show="report-post-page" data-header="false" data-menu="false"></a>
 <%}%>
 

src/webfiles/web/post.ejs

@@ -40,7 +40,7 @@
     <h2 id="title" class="page-header">Post</h2>
     <%- include('partials/nav_bar', { selection: 2, pid: pid }); %>
     <div id="toast"></div>
-    <div class="community-page-post-box">
+    <div class="community-page-post-box" id="post">
         <div id="wrapper">
                 <%- include('partials/post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: false, mainPost: true }); %>
                 <span class="replies-line"></span>