InputGroupAddOn tilføjet til felter under EditScooter og EditSparepart.

Team-Tukka · Jan 6, 2020 · 837c654 · 837c654
1 parent 556d4d5
commit 837c654
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 9 deletions.
diff --git a/src/components/editScooter/EditScooter.css b/src/components/editScooter/EditScooter.css
@@ -1 +1,17 @@
 @import url('../../assets/css/globalStyles.css');
+
+.inputGroupTextStyles {
+ margin-bottom: 0.5rem;
+ color: #1a1a1a !important;
+ background-color: #f8f8f8 !important;
+ border: 1px #f0f6ea solid !important;
+ border-radius: 0.4rem 0 0 0.4rem !important;
+ box-shadow: 1px 1px 2px #ececec;
+}
+
+.inputStylesEditScooter {
+ border: 1px #f0f6ea solid !important;
+ border-radius: 0 0.4rem 0.4rem 0 !important;
+ box-shadow: 1px 1px 2px #ececec;
+ margin-bottom: 0.5rem;
+}
diff --git a/src/components/editScooter/EditScooter.js b/src/components/editScooter/EditScooter.js
@@ -252,9 +252,17 @@ function EditScooter(props) {
  <Form className="form" onSubmit={handleSubmit}>
  <FormGroup>
  <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText
+ className="inputGroupTextStyles"
+ style={{ minWidth: '8.7rem' }}
+ >
+ Enhedsnummer
+ </InputGroupText>
+ </InputGroupAddon>
  <Input
  required
- className="inputStyles"
+ className="inputStylesEditScooter"
  type="text"
  name="itemNo"
  id="scooterItemNo"
@@ -293,9 +301,17 @@ function EditScooter(props) {
  </FormGroup>
  <FormGroup>
  <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText
+ className="inputGroupTextStyles"
+ style={{ minWidth: '8.7rem' }}
+ >
+ Enhedsnavn
+ </InputGroupText>
+ </InputGroupAddon>
  <Input
  required
- className="inputStyles"
+ className="inputStylesEditScooter"
  type="text"
  name="name"
  id="scooterName"
@@ -334,8 +350,16 @@ function EditScooter(props) {
  </FormGroup>
  <FormGroup>
  <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText
+ className="inputGroupTextStyles"
+ style={{ minWidth: '8.7rem' }}
+ >
+ Pris uden moms
+ </InputGroupText>
+ </InputGroupAddon>
  <Input
- className="inputStyles"
+ className="inputStylesEditScooter"
  type="number"
  step={0.01}
  name="price"
@@ -380,8 +404,16 @@ function EditScooter(props) {
  </FormGroup>
  <FormGroup>
  <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText
+ className="inputGroupTextStyles"
+ style={{ minWidth: '8.7rem' }}
+ >
+ SKU
+ </InputGroupText>
+ </InputGroupAddon>
  <Input
- className="inputStyles"
+ className="inputStylesEditScooter"
  type="text"
  name="sku"
  id="scooterSku"
@@ -419,8 +451,16 @@ function EditScooter(props) {
  </FormGroup>
  <FormGroup>
  <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText
+ className="inputGroupTextStyles"
+ style={{ minWidth: '8.7rem' }}
+ >
+ Tags
+ </InputGroupText>
+ </InputGroupAddon>
  <Input
- className="inputStyles"
+ className="inputStylesEditScooter"
  type="text"
  name="tags"
  id="scooterTags"
@@ -458,8 +498,16 @@ function EditScooter(props) {
  </FormGroup>
  <FormGroup>
  <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText
+ className="inputGroupTextStyles"
+ style={{ minWidth: '8.7rem' }}
+ >
+ Mærke
+ </InputGroupText>
+ </InputGroupAddon>
  <Input
- className="inputStyles"
+ className="inputStylesEditScooter"
  type="text"
  name="brand"
  id="scooterBrand"

diff --git a/src/components/editSparepart/EditSparepart.css b/src/components/editSparepart/EditSparepart.css
@@ -1 +1,17 @@
 @import url('../../assets/css/globalStyles.css');
+
+.inputGroupTextStyles {
+ margin-bottom: 0.5rem;
+ color: #1a1a1a !important;
+ background-color: #f8f8f8 !important;
+ border: 1px #f0f6ea solid !important;
+ border-radius: 0.4rem 0 0 0.4rem !important;
+ box-shadow: 1px 1px 2px #ececec;
+}
+
+.inputStylesEditSparepart {
+ border: 1px #f0f6ea solid !important;
+ border-radius: 0 0.4rem 0.4rem 0 !important;
+ box-shadow: 1px 1px 2px #ececec;
+ margin-bottom: 0.5rem;
+}
diff --git a/src/components/editSparepart/EditSparepart.js b/src/components/editSparepart/EditSparepart.js
@@ -159,9 +159,17 @@ function EditSparepart(props) {
  <Form className="form" onSubmit={handleSubmit}>
  <FormGroup>
  <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText
+ className="inputGroupTextStyles"
+ style={{ minWidth: '8.7rem' }}
+ >
+ Enhedsnummer
+ </InputGroupText>
+ </InputGroupAddon>
  <Input
  required
- className="inputStyles"
+ className="inputStylesEditSparepart"
  type="text"
  name="itemNo"
  id="sparepartItemNo"
@@ -200,9 +208,17 @@ function EditSparepart(props) {
  </FormGroup>
  <FormGroup>
  <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText
+ className="inputGroupTextStyles"
+ style={{ minWidth: '8.7rem' }}
+ >
+ Enhedsnavn
+ </InputGroupText>
+ </InputGroupAddon>
  <Input
  required
- className="inputStyles"
+ className="inputStylesEditSparepart"
  type="text"
  name="name"
  id="sparepartName"
@@ -241,8 +257,16 @@ function EditSparepart(props) {
  </FormGroup>
  <FormGroup>
  <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText
+ className="inputGroupTextStyles"
+ style={{ minWidth: '8.7rem' }}
+ >
+ Pris uden moms
+ </InputGroupText>
+ </InputGroupAddon>
  <Input
- className="inputStyles"
+ className="inputStylesEditSparepart"
  type="number"
  step={0.01}
  name="price"