fixed user comments UI

This commit is contained in:
orangix
2023-08-15 20:57:04 +02:00
parent 1c5479511b
commit 52dbf0195d
4 changed files with 38 additions and 40 deletions

View File

@@ -1,39 +1,30 @@
<div class="flex flex-col gap-2">
<img src="{{this.Post.Cover.Url}}" alt="">
<!-- https://codeberg.org/orangix/rimgo/src/branch/main/pages/user.go#L100
The URL prints properly here, why doesn't it appear?
Also TODO, covers can be videos, ???? -->
<div class="flex gap-2 items-center">
{{#noteq this.User.Username "[deleted]"}}
<img src="{{this.User.Avatar}}" class="rounded-full" width="24" height="24" loading="lazy">
<a href="/user/{{this.User.Username}}">
<p class="whitespace-nowrap text-ellipsis overflow-hidden"><b>{{this.User.Username}}</b></p>
</a>
{{/noteq}}
{{#equal this.User.Username "[deleted]"}}
<p class="whitespace-nowrap text-ellipsis overflow-hidden"><b>[deleted]</b></p>
{{/equal}}
</div>
<div>
<p>{{{this.Comment}}}</p>
<div class="flex gap-2">
<span title="{{this.CreatedAt}}">{{this.RelTime}}</span>
{{#if this.DeletedAt}}
<span class="text-md">(deleted {{this.DeletedAt}})</span>
{{/if}}
|
<img class="invert icon" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px">
{{this.Upvotes}}
<img class="invert icon" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px">
{{this.Downvotes}}
<a href="{{Post.Link}}">
<div class="flex flex-row gap-2 w-full bg-slate-600 p-2 rounded-lg">
<img class="object-cover hidden sm:block w-[80px] h-[100px] rounded-lg" src="{{this.Post.Cover.Url}}" alt="">
<div class="flex flex-col gap-2">
<div class="flex gap-2 items-center">
{{#noteq this.User.Username "[deleted]"}}
<img src="{{this.User.Avatar}}" class="rounded-full" width="24" height="24" loading="lazy">
<p class="whitespace-nowrap text-ellipsis overflow-hidden"><b>{{this.User.Username}}</b></p>
{{/noteq}}
{{#equal this.User.Username "[deleted]"}}
<p class="whitespace-nowrap text-ellipsis overflow-hidden"><b>[deleted]</b></p>
{{/equal}}
</div>
<div>
<p>{{{this.Comment}}}</p>
<div class="flex gap-2">
<span title="{{this.CreatedAt}}">{{this.RelTime}}</span>
{{#if this.DeletedAt}}
<span class="text-md">(deleted {{this.DeletedAt}})</span>
{{/if}}
|
<img class="invert icon" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px">
{{this.Upvotes}}
<img class="invert icon" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px">
{{this.Downvotes}}
</div>
</div>
</div>
</div>
{{#if this.Comments}}
<div class="ml-4 p-2 border-solid border-l-2 border-slate-400">
{{#each this.Comments}}
{{> partials/comment }}
{{/each}}
</div>
{{/if}}
</div>
</a>