2021-11-24 16:48:06 +00:00
< div class = "hidden xl:block xl:col-start-10 xl:col-end-13 flex flex-col flex-shrink-0 py-4" >
2021-11-28 18:04:00 +00:00
<!-- <div v - cloak class="flex flex - col rounded - md border border - gray - 300 overflow - hidden mb - 4">
2021-11-24 16:48:06 +00:00
{% if v %}
2021-11-28 17:33:21 +00:00
< button @ click = "store.vote(1)" class = "group flex justify-between w-full px-4 py-3 bg-gradient-to-t hover:from-yellow-500 hover:to-yellow-600 border-b border-gray-300 rounded-t-md text-shadow-t shadow-inset-t-white-10 text-base font-medium text-gray-300 active:text-yellow-500 active:shadow-inner active:outline-none" v-bind:class = "[[ store.voteType === 1 ? 'from-yellow-600 to-yellow-500' : 'from-gray-700 to-gray-700']]" >
2021-11-24 16:48:06 +00:00
< span >
🕋 Halal
< / span >
< span class = "leading-none ml-3 px-2 py-1 border rounded text-sm font-bold group-hover:bg-yellow-700 group-hover:border-yellow-700" style = "border-top-color: rgba(0, 0, 0, 0.07);" v-bind:class = "[[ store.voteType === 1 ? 'bg-yellow-700 border-yellow-700' : 'border-gray-800 bg-gray-800']]" >
[[ store.voteType === 1 ? store.ups + 1 : store.ups ]]
< / span >
< / button >
{% if environ.get('DISABLE_DOWNVOTES') != '1' %}
2021-12-03 18:33:01 +00:00
< button v-cloak @ click = "store.vote(-1)" class = "group flex justify-between w-full px-4 py-3 bg-gradient-to-t hover:from-red-700 hover:to-red-800 rounded-b-md text-shadow-t shadow-inset-t-white-10 text-base font-medium text-gray-300 active:text-red-500 active:shadow-inner active:outline-none" v-bind:class = "[[ store.voteType === -1 ? 'from-red-800 to-red-700' : 'from-gray-800 to-gray-700']]" >
2021-11-24 16:48:06 +00:00
< span >
🐷 Haram
< / span >
2021-12-03 18:33:01 +00:00
< span class = "leading-none ml-3 px-2 py-1 border rounded text-sm font-bold group-hover:bg-red-800 group-hover:border-red-800" style = "border-top-color: rgba(0, 0, 0, 0.07);" v-bind:class = "[[ store.voteType === -1 ? 'bg-red-800 border-red-800' : 'border-gray-800 bg-gray-800']]" >
2021-11-24 16:48:06 +00:00
[[ store.voteType === -1 ? store.downs + 1 : store.downs ]]
< / span >
< / button >
{% endif %}
{% endif %}
< / div >
2021-11-28 18:04:00 +00:00
< hr class = "mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05" / > -->
2021-11-24 16:48:06 +00:00
< div >
< h2 class = "ml-2 font-bold text-lg font-heading leading-normal mb-2" >
2021-11-28 18:04:19 +00:00
Awards
2021-11-24 16:48:06 +00:00
< / h2 >
<!-- Give awards if none -->
{% if not p.awards %}
< p class = "text-sm text-gray-500" > No awards earned yet...< / p >
2021-12-03 18:33:01 +00:00
< button class = "text-sm text-red-600 hover:text-red-500" data-bs-toggle = "modal" data-bs-target = "#awardModal" onclick = "awardModal('/post/{{p.id}}/awards')" >
2021-11-24 16:48:06 +00:00
Give award
< / button >
{% endif %}
<!-- Icons -->
< ul class = "flex flex-wrap gap-3 items-center" >
<!-- Awards -->
{% if p.awards %}
{% for a in p.awards %}
< li >
< i class = "{{a.class_list}} fa-sm fa-fw" data-bs-toggle = "tooltip" data-bs-placement = "bottom" data-bs-original-title = "{{a.title}} Award given by @{{a.user.username}}" > < / i >
< / li >
{% endfor %}
{% endif %}
< / ul >
< / div >
2021-11-28 17:33:21 +00:00
< hr class = "mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05" / >
2021-11-24 16:48:06 +00:00
< div >
< h2 class = "ml-2 font-bold text-lg font-heading leading-normal mb-2" >
Link
< / h2 >
2021-11-30 23:47:52 +00:00
< input type = "text" onclick = "this.select()" value = "https://rdrama.net/post/{{ p.id }}" class = "m-0.5 p-0.5 bg-white border border-gray-300 text-xs text-black w-44" >
2021-11-24 16:48:06 +00:00
< / div >
2021-11-28 17:33:21 +00:00
< hr class = "mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05" / >
2021-11-24 16:48:06 +00:00
< div >
< h2 class = "ml-2 font-bold text-lg font-heading leading-normal mb-2" >
Share Post
< / h2 >
< div class = "flex flex-wrap items-center space-x-2" >
< a class = "leading-4 text-gray-400 hover:text-gray-300" href = "" >
< img src = "/assets/images/icons/reddit.gif" class = "w-7 h-7 object-contain" alt = "Share this post on Reddit" / >
< / a >
< a class = "leading-4 text-gray-400 hover:text-gray-300" href = "" >
< img src = "/assets/images/icons/twitter.gif" class = "w-7 h-7 object-contain" alt = "Share this post on Twitter" / >
< / a >
< / div >
< / div >
2021-11-28 17:33:21 +00:00
< hr class = "mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05" / >
2021-11-24 16:48:06 +00:00
< div >
< h2 class = "ml-2 font-bold text-lg font-heading leading-normal mb-2" >
DramaMetric™
< / h2 >
< ul class = "flex flex-col space-y-1 text-gray-500" >
< li >
< p class = "text-sm" >
< strong > {{ p.views }}< / strong > {{ 'view' if p.views == 1 else 'views' }} on this post
< / p >
< / li >
< li >
< p class = "text-sm" >
2021-12-03 18:33:01 +00:00
< strong class = "text-red-600" > {{ ups + downs }}< / strong > {{ 'vote' if ups + downs == 1 else 'votes' }} on this post
2021-11-24 16:48:06 +00:00
< / p >
< / li >
< li >
< p class = "text-sm" >
2021-12-03 18:33:01 +00:00
< strong class = "text-red-600" > {{ p.views }} {{ 'member' if p.views == 1 else 'members' }}< / strong > following this post
2021-11-24 16:48:06 +00:00
< / p >
< / li >
< / ul >
2021-12-03 20:09:20 +00:00
<!-- Banned -->
< ul class = "flex flex-col mb-0" >
2021-12-04 17:17:52 +00:00
{% if p.club %}
< li >
< span class = "badge badge-red" > Country Club< / span >
< li >
{% endif %}
2021-12-03 20:09:20 +00:00
{% if p.bannedfor and p.author.banned_by %}
< li >
< i class = "fad fa-gavel fa-sm fa-fw text-red-600" data-bs-toggle = "tooltip" data-bs-placement = "bottom" title = "" data-bs-original-title = "User was banned for this post by @{{p.author.banned_by.username}}" > < / i >
< / li >
{% endif %}
<!-- Stickied -->
{% if p.stickied %}
< li >
< i id = "pinned-{{p.id}}" class = "fas fa-thumbtack fa-rotate--45 fa-sm fa-fw text-admin" data-bs-toggle = "tooltip" data-bs-placement = "bottom" > < / i >
< span class = "font-heading text-xs text-red-500" >
Pinned {% if p.stickied.startswith('t:') %}until {{p.stickied[2:]}}{% else %}by @{{p.stickied}}{%endif%}
< / span >
< / li >
{% endif %}
<!-- Pinned -->
{% if p.is_pinned %}
< li >
< i class = "fas fa-thumbtack fa-rotate--45 fa-sm fa-fw text-admin" data-bs-toggle = "tooltip" data-bs-placement = "bottom" data-bs-original-title = "Pinned to profile" > < / i >
< / li >
{% endif %}
<!-- NSFW -->
{% if p.over_18 %}
< li >
< span class = "px-2 py-1 rounded-sm bg-gradient-to-t from-red-700 to-red-500 shadow-inner text-xs text-white" > +18< / span >
< / li >
{% endif %}
<!-- Private -->
{% if p.private %}
< li >
< span class = "badge border-warning border-1 text-small-extra" > Draft< / span >
< / li >
{% endif %}
< / ul >
2021-11-24 16:48:06 +00:00
< / div >
< / div >
{% block scripts %}
< script type = "module" >
import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
const store = reactive({
ups: {{ ups }},
downs: {{ downs }},
voteType: {{ voted }},
count: {{ score }},
vote(type) {
this.voteType = this.voteType === type ? 0 : type;
const xhr = new XMLHttpRequest();
xhr.open("POST", "/vote/post/" + {{ p.id }} + "/" + this.voteType, true);
const form = new FormData()
form.append("formkey", formkey());
xhr.withCredentials=true;
xhr.send(form);
}
})
createApp({
store,
$delimiters: ['[[', ']]']
}).mount()
< / script >
{% endblock %}