740 lines
33 KiB
HTML
740 lines
33 KiB
HTML
{% extends "default.html" %}
|
|
|
|
{% set ups=p.upvotes %}
|
|
{% set downs=p.downvotes %}
|
|
{% set score=ups-downs %}
|
|
|
|
{% if v %}
|
|
{% set voted=p.voted if p.voted else 0 %}
|
|
{% else %}
|
|
{% set voted=-2 %}
|
|
{% endif %}
|
|
|
|
{% block title %}
|
|
|
|
{% if v and (v.id == p.author_id or v.admin_level == 6 and v.id in [1,28,995,2513]) %}
|
|
<script defer>
|
|
togglePostEdit=function(id){
|
|
|
|
body=document.getElementById("post-body");
|
|
title=document.getElementById("post-title");
|
|
form=document.getElementById("edit-post-body-"+id);
|
|
box=document.getElementById("post-edit-box-"+id);
|
|
|
|
body.classList.toggle("hidden");
|
|
title.classList.toggle("hidden");
|
|
form.classList.toggle("hidden");
|
|
autoExpand(box);
|
|
};
|
|
</script>
|
|
{% endif %}
|
|
|
|
|
|
{% if 'rama' not in request.host %}
|
|
<script defer>
|
|
function poll_vote(cid) {
|
|
{% if v %}
|
|
var type = document.getElementById(cid).checked;
|
|
var scoretext = document.getElementById('poll-' + cid);
|
|
var score = Number(scoretext.textContent);
|
|
if (type == true) scoretext.textContent = score + 1;
|
|
else scoretext.textContent = score - 1;
|
|
post('/vote/poll/' + cid + '?vote=' + type);
|
|
{% else %}
|
|
var myToast = new bootstrap.Toast(document.getElementById('toast-post-error'));
|
|
myToast.show();
|
|
document.getElementById('toast-post-error-text').innerText = "Only logged-in users can vote!";
|
|
{% endif %}
|
|
}
|
|
</script>
|
|
|
|
{% if v %}
|
|
<script defer src="/assets/js/comments_v.js?v=70"></script>
|
|
{% include "award_modal.html" %}
|
|
{% include "emoji_modal.html" %}
|
|
{% include "gif_modal.html" %}
|
|
{% if v.admin_level == 6 %}
|
|
{% include "ban_modal.html" %}
|
|
{% endif %}
|
|
{% endif %}
|
|
{% include "expanded_image_modal.html" %}
|
|
{% endif %}
|
|
|
|
{% if p.award_count("shit") %}
|
|
<script defer src="/assets/js/bugs.js?v=54"></script>
|
|
{% set minbugs = 10*p.award_count("shit") if p.award_count("shit") < 3 else 20 %}
|
|
{% set maxbugs = 20*p.award_count("shit") if p.award_count("shit") < 3 else 40 %}
|
|
<script>
|
|
new BugController({
|
|
imageSprite: "/assets/images/fly-sprite.gif",
|
|
canDie: false,
|
|
minBugs: {{minbugs}},
|
|
maxBugs: {{maxbugs}},
|
|
mouseOver: "multiply"
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
|
|
|
|
{% if p.award_count("fireflies") %}
|
|
<script defer src="/assets/js/fireflies.js?v=54"></script>
|
|
{% set minbugs = 10*p.award_count("fireflies") if p.award_count("fireflies") < 3 else 20 %}
|
|
{% set maxbugs = 20*p.award_count("fireflies") if p.award_count("fireflies") < 3 else 40 %}
|
|
<script>
|
|
new BugController({
|
|
imageSprite: "/assets/images/fireflies.gif",
|
|
canDie: false,
|
|
minBugs: {{minbugs}},
|
|
maxBugs: {{maxbugs}},
|
|
mouseOver: "multiply"
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
|
|
|
|
<meta charset="utf-8" >
|
|
<meta property="og:type" content="article" >
|
|
|
|
{% if comment_info and not comment_info.is_banned and not linked_comment.deleted_utc > 0 %}
|
|
<title>{{'@'+comment_info.author.username}} comments on "{{p.plaintitle(v)}} - {{'SITE_NAME' | app_config}}"</title>
|
|
|
|
|
|
<meta property="og:article:author" content="{{'@'+comment_info.author.username}}" >
|
|
<meta property="article:published_time" content="{{comment_info.created_datetime}}" >
|
|
{% if comment_info.edited_utc %}<meta property="article:modified_time" content="{{comment_info.edited_string}}" >{% endif %}
|
|
<meta property="og:description" name="description" content="{{comment_info.plainbody(v)}}" >
|
|
<meta property="og:author" name="author" content="{{'@'+comment_info.author.username}}" >
|
|
<meta property="og:title" content="{{'@'+comment_info.author.username}} comments on {{p.plaintitle(v)}} - {{'SITE_NAME' | app_config}}" >
|
|
<meta property="og:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb%}{{p.thumb_url}}{% else %}{{'SITE_NAME' | app_config}}/assets/images/{{'SITE_NAME' | app_config}}/preview.gif{% endif %}" >
|
|
{% if p.url and p.url.lower().endswith('.mp4') %}
|
|
<meta property="og:video" content="{{ p.realurl(v) }}" >
|
|
{% endif %}
|
|
<meta property="og:url" content="{{comment_info.permalink | full_link}}" >
|
|
<meta property="og:site_name" content="{{request.host}}" >
|
|
|
|
<meta name="twitter:card" content="summary" >
|
|
<meta name="twitter:site" content="{{request.host_url}}">
|
|
<meta name="twitter:title" content="{{'@'+comment_info.author.username}} comments on {{p.plaintitle(v)}} - {{'SITE_NAME' | app_config}}" >
|
|
<meta name="twitter:creator" content="{{'@'+comment_info.author.username}}">
|
|
<meta name="twitter:description" content="{{comment_info.plainbody(v)}}" >
|
|
<meta name="twitter:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb%}{{p.thumb_url}}{% else %}{{'SITE_NAME' | app_config}}/assets/images/{{'SITE_NAME' | app_config}}/preview.gif{% endif %}" >
|
|
<meta name="twitter:url" content="{{p.permalink | full_link}}" >
|
|
|
|
{% if linked_comment.author.is_private %}
|
|
<meta name="robots" content="noindex">
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<title>{{p.plaintitle(v)}} - {{'SITE_NAME' | app_config}}</title>
|
|
|
|
|
|
{% if p.author %}<meta property="og:article:author" content="{{'@'+p.author.username}}">{% endif %}
|
|
<meta property="article:published_time" content="{{p.created_datetime}}" >
|
|
{% if p.edited_utc %}<meta property="article:modified_time" content="{{p.edited_string}}" >{% endif %}
|
|
<meta property="og:description" name="description" content="{{p.plainbody(v)}}" >
|
|
{% if p.author %}<meta property="og:author" name="author" content="{{'@'+p.author.username}}" >{% endif %}
|
|
<meta property="og:title" content="{{p.plaintitle(v)}} - {{'SITE_NAME' | app_config}}" >
|
|
<meta property="og:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb%}{{p.thumb_url}}{% else %}{{'SITE_NAME' | app_config}}/assets/images/{{'SITE_NAME' | app_config}}/preview.gif{% endif %}" >
|
|
{% if p.url and p.url.lower().endswith('.mp4') %}
|
|
<meta property="og:video" content="{{ p.realurl(v) }}" >
|
|
{% endif %}
|
|
<meta property="og:url" content="{{p.permalink | full_link}}" >
|
|
<meta property="og:site_name" content="{{request.host}}" >
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="{{request.host_url}}">
|
|
<meta name="twitter:title" content="{{p.plaintitle(v)}} - {{'SITE_NAME' | app_config}}" >
|
|
{% if p.author %}<meta name="twitter:creator" content="{{'@'+p.author.username}}">{% endif %}
|
|
<meta name="twitter:description" content="{{p.plainbody(v)}}" >
|
|
<meta name="twitter:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb %}{{p.thumb_url}}{% else %}{{'SITE_NAME' | app_config}}/assets/images/{{'SITE_NAME' | app_config}}/preview.gif{% endif %}" >
|
|
<meta name="twitter:url" content="{{p.permalink | full_link}}" >
|
|
|
|
{% if p.author.is_private %}
|
|
<meta name="robots" content="noindex">
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block pagetype %}thread{% endblock %}
|
|
|
|
{% block actionsModal %}
|
|
|
|
<div style="display:none" id="popover-{{p.id}}">
|
|
<div class="popover-user-profile" role="tooltip">
|
|
<img class="w-100 h-64 object-cover" src="{{p.author.banner_url}}">
|
|
<div class="d-flex align-items-end px-3 mt-n6 mb-3">
|
|
<img class="avatar-72 rounded img-thumbnail shadow-sm" src="{{p.author.profile_url}}">
|
|
<div class="px-3 text-truncate">
|
|
<h5 class="text-truncate text-black">{{p.author.username}}</h5>
|
|
</div>
|
|
</div>
|
|
<div class="px-3">
|
|
<span class="popover-bio text-black">{% if p.author.bio_html %}{{p.author.bio_html_eager | safe}}{% endif %}</span>
|
|
</div>
|
|
<div class="border-top d-flex align-items-center p-3 gap-3 smol">
|
|
<span>
|
|
<strong class="text-black">{{p.author.post_count}}</strong>
|
|
<span class="text-black">posts</span>
|
|
</span>
|
|
<span class="ml-3">
|
|
<strong class="text-black">{{p.author.comment_count}}</strong>
|
|
<span class="text-black">comments</span>
|
|
</span>
|
|
<span class="ml-3">
|
|
<strong class="text-black">{{p.author.coins}}</strong>
|
|
<span class="text-black">coins</span>
|
|
</span>
|
|
|
|
<a {% if v %}href="{{p.author.url}}"{% else %}href="/logged_out{{p.author.url}}"{% endif %} target="_blank" class="ml-auto text-decoration-none">
|
|
View
|
|
<i class="fas fa-arrow-right fa-sm px-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include "/modals/ModalSubmissionActions.html" %}
|
|
|
|
{% endblock %}
|
|
|
|
{% block subHeader %}
|
|
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
|
|
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 rounded-t sub-header-shadow"></div>
|
|
<div class="relative col-span-full flex items-center">
|
|
<div>
|
|
<h1 class="font-bold text-xl font-heading leading-normal mb-0">
|
|
Thread
|
|
</h1>
|
|
<ul class="flex space-x-2 text-xs text-gray-500 leading-normal mb-0">
|
|
<li>
|
|
<a href="/" class="text-gray-500 hover:underline">Home</a>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-arrow-alt-right text-shadow fa-fw fa-sm"></i>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="text-gray-700 hover:underline">{{p.author.username}}'s post</a>
|
|
<li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="col-span-full xl:col-span-9">
|
|
|
|
<!-- Post -->
|
|
<div id="post-root" class="sm:py-4 my-2.5 sm:my-0">
|
|
|
|
<div id="post-{{p.id}}" class="w-full p-2.5 md:p-0 {% if p.is_banned %}bg-red-900{% endif %}{% if voted==1 %}upvoted{% elif voted==-1 %}downvoted{% endif %}">
|
|
<div class="{% if p.deleted_utc > 0 %}deleted {% endif %} flex flex-row-reverse flex-nowrap justify-end">
|
|
|
|
{% if not p.is_image and p.thumb_url and not p.embed_url %}
|
|
<div class="hidden md:block pl-3">
|
|
<a rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>
|
|
<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-32 h-20 object-cover object-cover bg-white border border-gray-300" alt="post thumbnail">
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="w-full">
|
|
<!-- Content -->
|
|
<div id="post-content" class="{% if p.deleted_utc > 0 %}deleted {% endif %}card-block w-100 my-md-auto">
|
|
|
|
{% if p.active_flags %}
|
|
<div id="flaggers" class="flaggers hidden">
|
|
<strong><i class="far fa-fw fa-flag"></i> Reported by:</strong>
|
|
<pre></pre>
|
|
<ul style="padding-left:20px; margin-bottom: 0;">
|
|
{% for f in p.ordered_flags %}
|
|
<li><a style="font-weight:bold" href="{{f.user.url}}">{{f.user.username}}</a>{% if f.reason %}: {{f.reason | safe}}{% endif %} {% if v.admin_level==6 %}<a href="javascript:void(0)" onclick="post_toast('/del_report/p{{ f.id }}')">[remove]</a>{% endif %}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Meta information -->
|
|
<div class="flex items-center space-x-2 md:-ml-2 mb-1 text-sm text-gray-500 leading-normal">
|
|
|
|
<div class="relative avatar md:hidden">
|
|
<img loading="lazy" src="{{ p.author.profile_url }}" class="w-9 h-9 p-[3px] bg-white border border-gray-300 object-cover" alt="{{ p.author.username }} avatar"/>
|
|
</div>
|
|
|
|
{% if v and v.admin_level==6 and p.author.shadowbanned %}
|
|
<i class="fas fa-user-times text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Shadowbanned by @{{p.author.shadowbanned}}"></i>
|
|
{% endif %}
|
|
{% if p.distinguish_level %}
|
|
<i class="fas fa-broom text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{'SITE_NAME' | app_config}} Admin, speaking officially"></i>
|
|
{% endif %}
|
|
{% if p.is_bot %}
|
|
<i class="fad fa-robot text-info" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Bot"></i>
|
|
{% endif %}
|
|
{% if p.author.verified %}
|
|
<i class="fas fa-badge-check align-middle ml-1" style="color:{% if p.author.verifiedcolor %}#{{p.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="{{p.author.verified}}"></i>
|
|
{% endif %}
|
|
<button class="flex items-center font-bold" data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover-{{p.id}}" tabindex="0" style="color: #{{p.author.namecolor}}; font-weight: bold;" class="user-name">
|
|
{% if p.author.patron and not p.distinguish_level %}
|
|
<span class="patron" style="background-color:#{{p.author.namecolor}};">
|
|
{{p.author.username}}
|
|
</span>
|
|
{% elif p.distinguish_level and 'rama' in request.host %}
|
|
<span class="mod">
|
|
{{p.author.username}}
|
|
</span>
|
|
{% else %}
|
|
<span>
|
|
{{p.author.username}}
|
|
</span>
|
|
{% endif %}
|
|
</button>
|
|
|
|
{% if p.author.customtitle %}
|
|
<bdi style="color: #{{p.author.titlecolor}}">
|
|
{% if p.author.quadrant %}
|
|
<img loading="lazy" height="20" src="/assets/images/PCM/quadrants/{{p.author.quadrant}}.gif">
|
|
{% endif %}
|
|
{{p.author.customtitle | safe}}
|
|
</bdi>
|
|
{% endif %}
|
|
|
|
<span data-bs-toggle="tooltip" data-bs-placement="bottom" id="timestamp">{{p.age_string}}</span>
|
|
|
|
{% if p.edited_utc %}
|
|
Edited
|
|
<span data-bs-toggle="tooltip" data-bs-placement="bottom" id="edited_timestamp">{{p.edited_string}}</span>
|
|
{% endif %}
|
|
|
|
{% if p.realurl(v) %}
|
|
<a class="text-gray-500 hover:underline" href="/search/posts/?q=domain%3A{{p.domain}}&sort=new&t=all" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>({{p.domain}})
|
|
</a>
|
|
{% else %}
|
|
<span>(text post)</span>
|
|
{% endif %}
|
|
|
|
<!-- <span>{{p.views}} views</span> -->
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<h1 id="post-title" class="post-title font-bold font-heading text-lg md:text-3xl leading-normal mb-2">
|
|
{% if p.club %}
|
|
<span class="badge badge-yellow font-sans-serif">Country Club</span>
|
|
{% endif %}
|
|
{% if p.flair %}
|
|
<span class="badge badge-blue font-sans-serif">
|
|
{{p.flair | safe}}
|
|
</span>
|
|
{% endif %}
|
|
{% if p.realurl(v) %}
|
|
<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}" class="text-black hover:text-primary">
|
|
{{p.realtitle(v) | safe}}
|
|
</a>
|
|
{% else %}
|
|
{{p.realtitle(v) | safe}}
|
|
{% endif %}
|
|
</h1>
|
|
|
|
<!-- Body content -->
|
|
<div id="post-body" class="post-body mb-3">
|
|
{% if p.realurl(v) %}
|
|
{% if "streamable.com/" in p.realurl(v) %}
|
|
<div style="width: 100%; height: 0px; position: relative; padding-bottom: 56.250%;"><iframe loading="lazy" src="{{p.realurl(v)}}" frameborder="0" width="100%" height="100%" allowfullscreen="" style="width: 100%; height: 100%; position: absolute;"></iframe></div>
|
|
<pre></pre>
|
|
{% elif "spotify.com/" in p.realurl(v) %}
|
|
{% if "spotify.com/embed/" in p.realurl(v) %}
|
|
{% set streamurl=p.realurl(v) %}
|
|
{% else %}
|
|
{% set streamurl=p.realurl(v).replace("spotify.com", "spotify.com/embed") %}
|
|
{% endif %}
|
|
<iframe loading="lazy" src="{{streamurl}}" width="100%" height="160" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
|
|
<pre></pre>
|
|
|
|
{% elif not p.embed_url and not p.is_image and not (p.url and p.url.lower().endswith('.mp4')) %}
|
|
<a rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>
|
|
<div class="d-flex md:hidden justify-content-between align-items-center border rounded p-2{% if p.realbody(v) %} mb-3{% endif %}">
|
|
<span>{{p.domain|truncate(30, True)}}</span>
|
|
<i class="fas fa-external-link-alt text-small"></i>
|
|
</div>
|
|
</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
<div id="post-text" class="text-black {% if p.award_count("candycane") %}candycane{% endif %}">
|
|
{% if p.is_image %}
|
|
<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}">
|
|
<img loading="lazy" src="{{p.realurl(v)}}" class="img-fluid" style="max-height:500px;" alt="Unable to load image">
|
|
</a>
|
|
{% elif p.url and p.url.lower().endswith('.mp4') %}
|
|
<video controls loop preload="metadata" style="max-width: 100%">
|
|
<source src="{{ p.realurl(v) }}" type="video/mp4"/>
|
|
</video>
|
|
{% endif %}
|
|
|
|
{{p.realbody(v) | safe}}
|
|
|
|
{% for c in p.options %}
|
|
<div class="custom-control">
|
|
<input type="checkbox" class="custom-control-input" id="{{c.id}}" name="option" {% if c.poll_voted(v) %}checked{% endif %} onchange="poll_vote('{{c.id}}')">
|
|
<label class="custom-control-label" for="{{c.id}}">{{c.body_html | safe}} - <a href="/votes?link=t3_{{c.id}}"><span id="poll-{{c.id}}">{{c.upvotes}}</span> votes</a></label>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% if p.is_banned and p.ban_reason %}
|
|
<div class="text-removed mb-0">removed by @{{p.ban_reason}}</div>
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
{% if p.embed_url %}
|
|
{% if p.domain == "twitter.com" %}
|
|
{{p.embed_url | safe}}
|
|
{% if v and v.theme.split("_")[0] in ["light", "coffee", "4chan"] %}
|
|
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
|
{% else %}
|
|
<script src="/assets/js/twitter.js" charset="utf-8"></script>
|
|
{% endif %}
|
|
<script>document.getElementById('twitter-widget-0').setAttribute('sandbox','')</script>
|
|
{% elif "youtu" in p.domain %}
|
|
{% if 'lite' in p.embed_url %}
|
|
{{p.embed_url | safe}}
|
|
{% else %}
|
|
<div class="embed-responsive embed-responsive-16by9 mb-3">
|
|
<iframe loading="lazy" src="{{p.embed_url}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
|
|
{% if p.author.sig_html and (p.author_id == 1904 or not (v and v.sigs_disabled)) %}
|
|
<hr>
|
|
{{p.author.sig_html | safe}}
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if v and (v.id==p.author_id or v.admin_level==6 and v.id in [1,28,995,2513]) and not v.is_suspended %}
|
|
{% include "/submission/SubmissionEditForm.html" %}
|
|
{% endif %}
|
|
|
|
{% if p.embed_url and "http" not in p.embed_url %}
|
|
<div id="crosspost-embed">
|
|
<div class="row no-gutters">
|
|
<div id="frontpage" class="col-12 pt-0">
|
|
<div class="posts" id="posts">
|
|
{{ p.embed_url | post_embed(v) | safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
<!-- Post actions -->
|
|
<div class="hidden md:block pt-4">
|
|
{% include "/submission/SubmissionActions.html" %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Author avatar, post score, and voting buttons -->
|
|
<div class="hidden md:flex flex-col flex-shrink-0 items-center mr-4">
|
|
|
|
<div class="relative avatar">
|
|
<img loading="lazy" src="{{p.author.profile_url}}" class="w-14 h-14 p-[3px] bg-white border border-gray-300 object-cover" alt="author avatar"/>
|
|
</div>
|
|
|
|
<div class="py-2 text-sm text-gray-400 text-center font-bold hidden md:block">
|
|
{% if v and request.path.startswith('/@') and not v.admin_level %}
|
|
{% if voted==1 %}
|
|
<div class="mx-auto arrow-up post-{{p.id}}-up active"></div>
|
|
{% endif %}
|
|
|
|
<span id="post-score-{{p.id}}" class="score post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}"{% endif %}>{{score}}</span>
|
|
|
|
{% if voted==-1 %}
|
|
<div class="mx-auto arrow-down post-{{p.id}}-down active"></div>
|
|
{% endif %}
|
|
|
|
{% elif v %}
|
|
|
|
<div id="post-{{p.id}}-up" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '1')" class="mx-auto arrow-up upvote-button post-{{p.id}}-up {% if voted==1 %}active{% endif %}"></div>
|
|
|
|
<span id="post-score-{{p.id}}" class="score post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}"{% endif %}>{{score}}</span>
|
|
|
|
<div {% if environ.get('DISABLE_DOWNVOTES') == '1' %}style="display:None!important"{% endif %} id="post-{{p.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '-1')" class="mx-auto arrow-down downvote-button post-{{p.id}}-down {% if voted==-1 %}active{% endif %}"></div>
|
|
|
|
{% else %}
|
|
|
|
<div id="post-{{p.id}}-up" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '1')" class="mx-auto arrow-up" onclick="location.href='/login';"></div>
|
|
|
|
<span id="post-{{p.id}}-score-none" class="score"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}"{% endif %}>{{score}}</span>
|
|
|
|
<div {% if environ.get('DISABLE_DOWNVOTES') == '1' %}style="display:None!important"{% endif %} id="post-{{p.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '-1')" class="mx-auto arrow-down" onclick="location.href='/login';"></div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- {% if v %}
|
|
<div id="voting" class="shadow-inner shadow-md rounded-md flex flex-col mb-1 py-2 items-center w-16 border-opacity-40 border border-gray-700 bg-gray-700 text-gray-500">
|
|
<button id="post-{{p.id}}-up" tabindex="0" onclick="vote('post', '{{p.id}}', '1')" class="mx-auto arrow-up upvote-button post-{{p.id}}-up {% if voted==1 %}active{% endif %}"></button>
|
|
<span id="post-score-{{p.id}}" class="font-bold text-lg post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}" data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}">{{score}}</span>
|
|
<div {% if environ.get('DISABLE_DOWNVOTES') == '1' %}style="display:None!important"{% endif %} id="post-{{p.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '-1')" class="text-muted mx-auto arrow-down downvote-button post-{{p.id}}-down {% if voted==-1 %}active{% endif %}"></div>
|
|
</div>
|
|
|
|
<button id="post-{{p.id}}-up" class="flex items-center justify-center text-xs font-bold mb-1 rounded-md w-full border p-1 border-gray-800 post-{{p.id}}-up text-gray-500 hover:text-pink-500 focus:text-pink-500" onclick="vote('post', '{{p.id}}', '1')">
|
|
+ <i class="fas fa-heart fa-sm fa-fw pl-1"></i>
|
|
</button>
|
|
|
|
{% if environ.get('DISABLE_DOWNVOTES') != '1' %}
|
|
<button id="post-{{p.id}}-down" class="text-gray-600 text-center text-xs post-{{p.id}}-down {% if voted==-1 %}active{% endif %}" onclick="vote('post', '{{p.id}}', '-1')">
|
|
Dislike
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
Logged out score
|
|
<div id="voting" class="shadow-inner shadow-md rounded-md flex flex-col mb-1 py-2 items-center w-16 border-opacity-40 border border-gray-700 bg-gray-700 text-gray-500">
|
|
<span id="post-score-{{p.id}}" class="font-bold text-lg post-score-{{p.id}}" data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}">{{score}}</span>
|
|
</div>
|
|
Logged out upvote (links to login)
|
|
<button id="post-{{p.id}}-up" class="flex items-center justify-center text-xs font-bold mb-1 rounded-md w-full border p-1 border-gray-800 post-{{p.id}}-up text-gray-500 hover:text-pink-500 focus:text-pink-500" onclick="location.href='/login?redirect={{request.path | urlencode}}';">
|
|
+ <i class="fas fa-heart fa-sm fa-fw pl-1"></i>
|
|
</button>
|
|
Logged out downvote (links to login)
|
|
{% if environ.get('DISABLE_DOWNVOTES') != '1' %}
|
|
<button id="post-{{p.id}}-down" class="text-gray-600 text-center text-xs post-{{p.id}}-down" onclick="location.href='/login?redirect={{request.path | urlencode}}';">
|
|
Dislike
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% endif %} -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% if not p.is_image and not (p.url and p.url.lower().endswith('.mp4')) %}
|
|
<div class="col-span-full">
|
|
<div class="col">
|
|
<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}"></a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="md:hidden px-2.5">
|
|
{% include "/submission/SubmissionActionsMobile.html" %}
|
|
</div>
|
|
|
|
<div class="shadow-inset-t-white-05 border-t border-gray-300 py-4">
|
|
|
|
<!-- <div class="comments-count mb-4">
|
|
<div class="dropdown dropdown-actions">
|
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up mr-1"></i>{% endif %}
|
|
{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down mr-1"></i>{% endif %}
|
|
{% if sort=="new" %}<i class="fas fa-sparkles mr-1"></i>{% endif %}
|
|
{% if sort=="old" %}<i class="fas fa-book mr-1"></i>{% endif %}
|
|
{% if sort=="controversial" %}<i class="fas fa-bullhorn mr-1"></i>{% endif %}
|
|
{{sort | capitalize}}
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
|
|
{% if sort != "top" %}<a class="dropdown-item" href="?sort=top"><i class="fas fa-arrow-alt-circle-up mr-2"></i>Top</a>{% endif %}
|
|
{% if sort != "bottom" %}<a class="dropdown-item" href="?sort=bottom"><i class="fas fa-arrow-alt-circle-down mr-2"></i>Bottom</a>{% endif %}
|
|
{% if sort != "new" %}<a class="dropdown-item" href="?sort=new"><i class="fas fa-sparkles mr-2"></i>New</a>{% endif %}
|
|
{% if sort != "old" %}<a class="dropdown-item" href="?sort=old"><i class="fas fa-book mr-2"></i>Old</a>{% endif %}
|
|
{% if sort != "controversial" %}<a class="dropdown-item" href="?sort=controversial"><i class="fas fa-bullhorn mr-2"></i>Controversial</a>{% endif %}
|
|
</div>
|
|
{% if linked_comment and p.comment_count >= 2%}
|
|
<pre></pre>
|
|
<div class="total"><a {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %}>View entire discussion</a></div>
|
|
{% endif %}
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="flex justify-between mb-1 px-2.5 md:px-0">
|
|
<div class="md:ml-20 font-bold text-sm">
|
|
<span class="text-black">
|
|
{{ p.comment_count }} {{ 'Response' if p.comment_count == 1 else 'Responses' }}
|
|
</span>
|
|
<!-- Entire thread link -->
|
|
{% if linked_comment and p.comment_count >= 2%}
|
|
<a href="{% if v %}{{ p.permalink }}{% else %}/logged_out/{{p.permalink}}{% endif %}" class="pl-2 text-red-600 hover:text-red-700">
|
|
View entire thread
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
<ul class="flex space-x-3 text-sm text-gray-500 leading-normal mb-0">
|
|
<li>
|
|
<a href="?sort=top" class="{{ 'font-bold text-red-600' if sort == 'top' else 'text-gray-500 hover:text-gray-700'}}">
|
|
Top
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="?sort=new" class="{{ 'font-bold text-red-600' if sort == 'new' else 'text-gray-500 hover:text-gray-700'}}">
|
|
Latest
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="?sort=old" class="{{ 'font-bold text-red-600' if sort == 'old' else 'text-gray-500 hover:text-gray-700'}}">
|
|
Oldest
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="?sort=controversial" class="{{ 'font-bold text-red-600' if sort == 'controversial' else 'text-gray-500 hover:text-gray-700'}}">
|
|
Controversial
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="?sort=bottom" class="{{ 'font-bold text-red-600' if sort == 'bottom' else 'text-gray-500 hover:text-gray-700'}}">
|
|
Worst
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="comment-form-space-{{p.fullname}}" class="comment-write flex px-2.5 md:px-0">
|
|
<div class="hidden md:block relative flex-shrink-0 mr-4 {{ 'santa' if p.author.patron else 'cap' }}">
|
|
<img loading="lazy" src="{{v.profile_url}}" class="w-14 h-14 p-[3px] bg-white border border-gray-300 object-cover" alt="my avatar"/>
|
|
</div>
|
|
{% include "/comments/CommentForm.html" %}
|
|
</div>
|
|
|
|
{% if not v and not p.is_banned %}
|
|
<div class="comment-write mb-3 px-2.5 md:px-0">
|
|
<textarea maxlength="10000" class="comment-box rounded-sm border border-gray-700 border-opacity-40 bg-gray-700 bg-opacity-20 focus:bg-opacity-100 focus:bg-white hover:bg-opacity-30 shadow-inner w-full p-2" name="body" aria-label="With textarea" placeholder="Add your comment..." rows="3" onclick="location.href='/login?redirect={{request.path | urlencode}}';"></textarea>
|
|
</div>
|
|
{% if p.comment_count >= 2 %}
|
|
<div class="card border-0 mt-4 px-2.5 md:px-0">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Jump in the discussion.</h5>
|
|
<p class="card-text">No email address required.</p>
|
|
<div>
|
|
<a href="/signup?redirect={{request.path | urlencode}}" class="btn btn-primary">Sign up</a>
|
|
<a href="/login?redirect={{request.path | urlencode}}" class="btn btn-link text-muted">Sign in</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if p.replies %}
|
|
<div class="comment-section px-2.5 md:px-0" id="comment-section">
|
|
{% with comments=p.replies %}
|
|
{% include "comments.html" %}
|
|
{% endwith %}
|
|
</div>
|
|
{% elif not p.replies and p.deleted_utc == 0 %}
|
|
<div class="comment-section px-2.5 md:px-0 text-center py-7">
|
|
<span class="fa-stack fa-2x text-muted mb-4">
|
|
<i class="fas fa-square text-gray-500 opacity-25 fa-stack-2x"></i>
|
|
<i class="fas text-gray-500 fa-ghost fa-stack-1x text-lg"></i>
|
|
</span>
|
|
<h2 class="h5">Be the first to comment!</h2>
|
|
{% if v %}
|
|
<p class="text-muted">This comment section is a ghost town...</p>
|
|
{% else %}
|
|
<p class="text-muted">This comment section is a ghost town. <a href="/login?redirect={{request.path | urlencode}}">Sign in</a></p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if offset %}
|
|
<script defer>
|
|
function loadMore(id, trigger) {
|
|
const btn = document.getElementById(trigger) // trigger button
|
|
const el = document.getElementById(id) // target element to populate
|
|
const form = new FormData();
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
btn.classList.toggle('animate-pulse');
|
|
|
|
xhr.open("post", "/viewmore/{{p.id}}/{{sort}}/{{offset}}");
|
|
xhr.withCredentials=true;
|
|
xhr.onload=function(){
|
|
if (xhr.status==200) {
|
|
el.innerHTML = xhr.response; // replace desired element with response html
|
|
btn.style.display = "none"; // hide button
|
|
} else {
|
|
btn.disabled = false; // enable our button if GET fails
|
|
}
|
|
}
|
|
xhr.send(form)
|
|
}
|
|
</script>
|
|
<button class="mt-2 w-full btn btn-gray" id="load-more-button" onclick="loadMore('comment-section', this.id); this.disabled = true;">
|
|
Load more comments
|
|
</button>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
<!-- Sidebar -->
|
|
{% block sidebar %}
|
|
{% include "/sidebars/SubmissionSidebar.html" %}
|
|
{% endblock %}
|
|
|
|
{% block modals %}
|
|
{% if v and v.id==p.author_id %}
|
|
{% include "delete_post_modal.html" %}
|
|
{% endif %}
|
|
|
|
{% if v %}
|
|
{% include "report_post_modal.html" %}
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<!-- This file contains minimal html and javascript required for awards, needs to be near </body> closing tag -->
|
|
{% include "/submission/SubmissionAwards.html" %}
|
|
|
|
{% if v %}
|
|
<script defer src="/assets/js/vote.js?v=1"></script>
|
|
{% if not p.comment_count %}
|
|
<script defer src="/assets/js/comments_v.js?v=74"></script>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<script defer src="/assets/js/new_comments_count.js?v=53"></script>
|
|
|
|
<script defer>
|
|
(() => {
|
|
const date = new Date({{p.created_utc*1000}});
|
|
document.getElementById('timestamp').title = date.toString();
|
|
{% if p.edited_utc %}
|
|
const dateEdited = new Date({{p.edited_utc*1000}});
|
|
document.getElementById('edited_timestamp').title = dateEdited.toString();
|
|
{% endif %}
|
|
|
|
{% if (not v or v.highlightcomments) %}
|
|
showNewCommentCounts('{{p.id}}', {{p.comment_count}})
|
|
{% endif %}
|
|
|
|
{% if "?context" not in request.full_path %}
|
|
const comments = JSON.parse(localStorage.getItem("comment-counts")) || {}
|
|
const newTotal = {{p.comment_count}} || ((comments['{{p.id}}'] || { c: 0 }).c + 1)
|
|
comments['{{p.id}}'] = { c: newTotal, t: Date.now() }
|
|
window.localStorage.setItem("comment-counts", JSON.stringify(comments))
|
|
{% endif %}
|
|
|
|
{% if p.stickied %}
|
|
const pinned_info = document.getElementById('pinned-{{p.id}}')
|
|
{% if p.stickied.startswith('t:') %}
|
|
pinned_info.setAttribute("data-bs-original-title", `Pinned until ${new Date({{p.stickied[2:]}} * 1000).toString()}`)
|
|
{% else %}
|
|
pinned_info.setAttribute("data-bs-original-title", "Pinned by @{{p.stickied}}")
|
|
{%endif%}
|
|
{%endif%}
|
|
})()
|
|
</script>
|
|
{% endblock %} |