mirror of
https://github.com/spchcap/speech.capital.git
synced 2026-01-13 16:18:06 +00:00
Refactor: Revert upvote arrows to SVG/text
This commit is contained in:
@@ -78,7 +78,7 @@
|
||||
|
||||
<!-- Post List View (Subdomain) -->
|
||||
<div x-show="view==='list'" class="bg-white border-l border-r border-gray-300">
|
||||
<template x-for="(p,i) in posts" :key="p.id"><article class="border-b border-gray-200 last:border-0 bg-gray-50"><div class="flex gap-2 p-2"><div class="flex flex-col items-center gap-0.5"><button @click="vote(p,1)" :class="p.voted===1?'text-gray-900':'text-gray-400'" class="hover:text-gray-900 p-1"><i data-lucide="chevron-up" class="w-3 h-3"></i></button><span class="text-xs text-gray-600 font-medium vote-count" x-text="p.score"></span></div><div class="flex-1 min-w-0"><div class="flex items-baseline gap-1"><span class="text-gray-400 text-xs font-medium" x-text="(i+1)+'.'"></span><h2 class="text-xs leading-tight"><a :href="p.link||`/${p.id}`" class="text-gray-900 hover:underline font-medium" x-text="p.title"></a><span class="text-gray-400 text-xs ml-1" x-text="'('+domain(p)+')'"></span><button x-show="isImageLink(p.link)" @click.stop="p.showImage=!p.showImage" class="ml-1 text-gray-500 hover:text-gray-900 text-xs" x-text="p.showImage?'[-]':'[+]'"></button></h2></div><p x-show="!p.link&&p.content" class="preview text-xs text-gray-600 mt-1 leading-relaxed" x-text="p.content"></p><div x-show="p.showImage" class="mt-1"><a :href="p.link" target="_blank" rel="noopener noreferrer"><img :src="p.link" class="max-w-full max-h-[70vh] h-auto rounded border border-gray-200"></a></div><div class="flex items-center justify-end text-xs text-gray-400 mt-0.5 gap-1.5"><span>by <a :href="'https://speech.capital/'+p.username" class="hover:underline" x-text="p.username"></a></span><span>·</span><span x-text="ago(p.created_at)"></span><span>·</span><a :href="`/${p.id}`" class="hover:underline" x-text="p.comment_count+' comments'"></a><template x-if="isMod()"><span class="flex items-center gap-1.5 text-gray-500"><span>·</span><div x-data="{open:false}" @click.away="open=false" class="relative"><button @click.stop="open=!open" title="Moderate" class="hover:text-gray-900 -mb-1"><i data-lucide="more-vertical" class="w-4 h-4"></i></button><div x-show="open" style="display:none" class="absolute right-0 mt-2 w-max bg-white rounded-md shadow-lg z-10 border border-gray-200 text-left"><a @click.prevent.stop="moderate('post_overwrite',p);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Overwrite</a><a @click.prevent.stop="moderate('post_wipe',p);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Wipe</a><a @click.prevent.stop="banUser(p.user_id,p.username);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Ban User</a></div></div></span></template></div></div></div></article></template>
|
||||
<template x-for="(p,i) in posts" :key="p.id"><article class="border-b border-gray-200 last:border-0 bg-gray-50"><div class="flex gap-2 p-2"><div class="flex flex-col items-center gap-0.5"><button @click="vote(p,1)" :class="p.voted===1?'text-gray-900':'text-gray-400'" class="hover:text-gray-900 p-1"><svg class="w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-b-[10px] border-b-current" viewBox="0 0 12 10"><polygon points="6,0 12,10 0,10" fill="currentColor"/></svg></button><span class="text-xs text-gray-600 font-medium vote-count" x-text="p.score"></span></div><div class="flex-1 min-w-0"><div class="flex items-baseline gap-1"><span class="text-gray-400 text-xs font-medium" x-text="(i+1)+'.'"></span><h2 class="text-xs leading-tight"><a :href="p.link||`/${p.id}`" class="text-gray-900 hover:underline font-medium" x-text="p.title"></a><span class="text-gray-400 text-xs ml-1" x-text="'('+domain(p)+')'"></span><button x-show="isImageLink(p.link)" @click.stop="p.showImage=!p.showImage" class="ml-1 text-gray-500 hover:text-gray-900 text-xs" x-text="p.showImage?'[-]':'[+]'"></button></h2></div><p x-show="!p.link&&p.content" class="preview text-xs text-gray-600 mt-1 leading-relaxed" x-text="p.content"></p><div x-show="p.showImage" class="mt-1"><a :href="p.link" target="_blank" rel="noopener noreferrer"><img :src="p.link" class="max-w-full max-h-[70vh] h-auto rounded border border-gray-200"></a></div><div class="flex items-center justify-end text-xs text-gray-400 mt-0.5 gap-1.5"><span>by <a :href="'https://speech.capital/'+p.username" class="hover:underline" x-text="p.username"></a></span><span>·</span><span x-text="ago(p.created_at)"></span><span>·</span><a :href="`/${p.id}`" class="hover:underline" x-text="p.comment_count+' comments'"></a><template x-if="isMod()"><span class="flex items-center gap-1.5 text-gray-500"><span>·</span><div x-data="{open:false}" @click.away="open=false" class="relative"><button @click.stop="open=!open" title="Moderate" class="hover:text-gray-900 -mb-1"><i data-lucide="more-vertical" class="w-4 h-4"></i></button><div x-show="open" style="display:none" class="absolute right-0 mt-2 w-max bg-white rounded-md shadow-lg z-10 border border-gray-200 text-left"><a @click.prevent.stop="moderate('post_overwrite',p);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Overwrite</a><a @click.prevent.stop="moderate('post_wipe',p);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Wipe</a><a @click.prevent.stop="banUser(p.user_id,p.username);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Ban User</a></div></div></span></template></div></div></div></article></template>
|
||||
<div x-show="posts.length===0" class="p-8 text-center text-gray-400 text-sm">No posts yet.</div>
|
||||
</div>
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
<h1 class="text-lg font-bold mb-2" x-text="post.title"></h1>
|
||||
<a x-show="post.link" :href="post.link" class="text-blue-600 hover:underline text-sm" x-text="post.link"></a>
|
||||
<div x-show="post.content" x-html="renderMarkdown(post.content)" class="markdown-body mt-2" data-theme="light"></div>
|
||||
<div class="flex items-center gap-3 text-xs text-gray-400 mt-3"><button @click="vote(post,1)" :class="post.voted===1?'text-gray-900':'text-gray-400'" class="hover:text-gray-900"><i data-lucide="chevron-up" class="w-4 h-4"></i></button><span x-text="post.score+' points'"></span><span x-text="ago(post.created_at)"></span><span>· by <a :href="'https://speech.capital/'+post.username" class="hover:underline" x-text="post.username"></a></span><template x-if="isMod()"><span class="flex items-center gap-1.5 text-gray-500"><span>·</span><div x-data="{open:false}" @click.away="open=false" class="relative"><button @click.stop="open=!open" title="Moderate" class="hover:text-gray-900"><i data-lucide="more-vertical" class="w-4 h-4"></i></button><div x-show="open" style="display:none" class="absolute left-0 mt-2 w-max bg-white rounded-md shadow-lg z-10 border border-gray-200 text-left"><a @click.prevent.stop="moderate('post_overwrite',post);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Overwrite</a><a @click.prevent.stop="moderate('post_wipe',post);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Wipe</a><a @click.prevent.stop="banUser(post.user_id,post.username);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Ban User</a></div></div></span></template></div>
|
||||
<div class="flex items-center gap-3 text-xs text-gray-400 mt-3"><button @click="vote(post,1)" :class="post.voted===1?'text-gray-900':'text-gray-400'" class="hover:text-gray-900">▲</button><span x-text="post.score+' points'"></span><span x-text="ago(post.created_at)"></span><span>· by <a :href="'https://speech.capital/'+post.username" class="hover:underline" x-text="post.username"></a></span><template x-if="isMod()"><span class="flex items-center gap-1.5 text-gray-500"><span>·</span><div x-data="{open:false}" @click.away="open=false" class="relative"><button @click.stop="open=!open" title="Moderate" class="hover:text-gray-900"><i data-lucide="more-vertical" class="w-4 h-4"></i></button><div x-show="open" style="display:none" class="absolute left-0 mt-2 w-max bg-white rounded-md shadow-lg z-10 border border-gray-200 text-left"><a @click.prevent.stop="moderate('post_overwrite',post);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Overwrite</a><a @click.prevent.stop="moderate('post_wipe',post);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Wipe</a><a @click.prevent.stop="banUser(post.user_id,post.username);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Ban User</a></div></div></span></template></div>
|
||||
</div>
|
||||
<div class="mt-6 pt-6 border-t border-gray-200">
|
||||
<h2 class="text-sm font-bold mb-3">Comments</h2>
|
||||
@@ -97,7 +97,7 @@
|
||||
<form @submit.prevent="comment(null,$event)" class="mb-6" x-show="user"><textarea x-model="txt" rows="4" class="w-full border border-gray-200 rounded px-3 py-2 text-sm" placeholder="Add a comment..."></textarea><div class="cf-turnstile mt-2" data-sitekey="0x4AAAAAAB4klN__r6wwJXs4"></div><button type="submit" :disabled="commenting" class="bg-gray-900 text-white px-4 py-2 rounded text-sm hover:bg-gray-800 mt-2" x-text="commenting?'Moderating...':'Comment'"></button><span x-show="commentSuccess" class="text-green-600 text-sm ml-2">Approved!</span></form>
|
||||
<div x-show="!user" class="text-sm text-gray-500 mb-6"><a href="https://speech.capital/login" class="text-blue-600 hover:underline">Log in</a> to comment.</div>
|
||||
<div class="space-y-4">
|
||||
<template x-for="c in comments" :key="c.id"><div class="comment"><div class="text-xs text-gray-500 mb-1"><a :href="'https://speech.capital/'+c.username" class="font-medium hover:underline" x-text="c.username"></a> · <span x-text="ago(c.created_at)"></span><template x-if="isMod()"><span class="text-gray-400"> · <div x-data="{open:false}" @click.away="open=false" class="relative inline-block align-middle"><button @click.stop="open=!open" title="Moderate" class="hover:text-red-600"><i data-lucide="more-vertical" class="w-3.5 h-3.5"></i></button><div x-show="open" style="display:none" class="absolute left-0 mt-2 w-max bg-white rounded-md shadow-lg z-10 border border-gray-200 text-left"><a @click.prevent.stop="moderate('comment_overwrite',c);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Overwrite</a><a @click.prevent.stop="moderate('comment_wipe',c);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Wipe</a><a @click.prevent.stop="banUser(c.user_id,c.username);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Ban User</a></div></div></span></template></div><p class="text-sm whitespace-pre-wrap mb-2" x-text="c.content"></p><div class="flex items-center gap-3 text-xs"><button @click="vote(c,1,true)" :class="c.voted===1?'text-gray-900':'text-gray-400'" class="hover:text-gray-900"><i data-lucide="chevron-up" class="w-4 h-4"></i></button><span x-text="c.score"></span><button @click="reply=c.id" class="text-blue-600 hover:underline" x-show="user">reply</button></div><form x-show="reply===c.id" @submit.prevent="comment(c.id,$event)" class="mt-2"><textarea x-model="txt" rows="3" class="w-full border border-gray-200 rounded px-3 py-2 text-sm"></textarea><button :disabled="commenting" type="submit" class="bg-gray-900 text-white px-3 py-1 rounded text-xs hover:bg-gray-800 mt-1" x-text="commenting?'Moderating...':'Reply'"></button><button type="button" @click="reply=null;txt=''" class="text-gray-600 px-3 py-1 text-xs">Cancel</button></form><div x-show="c.replies?.length" class="mt-3 space-y-3"><template x-for="r in c.replies" :key="r.id"><div class="comment"><div class="text-xs text-gray-500 mb-1"><a :href="'https://speech.capital/'+r.username" class="font-medium hover:underline" x-text="r.username"></a> · <span x-text="ago(r.created_at)"></span><template x-if="isMod()"><span class="text-gray-400"> · <div x-data="{open:false}" @click.away="open=false" class="relative inline-block align-middle"><button @click.stop="open=!open" title="Moderate" class="hover:text-red-600"><i data-lucide="more-vertical" class="w-3.5 h-3.5"></i></button><div x-show="open" style="display:none" class="absolute left-0 mt-2 w-max bg-white rounded-md shadow-lg z-10 border border-gray-200 text-left"><a @click.prevent.stop="moderate('comment_overwrite',r);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Overwrite</a><a @click.prevent.stop="moderate('comment_wipe',r);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Wipe</a><a @click.prevent.stop="banUser(r.user_id,r.username);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Ban User</a></div></div></span></template></div><p class="text-sm whitespace-pre-wrap mb-2" x-text="r.content"></p></div></template></div></div></template>
|
||||
<template x-for="c in comments" :key="c.id"><div class="comment"><div class="text-xs text-gray-500 mb-1"><a :href="'https://speech.capital/'+c.username" class="font-medium hover:underline" x-text="c.username"></a> · <span x-text="ago(c.created_at)"></span><template x-if="isMod()"><span class="text-gray-400"> · <div x-data="{open:false}" @click.away="open=false" class="relative inline-block align-middle"><button @click.stop="open=!open" title="Moderate" class="hover:text-red-600"><i data-lucide="more-vertical" class="w-3.5 h-3.5"></i></button><div x-show="open" style="display:none" class="absolute left-0 mt-2 w-max bg-white rounded-md shadow-lg z-10 border border-gray-200 text-left"><a @click.prevent.stop="moderate('comment_overwrite',c);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Overwrite</a><a @click.prevent.stop="moderate('comment_wipe',c);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Wipe</a><a @click.prevent.stop="banUser(c.user_id,c.username);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Ban User</a></div></div></span></template></div><p class="text-sm whitespace-pre-wrap mb-2" x-text="c.content"></p><div class="flex items-center gap-3 text-xs"><button @click="vote(c,1,true)" :class="c.voted===1?'text-gray-900':'text-gray-400'" class="hover:text-gray-900">▲</button><span x-text="c.score"></span><button @click="reply=c.id" class="text-blue-600 hover:underline" x-show="user">reply</button></div><form x-show="reply===c.id" @submit.prevent="comment(c.id,$event)" class="mt-2"><textarea x-model="txt" rows="3" class="w-full border border-gray-200 rounded px-3 py-2 text-sm"></textarea><button :disabled="commenting" type="submit" class="bg-gray-900 text-white px-3 py-1 rounded text-xs hover:bg-gray-800 mt-1" x-text="commenting?'Moderating...':'Reply'"></button><button type="button" @click="reply=null;txt=''" class="text-gray-600 px-3 py-1 text-xs">Cancel</button></form><div x-show="c.replies?.length" class="mt-3 space-y-3"><template x-for="r in c.replies" :key="r.id"><div class="comment"><div class="text-xs text-gray-500 mb-1"><a :href="'https://speech.capital/'+r.username" class="font-medium hover:underline" x-text="r.username"></a> · <span x-text="ago(r.created_at)"></span><template x-if="isMod()"><span class="text-gray-400"> · <div x-data="{open:false}" @click.away="open=false" class="relative inline-block align-middle"><button @click.stop="open=!open" title="Moderate" class="hover:text-red-600"><i data-lucide="more-vertical" class="w-3.5 h-3.5"></i></button><div x-show="open" style="display:none" class="absolute left-0 mt-2 w-max bg-white rounded-md shadow-lg z-10 border border-gray-200 text-left"><a @click.prevent.stop="moderate('comment_overwrite',r);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Overwrite</a><a @click.prevent.stop="moderate('comment_wipe',r);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete Wipe</a><a @click.prevent.stop="banUser(r.user_id,r.username);open=false" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Ban User</a></div></div></span></template></div><p class="text-sm whitespace-pre-wrap mb-2" x-text="r.content"></p></div></template></div></div></template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user