Merge pull request #2 from maxchistt/sizefix

Sizefix

Author: maxchistt

src/App.js

@@ -209,7 +209,7 @@ function App() {
               {logged &&
                 <button className="btn btn-light m-1" onClick={loadDataFromServer}>
                   <i className="bi bi-arrow-clockwise px-1"></i>
-                  <span className='d-xl-inline d-none'>Update data</span>
+                  <span className='d-xl-inline d-none'>Update</span>
                 </button>
               }
               <button className="btn btn-light m-1" onClick={() => setOpenLogin(true)}>

src/Cards/AddCard.js

@@ -42,28 +42,33 @@ function AddCard({ onCreate, onDeleteAll }) {
     }
   }
 
+  function onEnter(e) {
+    e.preventDefault()
+    submitHandler()
+  }
+
   return (
     <div className="container">
       <div className="row my-2 text-center">
 
-        <div className="col-lg-9 col-md-10 col-12 p-1">
+        <div className="col-xl-10 col-lg-10 col-md-10 col-12 p-1">
           <TextareaAutosize type="text" className="form-control" placeholder="Card name" id="Text"
             {...input.bind}
             style={{ resize: "none" }}
             minRows={1}
             maxRows={3}
             maxLength="100"
+            onKeyPress={e => e.key === 'Enter' && onEnter(e)}
           />
         </div>
 
-        <div className="col-lg-1 col-md-1 col-sm-3 col-4 p-1">
+        <div className="col-xl-1 col-lg-1 col-md-1 col-sm-3 col-4 p-1">
           <Palette setColor={setColor} className={`btn btn-outline-secondary palitra-btn ${blackOnHover() ? "palitra-blackOnHover" : "palitra-lightOnHover"}`} style={{ width: "100%", background: color }}></Palette>
         </div>
 
-        <div className="col-lg-2 col-md-1 col p-1">
+        <div className="col-xl-1 col-lg-1 col-md-1 col p-1">
           <button disabled={!input.value().trim()} className="btn btn-success btn-block" onClick={submitHandler}>
             <i className="bi bi-clipboard-plus"></i>
-            <span className='d-lg-inline d-none'> Add card</span>
           </button>
         </div>
 

src/Cards/CardList.js

@@ -12,10 +12,10 @@ function calcWidth() {
     const xlarge = 1200
     const winWidth = window.innerWidth
 
-    if (winWidth >= xlarge) return '20%'
-    else if (winWidth >= large) return '25%'
-    else if (winWidth >= middle) return '33.33%'
-    else if (winWidth >= small) return '50%'
+    if (winWidth >= xlarge) return '25%'
+    else if (winWidth >= large) return '33.33%'
+    else if (winWidth >= middle) return '50%'
+    else if (winWidth >= small) return '100%'
     else return '100%'
 }