rDrama/files/templates/userpage.html

{% extends "default.html" %}

{% block pagetype %}userpage{% endblock %}

{% block title %}

<!-- {% if u and u.profilecss and (u.admin_level or not (v and v.admin_level)) %}
<link rel="stylesheet" href="/@{{u.username}}/profilecss">
{% endif %} -->
<title>{{u.username}}'s profile - {{'SITE_NAME' | app_config}}</title>
{% if u.is_private %}
<meta name="robots" content="noindex">
{% endif %}
<meta property="og:article:author" content="@{{u.username}}" >
<meta property="article:section" content="{{u.username}}'s profile - {{'SITE_NAME' | app_config}}" >
<meta property="article:published_time" content="{{u.created_date}}" >
<meta property="og:description" name="description" content="{{u.coins}} {{'COINS_NAME' | app_config}} - Joined {{u.created_date}} - {% if u.stored_subscriber_count >=1 and not u.is_private and not u.is_nofollow %}{{u.stored_subscriber_count}} Followers - {% endif %}{% if not u.is_private %}{{u.post_count}} Posts - {{u.comment_count}} Comments - {% endif %}{{u.bio}}" >
<meta property="og:author" name="author" content="@{{u.username}}" >
<meta property="og:title" content="{{u.username}}" >
<meta property="og:image" content="{{u.banner_url}}" >
<meta property="og:url" content="{{u.url | 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="{{u.username}}'s profile - {{'SITE_NAME' | app_config}}" >
<meta name="twitter:creator" content="@{{u.username}}">
<meta name="twitter:description" content="{{u.coins}} {{'COINS_NAME' | app_config}} - Joined {{u.created_date}} - {% if u.stored_subscriber_count >=1 and not u.is_private and not u.is_nofollow %}{{u.stored_subscriber_count}} Followers -{% endif %} {% if not u.is_private %} {{u.post_count}} Posts - {{u.comment_count}} Comments -{% endif %} {{u.bio}}" >
<meta name="twitter:image" content="{{u.banner_url}}" >
<meta name="twitter:url" content="{{u.url | full_link}}" >
{% endblock %}

{% block subHeader %}
<img src="{{ u.banner_url}}" class="-mb-0.5 w-full h-72 lg:h-[28rem] object-cover"/>
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
	<a href="/settings/profile" class="absolute -top-12 right-3 btn btn-gray shadow">
		<i class="fas fa-user-edit fa-fw fa-sm mr-2"></i>
		Edit profile
	</a>
	<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 class="flex items-center">
			<img class="h-14 w-14 bg-white p-[3px] border border-gray-400" src="{{ v.profile_url }}" alt="Your avatar"/>
			<div class="pl-2">
				<h1 class="font-bold text-2xl leading-normal mb-0" style="color: #{{u.namecolor}}">
					<span {% if u.patron %}class="patron" style="background-color:#{{u.namecolor}};"{% endif %}>{{u.username}}</span>
				</h1>
				<div class="flex items-center space-x-2 text-sm text-gray-500">
					<div>
						rDramanaut since
						<span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{u.created_datetime}}">
							{{u.created_date}}
						</span>
					</div>
					{% if u.username != u.original_username %}
					<div>&#183;</div>
					<div>
						a.k.a.
						<span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Original username: @{{u.original_username}}">@{{u.original_username}}
						</span>
					</div>
					{% endif %}
				</div>
			</div>
		</div>
		{% if v and v.username == u.username %}
		<ul class="ml-auto flex flex-row flex-wrap gap-2 mb-0">
			{% for b in u.badges %}
			<li>
				{% if b.url %}
				<a rel="nofollow noopener noreferrer" href="{{b.url}}">
					<img class="flex-shrink-0 w-8 h-8 object-contain transform transition-100 hover:scale-[1.15]" loading="lazy" src="{{b.path}}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{b.name}} - {{b.text}}">
				</a>
				{% else %}
				<img class="flex-shrink-0 w-8 h-8 object-contain transform transition-100 hover:scale-[1.15]" loading="lazy" src="{{b.path}}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{b.name}} - {{b.text}}">
				{% endif %}
			</li>
			{% endfor %}
		</ul>
		{% endif %}
	</div>
</div>
{% endblock %}

{% block content %}
<div class="col-span-full md:-mx-4">
	<div class="px-4 py-2 flex space-x-3 divide-x divide-gray-400 text-xs bg-gray-100 md:border-b md:border-gray-300">
		<ul class="flex items-center space-x-3 leading-normal mb-0">
			<li>
				<a class="{{ 'font-bold text-red-600' if not '/commnents/' or not '/saved/' in request.path else 'text-gray-700' }}" href="/@{{u.username}}">
					Posts <span class="text-gray-500 font-normal">{{ u.post_count }}</span>
				</a>
			</li>
			<li>
				<a class="{{ 'font-bold text-red-600' if '/comments/' in request.path else 'text-gray-700' }}" href="/@{{u.username}}/comments">
					Comments <span class="text-gray-500 font-normal">{{ u.comment_count }}</span>
				</a>
			</li>
			<li>
				<a class="{{ 'font-bold text-red-600' if '/saved/' in request.path else 'text-gray-700' }}" href="/@{{u.username}}/saved/posts">
					Saved Posts
				</a>
			</li>
		</ul>
	</div>
</div>

<div class="col-span-full xl:col-span-9 -mt-6 mb-4">
	<div class="sm:py-4 my-2.5 sm:my-0">
		{% if not "saved" in request.full_path %}
		<div class="flex justify-end md:justify-start mb-3 md:m-0 px-2.5 md:px-0">
			{% include "/dropdowns/SubmissionSorts.html" %}
		</div>
		<hr class="hidden md:block my-4 shadow-inset-t-white-05 border-t border-gray-300"/>
		{% endif %}
		<ul class="mb-0">
		{% include "submission_listing.html" %}
		</ul>
	</div>
</div>
{% endblock %}

{% block sidebar %}
	{% include "/sidebars/ProfileSidebar.html" %}
{% endblock %}

{% block pagenav %}
{% if listing %}
<nav aria-label="Page navigation">
	<ul class="pagination pagination-sm mb-0">
		{% if page>1 %}
		<li class="page-item">
			<small><a class="page-link" href="?page={{page-1}}&sort={{sort}}&t={{t}}" tabindex="-1">Prev</a></small>
		</li>
		{% else %}
		<li class="page-item disabled"><span class="page-link">Prev</span></li>
		{% endif %}
		{% if next_exists %}
		<li class="page-item">
			<small><a class="page-link" href="?page={{page+1}}&sort={{sort}}&t={{t}}">Next</a></small>
		</li>
		{% else %}
		<li class="page-item disabled"><span class="page-link">Next</span></li>
		{% endif %}
	</ul>
</nav>
{% endif %}

<style>
	.wtf {
		object-fit: cover !important;
	}
</style>
{% endblock %}

{% block modals %}
{% if v %}
{% include "emoji_modal.html" %}
{% include "gif_modal.html" %}
{% endif %}
{% endblock %}

{% block scripts %}
{% if v %}
<script>
	const TRANSFER_TAX = {% if v.patron or u.patron %}0{% else %}0.03{% endif %};

	function updateTax(mobile=false) {
		let suf = mobile ? "-mobile" : "";
		let amount = parseInt(document.getElementById("coins-transfer-amount" + suf).value);
		if(isNaN(amount) || amount < 0) {
			amount = 0;
		}
		document.getElementById("coins-transfer-taxed" + suf).innerText = amount - Math.ceil(amount*TRANSFER_TAX);
	}

	function transferCoins(mobile=false) {
		let t = event.target;
		t.disabled = true;

		let amount = parseInt(document.getElementById("coins-transfer-amount").value);
		let transferred = amount - Math.ceil(amount*TRANSFER_TAX);

		post_toast_callback("/@{{u.username}}/transfer_coins",
			{"amount": document.getElementById(mobile ? "coins-transfer-amount-mobile" : "coins-transfer-amount").value},
			(xhr) => {
				if(xhr.status == 200) {
					document.getElementById("user-coins-amount").innerText = parseInt(document.getElementById("user-coins-amount").innerText) - amount;
					document.getElementById("profile-coins-amount-mobile").innerText = parseInt(document.getElementById("profile-coins-amount-mobile").innerText) + transferred;
					document.getElementById("profile-coins-amount").innerText = parseInt(document.getElementById("profile-coins-amount").innerText) + transferred;
				}
			}
			);

		setTimeout(_ => t.disabled = false, 2000);
	}
</script>
{% endif %}

{% if u.song %}
<script>
	window.addEventListener("load",function(event) {
		var audio = new Audio('/songs/{{u.id}}');
		audio.loop=true;

		{% if not u.unmutable %}
		function pause() {
			audio.pause();
			document.getElementById("pause1").classList.toggle("hidden");
			document.getElementById("play1").classList.toggle("hidden");
			document.getElementById("pause2").classList.toggle("hidden");
			document.getElementById("play2").classList.toggle("hidden");
		}

		function play() {
			audio.play();
			document.getElementById("pause1").classList.toggle("hidden");
			document.getElementById("play1").classList.toggle("hidden");
			document.getElementById("pause2").classList.toggle("hidden");
			document.getElementById("play2").classList.toggle("hidden");
		}
		{% endif %}

		audio.play();
		document.getElementById('userpage').addEventListener('click', () => {
			if (audio.paused) audio.play(); 
		}, {once : true});
	});
</script>
{% endif %}

<script defer src="/assets/js/userpage.js?v=73"></script>
{% endblock %}