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

refactor: update modal layouts for improved structure and responsiveness
Gitea Auto Deploy / Deploy-Container (push) Successful in 32s
Details

Browse Source
This commit is contained in:
Kain344
2026-08-27 09:12:01 +07:00
parent ec57123982
commit cd2b71b9c3
7 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/actionBar/index.tsx
+3 -3
View File
@@ -484,8 +484,8 @@ export default function ActionBar() {
{/* Modals */}
{modalConfigs.map(({ id, title, onClose, content }) => (
<dialog key={id} id={id} className="modal">
<div className="modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] max-h-[90vh] bg-base-100 text-base-content border border-base-300 shadow-2xl rounded-2xl p-0 overflow-hidden">
<div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-300 bg-base-100">
<div className="modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] max-h-[90vh] flex flex-col bg-base-100 text-base-content border border-base-300 shadow-2xl rounded-2xl p-0 overflow-hidden">
<div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-300 bg-base-100 shrink-0">
<h3 className="font-bold text-xl tracking-tight text-primary">
{title}
</h3>
@@ -496,7 +496,7 @@ export default function ActionBar() {
✕
</button>
</div>
<div className="p-4 sm:p-6 overflow-y-auto max-h-[calc(90vh-5rem)]">
<div className="p-4 sm:p-6 overflow-y-auto flex-1">
{content}
</div>
</div>
src/components/avatarInfo/index.tsx
+13 -9
View File
@@ -247,12 +247,16 @@ export default function AvatarInfo() {
<select
value={avatars[avatarSelected?.ID.toString() || ""]?.enhanced || ""}
onChange={(e) => {
const newAvatar = avatars[avatarSelected?.ID.toString() || ""]
if (newAvatar) {
newAvatar.enhanced = e.target.value
const currentAvatar = avatars[avatarSelected?.ID.toString() || ""]
if (currentAvatar && avatarSelected) {
const skillTree = getSkillTree(avatarSelected, e.target.value)
if (skillTree) {
newAvatar.data.skills = skillTree
const newAvatar = {
...currentAvatar,
enhanced: e.target.value,
data: {
...currentAvatar.data,
skills: skillTree || currentAvatar.data.skills
}
}
setAvatar(newAvatar)
}
@@ -296,7 +300,7 @@ export default function AvatarInfo() {
{/* Lightcone Hero Block */}
<div className="grid grid-cols-1 sm:grid-cols-12 gap-4 items-center">
{/* Artwork */}
<div className="sm:col-span-4 aspect-[3/4] rounded-xl overflow-hidden bg-base-200/60 flex items-center justify-center border border-base-content/10 shadow-xs">
<div className="sm:col-span-4 aspect-3/4 rounded-xl overflow-hidden bg-base-200/60 flex items-center justify-center border border-base-content/10 shadow-xs">
<Image
unoptimized
crossOrigin="anonymous"
@@ -450,8 +454,8 @@ export default function AvatarInfo() {
{/* Lightcone Selection Modal */}
<dialog id="action_detail_modal" className="modal">
<div className="modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] max-h-[90vh] bg-base-100 text-base-content border border-white/10 shadow-2xl rounded-2xl p-0 overflow-hidden">
<div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-content/10 bg-base-100">
<div className="modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] max-h-[90vh] flex flex-col bg-base-100 text-base-content border border-white/10 shadow-2xl rounded-2xl p-0 overflow-hidden">
<div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-content/10 bg-base-100 shrink-0">
<h3 className="font-bold text-xl tracking-tight bg-clip-text text-transparent bg-linear-to-r from-primary via-accent to-secondary">
{transI18n("lightconeEquipment")}
</h3>
@@ -462,7 +466,7 @@ export default function AvatarInfo() {
✕
</button>
</div>
<div className="p-4 sm:p-6 overflow-y-auto max-h-[calc(90vh-5rem)]">
<div className="p-4 sm:p-6 overflow-y-auto flex-1">
<LightconeBar />
</div>
</div>
src/components/card/characterCard.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export default function CharacterCard({ data }: CharacterCardProps) {
>
{/* Artwork container with vibrant rarity background */}
<div
className={`w-full relative aspect-[3/4] flex items-center justify-center overflow-hidden bg-linear-to-b ${
className={`w-full relative aspect-3/4 flex items-center justify-center overflow-hidden bg-linear-to-b ${
is5Star
? "from-yellow-400 via-amber-500/85 to-amber-700/70"
: is4Star
src/components/card/characterInfoCard.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export default function CharacterInfoCard({
onClick={() => onCharacterToggle(character)}
>
{/* Character Portrait */}
<div className="relative mb-3 aspect-[4/5] rounded-xl overflow-hidden bg-base-300/40 flex items-center justify-center">
<div className="relative mb-3 aspect-4/5 rounded-xl overflow-hidden bg-base-300/40 flex items-center justify-center">
{avatar && (
<>
<Image
src/components/card/lightconeCard.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export default function LightconeCard({ data }: LightconeCardProps) {
<li className="group relative flex flex-col items-center rounded-xl overflow-hidden bg-base-100 border border-base-content/10 shadow-sm hover:shadow-md cursor-pointer select-none h-full">
{/* Artwork container with vibrant rarity background */}
<div
className={`w-full relative aspect-[3/4] flex items-center justify-center overflow-hidden bg-linear-to-b ${
className={`w-full relative aspect-3/4 flex items-center justify-center overflow-hidden bg-linear-to-b ${
is5Star
? "from-yellow-400 via-amber-500/85 to-amber-700/70"
: is4Star
src/components/header/index.tsx
+8 -2
View File
@@ -31,6 +31,12 @@ const themes = [
{ label: "Coffee" },
];
function setCookieLocale(localeVal: string) {
if (typeof document !== "undefined") {
document.cookie = `MYNEXTAPP_LOCALE=${localeVal}; path=/; max-age=31536000;`;
}
}
export default function Header() {
const { changeTheme } = useChangeTheme()
const { locale, setLocale } = useLocaleStore(
@@ -139,7 +145,7 @@ export default function Header() {
const changeLocale = (newLocale: string) => {
setLocale(newLocale)
document.cookie = `MYNEXTAPP_LOCALE=${newLocale};`
setCookieLocale(newLocale)
router.refresh()
}
@@ -630,7 +636,7 @@ export default function Header() {
{/* Modals */}
{modalConfigs?.map(({ id, title, onClose, content }) => (
<dialog key={id} id={id} className="modal">
<div className={`modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] ${id === 'monster_modal' ? 'h-[85vh] max-h-[85vh] flex flex-col' : 'max-h-[90vh]'} bg-base-100 text-base-content border border-base-content/10 shadow-2xl rounded-2xl p-0 overflow-hidden`}>
<div className={`modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] ${id === 'monster_modal' ? 'h-[85vh]' : 'max-h-[90vh]'} max-h-[90vh] flex flex-col bg-base-100 text-base-content border border-base-content/10 shadow-2xl rounded-2xl p-0 overflow-hidden`}>
{/* Modal Header */}
<div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-content/10 bg-base-100 shrink-0">
<h3 className="font-bold text-xl tracking-tight bg-clip-text text-transparent bg-linear-to-r from-primary via-accent to-secondary">
src/components/relicsInfo/index.tsx
+3 -3
View File
@@ -407,8 +407,8 @@ export default function RelicsInfo() {
{/* Modals */}
{modalConfigs.map(({ id, title, onClose, content }) => (
<dialog key={id} id={id} className="modal">
<div className={`modal-box ${id === 'quick_view_modal' ? 'w-11/12 max-w-4xl' : 'w-11/12 max-w-[92vw] sm:max-w-[88vw]'} max-h-[90vh] bg-base-100 text-base-content border border-base-content/10 shadow-2xl rounded-2xl p-0 overflow-hidden`}>
<div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-content/10 bg-base-100">
<div className={`modal-box ${id === 'quick_view_modal' ? 'w-11/12 max-w-4xl' : 'w-11/12 max-w-[92vw] sm:max-w-[88vw]'} max-h-[90vh] flex flex-col bg-base-100 text-base-content border border-base-content/10 shadow-2xl rounded-2xl p-0 overflow-hidden`}>
<div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-content/10 bg-base-100 shrink-0">
<h3 className="font-bold text-xl tracking-tight bg-clip-text text-transparent bg-linear-to-r from-primary via-accent to-secondary">
{title}
</h3>
@@ -420,7 +420,7 @@ export default function RelicsInfo() {
</button>
</div>
<div className="p-4 sm:p-6 overflow-y-auto max-h-[calc(90vh-5rem)]">
<div className="p-4 sm:p-6 overflow-y-auto flex-1">
{content}
</div>
</div>