mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2025-01-30 07:10:51 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Layout and animation fixes

Browse source
This commit is contained in:
Sacha Weatherstone 2022-04-09 19:18:10 +10:00
parent 04098ec193
commit 27a200f1b7
1 changed files with 96 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/hardware/HardwareModal.tsx
View file

@ -38,17 +38,28 @@ export const HardwareModal = ({
<FiX />
</Button>
</div>
<div className="absolute inset-0">
<motion.div
layout
animate={hideDetails ? 'hidden' : 'visible'}
animate={
breakpoint === 'sm'
? hideDetails
? 'hiddenSm'
: 'visibleSm'
: hideDetails
? 'hidden'
: 'visible'
}
variants={{
hidden: breakpoint === 'sm' ? { height: '100%' } : { width: '100%' },
visible: breakpoint === 'sm' ? { height: '25%' } : { width: '20%' },
hidden: { width: '100%', height: '100%' },
hiddenSm: { height: '100%', width: '100%' },
visible: { width: '20%', height: '100%' },
visibleSm: { height: '33%', width: '100%' },
}}
transition={{
type: 'just',
}}
className="absolute inset-0 flex flex-col md:h-full md:flex-row"
className="flex flex-col md:h-full md:flex-row"
>
<motion.div
layout
@ -62,10 +73,20 @@ export const HardwareModal = ({
/>
<div className="absolute -bottom-5 z-20 flex w-full md:bottom-auto md:-right-5 md:h-full md:w-auto">
<Button
animate={hideDetails ? 'hidden' : 'visible'}
animate={
breakpoint === 'sm'
? hideDetails
? 'hiddenSm'
: 'visibleSm'
: hideDetails
? 'hidden'
: 'visible'
}
variants={{
hidden: breakpoint === 'sm' ? { rotate: -90 } : { rotate: 180 },
visible: breakpoint === 'sm' ? { rotate: 90 } : { rotate: 0 },
hidden: { rotate: 180 },
hiddenSm: { rotate: -90 },
visible: { rotate: 0 },
visibleSm: { rotate: 90 },
}}
onClick={() => {
setHideDetails(!hideDetails);
@ -118,6 +139,7 @@ export const HardwareModal = ({
}`}
/>
</motion.div>
</div>
<div className="mt-[25%] flex h-full flex-col md:ml-[20%] md:mt-0 md:w-4/5">
<div className="z-0 hidden pb-2 md:flex">
<VariantSelectButton options={device.variants} />