feat: feature/rainbow-component Modified commander mobile view

Browse Source
This commit is contained in:
Nikolaj Frey 2023-07-05 20:14:49 +10:00
parent e30dc3f56c
commit c5c0958905
2 changed files with 55 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
remix/app/components/Commander/Commander.tsx
View File

@ -317,14 +317,14 @@ export const Commander = (props) => {
<ClickAwayListener onClickAway={closeCommander}> <ClickAwayListener onClickAway={closeCommander}>
<Flex <Flex
position="absolute" position="absolute"
// display={['flex', commanderActive ? 'flex' : 'none']}
top={0} top={0}
right={0}
// zIndex={99999} // zIndex={99999}
// position='fixed' // position='fixed'
// top='100px' // top='100px'
right={0}
left={0} left={0}
justifyContent={["flex-start", "center"]} justifyContent={["flex-start", "center"]}
// display={["flex", commanderActive ? "flex" : "none"]}
maxWidth="100%" maxWidth="100%"
height="100%" height="100%"
pointerEvents="none" pointerEvents="none"
@ -386,6 +386,12 @@ export const Commander = (props) => {
<Thingtime thing={contextValue}></Thingtime> <Thingtime thing={contextValue}></Thingtime>
</Flex> </Flex>
</Flex> </Flex>
<Center
position="relative"
width={["100%", "400px"]}
maxWidth={[mobileVW, "100%"]}
height="100%"
>
<Rainbow <Rainbow
filter="blur(15px)" filter="blur(15px)"
opacity={commanderActive ? 0.25 : 0} opacity={commanderActive ? 0.25 : 0}
@ -407,7 +413,6 @@ export const Commander = (props) => {
<Rainbow <Rainbow
opacity={commanderActive ? 0.5 : 0} opacity={commanderActive ? 0.5 : 0}
position="absolute" position="absolute"
expand
repeats={rainbowRepeats} repeats={rainbowRepeats}
opacityTransition="all 3000ms ease" opacityTransition="all 3000ms ease"
thickness={10} thickness={10}
@ -435,6 +440,7 @@ export const Commander = (props) => {
></Input> ></Input>
</Center> </Center>
</Rainbow> </Rainbow>
</Center>
</Flex> </Flex>
</ClickAwayListener> </ClickAwayListener>
) )

2
remix/app/components/Rainbow/Rainbow.tsx
View File

@ -13,6 +13,8 @@ export const Rainbow = (allProps: any): JSX.Element => {
const uuid = useUuid() const uuid = useUuid()
props.expand = props?.expand || true
const [hidden, setHidden] = React.useState(true) const [hidden, setHidden] = React.useState(true)
const repeats = props?.repeats || 1 const repeats = props?.repeats || 1
const [filter, setFilter] = React.useState(props?.filter) const [filter, setFilter] = React.useState(props?.filter)