style: improve custom graph page and overall responsiveness

Author: Speedrunyourknowledge

calc-frontend/src/App/app.css

@@ -38,14 +38,15 @@ body {
     width:100%;
 
     margin:auto;
-    padding-right:10px;
-    padding-left:10px;
+    padding-right:60px;
+    padding-left:60px;
 
     display:grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
     column-gap:20px;
     row-gap:20px;
+
   }
 
   .topic-list-3{
@@ -54,19 +55,90 @@ body {
   }
 
   .topic-box{
-    @apply h-20 flex items-center justify-center 
-    bg-amber-300 rounded-lg hover:bg-amber-400 transition transform hover:scale-103 
+    @apply flex items-center justify-center 
+    bg-amber-300 hover:bg-amber-400 transition transform hover:scale-103 
     duration-200 border-2 border-solid;
 
+    border-radius:8px;
+  
+    height:calc(var(--spacing) * 20);
+    max-width: calc(var(--spacing) * 20 * 3.5);
+  }
+
+  .custom-border{
+    overflow: hidden;
+    
+  }
+
+  .custom-border:before{
+    position:absolute;
+    z-index:-2;
+    height:450%;
+    width:150%;
+
+    content:"";
+    background-image: linear-gradient(to top right, #f46e29, #f46e29, #e93002, 
+                      #DC1FFF, #1f57ff, #1fc7ff, #1fff7c, #1fff7c);
+
+    animation: spin 4s linear infinite;
+  }
+
+  .custom-border:after{
+    content: "";
+    position:absolute;
+    z-index:-1;
+
+    background: var(--color-amber-300);
+    width: calc(100% - 8px);
+    height: calc(100% - 8px);
+    border-radius: 6px;
+
+  }
+
+  .custom-border:hover:after{
+    background: var(--color-amber-400);
+  }
+
+  @keyframes spin{
+    100%{
+      transform: rotate(-360deg);
+    }
+  }
+
+  .loading{
+    animation: delay-appearance 300ms ease-out 1;
+  }
+
+  @keyframes delay-appearance{
+    0% {
+      opacity: 0;
+    }
+    99% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 
   .back-button{
     @apply cursor-pointer bg-sky-400 hover:bg-blue-600 hover:text-neutral-50 rounded-md border-2 border-solid;
-    padding: 4px 12px;
-    font-size: 1.5rem;
+    padding: 4px 16px;
+    font-size: 1.375rem;
     margin-bottom: .75rem;
   }
 
+  .go-button{
+    @apply cursor-pointer bg-[#1ee342] rounded-md border-2 border-solid;
+    padding: 4px 12px;
+    font-size: 1.375rem;
+    height: fit-content;
+  }
+
+  .brighten:hover {
+    box-shadow: inset 1rem 5rem rgba(255, 255, 255, 0.3);
+  }
+
   .error-title{
     font-size: 3rem;
     line-height: 1;
@@ -99,10 +171,31 @@ body {
     max-width: 550px;
   }
 
+  .pad-sm{
+    padding-right:.5rem;
+    padding-left:.5rem;
+  }
+
   /* 
       List the more inclusive media queries first if they 
       should be overridden by subsequent queries
   */
+  @media (max-width: 1199px){
+
+    .topic-list{
+      padding-right:40px;
+      padding-left:40px;
+    }
+  }
+
+  @media (max-width: 1099px){
+
+    .topic-list{
+      padding-right:20px;
+      padding-left:20px;
+    }
+  }
+
   @media (max-width: 999px) {
 
     .topic-list{
@@ -121,24 +214,43 @@ body {
       @apply flex-wrap;
     }
 
+    .topic-list{
+      padding-right:10px;
+      padding-left:10px;
+    }
   }
 
-  @media (max-width: 599px) {
-
+  @media (max-width: 699px) {
     .topic-list{
       grid-template-columns: 1fr 1fr;
-      padding-right:0px;
-      padding-left:0px;
+      padding-right:40px;
+      padding-left:40px;
+    }
+
+    .topic-list-3{
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+
+  @media (max-width: 599px) {
+    .topic-list{
+      padding-right:20px;
+      padding-left:20px;
 
       column-gap:15px;
       row-gap:15px;
     }
+  }
 
-    .topic-list-3{
-      grid-template-columns: 1fr 1fr;
+  @media (max-width: 499px) {
+    .topic-list{
+      padding-right:0px;
+      padding-left:0px;
     }
   }
 
+
   @media (min-width: 800px) {
 
     .graph-frame{

calc-frontend/src/App/widgets.css

@@ -25,3 +25,6 @@ h2 .mq-math-mode .mq-fraction{
   font-size:80%;
 }
 
+.edit-box.mq-editable-field{
+  padding-right:.25rem;
+}

calc-frontend/src/components/Custom/IntCustomGraph.tsx

@@ -82,17 +82,21 @@ function IntCustomGraph({func, lowerBound, upperBound}) {
     }
   }, [ready]);
 
+  if(!ready){
+    return(       
+      <div className="pad-sm loading" style={{fontSize:'1.25rem'}}>
+        Loading...<br/>
+        Complex functions may take longer
+      </div> 
+    )
+  }
+
+  if(ready && !success){
+    return <div className="pad-sm" style={{color:'red', fontSize: '1.25rem'}}>{errorMsg}</div> 
+  }
 
   return (
-    
-    ready? 
-      success? <div className="plotly-graph-div graph-frame" id="plotly_graph"></div> :
-      <div style={{color:'red'}}>{errorMsg}</div> 
-    :
-    <div style={{fontSize:'1.25rem'}}>
-      Loading...<br/>
-      Complex functions may take longer
-    </div> 
+    <div className="plotly-graph-div graph-frame" id="plotly_graph"></div> 
   )
 
 }

calc-frontend/src/pages/CustomDerivative.tsx

@@ -7,11 +7,13 @@ function CustomDeriv() {
   const container = useRef<HTMLDivElement>(null);
   const MQ = useRef<any>(null);
   const containerMF = useRef<any>(null);
+  const start = useRef<HTMLDivElement>(null);
 
   const edit = useRef<HTMLDivElement>(null);
   const editMF = useRef<any>(null);
   const [func, setFunc] = useState<string>('');
   const [bounds, setBounds] = useState<number[]>([0,5]);
+  const [formatCheck, setFormatCheck] = useState<string>('');
 
   /*
     Updates the function and the bounds with the user input
@@ -26,7 +28,7 @@ function CustomDeriv() {
       newFunc = generateFunction(funcLatex)
     }
     catch{
-      console.log('Please enter a valid function')
+      setFormatCheck('Please enter a valid function')
       return 1
     }
 
@@ -37,13 +39,15 @@ function CustomDeriv() {
 
     // check if bounds are valid
     if(checkBounds !== 'success'){
-      console.log(checkBounds)
+      setFormatCheck(checkBounds)
       return 1
     }
 
     // input is valid, so set all variables
     setFunc(newFunc)
     setBounds([parseFloat(lowerBound), parseFloat(upperBound)])
+    setFormatCheck('')
+
 
     return 0
   }
@@ -55,10 +59,10 @@ function CustomDeriv() {
 
     containerMF.current = MQ.current.StaticMath(container.current, { }) // for the bounds
 
-    editMF.current = MQ.current.StaticMath(edit.current).innerFields[0] // for the function
+    MQ.current.StaticMath(start.current, { }) // for the y =
 
     // updates the output whenever 'enter' is pressed
-    editMF.current.config({
+    editMF.current = MQ.current.MathField(edit.current, { 
       handlers: {
         enter: generateOutput
       }
@@ -73,23 +77,25 @@ function CustomDeriv() {
         <button className="back-button"> Back</button>
       </Link>
 
-      <div className="center-header flex flex-wrap justify-center gap-[1rem]">
+      <div className="center-header flex flex-wrap justify-center gap-[1rem]" style={{alignItems:"center"}}>
         <div ref={container}>
           \MathQuillMathField&#123;0&#125; \leq x \leq \MathQuillMathField&#123;5&#125;
         </div>
 
-        <div ref={edit}> 
-          y = \MathQuillMathField&#123;x&#125;
+        <div>
+          <div ref={start}> 
+            y =
+          </div>
+
+          <div ref={edit} className = "edit-box"> 
+            x
+          </div>
         </div>
 
       </div>
 
-      <div style={{display:'block', marginBottom:'0.5rem'}} className='center-header'> 
-        {func} &nbsp;&nbsp;{bounds.join(', ')}
-      </div>
-        
-      <div className="graph-outer-box" style={{justifyContent: "center"}}>
-        The graph will go here
+      <div className="center-header" style={{fontSize:'1.5rem'}}>
+        Coming Soon
       </div>
 
     </div>

calc-frontend/src/pages/CustomIntegral.tsx

@@ -76,13 +76,13 @@ function CustomInt() {
         <button className="back-button"> Back</button>
       </Link>
 
-      <div className="center-header flex flex-wrap justify-center gap-[.5rem]">
+      <div className="center-header flex flex-wrap justify-center gap-[.5rem]" style={{alignItems:"center"}}>
         <div ref={container} >
           \int_\MathQuillMathField&#123;0&#125;^\MathQuillMathField&#123;5&#125;
         </div>
 
-        <div style={{height:'fit-content', alignSelf:'center'}}>
-          <div ref={edit} style={{marginRight:'.25rem'}}> 
+        <div style={{height:'fit-content', alignSelf:'center', marginRight:'.5rem'}}>
+          <div ref={edit} className = "edit-box" style={{marginRight:'.25rem'}}> 
             x
           </div>
 
@@ -91,23 +91,22 @@ function CustomInt() {
           </div>
         </div>
 
+        <button className="go-button brighten" onClick={generateOutput}> Graph</button>
+
       </div>
 
       {
-        formatCheck === ''? null :
-        <div className="center-header" style={{fontSize:'1rem', color:'red'}}>
-          {formatCheck}
-        </div>
+        formatCheck === ''? func === ''? null :
+            <div className="graph-outer-box" style={{justifyContent: "center", marginTop:'.5rem'}}>
+              <IntCustomGraph key={func + bounds[0].toString() + bounds[1].toString()} func={func} 
+              lowerBound = {bounds[0]} upperBound = {bounds[1]}/>
+            </div> 
+          :
+          <div className="center-header pad-sm" style={{fontSize:'1.25rem', color:'red', marginTop:'.5rem'}}>
+            {formatCheck}
+          </div>
       } 
 
-      {
-        func === ''? null :
-        <div className="graph-outer-box" style={{justifyContent: "center", marginTop:'.5rem'}}>
-          <IntCustomGraph key={func + bounds[0].toString() + bounds[1].toString()} func={func} 
-            lowerBound = {bounds[0]} upperBound = {bounds[1]}/>
-        </div>
-      }
-
     </div>
   )
 }

calc-frontend/src/pages/Derivatives.tsx

@@ -13,7 +13,7 @@ function Derivatives() {
       <h2 className="topic-header m-auto w-fit">The Derivative of Common Functions</h2>
       <div className="topic-list">
 
-        <Link to="/derivatives/custom" className="topic-box">
+        <Link to="/derivatives/custom" className="topic-box custom-border">
           <button className="link-title cursor-pointer">Custom</button>
         </Link>
 

calc-frontend/src/pages/Integrals.tsx

@@ -13,7 +13,7 @@ function Integrals() {
       <h2 className="topic-header m-auto w-fit">The Integral of Common Functions</h2>
       <div className="topic-list">
 
-        <Link to="/integrals/custom" className="topic-box">
+        <Link to="/integrals/custom" className="topic-box custom-border">
           <button className="link-title cursor-pointer">Custom</button>
         </Link>