MarseyWorld/files/templates/userpage.html

281 lines
13 KiB
HTML
Raw Normal View History

2021-10-15 14:08:27 +00:00
{% extends "default.html" %}
{% block pagetype %}userpage{% endblock %}
{% block title %}
2021-12-04 16:12:56 +00:00
<!-- {% if u and u.profilecss and (u.admin_level or not (v and v.admin_level)) %}
<link rel="stylesheet" href="/@{{u.username}}/profilecss">
{% endif %} -->
2021-10-15 14:08:27 +00:00
<title>{{u.username}}'s profile - {{'SITE_NAME' | app_config}}</title>
{% if u.is_private %}
<meta name="robots" content="noindex">
{% endif %}
2021-10-26 21:11:14 +00:00
<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">
2021-10-15 14:08:27 +00:00
<meta name="twitter:site" content="{{request.host_url}}">
2021-10-26 21:11:14 +00:00
<meta name="twitter:title" content="{{u.username}}'s profile - {{'SITE_NAME' | app_config}}" >
2021-10-15 14:08:27 +00:00
<meta name="twitter:creator" content="@{{u.username}}">
2021-10-26 21:11:14 +00:00
<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}}" >
2021-10-15 14:08:27 +00:00
{% endblock %}
2021-12-08 01:21:57 +00:00
{% 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">
2021-12-08 02:42:42 +00:00
<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"/>
2021-12-08 02:49:22 +00:00
<div class="pl-3">
<h1 class="font-bold text-xl leading-normal mb-0" style="color: #{{u.namecolor}}">
2021-12-08 02:42:42 +00:00
<span {% if u.patron %}class="patron" style="background-color:#{{u.namecolor}};"{% endif %}>{{u.username}}</span>
</h1>
{% if u.username != u.original_username %}
2021-12-08 02:33:06 +00:00
<div class="text-sm text-gray-600">
aka <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Original username: @{{u.original_username}}">{{u.original_username}}</span>
</div>
{% endif %}
2021-12-08 02:19:48 +00:00
</div>
2021-12-08 01:21:57 +00:00
</div>
2021-12-08 02:42:42 +00:00
{% if v and v.username == u.username %}
<div class="ml-auto">
<a href="/settings/profile" class='btn btn-gray'>
<i class="fas fa-user-edit fa-fw fa-sm mr-2"></i>
Edit profile
</a>
</div>
{% endif %}
2021-12-08 01:21:57 +00:00
</div>
</div>
{% endblock %}
2021-10-15 14:08:27 +00:00
{% block content %}
2021-12-08 02:38:09 +00:00
<div class="col-span-full md:-mx-4">
2021-12-08 02:40:32 +00:00
<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">
2021-12-08 02:35:43 +00:00
<ul class="flex items-center space-x-3 leading-normal mb-0">
<li>
<a class="{{ 'font-bold text-red-600' if '/posts/' in request.path else 'text-gray-500' }}" href="/@{{u.username}}">
2021-12-08 02:49:22 +00:00
Posts <span class="text-gray-400 font-normal">{{ u.post_count }}</span>
2021-12-08 02:35:43 +00:00
</a>
</li>
<li>
<a class="{{ 'font-bold text-red-600' if '/comments/' in request.path else 'text-gray-500' }}" href="/@{{u.username}}/comments">
2021-12-08 02:49:22 +00:00
Comments <span class="text-gray-400 font-normal">{{ u.comment_count }}</span>
2021-12-08 02:35:43 +00:00
</a>
</li>
<li>
<a class="{{ 'font-bold text-red-600' if '/saved/' in request.path else 'text-gray-500' }}" href="/@{{u.username}}/saved/posts">
Saved Posts
</a>
</li>
</ul>
</div>
</div>
2021-12-08 01:20:09 +00:00
<div class="col-span-full xl:col-span-9">
2021-10-15 14:08:27 +00:00
<div id="profilecontent" class="row no-gutters">
<div class="col">
2021-12-08 01:00:35 +00:00
<div class="flex-row box-shadow-bottom flex justify-content-center justify-content-md-between align-items-center">
2021-10-15 14:08:27 +00:00
<ul class="nav settings-nav">
<li class="nav-item">
<a class="nav-link {% if not 'saved' in request.path %}active{% endif %}" style="font-size: .9rem !important; padding: .75rem .4rem !important;" href="/@{{u.username}}">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" style="font-size: .9rem !important; padding: .75rem .4rem !important;" href="/@{{u.username}}/comments">Comments</a>
</li>
{% if u.id == v.id %}
<li class="nav-item">
<a class="nav-link {% if 'saved' in request.path %}active{% endif %}" style="font-size: .9rem !important; padding: .75rem .4rem !important;" href="/@{{u.username}}/saved/posts">Saved Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" style="font-size: .9rem !important; padding: .75rem .4rem !important;" href="/@{{u.username}}/saved/comments">Saved Comments</a>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
{% if not "saved" in request.full_path %}
2021-12-08 01:00:35 +00:00
<div class="flex justify-content-between align-items-center" style="padding-top:10px">
2021-10-15 14:08:27 +00:00
2021-12-08 01:00:35 +00:00
<div class="flex align-items-center sortingbarmargin">
2021-10-15 14:08:27 +00:00
<div class="text-small font-weight-bold mr-2">‎</div>
<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 t=="day" %}<i class="fas fa-calendar-day mr-1"></i>{% endif %}
{% if t=="week" %}<i class="fas fa-calendar-week mr-1"></i>{% endif %}
{% if t=="month" %}<i class="fas fa-calendar-alt mr-1"></i>{% endif %}
{% if t=="year" %}<i class="fas fa-calendar mr-1"></i>{% endif %}
{% if t=="all" %}<i class="fas fa-infinity mr-1"></i>{% endif %}
{{t | 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 not t=="hour" %}<a class="dropdown-item" href="?sort={{sort}}&t=hour"><i class="fas fa-clock mr-2"></i>Hour</a>{% endif %}
{% if not t=="day" %}<a class="dropdown-item" href="?sort={{sort}}&t=day"><i class="fas fa-calendar-day mr-2"></i>Day</a>{% endif %}
{% if not t=="week" %}<a class="dropdown-item" href="?sort={{sort}}&t=week"><i class="fas fa-calendar-week mr-2"></i>Week</a>{% endif %}
{% if not t=="month" %}<a class="dropdown-item" href="?sort={{sort}}&t=month"><i class="fas fa-calendar-alt mr-2"></i>Month</a>{% endif %}
{% if not t=="year" %}<a class="dropdown-item" href="?sort={{sort}}&t=year"><i class="fas fa-calendar mr-2"></i>Year</a>{% endif %}
{% if not t=="all" %}<a class="dropdown-item" href="?sort={{sort}}&t=all"><i class="fas fa-infinity mr-2"></i>All</a>{% endif %}
</div>
</div>
<div class="text-small font-weight-bold ml-3 mr-2">‎</div>
<div class="dropdown dropdown-actions">
<button class="btn btn-secondary dropdown-toggle" type="button" 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 %}
{% if sort=="comments" %}<i class="fas fa-comments 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&t={{t}}"><i class="fas fa-arrow-alt-circle-up mr-2"></i>Top</a>{% endif %}
{% if sort != "bottom" %}<a class="dropdown-item" href="?sort=bottom&t={{t}}"><i class="fas fa-arrow-alt-circle-down mr-2"></i>Bottom</a>{% endif %}
{% if sort != "new" %}<a class="dropdown-item" href="?sort=new&t={{t}}"><i class="fas fa-sparkles mr-2"></i>New</a>{% endif %}
{% if sort != "old" %}<a class="dropdown-item" href="?sort=old&t={{t}}"><i class="fas fa-book mr-2"></i>Old</a>{% endif %}
{% if sort != "controversial" %}<a class="dropdown-item" href="?sort=controversial&t={{t}}"><i class="fas fa-bullhorn mr-2"></i>Controversial</a>{% endif %}
{% if sort != "comments" %}<a class="dropdown-item" href="?sort=comments&t={{t}}"><i class="fas fa-comments mr-2"></i>Comments</a>{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
<div class="row no-gutters {% if listing %}mt-md-3{% elif not listing %}my-md-3{% endif %}" style="margin-top: 10px;">
<div class="col">
<div class="posts">
{% include "submission_listing.html" %}
</div>
</div>
</div>
2021-12-02 19:56:07 +00:00
2021-12-08 01:20:09 +00:00
</div>
2021-10-15 14:08:27 +00:00
{% 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 %}
2021-11-30 17:32:52 +00:00
<style>
.wtf {
object-fit: cover !important;
}
</style>
2021-12-04 16:12:56 +00:00
{% endblock %}
2021-11-30 17:32:52 +00:00
2021-12-04 16:12:56 +00:00
{% block modals %}
2021-11-30 17:32:52 +00:00
{% if v %}
{% include "emoji_modal.html" %}
2021-12-04 16:12:56 +00:00
{% include "gif_modal.html" %}
2021-11-30 17:32:52 +00:00
{% endif %}
2021-10-15 14:08:27 +00:00
{% endblock %}
2021-12-04 16:12:56 +00:00
{% 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();
2021-12-04 16:21:03 +00:00
document.getElementById("pause1").classList.toggle("hidden");
document.getElementById("play1").classList.toggle("hidden");
document.getElementById("pause2").classList.toggle("hidden");
document.getElementById("play2").classList.toggle("hidden");
2021-12-04 16:12:56 +00:00
}
function play() {
audio.play();
2021-12-04 16:21:03 +00:00
document.getElementById("pause1").classList.toggle("hidden");
document.getElementById("play1").classList.toggle("hidden");
document.getElementById("pause2").classList.toggle("hidden");
document.getElementById("play2").classList.toggle("hidden");
2021-12-04 16:12:56 +00:00
}
{% endif %}
audio.play();
document.getElementById('userpage').addEventListener('click', () => {
if (audio.paused) audio.play();
}, {once : true});
});
</script>
{% endif %}
2021-12-04 16:21:03 +00:00
<script defer src="/assets/js/userpage.js?v=73"></script>
2021-11-30 17:32:52 +00:00
{% endblock %}