ctome
/
paimon-moe-fork
mirror of https://github.com/CrimsonTome/paimon-moe-fork.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix table layout

pull/1/head
Made Baruna 2021-03-19 01:46:24 +08:00
parent 58c7fb452f
commit 0f32cdbad4
1 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/routes/wish/[id].svelte
View File

@ -407,7 +407,7 @@
<tr> <tr>
<TableHeader <TableHeader
className="sticky top-0 bg-item z-30" className="sticky top-0 bg-item z-30"
styleList="top: -1px;" styleList="top: -1px; background-clip: padding-box;"
on:click={() => sort('time')} on:click={() => sort('time')}
sort={sortBy === 'time'} sort={sortBy === 'time'}
order={sortOrder} order={sortOrder}
@ -418,7 +418,7 @@
</TableHeader> </TableHeader>
<TableHeader <TableHeader
className="sticky top-0 bg-item z-30" className="sticky top-0 bg-item z-30"
styleList="top: -1px;" styleList="top: -1px; background-clip: padding-box;"
on:click={() => sort('pity')} on:click={() => sort('pity')}
sort={sortBy === 'pity'} sort={sortBy === 'pity'}
order={sortOrder} order={sortOrder}
@ -429,7 +429,7 @@
</TableHeader> </TableHeader>
<TableHeader <TableHeader
className="sticky top-0 bg-item z-30" className="sticky top-0 bg-item z-30"
styleList="top: -1px;" styleList="top: -1px; background-clip: padding-box;"
on:click={() => sort('name')} on:click={() => sort('name')}
sort={sortBy === 'name'} sort={sortBy === 'name'}
order={sortOrder} order={sortOrder}
@ -439,7 +439,7 @@
</TableHeader> </TableHeader>
<TableHeader <TableHeader
className="sticky top-0 bg-item z-30" className="sticky top-0 bg-item z-30"
styleList="top: -1px;" styleList="top: -1px; background-clip: padding-box;"
on:click={() => sort('rare')} on:click={() => sort('rare')}
sort={sortBy === 'rare'} sort={sortBy === 'rare'}
order={sortOrder} order={sortOrder}
@ -450,7 +450,7 @@
</TableHeader> </TableHeader>
<TableHeader <TableHeader
className="sticky top-0 bg-item z-30" className="sticky top-0 bg-item z-30"
styleList="top: -1px;" styleList="top: -1px; background-clip: padding-box;"
on:click={() => sort('type')} on:click={() => sort('type')}
sort={sortBy === 'type'} sort={sortBy === 'type'}
order={sortOrder} order={sortOrder}
@ -458,12 +458,16 @@
> >
{$t('wish.detail.type')} {$t('wish.detail.type')}
</TableHeader> </TableHeader>
<TableHeader className="sticky top-0 bg-item" styleList="top: -1px;" align="center"> <TableHeader
className="sticky top-0 bg-item"
styleList="top: -1px; background-clip: padding-box;"
align="center"
>
{$t('wish.detail.roll')} {$t('wish.detail.roll')}
</TableHeader> </TableHeader>
<TableHeader <TableHeader
className="sticky top-0 bg-item z-30 {sortBy === 'time' ? 'xl:hidden' : ''}" className="sticky top-0 bg-item z-30 {sortBy === 'time' ? 'xl:hidden' : ''}"
styleList="top: -1px;" styleList="top: -1px; background-clip: padding-box;"
align="left" align="left"
> >
{$t('wish.detail.banner')} {$t('wish.detail.banner')}
@ -489,9 +493,9 @@
{pull.pity} {pull.pity}
</span> </span>
</td> </td>
<td class="border-t border-gray-700 pl-4 text-gray-200 flex items-center"> <td class="border-t border-gray-700 pl-4 text-gray-200">
<img <img
class="w-8 h-8 mr-2" class="w-8 h-8 inline mr-2"
src={pull.type === 'character' src={pull.type === 'character'
? `/images/characters/${pull.id}.png` ? `/images/characters/${pull.id}.png`
: pull.type === 'weapon' : pull.type === 'weapon'
@ -499,7 +503,7 @@
: '/images/wish.png'} : '/images/wish.png'}
alt={pull.name} alt={pull.name}
/> />
<span class="pr-4">{pull.name}</span> <span class="h-8 leading-8 pr-4">{pull.name}</span>
</td> </td>
<td class="border-t border-gray-700 px-2 text-gray-200 text-center">{pull.rarity}</td> <td class="border-t border-gray-700 px-2 text-gray-200 text-center">{pull.rarity}</td>
<td class="border-t border-gray-700 px-4 text-gray-200"> <td class="border-t border-gray-700 px-4 text-gray-200">
@ -510,7 +514,7 @@
</td> </td>
{#if sortBy === 'time' && ((pull.end && !sortOrder) || (pull.start && sortOrder))} {#if sortBy === 'time' && ((pull.end && !sortOrder) || (pull.start && sortOrder))}
<td class="relative hidden xl:table-cell"> <td class="relative hidden xl:table-cell">
<div class="border-t border-gray-700 absolute top-0 z-10" style="width: 266px;" /> <div class="border-t border-gray-700 absolute left-0 top-0 z-10" style="width: 266px;" />
</td> </td>
<td class="sticky w-0 hidden xl:table-cell pl-2" style="top: 8px;"> <td class="sticky w-0 hidden xl:table-cell pl-2" style="top: 8px;">
<div <div