OpenSource/paimon-moe
OpenSource/paimon-moe
1
0
Fork 0
mirror of https://github.com/MadeBaruna/paimon-moe.git synced 2025-03-13 19:27:45 +01:00
Code Issues Projects Releases Packages Wiki Activity

Improve name size on character grid

Browse source
This commit is contained in:
Made Baruna 2022-05-31 01:46:33 +07:00
parent 280c1f8897
commit 5b0ea25277
2 changed files with 79 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/routes/characters/_characterGridItem.svelte Normal file
View file

@ -0,0 +1,74 @@
<script>
import { afterUpdate, onMount, tick } from 'svelte';
export let id;
export let char;
export let showConstellation;
export let constellation;
export let name;
let nameLabel;
let smallName;
async function adjustNameSize() {
if (nameLabel === undefined) return;
smallName = false;
await tick();
const height = nameLabel.clientHeight;
smallName = height > 40;
}
onMount(() => {
adjustNameSize();
});
$: name, adjustNameSize();
</script>
<a
href="/characters/{id}"
class="m-2 cell relative cursor-pointer transition duration-100 hover:opacity-100 hover:shadow-xl rounded-xl {!showConstellation ||
constellation
? ''
: 'opacity-50'}"
>
<div
class="w-full rounded-t-xl bg-opacity-50 overflow-hidden {char.rarity === 5 ? 'bg-legendary-from' : 'bg-rare-from'}"
>
<img
class="w-full h-full"
width="106"
height="106"
src={`/images/characters/${id}.png`}
alt={char.name}
loading="lazy"
/>
</div>
<div
class="absolute top-0 right-0 bg-black bg-opacity-75 rounded-full flex items-center shadow-md"
style="padding: 4px; margin: -10px;"
>
{#if constellation}
<span class="mx-1 text-white text-xs font-semibold">
C{Math.max(0, constellation.default + constellation.wish + constellation.manual - 1)}
</span>
{/if}
<img class="w-4 h-4" src={`/images/elements/${char.element.id}.png`} alt={char.element.name} />
</div>
<div class="relative overflow-hidden bg-item rounded-b-xl" style="height: 29px">
<div class="w-full overflow-hidden absolute bottom-0">
<p class="text-white p-1 text-center text-sm {smallName ? 'small' : ''}" bind:this={nameLabel}>
{name}
</p>
</div>
</div>
</a>
<style>
.small {
font-size: 12px;
line-height: 1;
padding-bottom: 3px;
word-spacing: 200px;
}
</style>

54
src/routes/characters/index.svelte
View file

@ -13,6 +13,8 @@
import Button from '../../components/Button.svelte';
import Ad from '../../components/Ad.svelte';
import CharacterGridItem from './_characterGridItem.svelte';
const sortOptions = [
{ label: $t('characters.name'), value: 'name' },
{ label: $t('characters.element'), value: 'element' },
@ -57,9 +59,9 @@
switch (sortBy) {
case 'name':
if (sortOrder) {
return a[1].name.localeCompare(b[1].name);
return $t(a[1].name).localeCompare($t(b[1].name));
} else {
return b[1].name.localeCompare(a[1].name);
return $t(b[1].name).localeCompare($t(a[1].name));
}
case 'element':
if (sortOrder) {
@ -258,13 +260,6 @@
} catch (error) {}
}
function getNameStyle(name) {
if (name.length > 11) {
return 'font-size: 12px; line-height: 1; word-spacing: 200px; padding-bottom: 3px;';
}
return '';
}
onMount(async () => {
await getConstellation();
});
@ -433,46 +428,7 @@
</div>
<div class="px-4 md:pl-6 md:pr-4 flex flex-wrap max-w-screen-xl mt-2">
{#each chars as [id, char] (id)}
<a
href="/characters/{id}"
class="m-2 cell relative cursor-pointer transition duration-100 hover:opacity-100 hover:shadow-xl rounded-xl {!showConstellation ||
constellation[id]
? ''
: 'opacity-50'}"
>
<div
class="w-full rounded-t-xl bg-opacity-50 overflow-hidden {char.rarity === 5
? 'bg-legendary-from'
: 'bg-rare-from'}"
>
<img
class="w-full h-full"
width="106"
height="106"
src={`/images/characters/${id}.png`}
alt={char.name}
loading="lazy"
/>
</div>
<div
class="absolute top-0 right-0 bg-black bg-opacity-75 rounded-full flex items-center shadow-md"
style="padding: 4px; margin: -10px;"
>
{#if constellation[id]}
<span class="mx-1 text-white text-xs font-semibold">
C{Math.max(0, constellation[id].default + constellation[id].wish + constellation[id].manual - 1)}
</span>
{/if}
<img class="w-4 h-4" src={`/images/elements/${char.element.id}.png`} alt={char.element.name} />
</div>
<div class="relative overflow-hidden bg-item rounded-b-xl" style="height: 29px">
<div class="w-full overflow-hidden absolute bottom-0">
<p class="text-white p-1 text-center text-sm" style={getNameStyle($t(char.name))}>
{$t(char.name)}
</p>
</div>
</div>
</a>
<CharacterGridItem {id} {char} {showConstellation} constellation={constellation[id]} name={$t(char.name)} />
{/each}
</div>
{#if showConstellation}