feat(ModalPosts): Fixed ui and some shinanigans

Web/Presenters/templates/components/post/embeddedpost.xml

@@ -1,5 +1,17 @@
+{extends "../../@layout.xml"}
+
+{block title}
+    {_post} - OpenVK
+{/block}
+
+{block header}
+    {_post}
+{/block}
+
+
+
+{block content}
 {var $author = $post->getOwner()}
-{var $comments = $post->getLastComments(3)}
 {var $commentsCount = $post->getCommentsCount()}
 {var $platform = $post->getPlatform()}
 {var $platformDetails = $post->getPlatformDetails()}
@@ -17,17 +29,26 @@
 {var $club = isset($club) ? $club}
 
 {var $commentTextAreaId = $post === NULL ? rand(1,300) : $post->getId()}
-<table border="0" style="font-size: 11px;" data-id="{$post->getPrettyId()}" n:class="post, !$compact ? post-divider, $post->isExplicit() ? post-nsfw">
-    <tbody>
-        <tr>
-            <td width="54" valign="top">
+    <style>
+        .sidebar, .page_header, .page_footer {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .page_body {
+            margin-top: -45px;
+        }
+    </style>
+
+    <div style="font-size: 11px;" data-id="{$post->getPrettyId()}" n:class="post, !$compact ? post-divider, $post->isExplicit() ? post-nsfw">
+    
+        <div>
+            <div width="54" valign="top" class="post-modal-header">
                 <a href="{$author->getURL()}">
                     <img src="{$author->getAvatarURL('miniscule')}" width="{if $compact}25{else}50{/if}" class="post-avatar {if $compact}cCompactAvatars{/if}" />
                     <span n:if="!$post->isPostedOnBehalfOfGroup() && !$compact && $author->isOnline()" class="post-online">{_online}</span>
                 </a>
-            </td>
-            <td width="100%" valign="top">
-                <div class="post-author">
+                <div class="post-author post-modal-author">
                     <a href="{$author->getURL()}"><b class="post-author-name">{$author->getCanonicalName()}</b></a>
                     <img n:if="$author->isVerified()" class="name-checkmark" src="/assets/packages/static/openvk/img/checkmark.png">
                     {$post->isDeactivationMessage() ? ($author->isFemale() ? tr($deac . "_f") : ($author->isNeutral() ? tr($deac . "_g") : tr($deac . "_m")))}
@@ -54,7 +75,7 @@
                         </a>
                     {/if}
 
-                    <span n:if="$post->isPinned()" class="nobold">{_pinned}</span>
+                    <!--<span n:if="$post->isPinned()" class="nobold">{_pinned}</span>
 
                     <a n:if="$canBeDeleted && !($forceNoDeleteLink ?? false) && $compact == false" class="delete" href="/wall{$post->getPrettyId()}/delete"></a>
                     
@@ -68,8 +89,10 @@
 
                     {if $post->canBeEditedBy($thisUser) && !($forceNoEditLink ?? false) && $compact == false}
                         <a class="edit" id="editPost"></a>
-                    {/if}
+                    {/if}-->
                 </div>
+            </div>
+            <div width="100%" valign="top">
                 <div class="post-content" id="{$post->getPrettyId()}" data-localized-nsfw-text="{_nsfw_warning}">
                     <div class="text" id="text{$post->getPrettyId()}">
                         <span data-text="{$post->getText(false)}" class="really_text">{$post->getText()|noescape}</span>
@@ -126,9 +149,6 @@
                         <img src="/assets/packages/static/openvk/img/app_icons_mini/{$post->getPlatform(this)}.svg">
                     </a>
                     {if isset($thisUser)}
-                        &nbsp;
-
-                        <a n:if="!($forceNoCommentsLink ?? false) && $commentsCount == 0" href="javascript:expand_comment_textarea({$commentTextAreaId})">{_comment}</a>
                         
                         <div class="like_wrap">
                             <a n:if="!($forceNoShareLink ?? false)" id="reposts{$post->getPrettyId()}" class="post-share-button" href="javascript:repost('{$post->getPrettyId()}', 'post')">
@@ -157,11 +177,20 @@
                         {include "../textArea.xml", route => $commentsURL, postOpts => false, graffiti => (bool) ovkGetQuirk("comments.allow-graffiti"), post => $post, club => $club}
                     </div>
                 </div>
+                <div style="float: left; min-height: 100px; width: 100%;">
+        {include "../comments.xml",
+                 comments => $comments,
+                 count => $cCount,
+                 page => $cPage,
+                 model => "posts",
+                 parent => $post }
+    </div>
                 <div n:if="$suggestion && $canBePinned" class="suggestionControls">
                     <input type="button" class="button" id="publish_post" data-id="{$post->getId()}" value="{_publish_suggested}">
                     <input type="button" class="button" id="decline_post" data-id="{$post->getId()}" value="{_decline_suggested}">
                 </div>
-            </td>
-        </tr>
-    </tbody>
-</table>
+            </div>
+        </div>
+    </div>
+</div>
+{/block}

Web/static/css/main.css

@@ -4286,3 +4286,41 @@ hr {
 .deleted_mark_average {
     padding: 5px 61px;
 }
+
+
+.post-modal-view {
+    position: relative;
+    z-index: 999;
+    background: #fff;
+    min-width: 600px;
+    width: fit-content;
+    padding: 25px;
+    padding-top: 15px;
+    padding-bottom: 10px;
+    box-shadow: 0px 0px 3px 1px #222;
+    margin: 20px auto 0 auto;
+}
+
+.post-modal-title {
+	font-weight: bold;
+	padding-bottom: 16px;
+}
+
+.post-modal-title div {
+	float: right;
+	font-weight: normal;
+}
+
+.post-modal-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.post-modal-header {
+    display: flex;
+}
+
+.post-modal-author {
+    margin: 5px;
+}

Web/static/js/al_wall.js

@@ -2953,20 +2953,45 @@ u(document).on("submit", "#additional_fields_form", (e) => {
 })
 
 async function getEmbeddedPost(postId) {
-    let res = await fetch("/wall"+postId+"_e")
-    res.text().then(function (text) {
-        CMessageBox.toggleLoader()
-        let msb = new CMessageBox({
+    CMessageBox.toggleLoader()
+    let request = await fetch("/wall"+postId+"_e")
+    const body_html = await request.text()
+    const parser  = new DOMParser
+    const body    = parser.parseFromString(body_html, "text/html")
+
+    const preview = body.querySelector('.post')
+
+    if (request.status != 200) {
+        MessageBox("Error", "Post not found", ["Ок"], [Function.noop])
+    } else {
+        const photo_viewer = new CMessageBox({
             title: '',
             custom_template: u(`
             <div class="ovk-photo-view-dimmer">
-                ${text}
-            </div>
-            `)
+                <div class="post-modal-view">
+                    <div class="post-modal-title">
+                        <text>
+                            ${tr("post")}
+                        </text>
+                        <div>
+                            <a id="ovk-photo-close">${tr("close")}</a>
+                        </div>
+                    </div>
+                    <div class='post-modal-wrapper'>
+                        ${preview.innerHTML}
+                    </div>
+                </div>
+            </div>`)
         })
-        CMessageBox.toggleLoader()
-    });
-    history.replaceState(null, null, `?w=wall-${postId}`)
+        photo_viewer.getNode().find("#ovk-photo-close").on("click", function(e) {
+            photo_viewer.close()
+        });
+    }
+    
+
+    CMessageBox.toggleLoader()
+
+    history.replaceState(null, null, `?w=wall${postId}`)
 }
 
 u(document).on("click", "#al-post", (e) => {
@@ -2978,6 +3003,6 @@ u(document).on("click", "#al-post", (e) => {
 const params = new URLSearchParams(window.location.search);
 
 if (params.has("w")) {
-  let post_id = params.get("w").replace("wall-", "");
+  let post_id = params.get("w").replace("wall", "");
   getEmbeddedPost(post_id)
 }