s0wlz_talespire_symbiotes/talespire-dsa5-charactersheet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor SheetHeader styles and layout: adjust attribute card design, improve responsiveness, and streamline conditional rendering logic.

Browse Source
This commit is contained in:
vikingowl
2025-07-13 02:28:04 +02:00
parent 2a1d0a470f
commit fbd5b2cfb6
1 changed files with 67 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/modules/main/modules/sheetHeader/components/SheetHeader.tsx
View File

@@ -114,28 +114,28 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
</div>
</div>
<div className="flex justify-between items-center py-3 px-10">
<div className="w-[20%] h-[20%] rounded-full overflow-hidden">
<img src="#" alt="char bild"/>
<div className="flex justify-between items-center py-5 px-5 gap-6">
<div className="w-[30%] h-full rounded-md bg-gray-600 overflow-hidden"
style={{height: '12.5em', width: '9.375em'}}>
<img src="#" alt="char bild" className="object-cover w-full h-full"/>
</div>
<div className="flex flex-col gap-2 w-[80%]">
<div className="flex justify-between">
<div className="w-[70%] flex flex-col gap-2 w-[80%]">
<div className="w-[100%] flex justify-between">
{attributes.map(attr => (
<div key={attr.id} className="w-[10%] text-center">
<div className="relative group cursor-help">
<div className="font-bold">{attr.short}</div>
<div key={attr.id} className="">
<div className="relative group cursor-help flex items-center justify-center">
<div>{attr.short}</div>
<span
className="absolute left-1/2 transform -translate-x-1/2 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
className="absolute left-1/2 transform -translate-x-1/2 bottom-full bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
{attr.name}
</span>
</div>
<div>{attr.value}</div>
<span className="font-bold" style={{fontSize: '1.5em'}}>{attr.value}</span>
</div>
))}
</div>
{jsonData.attr.lp && (
<div className="w-[100%] flex pt-2">
<span className="relative group cursor-help">
LP
@@ -155,9 +155,7 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
</div>
</div>
</div>
)}
{jsonData.attr.ae > 0 && (
<div className="w-[100%] flex pt-2">
<span className="relative group cursor-help">
AP
@@ -177,9 +175,7 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
</div>
</div>
</div>
)}
{jsonData.attr.kp > 0 && (
<div className="w-[100%] flex pt-2">
<span className="relative group cursor-help">
KP
@@ -199,9 +195,7 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
</div>
</div>
</div>
)}
{jsonData.attr.sp > 0 && (
<div className="w-[100%] flex pt-2">
<span className="relative group cursor-help">
SP
@@ -225,7 +219,6 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
))}
</div>
</div>
)}
</div>
</div>
</>