admin page files

src/components/adminPhotogalary/adminPhotogalary.scss

@@ -1,11 +1,17 @@
+@import "../../styles/variables";
+
 .photogalary-form {
 	width: 100%;
-	max-width: 1200px;
-	height: 100%;
+	min-height: 100vh;
 	margin: auto;
 
+	background: -webkit-linear-gradient(top, #fff, $color-mint); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
+	background: -moz-linear-gradient(top, #fff, $color-mint); /* Firefox 3.6-15 */
+	background: -o-linear-gradient(top,  #fff, $color-mint); /* Opera 11.1-12 */
+	background: linear-gradient(to bottom,  #fff, $color-mint);
+
 	&__content {
-        width: 90%;
+		max-width: 1000px;
         height: 100%;
 		position: relative;
 		// top: 40%;
@@ -13,9 +19,9 @@
 		// transform: translate(-50%, -50%);
 		margin: auto;
 		padding: 2rem;
-		border-left: 1px solid #5acec2;
-        border-right: 1px solid #5acec2;
-        border-bottom: 1px solid #5acec2;
+		border-left: 1px solid $color-mint;
+        border-right: 1px solid $color-mint;
+        border-bottom: 1px solid $color-mint;
 		background-color: #eee;
 		padding-bottom: 3%;
 	}
@@ -35,7 +41,7 @@
         // font-size: 2rem;
         // margin-bottom: 1rem;
 		// color: #5acec2;
-		color: #5acec2;
+		color: $color-mint;
 		font-size: 3rem;
 		letter-spacing: 0.2;
 		font-weight: 600;
@@ -78,19 +84,19 @@
 	&__picture {
 		width: 100%;
 		height: 30%;
-		border: 1px solid #5acec2;
+		border: 1px solid $color-mint;
 		margin-bottom: 2rem;
     }
 
     &__picture-btn {
 		width: 20%;
-		border: 1px solid #5acec2;
+		border: 1px solid $color-mint;
 		border-radius: 3px;
         display: block;
         margin-bottom: 3%;
 
 		color: #fff;
-		background-color: #5acec2;
+		background-color: $color-mint;
 		border: none;
 		cursor: pointer;
 		font-weight: 500;
@@ -112,8 +118,8 @@
 		}
 
 		&:disabled {
-			color: #5acec2;
-			border: 1px solid #5acec2;
+			color: $color-mint;
+			border: 1px solid $color-mint;
 			background-color: #eee;
         }
         
@@ -153,6 +159,6 @@
 			background-color: #eee;
         }
         
-    }
+	}
 
 }

src/components/adminPhotogalary/adminPhotogalaryReduxForm.js

@@ -18,15 +18,29 @@ class PhotogalaryReduxForm extends Component {
     };
 
     onChangeHandler = e => {
-        const { name, value, id } = e.target;
-
+        const { name, value } = e.target;
+        // console.log('eventInput',e)
         this.setState(prevState => {
+            // console.log('prevStateInput', prevState)
+            return {
+                ...prevState,
+                addPhotogalaryInitialValue: {
+                    ...prevState.addPhotogalaryInitialValue,
+                    [ name ]: value
+                }
+            };
+        });
+    };
 
+    onChangePicturesHandler = e => {
+        const { value, id } = e.target;
+        // console.log('eventPicture',e)
+        this.setState(prevState => {
+            // console.log('prevStatePicture', prevState)
             return {
                 ...prevState,
                 addPhotogalaryInitialValue: {
                     ...prevState.addPhotogalaryInitialValue,
-                    [name]: value,
                     pictures: prevState.addPhotogalaryInitialValue.pictures.map(el => (el.id === id ? { ...el, value } : el))
                 }
             };
@@ -42,6 +56,9 @@ class PhotogalaryReduxForm extends Component {
                     id: Math.random()
                         .toString()
                         .substr(2, 100),
+                    name: `picture ${Math.random()
+                        .toString()
+                        .substr(2, 100)}`,
                     value: ""
                 })
             }
@@ -57,13 +74,35 @@ class PhotogalaryReduxForm extends Component {
         return (
             <form className="event-form__event-form__main" onSubmit={handleSubmit(this.submit)}>
 
-            <Field name="eventType" label="Event Type" required component={customSelect} onChange = {this.onChangeHandler} >
+            <Field 
+                name="eventType" 
+                label="Event Type" 
+                required 
+                component={customSelect} 
+                onChange = {this.onChangeHandler} 
+            >
                 {eventTypes.map(elem => <option key={elem.id} value={elem.optionName}>{elem.optionName}</option>)}
             </Field>
-            <Field name="eventTytle" label="Event Title" required component={customInput}  onChange = {this.onChangeHandler} />
+           
+            <Field 
+                name="eventTytle" 
+                label="Event Title" 
+                required 
+                component={customInput}  
+                onChange = {this.onChangeHandler} 
+            />
 
             {addPhotogalaryInitialValue.pictures.map((el, i) => (
-                <Field key={`${el.id}/${i}`}  name="pictures" label="Picture" onChange = {this.onChangeHandler} className="input-box__wide" placeholder='Enter picture url' component={customInput} />
+                <Field 
+                    key={`${el.id}/${i}`}  
+                    name={el.name}
+                    id={el.id} 
+                    label="Picture" 
+                    onChange = {this.onChangePicturesHandler} 
+                    className="input-box -wide" 
+                    placeholder='Enter picture url' 
+                    component={customInput} 
+                />
             ))}
             <button type="button" className="photogalary-form__picture-btn" onClick={this.addPicture} >Add Picture</button>
             <div className="event-form__control-box">

src/components/customFields/customInput/customInput.scss

@@ -37,45 +37,9 @@
 
 	}
 
-}
-
-.input-box__wide {
-	display: flex;
-    flex-direction: column;
-	width: 100%;
-
-	font-size: 1.3rem;
-	font-weight: 600;
-
-	&__input {
-		font-family: inherit;
-		color: inherit;
-		font-size: 1.5rem;
-		padding: 0.5rem 1rem;
-		border-radius: 2px;
-		background-color: rgba(255, 255, 255, 0.5);
-		border: none;
-		border-bottom: 3px solid #eee;
-		// width: 40%;
-		display: inline-block;
-        transition: all 0.3s;
-        margin-bottom: 1rem;
-
-		&:focus {
-			outline: none;
-			box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
-			border-bottom: 3px solid #5acec2;
-		}
-
-		&--fail {
-			border-bottom: 3px solid #9e4560;
-		}
-
-		&::placeholder {
-			font-size: 1.3rem;
-			color:  #cecece;
-		}
-
+	&.-wide{
+		width: 100%;
+		margin-right: 0;
 	}
 
 }

src/components/eventForm/eventForm.scss

@@ -1,19 +1,21 @@
+@import "../../styles/variables";
+
 .event-form {
 	width: 100%;
 	height: 100%;
 	margin: auto;
-	background: -webkit-linear-gradient(top, #fff, #5acec2); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
-	background: -moz-linear-gradient(top, #fff, #5acec2); /* Firefox 3.6-15 */
-	background: -o-linear-gradient(top,  #fff, #5acec2); /* Opera 11.1-12 */
-	background: linear-gradient(to bottom,  #fff, #5acec2);
+	background: -webkit-linear-gradient(top, #fff, $color-mint); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
+	background: -moz-linear-gradient(top, #fff, $color-mint); /* Firefox 3.6-15 */
+	background: -o-linear-gradient(top,  #fff, $color-mint); /* Opera 11.1-12 */
+	background: linear-gradient(to bottom,  #fff, $color-mint);
 
 	&__content {
 		max-width: 1000px;
 		position: relative;
 		margin: auto;
 		padding: 2rem;
-		border-left: 1px solid #5acec2;
-		border-right: 1px solid #5acec2;
+		border-left: 1px solid $color-mint;
+		border-right: 1px solid $color-mint;
 		background-color: #eee;
 		padding-bottom: 3%;
 	}
@@ -30,7 +32,7 @@
     }
     
     &__form-title{
-		color: #5acec2;
+		color: $color-mint;
 		font-size: 3rem;
 		letter-spacing: 0.2;
 		font-weight: 600;
@@ -66,18 +68,18 @@
 		height: 400px;
 
 		overflow: hidden;
-		border: 1px solid #5acec2;
+		border: 1px solid $color-mint;
 		margin-bottom: 2rem;
 	}
 
 	&__submit-btn {
 		width: 100%;
-		border: 1px solid #5acec2;
+		border: 1px solid $color-mint;
 		border-radius: 3px;
 		display: block;
 
 		color: #fff;
-		background-color: #5acec2;
+		background-color: $color-mint;
 		border: none;
 		cursor: pointer;
 		font-weight: 600;
@@ -99,8 +101,8 @@
 		}
 
 		&:disabled {
-			color: #5acec2;
-			border: 1px solid #5acec2;
+			color: $color-mint;
+			border: 1px solid $color-mint;
 			background-color: #eee;
 		}
 	}

src/components/eventForm/eventReduxForm.js

@@ -13,7 +13,7 @@ const EventReduxForm = ({
 }) => {
 
     const submit = value => {
-        // console.log('submit values', value)
+        console.log('submit values', value)
         postNewEvent(value)
     };
 
@@ -57,8 +57,8 @@ const EventReduxForm = ({
             {console.log('eventFormInitialValue', eventFormInitialValue)}
 
             <img className="event-form__picture" alt="Event Bunner" src={eventFormInitialValue.mainBannerPicture} />
-            <Field name="mainBannerPicture" className="input-box__wide" label="Main Banner Picture" component={customInput} />
-            <Field name="title" label="Event Title" className="input-box__wide" required component={customInput} />
+            <Field name="mainBannerPicture" className="input-box -wide"  label="Main Banner Picture" component={customInput} />
+            <Field name="title" label="Event Title" className="input-box -wide"  required component={customInput} />
             <Field name="eventType" label="Event Type" required component={customSelect} >
                 {eventTypes.map(elem => <option key={elem.id} value={elem.optionName}>{elem.optionName}</option>)}
             </Field>
@@ -66,8 +66,8 @@ const EventReduxForm = ({
             <Field name="country" label="Country" required component={customInput} />
             <Field name="city" label="City" required component={customInput} />
             <Field name="overview" label="Overview" rows="10" placeholder='Enter event overview' component={customTextarea} />
-            <Field name="contentPicture" label="Content Picture" className="input-box__wide" placeholder='Enter picture url' component={customInput} />
-            <Field name="contentVideo" label="Content Video" className="input-box__wide" placeholder='Enter video url' component={customInput} />
+            <Field name="contentPicture" label="Content Picture" className="input-box -wide" placeholder='Enter picture url' component={customInput} />
+            <Field name="contentVideo" label="Content Video" className="input-box -wide" placeholder='Enter video url' component={customInput} />
             <Field name="marathoneDistancePrice" label="Marathone Distance Price" component={customInput} />
             <Field name="halfmarathoneDistancePrice" label="Halfmarathone Distance Price" component={customInput} />
             <Field name="ageLimit" label="Age Limit" component={customTextarea} />
@@ -77,10 +77,10 @@ const EventReduxForm = ({
             <Field name="equipmentStorage" label="Equipment Storage" component={customTextarea} />
             <Field name="parking" label="Parking" component={customTextarea} />
             <Field name="refreshments" label="Refreshments" component={customTextarea} />
-            <Field name="map" label="Map" className="input-box__wide" placeholder='Enter picture url' component={customInput} />
+            <Field name="map" label="Map" className="input-box -wide" placeholder='Enter picture url' component={customInput} />
 
             <div className="event-form__control-box">
-                <button className="event-form__submit-btn" >Add Event</button>
+                <button className="event-form__submit-btn">Add Event</button>
             </div>
         </form>
     );

src/state/photogalaryFormData.js

@@ -1,40 +1,41 @@
-export const form = {
-    selects: {
-        eventType: {
-        id: 1,
-        type: "select",
-        name: "eventType",
-        label: "Choose Event Type",
-        options:['Select Event Type', 'Triathlon', 'Marathon','Cycling'],
-        value: ""
-        },
-        eventTitle: {
-        id: 2,
-        type: "select",
-        name: "eventTitle",
-        label: "Choose Event Title",
-        options:[],
-        value: ""
-        }
-    },
-    pictures: [
-        {
-            id: 3,
-            type: "input",
-            name: "pictures",
-            label: "Picture",
-            placeholder: 'Enter picture url',
-            value: ""
-        }
-    ]
-}
+// export const form = {
+//     selects: {
+//         eventType: {
+//         id: 1,
+//         type: "select",
+//         name: "eventType",
+//         label: "Choose Event Type",
+//         options:['Select Event Type', 'Triathlon', 'Marathon','Cycling'],
+//         value: ""
+//         },
+//         eventTitle: {
+//         id: 2,
+//         type: "select",
+//         name: "eventTitle",
+//         label: "Choose Event Title",
+//         options:[],
+//         value: ""
+//         }
+//     },
+//     pictures: [
+//         {
+//             id: 3,
+//             type: "input",
+//             name: "pictures",
+//             label: "Picture",
+//             placeholder: 'Enter picture url',
+//             value: ""
+//         }
+//     ]
+// }
 
 export const addPhotogalaryInitialValue = {
     eventType: "",
     eventTytle: "",
     pictures: [
         {
-            id: 1,
+            id: '1',
+            name: 'picture',
             value: ""
         }
     ]

src/styles/base.scss

@@ -111,4 +111,14 @@ button {
 	cursor: pointer;
     outline: none;
     box-shadow: none;
+}
+
+.button-position-bottom{
+	max-width: 1000px;
+	position: fixed;
+    bottom: 5px;
+    left: 50%;
+    transform: translate(0% -50%);
+	transform: translateX(-50%);
+	z-index: 1;
 }