Issues: fix zIndex fighting with NavPanel on mobile; fit onto mobile screen as well

package.json

@@ -1,6 +1,6 @@
 {
   "name": "buildrs",
-  "version": "1.0.0-r248",
+  "version": "1.0.0-r259",
   "main": "src/index.jsx",
   "homepage": "https://github.com/buildrs/Share",
   "scripts": {

src/Components/IssuesControl.jsx

@@ -1,7 +1,12 @@
 import React, {useEffect, useState} from 'react'
 import {useLocation, useNavigate} from 'react-router'
-import Paper from '@mui/material/Paper'
+import DialogActions from '@mui/material/DialogActions'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import IconButton from '@mui/material/IconButton'
+import MuiDialog from '@mui/material/Dialog'
 import Typography from '@mui/material/Typography'
+import Slide from '@mui/material/Slide'
 import {makeStyles} from '@mui/styles'
 import {ControlButton} from './Buttons'
 import debug from '../utils/debug'
@@ -90,6 +95,11 @@ export default function IssuesControl({viewer}) {
 }
 
 
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return <Slide direction="up" ref={ref} {...props} />
+})
+
+
 /**
  * Displays the comment panel
  * @param {string} body The comment body
@@ -100,32 +110,55 @@ export default function IssuesControl({viewer}) {
  */
 function CommentPanel({body, title, next, navigate}) {
   const [count, setCount] = useState(0)
+  const [isOpen, setIsOpen] = useState(true)
+  const [fullWidth] = useState(window.innerWidth <= 900)
   const classes = useStyles()
   return (
-    <div className={classes.issueContainer}>
-      <Paper
-        onClick={(event) => event.stopPropagation()}
-        elevation={3}>
-        {title && <h1>{title}</h1>}
+    <MuiDialog
+      open={isOpen}
+      onClose={() => setIsOpen(false)}
+      fullWidth={fullWidth}
+      scroll='paper'
+      TransitionComponent={Transition}
+      BackdropProps={{style: {opacity: 0}}}
+      PaperProps={{
+        style: {
+          padding: 0,
+          margin: 0,
+          minHeight: '220px',
+          maxHeight: '250px',
+          width: fullWidth ? '100%' : 'default'}}}
+      className={classes.issueDialog}>
+      {title &&
+       <DialogTitle>
+         <h1>{title}</h1>
+       </DialogTitle>}
+      <DialogContent>
         <Typography paragraph={true}>{body}</Typography>
+      </DialogContent>
+      <DialogActions sx={{justifyContent: 'center'}}>
         <div>
           {count > 0 &&
-           <NavPrevIcon
+           <IconButton
              onClick={() => {
                if (count > 0) {
                  setCount(count - 1)
                  navigate(-1)
                }
-             }}/>}
+             }}>
+             <NavPrevIcon/>
+           </IconButton>}
           {next &&
-           <NavNextIcon
+           <IconButton
              onClick={() => {
                setCount(count + 1)
                window.location = next
-             }}/>}
+             }}>
+             <NavNextIcon/>
+           </IconButton>}
         </div>
-      </Paper>
-    </div>
+      </DialogActions>
+    </MuiDialog>
   )
 }
 
@@ -224,32 +257,43 @@ function setPanelText(title, body, setText, setNext) {
 
 
 const useStyles = makeStyles({
-  issueContainer: {
-    'position': 'fixed',
-    'top': '70px',
-    'right': '80px',
+  issueDialog: {
     'fontFamily': 'Helvetica',
-    'display': 'flex',
-    'justifyContent': 'center',
+    '& .MuiDialog-container': {
+      alignItems: 'flex-end',
+    },
+    '& .MuiDialogTitle-root h1': {
+      fontSize: '1.1em',
+      margin: 0,
+    },
+    '& .MuiDialogActions-root': {
+      borderTop: 'solid 1px lightgrey',
+      margin: '0.5em 1em',
+      padding: '0em',
+    },
     '& .MuiPaper-root': {
-      width: '300px',
       padding: '1em',
     },
+    '& .MuiButtonBase-root': {
+      padding: 0,
+      margin: '0.5em',
+      borderRadius: '50%',
+      border: 'none',
+    },
+    '& svg': {
+      padding: 0,
+      margin: 0,
+      width: '25px',
+      height: '25px',
+      border: 'solid 0.5px grey',
+      fill: 'black',
+      borderRadius: '50%',
+    },
     '& h1, & p': {
       fontWeight: 300,
     },
     '& h1': {
       fontSize: '1.2em',
     },
-    '& .MuiPaper-root > div': {
-      display: 'flex',
-      justifyContent: 'center',
-    },
-    '& svg': {
-      width: '20px',
-      height: '20px',
-      border: 'solid 1px grey',
-      margin: '1em 1em 0em 1em',
-    },
   },
 })

src/Components/NavPanel.jsx

@@ -121,7 +121,6 @@ const useStyles = makeStyles({
       maxHeight: '30%',
       width: '250px',
       top: '80px',
-      zIndex: '1', // Above operations group
     },
   },
   treeContainer: {

src/Share.jsx

@@ -109,7 +109,11 @@ export default function Share({installPrefix, appPrefix, pathPrefix}) {
  */
 export function navToDefault(navigate, appPrefix) {
   // TODO: probe for index.ifc
-  navigate(appPrefix + '/v/p/index.ifc#c:-111.37,14.94,90.63,-43.48,15.73,-4.34')
+  if (window.innerWidth <= 900) {
+    navigate(appPrefix + '/v/p/index.ifc#c:-144.36,14.11,147.82,-40.42,17.84,-2.28')
+  } else {
+    navigate(appPrefix + '/v/p/index.ifc#c:-111.37,14.94,90.63,-43.48,15.73,-4.34')
+  }
 }
 
 

src/utils/GitHub.js

@@ -89,10 +89,10 @@ class MockOctokit {
 
 const MOCK_ISSUE = {
   data: {
-    title: 'Hello Mock Issue!',
-    body: `1) This is an issue\r
+    title: 'Welcome to Bldrs: Share',
+    body: `Build Every Thing Together.\r
 \`\`\`\r
-url=//${window.location.host}/share/v/p/index.ifc#i:8:0::c:-12.07,16.66,24.78,11.39,3.15,2.89\r
+url=//${window.location.host}/share/v/p/index.ifc#i:8:0::c:-144.36,14.11,147.82,-40.42,17.84,-2.28\r
 \`\`\`\r
 `,
   },
@@ -102,16 +102,29 @@ url=//${window.location.host}/share/v/p/index.ifc#i:8:0::c:-12.07,16.66,24.78,11
 const MOCK_COMMENTS = {
   data: [
     {
-      body: `2) And a comment\r
+      body: `The Architecture, Engineering and Construction industries are trying
+to face challenging problems of the future with tools anchored in the
+past. Meanwhile, a new dynamic has propelled the Tech industry:
+online, collaborative, open development.
+
+We can't imagine a future where building the rest of the world hasn't
+been transformed by these new ways of working. We are part of that
+transformation.\r
+
 \`\`\`\r
-url=//${window.location.host}/share/v/p/index.ifc#i:8:1::c:67.92,21.64,3.99,25.2,2.35,4.6\r
+url=//${window.location.host}/share/v/p/index.ifc#i:8:1::c:-45.81,18.08,112.36,-43.48,15.73,-4.34\r
 \`\`\`\r
 `,
     },
     {
-      body: `3) And another\r
-\`\`\`\r
-url=//${window.location.host}/share/v/p/index.ifc#i:8::c:-12.07,16.66,24.78,11.39,3.15,2.89\r
+      body: `The key insights from Tech: Cross-functional online collaboration
+unlocks team flow, productivity and creativity. Your team extends
+outside of your organization and software developers are essential
+team members. An ecosystem of app Creators developing on a powerful
+operating system Platform is the most scalable architecture. Open
+workspaces, open standards and open source code the most powerful way
+to work. Cooperation is the unfair advantage.\r \`\`\`\r
+url=//${window.location.host}/share/v/p/index.ifc#i:8::c:-144.36,14.11,147.82,-40.42,17.84,-2.28\r
 \`\`\`\r
 `,
     },