appointment part

src/components/Calendar.js

@@ -53,7 +53,7 @@ export class Calendar extends React.Component {
                 </div>
                 <div className = "weekdays">
                     {moment.weekdaysShort(true).map(el => (
-                        <p style={{ width:"40px",height:"40px"}} key={el}>{el}</p>
+                        <p  key={el}>{el}</p>
                     ))}
                 </div>
                 <div  className = "days">

src/components/appointment/Appointment.js

@@ -1,172 +1,163 @@
-import React from 'react';
-import {connect} from "react-redux";
+import React from "react";
+import { connect } from "react-redux";
 import moment from "moment";
 import { CustomSelect } from "./select";
 
-
 import {
-    setAppointmentSpec,
-    setAppointmentShedule,
-    setAppointmentDoctor,
-    clearAppointment,
-    setAppointmentTime,
-    setAppointmentComment,
-    postOrders
-
-} from "../../actions/appointment";
-
+  setAppointmentSpec,
+  setAppointmentShedule,
+  setAppointmentDoctor,
+  clearAppointment,
+  setAppointmentTime,
+  setAppointmentComment,
+  postOrders
+} from "../../actions/actions";
 
 import Calendar from "../Calendar";
 
 export class Appoint extends React.Component {
-    state = {
-        pickedDate:null
-    };
-
-    componentDidMount() {
-        this.props.setAppointmentDoctor(this.props.match.params.doctorId)
-    }
-
-    componentWillUnmount() {
-        this.props.clearAppointment()
+  state = {
+    pickedDate: null
+  };
+
+  componentDidMount() {
+    this.props.setAppointmentDoctor(this.props.match.params.doctorId);
+  }
+
+  componentWillUnmount() {
+    this.props.clearAppointment();
+  }
+
+  setSpec = e => {
+    this.props.setAppointmentSpec(e);
+  };
+
+  setShedule = e => {
+    this.setState({ pickedDate: e.target.id });
+    this.props.setAppointmentShedule(e.target.id);
+  };
+
+  setShedule = e => {
+    this.setState({ pickedDate: e.target.id });
+    this.props.setAppointmentShedule(e.target.id);
+  };
+
+  setTime = e => {
+    this.props.setAppointmentTime(e.target.value);
+  };
+
+  setComment = e => {
+    this.props.setAppointmentComment(e.target.value);
+  };
+
+  postOrder = () => {
+    this.props.postOrders(this.props.app.appointment);
+  };
+
+  render() {
+    const { doctors, appointment, timeArray, services } = this.props.app;
+    const { match } = this.props;
+    const doctor = doctors.find(el => el._id === match.params.doctorId);
+    let spec;
+    if (appointment.spec) {
+      spec = services.find(el => el._id === appointment.spec);
     }
-
-    setSpec = (e) => {
-        this.props.setAppointmentSpec({data:e, services:this.props.services})
-    };
-
-    setShedule = (e) => {
-        this.setState({pickedDate:e.target.id});
-        this.props.setAppointmentShedule({data:e.target.id, services:this.props.services, doctors:this.props.doctors})
-    };
-
-    setTime = (e) => {
-        this.props.setAppointmentTime(e.target.value)
-    };
-
-    setComment = (e) => {
-        this.props.setAppointmentComment(e.target.value)
-    };
-
-    postOrder = () => {
-        this.props.postOrders(this.props.appointment.appointment)
-    };
-
-
-    render() {
-        const {appointment, timeArray, doctors,services,match} = this.props;
-        const doctor = doctors.find(el => el._id === match.params.doctorId);
-        let spec;
-        if (appointment.specId){
-            spec = services.find(el => el._id === appointment.specId)
-        }
-        return (
-            <>
-                <div className="main">
-                    {doctor &&
-                    <div className = "info-wrap">
-                        <div className="card">
-                            <div className="card-item">
-                                <img src={`.${doctor.photo}`} alt={doctor.name}/>
-                            </div>
-                            <div className="card-item desc">
-                                <h3>{doctor.name}</h3>
-                                <p className = "highlights">{doctor.profession}</p>
-
-                                <CustomSelect label="Выбор услуги" options = { doctor.speciality} clickOptionEvent = {this.setSpec} />
-
-                                {appointment.specId &&
-                                <div>
-                                    <p>{spec.name}</p>
-                                    <p>Длительность: {spec.duration} ч.</p>
-                                    <p>Цена от {spec.price} грн.</p>
-                                    {this.state.pickedDate &&
-                                        <p>{moment(this.state.pickedDate).format('DD-MMMM-YYYY')}</p>
-                                    }
-                                    {appointment.time &&
-                                        <p>{appointment.time}</p>
-                                    }
-                                </div>
-                                }
-
-                                {appointment.specId &&
-                                    <Calendar
-                                        doctor={doctor}
-                                        action={this.setShedule}
-                                    />
-                                }
-
-                                {appointment.sheduleId &&
-                                   <div className = "appointment-time" >
-                                        <div className="btn-box"  >
-                                            {
-                                                timeArray.map ( (el, index) => (
-                                                    <label  key={Object.keys(el)} >
-                                                        <input
-                                                            type ="radio"
-                                                            name = "choise-time"
-                                                            id = {index} onChange={this.setTime}
-                                                            value =  {Object.keys(el)}
-                                                        />
-
-                                                        {Object.keys(el)}
-                                                    </label>
-                                                ))
-                                            }
-                                        </div>
-                                   </div>
-
-                                }
-
-                                {appointment.time &&
-                                <div style={{display:"flex",flexDirection:"column"}}>
+    return (
+      <>
+        <div className="main">
+          {doctor && (
+            <div className="info-wrap">
+              <div className="card">
+                <div className="card-item present">
+                  <div className="photo">
+                    <img src={`.${doctor.photo}`} alt={doctor.name} />
+                  </div>
+                  <div className="order">
+                      <h3>{doctor.name}</h3>
+                  <p className="highlights">{doctor.profession}</p>
+
+                  <CustomSelect
+                    label="Выбор услуги"
+                    options={doctor.speciality}
+                    clickOptionEvent={this.setSpec}
+                  />
+                  </div>
+                </div>
+                <div className="card-item desc">
+                    <div className="date-container">
+                        {appointment.spec && (
+                            <Calendar doctor={doctor} action={this.setShedule} />
+                        )}
+                        {appointment.shedule && (
+                        <div className="appointment-time">
+                            <div className="btn-box">
+                            {timeArray.map((el, index) => (
+                                <div className="radio-btn" key={Object.keys(el)}>
                                     <input
-                                        className = "appointment comment"
-                                        type='text'
-                                        placeholder='Добавить комментарий'
-                                        onChange={this.setComment}/>
-                                    <button className = "btn link" onClick={this.postOrder}>Подтвердите запись</button>
+                                        type="radio"
+                                        className="radio"
+                                        name="choise-time"
+                                        id={index}
+                                        onChange={this.setTime}
+                                        value={Object.keys(el)}
+                                    />
+                                    <label htmlFor={index}>{Object.keys(el)}</label>
                                 </div>
-                                }
+                            ))}
                             </div>
+                            {appointment.time && (
+                            <textarea
+                                className="appointment comment"
+                                rows="2"
+                                placeholder="Добавить комментарий "
+                                onChange={this.setComment}
+                            />
+                        )}
                         </div>
+                        )}
                     </div>
-                    }
+                        
+                        {appointment.spec && (
+                            <div className="order-information">
+                                <p>{spec.name}</p>
+                                <p>Длительность: {spec.duration} ч.</p>
+                                <p>Цена от {spec.price} грн.</p>
+                                {this.state.pickedDate && (
+                                <p> {moment(this.state.pickedDate).format("DD-MMMM-YYYY")} </p>
+                                )}
+                                {appointment.time && <p>{appointment.time}</p>}
+                                {appointment.time && (
+                                    <button className="btn link" onClick={this.postOrder}>Подтвердите запись </button>
+                                )}
+                            </div>
+                         )}
                 </div>
-
-            </>
-        );
-    }
+              </div>
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }
 }
 
 const mapStateToProps = state => {
-    return {
-        appointment:state.appointment.appointment,
-        timeArray:state.appointment.timeArray,
-        doctors:state.app.doctors,
-        services:state.app.services
-    }
+  return {
+    app: state.app
+  };
 };
 
 const mapDispatchToProps = {
-    setAppointmentSpec,
-    setAppointmentShedule,
-    setAppointmentDoctor,
-    clearAppointment,
-    setAppointmentTime,
-    setAppointmentComment,
-    postOrders,
+  setAppointmentSpec,
+  setAppointmentShedule,
+  setAppointmentDoctor,
+  clearAppointment,
+  setAppointmentTime,
+  setAppointmentComment,
+  postOrders
 };
 
-export default connect (mapStateToProps,mapDispatchToProps)(Appoint)
-
-
-
-// <select className = "appointment "  onChange={this.setSpec} defaultValue='Выбор услуги'>
-//      <option disabled >Выбор услуги</option>
-//         {
-//             doctor.speciality.map(el=> (
-//                 <option key={el._id}>{el.name}</option>
-//              ))
-//         }
-// </select>
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Appoint);

src/components/appointment/select.js

@@ -78,15 +78,16 @@ export const CustomSelect = ({ label, options , emptyLine = false, searchInput =
 					{label}
 				</label>
 			)}
-			<div className="select__value-box " onClick={() => toggleShow(true)}>
+			<div className="select__value-box icon-angle-down" onClick={() => toggleShow(true)}>
 				{searchInput ? null : <span>{value} &nbsp;</span>}
 				<input
 					value={inputValue}
 					autoComplete="off"
 					type={searchInput ? "text" : "hidden"}
+					readOnly="readonly"
 					onChange={chahgeValueEvent}
 					id="select"
-					className="select__input icon-angle-down"
+					className="select__input"
 				/>
 				<span className="icon-angle-down"></span>
 			</div>

src/style/all.scss

@@ -87,9 +87,11 @@ aside {
 		left: 40%;
 		@media (max-width: 1024px) {
 			left: 35%;
+			width: 20%;
 		}
 		@media (max-width: 768px) {
 			left: 30%;
+			width: 15%;
 		}
 		@media (max-width: 768px) {
 			left: 25%;
@@ -208,10 +210,11 @@ aside {
 	h1{
 		text-transform: uppercase;
 		background-color: $opacity-color;
-		width: 100%;
-		font-size: 2.6em;
+		width: 85%;
+		font-size: 2.4em;
 		padding: 35px;
-		line-height: 50px;
+		line-height: 1em;
+		letter-spacing: 0.05em;
 		font-weight: bold;
 		margin: 30px auto 0;
 		text-align: center;
@@ -234,7 +237,7 @@ aside {
 .btn {
 	display: block;
 	min-height: 50px;
-	width: 70%;
+	width: 60%;
 	margin: 20px auto;
 	color: $main-color;
 	text-transform: uppercase;
@@ -493,46 +496,170 @@ h2 {
 .card {
 	display: flex;
 	justify-content: space-around;
-	flex-direction: row;
+	flex-direction: column;
 	flex-wrap: wrap;
 	color: $header-color;
 	h3 {
 		margin: 0;
-		font-size: 1.8em;
-		line-height: 2em;
+		font-size: 1.4em;
+		line-height: 1.6em;
 		text-align:  center;
 		@media (max-width: 768px) {
 			text-align: center;
 		}
-	}
-	.desc {
-		width: 50%;
-		@media (max-width: 1024px) {
-			width: 60%;
-		}
-		@media (max-width: 768px) {
-			width: 100%;
+		@media (max-width: 320px) {
+			font-size: 1.2em;
 		}
 	}
 	.card-item {
 		margin: 0 20px 10px; 
+		@media (max-width: 414px) {
+			margin: 0;
+		}
+		p {
+			margin: 5px 0;
+			text-align: left;
+		}
+		img {
+			border-radius: 3px;
+			box-shadow: 1px 1px 15px 1px $hover-color;
+		}	
+	}
+}
+		
+.present {
+	flex-basis: 20%;
+	display: flex;
+	justify-content: space-evenly;
+	transition: all 0.5s ease;
+	@media (max-width: 769px) {
+		flex-direction: column;
+		flex-basis: 100%;
+	}
+	@media (max-width: 414px) {
+		flex-basis: 65%;
+	}
+	.photo {
+		text-align:center;
+		img {
+			width: 55%;
+			@media (max-width: 769px) {
+				width: 30%;
+			}
+			@media (max-width: 414px) {
+			width: 50%;
+			}
+		}
+	}
+	.order {
+		// flex-basis: 55%;
+		transition: all 0.5s ease;
 		.highlights {
 			font-weight: 700;
 			color: $hover-color;
 			letter-spacing: 0.1em;
+			text-align: center;
+			@media (max-width: 819px) {
+				text-align: center;
+			}
+		}
+	}
+}
+.card .desc {
+	transition: all 0.5s ease;
+	display: flex;
+	flex-direction: row;
+	flex-basis: 100%;
+	justify-content: space-evenly;
+	padding: 5px 20px;
+	@media (max-width: 769px) {
+		flex-direction: column-reverse;
+		justify-content: center;
+		align-items: center;
+		margin-top: 60px;
+	}
+	@media (max-width: 414px) {
+		margin: 5px;
+		padding: 5px;
+	}
+	@media (max-width: 320px) {
+		margin: 0px;
+	}
+	.date-container {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: wrap;
+		transition: all 0.5s ease;
+		max-width: 40%;
+		@media (max-width: 769px) {
+			max-width: 80%;
+		}
+		@media (max-width: 414px) {
+			max-width: 100%;
+		}
+		.appointment-time {
+			transition: all 0.5s ease;
+			.btn-box {
+				display: flex;
+				flex-direction: row;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				margin: 55px 0 10px;
+				@media (max-width: 1024px) {
+					margin-top: 10px;
+				}
+			}
+			.radio {
+				display: none;
+			}
+			.radio-btn {
+				flex-basis: 10%;
+			}
+			label {
+				margin: 10px 10px 3px 10px;
+				padding: 3px 10px;
+				display: block;
+				min-width: 75px;	
+				background-color: $hover-color;
+				color: $opacity-color;
+				&:hover {
+					background-color: $main-color;
+					color: $header-color;
+				}
+				@media (max-width: 320px) {
+					margin: 10px 5px 3px 10px;
+				}
+			}
+			.radio-btn input[type="radio"]:checked + label {
+				background-color: $main-color;
+				color: $header-color;
+			}
+		}
+	}
+	.order-information {
+		order: -1;	
+		margin-top: 15px;
+		padding: 5px 10px;
+		text-align: center;
+		width: 45%;
+		transition: all 0.5s ease;
+		@media (max-width: 414px) {
+			width: 85%;
 		}
 		p {
-			margin: 10px 0;
+			text-align: left;
+			font-size: 0.8em;
+			line-height: 1.2em;
 		}
-		img {
-			border-radius: 3px;
-			box-shadow: 1px 1px 15px 1px $hover-color;
+		.link {
+			font-size: 0.7em;
+			padding: 10px;
+			margin: 10px 0;
 		}
 	}
 }
 
 
-
 // _____ APPOINTMENT _________
 
 .appointment {
@@ -555,38 +682,13 @@ h2 {
 		max-width: 90%;
 	}
 }
-.appointment-time {
-	.btn-box {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		justify-content: space-evenly;
-		margin: 30px 0;
-		input[type = "radio"] {
-			display: none;
-		}
-		label {
-			display: flex;
-			margin: 10px 10px 3px 0;
-			text-align: center;
-			padding: 5px 15px;
-			min-width: 100px;
-			background-color: $hover-color;
-			color: $opacity-color;
-			&:hover {
-				background-color: $main-color;
-				color: $header-color;
-			}
-			span {
-				margin: 0px auto;
-			}
-		}
-		label input[type = "radio"]:checked {
-			background-color: $main-color;
-			color: $header-color;
-		  }
-	}
 
+.comment {
+	resize: none;
+	background-color: $main-color;
+	&::placeholder {
+		color: $opacity-color;  
+	}
 }
 
 
@@ -620,15 +722,15 @@ h2 {
 		}
 	}
 	.logo-box  img {
-		width: 300px;
+		width: 250px;
 		@media (max-width: 768px) {
-			width: 250px;	
+			width: 200px;	
 		}
 		@media (max-width: 414px) {
-			width: 200px;	
+			width: 150px;	
 		}
 		@media (max-width: 375px) {
-			width: 150px;	
+			width: 100px;	
 		}
 	}	
 	.contacts {
@@ -638,6 +740,7 @@ h2 {
 		min-width: 30%;
 		text-align: center;
 		font-size: 1em;
+		font-weight: 400;
 		@media (max-width: 768px) {
 			width: 100%;
 		}
@@ -853,4 +956,8 @@ h2 {
 				display: flex;
 			}
 		}
+		.icon-angle-down:before {
+			top: 22%;
+			color: $header-color;
+		}
 	}

src/style/calendar.scss

@@ -8,21 +8,35 @@ $opacity-color: rgba(17,17,17,0.8);
     display: flex;
     flex-direction: column ;
     margin: 0px 20px;
+    @media (max-width: 819px) {
+        margin: 0 auto;
+    }
     .calendar-title-box {
         display: flex;
         align-self: flex-start;
-        margin: 20px 0;
+        margin: 5px 0;
         flex-direction: row;
         align-items: center;
         h4 {
             margin: 0 20px;
             font-weight: 400;
+            font-size: 0.9em;
         }
     }
     .weekdays {
         display: flex;
         p {
-            margin: 0 6px;
+           margin: 0 5px;
+           font-size: 0.8em;
+           text-align:center;
+           width: 40px;
+           height: 40px;
+           @media (max-width: 414px) {
+            width: 35px;
+            }
+            @media (max-width: 320px) {
+                width: 30px;
+            }
         }
     }
     .days {
@@ -33,10 +47,19 @@ $opacity-color: rgba(17,17,17,0.8);
     }
     .angle {
         width: 30px;
+        height: 35px;
+        margin: 15px auto 10px;
     }
     button {
         width: 50px;
-        height: 40px;
+        height: 35px;
+        font-size: 0.8em;
+        @media (max-width: 414px) {
+            width: 45px;
+        }
+        @media (max-width: 320px) {
+            width: 40px;
+        }
         &:focus {
             outline: none;
         }

src/style/select.scss

@@ -7,17 +7,25 @@ $opacity-color: rgba(17,17,17,0.8);
 .select {
 	width: 90%;
 	display: flex;
+	margin: 40px auto 15px;
 	flex-direction: column;
 	position: relative;
 	font-family: 'Lato', sans-serif;
+	font-size: 0.9em;
+	cursor: pointer;
+	@media (max-width: 769px) {
+		max-width: 100%;
+	}
+	@media (max-width: 414px) {
+		width: 90%;
+	}
 
 	&__list {
 		list-style: none;
 		padding: 0;
 		margin: 0;
 		width: 100%;
-		background-color: $opacity-color;
-
+		background-color: $main-color;
 		position: absolute;
 		left: 0;
 		top: 100%;
@@ -30,27 +38,28 @@ $opacity-color: rgba(17,17,17,0.8);
 		background-color: $header-color;
 		color: $opacity-color;
 		border-radius: 3px;
-		padding: 0.5rem;
+		padding: 0.3rem 0.5rem;
 	}
 
 	&__item {
 		display: flex;
-		padding: 0.5rem;
+		padding: 0.2rem 0.5rem;
+		font-weight: 400;
 		cursor: pointer;
 		&:hover {
 			background-color: $main-color;
 			color:$opacity-color;
-			font-weight: 700;
 		}
 	}
 
 	&__input {
+		font-family: 'Lato', sans-serif;
 		position: relative;
         border: none;
         background: none;
 		color: $opacity-color;
-		font-weight: 700;
 		width: 100%;
+		cursor: pointer;
 		&:focus {
 			outline: none;
 		}

src/style/style.css

@@ -50,13 +50,13 @@
   content: "\f104";
   color:  var(--opacity-color);
   font-size: 1.7em;
-  font-weight: 700;
+  /* font-weight: 700; */
 }
 .icon-angle-right:before {
   content: "\f105";
   color:  var(--opacity-color);
   font-size: 1.7em;
-  font-weight: 700;
+  /* font-weight: 700; */
 }
 .icon-angle-down:before {
   content: "\f107";