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

Update fishing book layout on mobile

pull/1/head
Made Baruna 2021-10-02 22:55:43 +07:00
parent 55bb5f6eb5
commit c825b38f7b
No known key found for this signature in database
GPG Key ID: 5AA5DA16AA5DCEAD
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/routes/fishing/index.svelte
View File

@ -46,9 +46,9 @@
<h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">{$t('fishing.title')}</h1> <h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">{$t('fishing.title')}</h1>
{#each Object.entries(spots) as [id, location]} {#each Object.entries(spots) as [id, location]}
<h3 class="font-display px-4 md:px-8 font-black text-2xl text-white mt-4 mb-2">{$t(`fishing.${id}`)}</h3> <h3 class="font-display px-4 md:px-8 font-black text-2xl text-white mt-4 mb-2">{$t(`fishing.${id}`)}</h3>
<div class="px-8 w-full"> <div class="px-4 md:px-8 w-full">
{#each location as spot} {#each location as spot}
<div class="flex w-full bg-item rounded-xl p-4 mb-2"> <div class="flex flex-col items-center md:items-start md:flex-row w-full bg-item rounded-xl p-4 mb-2">
<div class="mr-4"> <div class="mr-4">
<img <img
class="w-48 h-48 rounded-md" class="w-48 h-48 rounded-md"
@ -58,22 +58,24 @@
title={spot.name} title={spot.name}
/> />
</div> </div>
<div class="flex flex-wrap" style="margin: -4px; height: fit-content;"> <div
class="flex flex-wrap pt-6 md:pt-0 justify-center md:justify-start"
style="margin: -4px; height: fit-content;"
>
{#each spot.fish as fish} {#each spot.fish as fish}
<div <div
class="w-24 flex flex-col justify-between rounded-md bg-background-secondary relative" class="w-20 md:w-24 flex flex-col justify-between rounded-md bg-background-secondary relative"
style="margin: 4px 12px 4px 4px;" style="margin: 4px 12px 12px 4px;"
> >
<div class="w-24 h-24 flex items-center justify-center"> <div class="w-20 md:w-24 h-20 md:h-24 flex items-center justify-center">
<img <img
class="w-24 h-auto" class="w-20 md:w-24 h-auto"
style="min-width: 96px;"
src="/images/fishing/fish/{fish}.png" src="/images/fishing/fish/{fish}.png"
alt={fishList[fish].name} alt={fishList[fish].name}
title={fishList[fish].name} title={fishList[fish].name}
/> />
</div> </div>
<span class="text-sm text-white leading-none mt-1 text-center">{fishList[fish].name}</span> <span class="text-xs md:text-sm text-white leading-none mt-1 text-center">{fishList[fish].name}</span>
<div <div
class="absolute rounded-full flex bg-background-secondary" class="absolute rounded-full flex bg-background-secondary"
style="top: -8px; left: -8px; background: rgba(0, 0, 0, 0.50);" style="top: -8px; left: -8px; background: rgba(0, 0, 0, 0.50);"