diff options
Diffstat (limited to 'src/components/Form')
-rw-r--r-- | src/components/Form/AddNewItemForm.js | 123 | ||||
-rw-r--r-- | src/components/Form/Form.scss | 133 | ||||
-rw-r--r-- | src/components/Form/RegisterItemForm.js | 38 |
3 files changed, 145 insertions, 149 deletions
diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js index 3fc4c46..81cbd3f 100644 --- a/src/components/Form/AddNewItemForm.js +++ b/src/components/Form/AddNewItemForm.js @@ -63,7 +63,7 @@ const AddNewItemForm = (props) => { return ( <div className={"formContainer"}> - <form className={"addNewItemForm"} onSubmit={ + <form className={"threePaneForm"} onSubmit={ (event) => { event.preventDefault(); const newInvoiceItem = { @@ -80,10 +80,11 @@ const AddNewItemForm = (props) => { resetAllValues(); } }> - <div className={"textInputs"}> + <div className={"widePane"}> <label> Item/Service: <select + className={"selectInputBox"} value={itemNameValue} onChange={ (event) => { @@ -102,62 +103,106 @@ const AddNewItemForm = (props) => { </label> <label> - Description: <input type="text" step="0.1" value={itemDescValue} onChange={ - (event) => { - setItemDescValue(event.target.value); - } - } /> + Description: + <input + className={"wideInputBox"} + type="text" + step="0.1" + value={itemDescValue} + onChange={ + (event) => { + setItemDescValue(event.target.value); + } + } + /> </label> </div> - <div className={"numericInputs"}> + <div className={"widePane"}> <label> - Quantity: <input type="number" min="1" value={itemQtyValue} onInput={ - (event) => { - const value = event.target.value; - setItemQtyValue(value); - } - } required /> + Quantity: + <input + className={"smallInputBox"} + type="number" + min="1" + value={itemQtyValue} + onInput={ + (event) => { + const value = event.target.value; + setItemQtyValue(value); + } + } + required /> </label> <label> - Price: <input type="number" min="1.00" step="0.001" value={itemPriceValue} onChange={ - (event) => { - const value = event.target.value; - setItemPriceValue(value); - } - } required /> + Price: + <input + className={"smallInputBox"} + type="number" + min="1.00" + step="0.001" + value={itemPriceValue} + onChange={ + (event) => { + const value = event.target.value; + setItemPriceValue(value); + } + } + required /> </label> <label> - Discount: <input type="number" min="0" step="0.001" value={itemDiscountValue} onChange={ - (event) => { - const value = event.target.value; - setItemDiscountValue(value); - } - } /> + Discount: + <input + className={"smallInputBox"} + type="number" + min="0" + step="0.001" + value={itemDiscountValue} + onChange={ + (event) => { + const value = event.target.value; + setItemDiscountValue(value); + } + } + /> </label> <label> - HSN: <input type="number" min="0" value={itemHSNValue} onChange={ - (event) => { - const value = event.target.value; - setItemHSNValue(value); - } - } required /> + HSN: + <input + className={"smallInputBox"} + type="number" + min="0" + value={itemHSNValue} + onChange={ + (event) => { + const value = event.target.value; + setItemHSNValue(value); + } + } + required /> </label> <label> - GST: <input type="number" min="0" value={itemGSTValue} onChange={ - (event) => { - const value = event.target.value; - setItemGSTValue(value); - } - } required /> + GST: + <input + className={"smallInputBox"} + type="number" + min="0" + value={itemGSTValue} + onChange={ + (event) => { + const value = event.target.value; + setItemGSTValue(value); + } + } + required /> </label> </div> - <div className={"menuButtons"}> + <div className={"smallPane"}> <input type="button" value="Register New Item" onClick={() => props.registerFormVisibility(true)} diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss index 601b8e9..eed0189 100644 --- a/src/components/Form/Form.scss +++ b/src/components/Form/Form.scss @@ -8,8 +8,6 @@ @import "../../styles/theme"; -$inputBorders: 1px solid $altBorderColor; - /* hide arrows in numericInputs */ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, @@ -17,135 +15,70 @@ input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } - /* Firefox */ input[type=number] { -moz-appearance: textfield; } +@mixin formPane { + padding: 1.5rem; + box-sizing: border-box; + border: 1px solid pink; -.formContainer { - /*border: 1px solid pink;*/ - /*padding: 2rem;*/ - - height: 50vh; - border-radius: 1rem; - padding: 1.5rem 0; -} - -.addNewItemForm .textInputs, -.addNewItemForm .numericInputs -label { - font-size: 1.5rem; + display: flex; + flex-direction: column; + justify-content: space-around; } -.addNewItemForm { +@mixin formWideLabel { display: flex; - flex-direction: row; justify-content: space-between; - height: 100%; -} - -.addNewItemForm .textInputs, -.addNewItemForm .numericInputs { - border: $inputBorders; - width: 30%; - justify-content: space-around; -} - -.addNewItemForm .numericInputs input { - width: 5.5rem; + border-bottom: 1px dotted $labelUnderlineColor; + padding: 0.8rem 0; + font-size: 1.5rem; } -.addNewItemForm .menuButtons { - border: $inputBorders; - width: 15%; - justify-content: space-around; +input { + box-sizing: border-box; } -.addNewItemForm .menuButtons * { +.formContainer { + padding: 1rem 0; width: 100%; } -.addNewItemForm div { - display: flex; - flex-direction: column; - /*border-radius: 1rem;*/ - padding: 1.5rem; - - overflow: scroll; -} - -/* hide scrollbars */ -.addNewItemForm div::-webkit-scrollbar { - display: none; /* Chrome/Safari/Opera */ -} -.addNewItemForm div { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ -} - -.addNewItemForm label { +.threePaneForm { display: flex; + flex-direction: row; + flex-wrap: nowrap; justify-content: space-between; - padding: 0.8rem 0; - border-bottom: 1px dotted $labelUnderlineColor; -} - -.RegisterItemFormContainer { - /*display: none;*/ - position: fixed; - width: 95%; - height: 70vh; - - left: 0;right: 0; - margin: auto; - top: 15vh; - - background-color: $altBG; + height: 22rem; + width: 100%; } -.RegisterItemForm .textInputs, -.RegisterItemForm .numericInputs { - width: 40%; +.threePaneForm div { + @include formPane(); } -.RegisterItemForm { - width: 95%; - height: 60vh; - margin: 1rem auto; - justify-content: space-around; +.threePaneForm .widePane { + width: 27rem; } -.RegisterItemFormContainer .menu { - position: absolute; - right: 1rem; bottom: 0.25rem; +.threePaneForm .smallPane { + width: 15rem; } -.RegisterItemFormContainer input[type=submit], -.RegisterItemFormContainer input[type=button] { - margin: 1rem; +.threePaneForm label { + @include formWideLabel(); } -.MetaInfoForm { - width: 60%; +.wideInputBox, .selectInputBox { + width: 12rem; } -@media only screen and (max-device-width: 480px) { - .formContainer { - padding: 0.5rem; - height: auto; - } - .addNewItemForm { - flex-direction: column; - } - .addNewItemForm .textInputs, - .addNewItemForm .numericInputs, - .addNewItemForm .menuButtons { - width: 90%; - padding: 1rem; - margin: 1rem auto; - } +.smallInputBox { + width: 6.5rem; } + diff --git a/src/components/Form/RegisterItemForm.js b/src/components/Form/RegisterItemForm.js index ca4d991..fca0916 100644 --- a/src/components/Form/RegisterItemForm.js +++ b/src/components/Form/RegisterItemForm.js @@ -11,24 +11,41 @@ // TODO: Implement override protection -import React, { useState } from "react"; -import axios from "axios"; +import React/*, { useState }*/ from "react"; +// import axios from "axios"; import "./Form.scss"; -const RegisterItemForm = (props) => { - const [newItemNameValue, setNewItemNameValue] = useState(""); - const [newItemDescValue, setNewItemDescValue] = useState(""); - const [newItemPriceValue, setNewItemPriceValue] = useState(0.00); - const [newItemHSNValue, setNewItemHSNValue] = useState(""); - const [newItemGSTValue, setNewItemGSTValue] = useState(props.defGSTValue); +const RegisterItemForm = (/*props*/) => { +// const [newItemNameValue, setNewItemNameValue] = useState(""); +// const [newItemDescValue, setNewItemDescValue] = useState(""); +// const [newItemPriceValue, setNewItemPriceValue] = useState(0.00); +// const [newItemHSNValue, setNewItemHSNValue] = useState(""); +// const [newItemGSTValue, setNewItemGSTValue] = useState(props.defGSTValue); // const [newItemBrandValue, setNewItemBrandValue] = useState(""); // const [newItemTypeValue, setNewItemTypeValue] = useState(""); return ( - <div className={"formContainer RegisterItemFormContainer"}> - <form onSubmit={ + <div className={"FloatingMenuBG"}> + <div className={"FloatingMenu"}> + <div className={"formContainer"}> + <form className={"twoPaneForm"}> + <div className={""}> + </div> + + <div className={""}> + </div> + </form> + </div> + </div> + </div> + ); + + /* + return ( + <div className={"formContainer"}> + <form className={"threePaneForm"} onSubmit={ (event) => { event.preventDefault(); @@ -120,6 +137,7 @@ const RegisterItemForm = (props) => { </form> </div> ); + */ } export default RegisterItemForm; |