tiny fix for mobile + new banner

bandinopla · Dec 21, 2023 · d8024a1 · d8024a1
1 parent c52c908
commit d8024a1
Show file tree

Hide file tree

Showing 11 changed files with 175 additions and 52 deletions.
diff --git a/public/changelog.txt b/public/changelog.txt
@@ -1,3 +1,9 @@
+- 2.19.3 : 2023-12-21
+        * changed the ganner for some AI generated models representing each sport this site is best suited for.
+
+- 2.19.2 : 2023-12-21
+        * Brief modifications to make the website a tiny little bit more "friendly" on a mobile browser......
+
 - 2.19.1 : 2023-08-04
         * @Sheepwarrior asked for another method to trigger the autocomplete since on the ipad the CMD+Space triggers the search command. So added SHIFT+SPACE 
 

diff --git a/src/banners/SideBanners.js b/src/banners/SideBanners.js
@@ -4,7 +4,7 @@ import Tipo from "./red-guy.png";
 import Gif from "./side-banner.gif";
 import TipoNavidad from "./red-guy-navidad.png";
 import TipoNewYear from "./red-guy-newyear.png";
-import MainBannerSrc from "./main-banner.png";
+import MainBannerSrc from "./main-banner-athletes.png";
 import MainBanner2Src from "./big-banner-2.png";
 import StoreBannerSrc from "./store-banner.png";
 
@@ -56,7 +56,7 @@ const Banner = ({ src }) => {
 			style={{
 				marginTop: -8,
 				position: "relative",
-				maxHeight: 383,
+				maxHeight: 283,
 				textAlign: "center",
 				cursor: "pointer",
 			}}
@@ -69,8 +69,9 @@ const Banner = ({ src }) => {
 					left: 0,
 					width: "50%",
 					height: "100%",
-					backgroundImage: `repeating-linear-gradient(41deg, ${theme.PINK_COLOR} 0, ${theme.PINK_COLOR} 1px, transparent 0, transparent 50%)`,
-					backgroundSize: "11px 11px",
+					//backgroundImage: `repeating-linear-gradient(41deg, ${theme.PINK_COLOR} 0, ${theme.PINK_COLOR} 2px, transparent 0, transparent 50%)`,
+					//backgroundSize: "12px 12px",
+                    background:"#eee"
 				}}
 			></div>
 			<div
@@ -81,12 +82,13 @@ const Banner = ({ src }) => {
 					left: "50%",
 					width: "50%",
 					height: "100%",
-					backgroundImage: `repeating-linear-gradient(41deg, ${theme.GREEN_COLOR} 0, ${theme.GREEN_COLOR} 1px, transparent 0, transparent 50%)`,
-					backgroundSize: "11px 11px",
+					//backgroundImage: `repeating-linear-gradient(41deg, ${theme.GREEN_COLOR} 0, ${theme.GREEN_COLOR} 1px, transparent 0, transparent 50%)`,
+					//backgroundSize: "11px 11px",
+                    background:"#eee"
 				}}
 			></div>
 
-			<img className="sha" src={src} style={{ maxWidth: "100%", transform:"" }} />
+			<img className="sha" src={src} style={{ maxWidth: "100%", maxHeight:283, transform:"" }} />
 
 		</div>
 	);
@@ -99,7 +101,7 @@ export const MainBanner = () => {
     return  <Banner src={MainBannerSrc} />;
 }
 
-export const MainBanner2 = () => <Banner src={MainBanner2Src} />;
+export const MainBanner2 = () => <Banner src={MainBannerSrc} />;
 export const StoreBanner = () => (
 	<div
 		onClick={()=>window.open("https://www.redbubble.com/shop/ap/128010572?ref=studio-promote","_blank")}

diff --git a/src/banners/main-banner-athletes.png b/src/banners/main-banner-athletes.png
diff --git a/src/codemirror/LogTextEditor.js b/src/codemirror/LogTextEditor.js
@@ -1296,12 +1296,12 @@ const __lintEditor = {
     }
 };
 
-export const LogTextEditor = ({ usekg, exercises, tags, value, getDocRef, getShowErrorRef, defaultYMD, utags })=> {
+export const LogTextEditor = ({ usekg, exercises, tags, value, getDocRef, getShowErrorRef, defaultYMD, utags, hintTriggerRef })=> {
 
     const classes       = useStyles();
     const txt           = useRef();
     const save          = useRef();  
-    const cmirror       = useRef();
+    const cmirror       = useRef();  
 
     /**
      * Si value es un array, se asume lo devolvió el backend, por lo que lo convertimos a string...
@@ -1348,6 +1348,15 @@ export const LogTextEditor = ({ usekg, exercises, tags, value, getDocRef, getSho
             lint: __lintEditor
           }); 
 
+        ////CodeMirror.commands.autocomplete(myCodeMirror, null, { completeSingle: false })
+
+        if( hintTriggerRef )
+        {  
+            hintTriggerRef.current = ()=> { 
+                CodeMirror.commands.autocomplete(myCodeMirror, null, { completeSingle: false })
+            };
+        }
+
           //
           cmirror.current = myCodeMirror;
           //
@@ -1487,14 +1496,20 @@ export const LogTextEditor = ({ usekg, exercises, tags, value, getDocRef, getSho
           // on dismount...
           //
           return ()=>{
+
+            if( hintTriggerRef )
+            {
+                hintTriggerRef.current = null;
+            }
+
                 getDocRef.current = null;
                 getShowErrorRef.current = null;
-                myCodeMirror.toTextArea(); //<---- destroy CM instance
-
+                myCodeMirror.toTextArea(); //<---- destroy CM instance 
           }
 
     }, []);
 
+
 
     useEffect( ()=>{
 

diff --git a/src/componentes/journal/editor-button.js b/src/componentes/journal/editor-button.js
@@ -14,13 +14,12 @@ import { SectionTitle } from "../../pages/guest/GuestLandingPage";
 import { useGetSession } from "../../session/session-handler";
 import Alert from "@material-ui/lab/Alert";
 import SaveAltIcon from '@material-ui/icons/SaveAlt';
-import RestoreIcon from '@material-ui/icons/Restore';
 import TimerIcon from '@material-ui/icons/Timer';
 import MenuBookIcon from '@material-ui/icons/MenuBook';
 import CloseIcon from '@material-ui/icons/Close';
 
 import { JEditorStopwatch } from "./editor-stopwatch";
-
+import FileCopyIcon from '@material-ui/icons/FileCopy';
 
 const useStyles = makeStyles((theme) => ({
   backdrop: {
@@ -38,6 +37,7 @@ export const JEditorButton = ({ ymd, range, redirect, wouldBeNewLog, children, .
     //cargar on click....
     const classes = useStyles();
     const saveTriggerRef            = useRef();
+    const hintTriggerRef            = useRef();
     const {session}                 = useGetSession();
     const jowner                    = useContext(JOwnerContext); 
     const [open, setOpen]           = useState(false);
@@ -67,6 +67,13 @@ export const JEditorButton = ({ ymd, range, redirect, wouldBeNewLog, children, .
         setOpen(false)
     };
 
+    const onClickAddExercise = ev => {
+
+        ev.stopPropagation();
+        ev.preventDefault();
+        hintTriggerRef.current && hintTriggerRef.current();
+    }
+
     const loadEditor = async ()=>{ 
 
         setLoading(true);
@@ -119,33 +126,61 @@ export const JEditorButton = ({ ymd, range, redirect, wouldBeNewLog, children, .
                     }}
                 >
                     <DialogTitle>
-                        <Typography style={{float:"right"}} variant="caption">editor v2.0</Typography>
-
 
-                        <SectionTitle line1={"GOOD JOB! Consistency is key!"} line2="LOG A WORKOUT ↴"/>
+                        <div className="desktop-view">
+                            <Typography style={{float:"right"}} variant="caption">editor v2.0</Typography> 
+                            <SectionTitle line1={"GOOD JOB! Consistency is key!"} line2="LOG A WORKOUT ↴"/>
+                        </div>
 
+                        <div className="mobile-view" style={{textAlign:"right"}}>
+                            <Button onClick={onClickAddExercise} variant="outlined" style={{marginRight:20}}>+ Exercise</Button>
+                            <Button  onClick={handleClose} color="primary" startIcon={<CloseIcon/>}>
+                                         Close
+                                        </Button>
+                        </div>
 
                     </DialogTitle> 
 
-                        <DialogContentText>
-                            <Alert severity="info">
-                            To trigger the auto-complete hit <strong>CTRL+SPACE</strong> or <strong>CMD+SPACE</strong>  on a new line. 
-                            </Alert> 
-                        </DialogContentText>
+
+                        <div className="desktop-view">
+                            <DialogContentText>
+                                <Alert severity="info">
+                                To trigger the auto-complete hit <strong>CTRL+SPACE</strong> or <strong>CMD+SPACE</strong>  on a new line. 
+                                </Alert> 
+                            </DialogContentText>
+                        </div>
+
+
                         <JEditorStopwatch openState={stopwatchState}/>
 
 
-                        <JEditor redirect ymd={ymd || $defaultYMD} range={range} onClose={handleClose} saveTrigger={saveTriggerRef} onLoaded={ ()=>setHasLoaded(true) }/>  
+                        <JEditor redirect ymd={ymd || $defaultYMD} range={range} onClose={handleClose} hintTriggerRef={hintTriggerRef} saveTrigger={saveTriggerRef} onLoaded={ ()=>setHasLoaded(true) }/>  
 
 
                         <DialogActions>
 
+                            <div className="mobile-view">
+                                <ButtonGroup variant="outlined" >
+                                    <Button onClick={ ()=>helpModalState[1](true) } ><MenuBookIcon/></Button>
+                                    <Button color="primary"  onClick={ ()=>copyModalState[1](true) }> <FileCopyIcon/> </Button>
+                                    {/* <Button color="primary" onClick={()=>stopwatchState[1](!stopwatchState[0])}>
+                                        { stopwatchState[0]? <CloseIcon/> : <TimerIcon/> } 
+                                        </Button>  */}
+                                 </ButtonGroup>
+                                &nbsp;&nbsp;
+                                 <ButtonGroup variant="outlined" >
+                                    <Button disabled={!hasLoaded} onClick={()=>saveTriggerRef.current()} color="primary" variant="contained" >
+                                        <SaveAltIcon/>
+                                        </Button> </ButtonGroup>
+                            </div>
+
+                            <div className="desktop-view">
                             <Grid container>
                                 <Grid item xs={6}>
                                     <ButtonGroup variant="outlined" >
                                         <Button onClick={ ()=>helpModalState[1](true) } startIcon={<MenuBookIcon/>}>HELP</Button>
                                         {/* <OpenDMButton  otherUser={{id:"1" }} label="DM Admin" /> */}
-                                        <Button color="primary" variant="contained" startIcon={<RestoreIcon/>} onClick={ ()=>copyModalState[1](true) }>
+                                        <Button color="primary" variant="contained" startIcon={<FileCopyIcon/>} onClick={ ()=>copyModalState[1](true) }>
                                             copy
                                         </Button>
                                         <Button color="primary" startIcon={ stopwatchState[0]? <CloseIcon/> : <TimerIcon/> }  onClick={()=>stopwatchState[1](!stopwatchState[0])}>
@@ -165,6 +200,9 @@ export const JEditorButton = ({ ymd, range, redirect, wouldBeNewLog, children, .
                                     </ButtonGroup>
                                 </Grid>
                             </Grid> 
+                            </div>
+
+
                         </DialogActions>
                 </Dialog>
 

diff --git a/src/componentes/journal/editor.js b/src/componentes/journal/editor.js
@@ -26,7 +26,7 @@ export { convertJEditorData2Text };
 
 
 //2020-01-18
-export const JEditor = ({ ymd, range, onClose, saveTrigger, onLoaded, redirect }) => {
+export const JEditor = ({ ymd, range, onClose, saveTrigger, hintTriggerRef, onLoaded, redirect }) => {
 
     const getDoc        = useRef();
     const showDocError  = useRef(); 
@@ -246,6 +246,7 @@ export const JEditor = ({ ymd, range, onClose, saveTrigger, onLoaded, redirect }
                         tags={jeditorData.jeditor.etags} 
                         getDocRef={getDoc} 
                         getShowErrorRef={showDocError}
+                        hintTriggerRef={hintTriggerRef}
                         utags={jeditorData.jeditor.utags}
                         />
         { saveError && <Alert severity="error">{parseError(saveError)}</Alert> }

diff --git a/src/index.css b/src/index.css
@@ -11,3 +11,36 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+/* Media query for mobile */
+@media only screen and (max-width: 768px) {
+    /* Styles for screens up to 768px wide (mobile) */
+    .desktop-view {
+      display: none; /* Hide desktop view on mobile */
+    }
+
+    .mobile-view {
+      display: block; /* Show mobile view on mobile */
+    }
+
+    .mobile-view.inline {
+        display: inline; /* Show mobile view on mobile */
+    }
+  }
+
+  /* Media query for desktop */
+  @media only screen and (min-width: 769px) {
+    /* Styles for screens 769px and wider (desktop) */
+    .mobile-view {
+      display: none; /* Hide mobile view on desktop */
+    }
+
+    .desktop-view {
+      display: block; /* Show desktop view on desktop */
+    }
+
+    .desktop-view.inline {
+        display: inline; /* Show desktop view on desktop */
+      }
+  }
diff --git a/src/pages/SignupAndLogin.js b/src/pages/SignupAndLogin.js
@@ -311,22 +311,22 @@ export const SignupPage = () => {
                     <FormHelperText>{error.error}</FormHelperText>
                 </FormControl></Box>}
 
-                {!waiting && <ActionButton execAction={createAccount} color="primary" variant="contained">Create Account</ActionButton>}
+                {!waiting && <ActionButton execAction={createAccount} color="primary" variant="contained" size="large">Create Account</ActionButton>}
                 {waiting && <Box>
                     {/* <FormControlWithError  error={error} errid="code" helperText="Check your email, we sent you a code!">
                                             <InputLabel>Type the verification code</InputLabel>
                                             <Input inputRef={codeRef} disabled={verifying}/> 
                                         </FormControlWithError>  */}
 
-                    <ButtonGroup>
+                    <ButtonGroup size="large">
                         <ActionButton execAction={verifyCode} disabled={verifying} color="primary" variant="contained">Verify Code</ActionButton>
                         <Button onClick={abortEverything} disabled={verifying}>cancel</Button>
                     </ButtonGroup>
                 </Box>}
 
                 <br /><br />
-                <Typography variant="caption">
-                    Already a member? <Link to="/login">Login</Link>
+                <Typography variant="h6">
+                    Already a member? <Link to="/login">Login &gt;&gt;</Link>
                 </Typography>
                 <br /><br />
 
@@ -468,16 +468,16 @@ export const LoginPage = () => {
                     <FormHelperText>{error.error}</FormHelperText>
                 </FormControl></Box>}
 
-                <ButtonGroup>
-                    <ActionButton execAction={execForgot} disabled={disableInputs}>Forgot my password!</ActionButton>
+                <ButtonGroup  size="large">
+                    <ActionButton execAction={execForgot} disabled={disableInputs}>Forgot my password</ActionButton>
                     <ActionButton execAction={execLogin} color="primary" disabled={disableInputs} variant="contained">Sign In</ActionButton>
                 </ButtonGroup>
 
                 {tempPass != null && <Alert severity="info">A new <strong>temporary password</strong> was created and sent to {tempPass.indexOf("@") > 0 ? <strong>{tempPass}</strong> : <>the email associated with <strong>{tempPass}</strong></>}. Use that password to login.</Alert>}
 
                 <br /><br />
-                <Typography variant="caption">
-                    New here? <Link to="/signup">Signup</Link>
+                <Typography variant="h6">
+                    New here? <Link to="/signup">Create Account</Link>
                 </Typography>
                 <br /><br />
 
@@ -567,6 +567,12 @@ const PageLayout = ({ children }) => {
 
             spacing={4}
         >
+
+
+            <Grid item md={6}>
+                {children}
+            </Grid>
+
             <Grid item md={6}>
 
 
@@ -576,10 +582,6 @@ const PageLayout = ({ children }) => {
 
             </Grid>
 
-            <Grid item md={6}>
-                {children}
-            </Grid>
-
         </Grid>
 
     </Container>