granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix footer shadow in EditPartyModal

Browse source
This commit is contained in:
Justin Edmund 2023-07-03 20:50:44 -07:00
parent fa0720a549
commit c7311a4e03
3 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/common/DialogFooter/index.module.scss
View file

@ -11,6 +11,7 @@
justify-content: space-between; justify-content: space-between;
padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x; padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x;
position: sticky; position: sticky;
transition: box-shadow 0.1s ease-out, border-top 0.1s ease-out;
.left, .left,
.right { .right {

1
components/party/EditPartyModal/index.module.scss
View file

@ -9,7 +9,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
gap: $unit-2x;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;

17
components/party/EditPartyModal/index.tsx
View file

@ -246,16 +246,21 @@ const EditPartyModal = ({
const calculateFooterShadow = debounce(() => { const calculateFooterShadow = debounce(() => {
const boxShadowBase = '0 -2px 8px' const boxShadowBase = '0 -2px 8px'
const scrollable = document.querySelector(`.${styles.scrollValue}`) const scrollable = document.querySelector(`.${styles.scrollable}`)
const footer = footerRef const footer = footerRef
if (footer && footer.current) { if (footer && footer.current) {
if (scrollable && scrollable.clientHeight >= scrollable.scrollHeight) { if (scrollable) {
if (scrollable.clientHeight >= scrollable.scrollHeight) {
footer.current.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, 0)`
footer.current.style.borderTopColor = `rgba(0, 0, 0, 0)`
} else {
footer.current.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, 0.16)`
footer.current.style.borderTopColor = `rgba(0, 0, 0, 0.24)`
}
} else {
footer.current.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, 0)` footer.current.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, 0)`
footer.current.style.borderTopColor = `rgba(0, 0, 0, 0)` footer.current.style.borderTopColor = `rgba(0, 0, 0, 0)`
} else {
footer.current.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, 0.16)`
footer.current.style.borderTopColor = `rgba(0, 0, 0, 0.24)`
} }
} }
}, 100) }, 100)
@ -566,8 +571,6 @@ const EditPartyModal = ({
<DialogTrigger asChild>{props.children}</DialogTrigger> <DialogTrigger asChild>{props.children}</DialogTrigger>
<DialogContent <DialogContent
className="editParty" className="editParty"
headerref={topContainerRef}
footerref={footerRef}
onEscapeKeyDown={onEscapeKeyDown} onEscapeKeyDown={onEscapeKeyDown}
onOpenAutoFocus={onOpenAutoFocus} onOpenAutoFocus={onOpenAutoFocus}
> >