d-bis/impersonator
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make iframe responsive

Browse Source
This commit is contained in:
apoorvlathey
2022-10-11 13:19:53 +05:30
parent 6219ce5ab3
commit 4b4dfed1a5
2 changed files with 60 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/Body/index.tsx
View File

@@ -840,46 +840,49 @@ function Body() {
>
<ModalHeader>Select a dapp</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Box
minH="30rem"
maxH="30rem"
overflow="scroll"
overflowX="auto"
overflowY="auto"
>
{(!safeDapps || !safeDapps[networkIndex]) && (
<Center py="3rem" w="100%">
<Spinner />
<ModalBody maxH="30rem" overflow={"clip"}>
{(!safeDapps || !safeDapps[networkIndex]) && (
<Center py="3rem" w="100%">
<Spinner />
</Center>
)}
<Box pb="2rem" px={{ base: 0, md: "2rem" }}>
{safeDapps && safeDapps[networkIndex] && (
<Center pb="0.5rem">
<InputGroup maxW="30rem">
<Input
placeholder="search 🔎"
value={searchSafeDapp}
onChange={(e) =>
setSearchSafeDapp(e.target.value)
}
/>
{searchSafeDapp && (
<InputRightElement width="3rem">
<Button
size="xs"
variant={"ghost"}
onClick={() => setSearchSafeDapp("")}
>
<CloseIcon />
</Button>
</InputRightElement>
)}
</InputGroup>
</Center>
)}
<Box pb="2rem" px={{ base: 0, md: "2rem" }}>
{safeDapps && safeDapps[networkIndex] && (
<Center pb="1.5rem">
<InputGroup maxW="30rem">
<Input
placeholder="search 🔎"
value={searchSafeDapp}
onChange={(e) =>
setSearchSafeDapp(e.target.value)
}
/>
{searchSafeDapp && (
<InputRightElement width="3rem">
<Button
size="xs"
variant={"ghost"}
onClick={() => setSearchSafeDapp("")}
>
<CloseIcon />
</Button>
</InputRightElement>
)}
</InputGroup>
</Center>
)}
<SimpleGrid columns={{ base: 2, md: 3, lg: 4 }} gap={6}>
<Box
minH="30rem"
maxH="30rem"
overflow="scroll"
overflowX="auto"
overflowY="auto"
>
<SimpleGrid
pt="1rem"
columns={{ base: 2, md: 3, lg: 4 }}
gap={6}
>
{filteredSafeDapps &&
filteredSafeDapps.map((dapp, i) => (
<GridItem
@@ -930,18 +933,24 @@ function Body() {
Connect
</Button>
</Center>
<Center mt="1rem" ml="-60" w="70rem">
<Center
mt="1rem"
ml={{ base: "-385", sm: "-315", md: "-240", lg: "-60" }}
px={{ base: "10rem", lg: 0 }}
w="70rem"
>
{appUrl && (
<iframe
<Box
as="iframe"
w={{ base: "22rem", sm: "45rem", md: "55rem", lg: "1500rem" }}
h={{ base: "33rem", md: "35rem", lg: "38rem" }}
title="app"
src={appUrl}
key={iframeKey}
width="1500rem"
height="600rem"
style={{
border: "1px solid white",
background: "white",
}}
borderWidth="1px"
borderStyle={"solid"}
borderColor="white"
bg="white"
ref={iframeRef}
onLoad={() => setIsIFrameLoading(false)}
/>

6
src/components/Navbar.tsx
View File

@@ -23,7 +23,11 @@ function Navbar() {
borderBottomColor={underlineColor[colorMode]}
>
<Spacer flex="1" />
<Heading maxW={["302px", "4xl", "4xl", "4xl"]}>
<Heading
maxW={["302px", "4xl", "4xl", "4xl"]}
fontSize={{ base: "2xl", md: "3xl" }}
pr="2rem"
>
🎭 Impersonator 🕵️
</Heading>
<Flex flex="1" justifyContent="flex-end" alignItems={"center"}>