Merge pull request #70 from zesty-io/development

opening bad links fix and styles fixes
zesty-io · Jul 1, 2022 · 4d7bf2e · 4d7bf2e
2 parents bc72ea8 + edb439d
commit 4d7bf2e
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 57 deletions.
diff --git a/dist/live-editor.production.js b/dist/live-editor.production.js
diff --git a/src/components/BreadCrumbs/Subheaders.tsx b/src/components/BreadCrumbs/Subheaders.tsx
@@ -7,8 +7,6 @@ import AddToPhotosIcon from "@mui/icons-material/AddToPhotos"
 import ArchiveIcon from "@mui/icons-material/Archive"
 import EditIcon from "@mui/icons-material/Edit"
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh"
-import MobileFriendlyIcon from "@mui/icons-material/MobileFriendly"
-import DevicesIcon from "@mui/icons-material/Devices"
 
 interface Btn {
    name: string
@@ -32,7 +30,6 @@ export const Subheaders = ({
    response,
    onClick,
 }: Props) => {
-   const [isMobile, setisMobile] = React.useState(true)
    const managerLinks = [
       {
          name: "Edit Schema",
@@ -58,6 +55,20 @@ export const Subheaders = ({
             content?.zestyInstanceZUID || headerZUID(response)
          }.manager.zesty.io/content/${content?.meta?.model?.zuid}/${content?.meta?.zuid}`,
       },
+      {
+         name: "",
+         label: "",
+         href: `https://${
+            content?.zestyInstanceZUID || headerZUID(response)
+         }.manager.zesty.io/content/${content?.meta?.model?.zuid}/${content?.meta?.zuid}`,
+      },
+      {
+         name: "",
+         label: "",
+         href: `https://${
+            content?.zestyInstanceZUID || headerZUID(response)
+         }.manager.zesty.io/content/${content?.meta?.model?.zuid}/${content?.meta?.zuid}`,
+      },
       {
          name: "Edit Permission",
          icon: (
@@ -75,16 +86,6 @@ export const Subheaders = ({
       // @ts-ignore
       window.open(url, "_blank").focus()
    }
-
-   const handleDevPreview = (isMobile: boolean) => {
-      setisMobile(!isMobile)
-      if (isMobile) {
-         handleMobile()
-      } else {
-         handleDesktop()
-      }
-   }
-
    return (
       <>
          <Box
@@ -113,22 +114,6 @@ export const Subheaders = ({
                   </Box>
                )
             })}
-            <Box>
-               {
-                  <CustomLink onClick={() => handleDevPreview(isMobile)} theme={theme}>
-                     <Box sx={{ display: "flex", alignItems: "center", gap: ".5rem" }}>
-                        <Box style={{ fontSize: "22px" }}>
-                           {!isMobile ? (
-                              <MobileFriendlyIcon fontSize="inherit" />
-                           ) : (
-                              <DevicesIcon fontSize="inherit" />
-                           )}
-                        </Box>
-                        <Box paddingBottom={1}>{"Device Preview"}</Box>
-                     </Box>
-                  </CustomLink>
-               }
-            </Box>
          </Box>
          <Box
             paddingX={2}
@@ -203,28 +188,3 @@ export const Subheaders = ({
       </>
    )
 }
-
-export const handleMobile = (id = "__next") => {
-   const mainSite: any = typeof window !== "undefined" && document.getElementById(id)!
-   mainSite.style.width = "414px"
-   mainSite.style.height = "auto"
-   mainSite.style.overflow = "hidden"
-   mainSite.style.position = "absolute"
-   mainSite.style.left = "60vw"
-   mainSite.style.top = "10vh"
-
-   // @ts-ignore
-   document.getElementsByTagName("meta")["viewport"].content = "width= 400"
-}
-export const handleDesktop = (id = "__next") => {
-   const mainSite: any = typeof window !== "undefined" && document.getElementById(id)!
-   mainSite.style.width = "auto"
-   mainSite.style.height = "auto"
-   mainSite.style.overflow = "hidden"
-   mainSite.style.position = "relative"
-   mainSite.style.left = "0"
-   mainSite.style.top = "0"
-
-   // @ts-ignore
-   document.getElementsByTagName("meta")["viewport"].content = "width= auto"
-}
diff --git a/src/components/Ui/LoginPromp.tsx b/src/components/Ui/LoginPromp.tsx
@@ -1,11 +1,14 @@
 import { Box, Typography } from "@mui/material"
 import { NormalBtn } from "components"
+import { assets } from "constants"
 import React from "react"
 
 const loginPromp = {
    display: "flex",
    flexDirection: "column",
    justifyItems: "center",
+   justifyContent: "center",
+   alignItems: "center",
    position: "fixed",
    top: "25%",
    left: "15%",
@@ -17,6 +20,31 @@ const loginPromp = {
 export const LoginPrompt = () => {
    return (
       <Box sx={loginPromp}>
+         <Box
+            paddingTop={1}
+            sx={{
+               width: "100%",
+               display: "flex",
+               flexDirection: "row",
+               justifyItems: "center",
+               justifyContent: "center",
+               alignItems: "center",
+               gap: ".5rem",
+            }}
+         >
+            <img
+               src={assets.zestyLogo}
+               alt="Zesty Explorer"
+               width={"100"}
+               height={"100"}
+            />
+            <img
+               src={assets.zestyName}
+               alt="Zesty Explorer"
+               width={"150"}
+               height={"150"}
+            />
+         </Box>
          <Typography sx={{ fontSize: "32px", fontWeight: "bold" }}>
             Please Login
          </Typography>

diff --git a/src/utils/edit.tsx b/src/utils/edit.tsx
@@ -127,3 +127,53 @@ export const editModeFunc = (
          }
       })
 }
+
+// const URL = "https://www.zesty.io/"
+// const mainSite =
+// typeof window !== "undefined" && document.getElementById("view-homepage")
+// const handleClick = () => {
+//    // const viewport = document.querySelector("meta[name=viewport]")
+//    // @ts-ignore
+//    // viewport.setAttribute(
+//    //    "content",
+//    //    "width=200px, initial-scale=1.0, maximum-scale=2.0, user-scalable=0",
+//    // )
+//    //  @ts-ignore
+//    // mainSite.style.width = "480px"
+//    // @ts-ignore
+//    // mainSite.style.width = "300px"
+//    // @ts-ignore
+//    // mainSite.style.overflow = "hidden"
+
+//    // @ts-ignore
+//    // mainSite.style.display = "none"
+//    // const iframe = document.createElement("iframe")
+//    // iframe.src = URL
+//    // iframe.style.width = "400px"
+//    // iframe.style.height = "80vh"
+//    // iframe.style.margin = "0 auto"
+//    // iframe.style.position = "absolute"
+//    // iframe.style.left = "50%"
+//    // iframe.style.right = "50%"
+//    // iframe.style.display = "flex"
+//    // iframe.style.justifyContent = "center"
+//    // iframe.style.justifyItems = "center"
+//    // document.body.appendChild(iframe)
+//    // @ts-ignore
+//    // document
+//    //    .getElementById("viewport")
+//    //    .setAttribute(
+//    //       "content",
+//    //       "initial-scale=0.5; maximum-scale=1.0; user-scalable=0;",
+//    // )
+//    document.getElementsByTagName("meta")["viewport"].content = "width= 400"
+
+//    // window.open(URL, "_blank", option_string)
+// }
+// const handleClick2 = () => {
+//    // @ts-ignore
+//    $iframe.style.width = "auto"
+
+//    // @ts-ignore
+//    document.getElementsByTagName("meta")["viewport"].content = "width= 400px;"
+// }