mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2025-03-05 21:00:08 -08:00
Code Issues Actions 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 /> <FiX />
</Button> </Button>
</div> </div>
<div className="absolute inset-0">
<motion.div <motion.div
layout layout
animate={hideDetails ? 'hidden' : 'visible'} animate={
breakpoint === 'sm'
? hideDetails
? 'hiddenSm'
: 'visibleSm'
: hideDetails
? 'hidden'
: 'visible'
}
variants={{ variants={{
hidden: breakpoint === 'sm' ? { height: '100%' } : { width: '100%' }, hidden: { width: '100%', height: '100%' },
visible: breakpoint === 'sm' ? { height: '25%' } : { width: '20%' }, hiddenSm: { height: '100%', width: '100%' },
visible: { width: '20%', height: '100%' },
visibleSm: { height: '33%', width: '100%' },
}} }}
transition={{ transition={{
type: 'just', 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 <motion.div
layout 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"> <div className="absolute -bottom-5 z-20 flex w-full md:bottom-auto md:-right-5 md:h-full md:w-auto">
<Button <Button
animate={hideDetails ? 'hidden' : 'visible'} animate={
breakpoint === 'sm'
? hideDetails
? 'hiddenSm'
: 'visibleSm'
: hideDetails
? 'hidden'
: 'visible'
}
variants={{ variants={{
hidden: breakpoint === 'sm' ? { rotate: -90 } : { rotate: 180 }, hidden: { rotate: 180 },
visible: breakpoint === 'sm' ? { rotate: 90 } : { rotate: 0 }, hiddenSm: { rotate: -90 },
visible: { rotate: 0 },
visibleSm: { rotate: 90 },
}} }}
onClick={() => { onClick={() => {
setHideDetails(!hideDetails); setHideDetails(!hideDetails);
@ -118,6 +139,7 @@ export const HardwareModal = ({
}`} }`}
/> />
</motion.div> </motion.div>
</div>
<div className="mt-[25%] flex h-full flex-col md:ml-[20%] md:mt-0 md:w-4/5"> <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"> <div className="z-0 hidden pb-2 md:flex">
<VariantSelectButton options={device.variants} /> <VariantSelectButton options={device.variants} />