130 lines
3.4 KiB
Svelte
130 lines
3.4 KiB
Svelte
<div class="guild-badge" on:click={goto(guild.id)} class:disabled={guild.permission_level === 0}>
|
|
<div class="guild-icon-bg">
|
|
{#if guild.icon === undefined || guild.icon === ""}
|
|
<i class="fas fa-question guild-icon-fa" class:disabled={guild.permission_level === 0}></i>
|
|
{:else}
|
|
<img class="guild-icon" src="{getIconUrl()}" alt="Guild Icon"
|
|
class:disabled={guild.permission_level === 0}/>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="text-wrapper" class:disabled={guild.permission_level === 0}>
|
|
<span class="guild-name">
|
|
{guild.name}
|
|
</span>
|
|
{#if guild.permission_level === 0}
|
|
<span class="no-permission">
|
|
No permission
|
|
<Tooltip tip="You do not have permission to manage this server." top color="#121212">
|
|
<a href="https://docs.ticketsbot.cloud/miscellaneous/dashboard-no-permission" target="_blank">
|
|
<i class="fas fa-circle-question form-label tooltip-icon"></i>
|
|
</a>
|
|
</Tooltip>
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
import Tooltip from "svelte-tooltip";
|
|
|
|
export let guild;
|
|
|
|
function isAnimated() {
|
|
if (guild.icon === undefined || guild.icon === "") {
|
|
return false;
|
|
} else {
|
|
return guild.icon.startsWith('a_')
|
|
}
|
|
}
|
|
|
|
function getIconUrl() {
|
|
if (isAnimated()) {
|
|
return `https:\/\/cdn.discordapp.com/icons/${guild.id}/${guild.icon}.gif?size=256`
|
|
} else {
|
|
return `https:\/\/cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=256`
|
|
}
|
|
}
|
|
|
|
async function goto(guildId) {
|
|
if (guild.permission_level === 2) {
|
|
window.location.href = `/manage/${guildId}/settings`;
|
|
} else if (guild.permission_level === 1) {
|
|
window.location.href = `/manage/${guildId}/transcripts`;
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
:global(.guild-badge) {
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
|
|
|
|
width: 33%;
|
|
background-color: #121212;
|
|
height: 100px;
|
|
margin-bottom: 10px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.guild-badge.disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
@media (max-width: 950px) {
|
|
:global(.guild-badge) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
:global(.guild-icon-bg) {
|
|
height: 80px;
|
|
width: 80px;
|
|
background-color: #272727;
|
|
border-radius: 50%;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
:global(.guild-icon) {
|
|
height: 80px;
|
|
width: 80px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
:global(.guild-icon-fa) {
|
|
border-radius: 50%;
|
|
color: white;
|
|
font-size: 60px !important;
|
|
width: 80px;
|
|
height: 80px;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
:global(.guild-name) {
|
|
color: white !important;
|
|
}
|
|
|
|
.text-wrapper.disabled > .guild-name {
|
|
opacity: 45%;
|
|
}
|
|
|
|
.guild-icon-bg > *.disabled {
|
|
opacity: 25%;
|
|
}
|
|
|
|
.text-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.text-wrapper > .no-permission {
|
|
opacity: 75%;
|
|
}
|
|
</style>
|