Firefly-Shelter/Firefly_Srtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE: Responsive for mobile
All checks were successful
Gitea Auto Deploy / Deploy-Container (push) Successful in 1m41s
Details

Browse Source
This commit is contained in:
Azen Kain
2025-09-30 14:38:02 +07:00
parent 7881d5e80a
commit 6908e3971f
4 changed files with 45 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/avatarBar/index.tsx
View File

@@ -80,7 +80,7 @@ export default function AvatarBar({ onClose }: { onClose?: () => void }) {
</div> </div>
<div className="flex items-start h-full"> <div className="flex items-start h-full">
<ul className="grid grid-cols-4 sm:grid-cols-2 lg:grid-cols-3 gap-2 w-full h-[65vh] overflow-y-scroll overflow-x-hidden"> <ul className="grid grid-cols-3 sm:grid-cols-2 lg:grid-cols-3 gap-2 w-full h-[65vh] overflow-y-scroll overflow-x-hidden">
{listAvatar.map((item, index) => ( {listAvatar.map((item, index) => (
<div key={index} onClick={() => { <div key={index} onClick={() => {
setAvatarSelected(item); setAvatarSelected(item);

2
src/components/card/characterCard.tsx
View File

@@ -60,7 +60,7 @@ export default function CharacterCard({ data }: CharacterCardProps) {
<ParseText <ParseText
locale={locale} locale={locale}
text={text} text={text}
className="mt-2 px-1 text-center text-shadow-white font-bold leading-tight 2xl:text-lg" className="mt-2 px-1 text-center text-shadow-white font-bold leading-tight text-sm sm:text-base 2xl:text-lg"
/> />
</li> </li>

2
src/components/card/lightconeCard.tsx
View File

@@ -42,7 +42,7 @@ export default function LightconeCard({ data }: LightconeCardProps) {
<ParseText <ParseText
locale={locale} locale={locale}
text={text} text={text}
className="mt-2 px-1 text-center text-base font-normal leading-tight" className="mt-2 px-1 text-center text-sm sm:text-base font-bold leading-tight"
/> />
</li> </li>

79
src/components/lightconeBar/index.tsx
View File

@@ -44,7 +44,7 @@ export default function LightconeBar() {
path: Object.keys(listPath).filter((key) => listPath[key]), path: Object.keys(listPath).filter((key) => listPath[key]),
rarity: Object.keys(listRank).filter((key) => listRank[key]) rarity: Object.keys(listRank).filter((key) => listRank[key])
}) })
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [listPath, listRank, locale]) }, [listPath, listRank, locale])
return ( return (
@@ -65,47 +65,52 @@ export default function LightconeBar() {
</div> </div>
<div className="flex items-start flex-col gap-2 mt-2 w-full"> <div className="flex items-start flex-col gap-2 mt-2 w-full">
<div>Filter</div> <div>Filter</div>
<div className="grid grid-cols-12 mt-1 w-full"> <div className="flex flex-row flex-wrap justify-between mt-1 w-full">
<div className="grid justify-items-start col-span-8"> {/* Nhóm 1 - Path icons */}
<div className="grid grid-cols-4 sm:grid-cols-3 md:grid-cols-6 lg:grid-cols-8 mb-1 mx-1 gap-2"> <div className="flex flex-wrap mb-1 mx-1 gap-2">
{Object.keys(listPath).map((key, index) => ( {Object.keys(listPath).map((key, index) => (
<div <div
key={index} key={index}
onClick={() => { onClick={() => {
setListPath((prev) => ({ ...prev, [key]: !prev[key] })) setListPath((prev) => ({ ...prev, [key]: !prev[key] }))
}} }}
className="w-[50px] h-[50px] hover:bg-gray-600 grid items-center justify-items-center rounded-md shadow-lg cursor-pointer" className="h-[38px] w-[38px] md:h-[50px] md:w-[50px] hover:bg-gray-600 grid place-items-center rounded-md shadow-lg cursor-pointer"
style={{ style={{
backgroundColor: listPath[key] ? "#374151" : "#6B7280" backgroundColor: listPath[key] ? "#374151" : "#6B7280"
}}> }}
<Image src={`/icon/${key}.webp`} >
alt={key} <Image
className="h-[32px] w-[32px] object-contain rounded-md " src={`/icon/${key}.webp`}
width={200} alt={key}
height={200} /> className="h-[28px] w-[28px] md:h-[32px] md:w-[32px] object-contain rounded-md"
</div> width={200}
))} height={200}
</div> />
</div>
))}
</div> </div>
<div className="grid justify-items-end col-span-4 w-full"> {/* Nhóm 2 - Rank icons */}
<div className="grid grid-cols-2 sm:grid-cols-3 mb-1 mx-1 gap-2"> <div className="flex flex-wrap mb-1 mx-1 gap-2">
{Object.keys(listRank).map((key, index) => ( {Object.keys(listRank).map((key, index) => (
<div <div
key={index} key={index}
onClick={() => { onClick={() => {
setListRank((prev) => ({ ...prev, [key]: !prev[key] })) setListRank((prev) => ({ ...prev, [key]: !prev[key] }))
}} }}
className="w-[50px] h-[50px] hover:bg-gray-600 grid items-center justify-items-center rounded-md shadow-lg cursor-pointer" className="h-[38px] w-[38px] md:h-[50px] md:w-[50px] hover:bg-gray-600 grid place-items-center rounded-md shadow-lg cursor-pointer"
style={{ style={{
backgroundColor: listRank[key] ? "#374151" : "#6B7280" backgroundColor: listRank[key] ? "#374151" : "#6B7280"
}}> }}
<div className="font-bold text-white h-[32px] w-[32px] text-center flex items-center justify-center">{key}*</div> >
<div className="font-bold text-white h-[32px] w-[32px] text-center flex items-center justify-center">
{key}*
</div> </div>
))} </div>
</div> ))}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-8 mt-2 gap-2"> <div className="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-8 mt-2 gap-2">