Merge branch 'dev' of http://gitlab.a-level.com.ua/Entony/FEA_12_CLINIC into boris

public/index.html

@@ -12,7 +12,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="./images/favicon.png" />
+    <link rel="shortcut icon" href="../images/favicon.png" />
     <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700&display=swap" rel="stylesheet">
     <!--

src/App.js

@@ -26,7 +26,9 @@ export class App extends React.Component {
     componentDidMount() {
         this.props.getDoctors();
         this.props.getServices();
-
+        
+        // console.log (this.props.app)
+        
         // fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
         //     method : "POST",
         //     credentials: "include",

src/components/Appointment.js

@@ -42,72 +42,78 @@ export class Appoint extends React.Component {
         }
         return (
             <>
-                {doctor &&
-                    <div style={{display:'flex',flexDirection:'column',width:'400px',margin:'100px 0'}}>
-                        <img src={doctor.photo} alt=""/>
-                        <p>{doctor.name}</p>
-                        <p>{doctor.profession}</p>
-                        <p>Опыт работы {new Date().toISOString().split('T')[0].split('-')[0] - doctor.experience.split('T')[0].split('-')[0]} лет</p>
-                        <p>{doctor.skillsDescription}</p>
-
-                        {appointment.spec &&
-                            <div>
-                                <p>{spec.name}</p>
-                                <p>Duration:{spec.duration}h</p>
-                                <p>{spec.description}</p>
-                                <p>Price: {spec.price} грн.</p>
-                            </div>
-                        }
-                        <select  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='choose spec'>
-                            <option disabled >choose spec</option>
-                            {
-                                doctor.speciality.map(el=> (
-                                    <option key={el._id}>{el.name}</option>
-                                ))
-                            }
-                        </select>
+            <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>
+                                    {appointment.spec &&
+                                    <div>
+                                        <p>{spec.name}</p>
+                                        <p>Длительность: {spec.duration} ч.</p>
+                                        <p>{spec.description}</p>
+                                        <p>Цена от {spec.price} грн.</p>
+                                    </div>
+                                     }
+                                    <select  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='choose spec'>
+                                        <option disabled >Выбор услуги</option>
+                                        {
+                                            doctor.speciality.map(el=> (
+                                                <option key={el._id}>{el.name}</option>
+                                            ))
+                                        }
+                                    </select>
+                                    {appointment.spec &&
+                                    <input
+                                        type="date"
+                                        onChange={(e) => setAppointmentShedule(doctor.shedule.find(el => new Date(el.data).toISOString().split('T')[0] === new Date(e.target.value).toISOString().split('T')[0])
+                                            ? doctor.shedule.find(el => new Date(el.data).toISOString().split('T')[0] === new Date(e.target.value).toISOString().split('T')[0])._id
+                                            : null
+                                        )}
+                                    />
+                                }
 
-                        {appointment.spec &&
-                            <input
-                                type="date"
-                                onChange={(e) => setAppointmentShedule(doctor.shedule.find(el => new Date(el.data).toISOString().split('T')[0] === new Date(e.target.value).toISOString().split('T')[0])
-                                    ? doctor.shedule.find(el => new Date(el.data).toISOString().split('T')[0] === new Date(e.target.value).toISOString().split('T')[0])._id
-                                    : null
-                                )}
-                            />
-                        }
+                                {!appointment.shedule ?
+                                    !wrongDate ?
+                                        <p>На эту дату нет свободного времени для выбора</p>
+                                        : null
+                                    : <div>
+                                        { choosedData >= currentDate ?
+                                            <div>
+                                                <select onChange={(e)=>setAppointmentTime(e.target.value)} defaultValue='choose time'>
+                                                    <option disabled >Выбор даты</option>
+                                                    {
+                                                        timeArray.map(el=> (
+                                                            Object.values(el)[0]
+                                                                ? <option key={Object.keys(el)[0]} style={{color:'green'}} > {Object.keys(el)[0]} </option>
+                                                                : <option key={Object.keys(el)[0]} style={{color:'red'}} disabled > {Object.keys(el)[0]} </option>
+                                                        ))
+                                                    }
+                                                </select>
+                                            </div>
+                                            : <p>Выберите текущую или будущую дату</p>
+                                        }
+                                        </div>
+                                }
 
-                        {!appointment.shedule ?
-                            !wrongDate ?
-                                <p>There is no available time to choose on this date</p>
-                                : null
-                            : <div>
-                                { choosedData >= currentDate ?
-                                    <div>
-                                        <select onChange={(e)=>setAppointmentTime(e.target.value)} defaultValue='choose time'>
-                                            <option disabled >choose time</option>
-                                            {
-                                                timeArray.map(el=> (
-                                                    Object.values(el)[0]
-                                                        ? <option key={Object.keys(el)[0]} style={{color:'green'}} > {Object.keys(el)[0]} </option>
-                                                        : <option key={Object.keys(el)[0]} style={{color:'red'}} disabled > {Object.keys(el)[0]} </option>
-                                                ))
-                                            }
-                                        </select>
+                                {appointment.time &&
+                                    <div style={{display:"flex",flexDirection:"column"}}>
+                                        <input type='text' placeholder='Добавить комментарий' onChange={(e)=>setAppointmentComment(e.target.value)}/>
+                                        <button onClick={() => postOrders(appointment)}>Подтвердите запись</button>
                                     </div>
-                                    : <p>Choose current or future date</p>
                                 }
-                                </div>
-                        }
 
-                        {appointment.time &&
-                            <div style={{display:"flex",flexDirection:"column"}}>
-                                <input type='text' placeholder='Add comments here' onChange={(e)=>setAppointmentComment(e.target.value)}/>
-                                <button onClick={() => postOrders(appointment)}>Confirm Appointment</button>
+                                </div>
                             </div>
-                        }
                     </div>
                 }
+            </div>
+                
             </>
         );
     }

src/components/Footer.js

@@ -9,7 +9,7 @@ const Footer = () => {
                     <p>пр. Науки, 64</p>
            </div>
            <div className="footer-part logo-box">
-               <img src="./images/logo.png" alt="logo"/>
+               <img src="../images/logo.png" alt="logo"/>
                </div>
            <div className="footer-part contacts">
               <h4> Контакты</h4>

src/components/Services.js

@@ -11,7 +11,7 @@ export class Services extends React.Component {
                     <div className = "doctors-wrap">
                         {
                             data.map(el => (
-                                <div key={el._id} style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
+                                <div key={el._id} style={{display:'flex',flexDirection:'column', width:'200px', margin:'10px 20px'}}>
                                     <p>{el.name}</p>
                                     <p>Duration:{el.duration}h</p>
                                     <p>{el.description}</p>

src/components/specialists/Doctors.js

@@ -3,7 +3,7 @@ import {Link} from 'react-router-dom'
 import {connect} from 'react-redux'
 
 export class Doctors extends React.Component {
-    render() {
+        render() {
         const {data} = this.props;
         return (
             <div className="main">

src/components/specialists/MoreInfo.js

@@ -9,23 +9,33 @@ export class MoreInfo extends React.Component {
         const service = services.find(el => el._id === match.params.service);
         return (
             <>
-               {doctor &&
-               <div style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
-                   <h3>{doctor.name}</h3>
-                   <img src={`.${doctor.photo}`} alt=""/>
-                   <p>{doctor.profession}</p>
-                   <p>Опыт работы более {new Date().toISOString().split('T')[0].split('-')[0] - doctor.experience.split('T')[0].split('-')[0]} лет</p>
-                   <Link to={`/appointment/${doctor}`}>Make an appointment</Link>
-               </div>}
+            <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>
+                                <p className = "highlights">Опыт работы более {new Date().toISOString().split('T')[0].split('-')[0] - doctor.experience.split('T')[0].split('-')[0]} лет</p>
+                                {doctor.skillsDescription.split ("<br>").map ( (el, index) => (  <p key= {index}> { el } </p>)  ) }
+                                <Link to={`/appointment/${doctor._id}`} className = "btn link">Записаться на приём</Link>
+                             </div>
+                        </div>
+                    </div>}
 
                 {service  &&
-                <div style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
+                <div  className = "info-wrap">
                     {service.name}
                     <p>Duration:{service.duration}h</p>
                     <p>{service.description}</p>
                     <p>Price:{service.price}грн.</p>
                     <Link to={`/appointment/${service}`}>Make an appointment</Link>
                 </div>}
+               </div>
+              
             </>
         );
     }

src/containers/auth.js

@@ -22,7 +22,8 @@ class Auth extends Component {
 
     return (
       <div className="main">
-        <div className="auth">
+        <div className="auth-wrapper">
+            <div className="auth">
           <div className="auth__content">
             { auth ? (
                 <Loader flag={this.props.isFetching}>
@@ -57,6 +58,8 @@ class Auth extends Component {
             </div>
           </div>
         </div>        
+      
+        </div>
       </div>
 
     );

src/style/all.scss

@@ -1,6 +1,5 @@
 $header-color: #d4d5d7;
 $main-title-color: #3b3b3b;
-$main-text-color: #101010;
 $main-color:   #789084;
 $hover-color: #b1e8ca;
 $opacity-color: rgba(17,17,17,0.8);
@@ -18,7 +17,7 @@ body {
 	background-size: cover;
 	background-attachment: fixed;
 	min-height: 100vh;
-	padding-top: 120px;
+	// padding-top: 120px;
 }
 
 .container {
@@ -26,7 +25,8 @@ body {
 	// background-size: cover;
 	min-height: 100vh;
 }
-.wrapper {
+.wrapper,
+.info-wrap {
 	max-width: 1280px;
 	margin: 0 auto;
 }
@@ -80,12 +80,13 @@ body {
 		&:last-child a {
 			color: $hover-color;
 			&:hover {
-				color: $main-title-color;
+				color: #4dea94;
 			}
 		}
 		a {
 			text-decoration: none;
 			color: $header-color;
+			padding: 20px 3px;
 			&:hover {
 				color: $hover-color;
 			}
@@ -172,10 +173,19 @@ body {
 	}
 }
 
+.link {
+	width: 100%;
+	display: block;
+	padding: 15px 2px;
+	text-align: center;
+}
+
+
 //  section About Us
 .aboutsection, 
 .team-container,
 .doctors-wrap,
+.info-wrap,
 h2  {
 	background-color: $opacity-color;
 	box-shadow: 0px 0px 15px 15px  $opacity-color;
@@ -271,11 +281,6 @@ h2 {
 		.link-box {
 			margin-top: 20px;
 		}
-		.link {
-			width: 100%;
-			display: block;
-			padding: 15px 2px;
-		}
 		.more {
 			background-color: $opacity-color;
 			&:hover {
@@ -309,7 +314,8 @@ h2 {
 		margin-right: 50px;
 		padding-top: 15px;
 		@media (max-width: 768px) {
-			margin-right: 0;	
+			margin-right: 0;
+			order: -1;	
 		}
 	}
 	.logo-box  img {
@@ -352,9 +358,45 @@ h2 {
 
 
 // _____DOCTORS_____ 
-
 .doctors-wrap {
-	margin-top: 120px;
+padding-top: 110px;	
+}
+.info-wrap {
+	padding: 110px 10px 25px;
+ 	min-height: 100vh;
+}
+.card {
+	display: flex;
+	justify-content: space-around;
+	flex-direction: row;
+	flex-wrap: wrap;
+	color: $header-color;
+	h3 {
+		margin-top: 0;
+		font-size: 2em;
+		@media (max-width: 768px) {
+			text-align: center;
+		}
+	}
+	.desc {
+		width: 50%;
+		@media (max-width: 768px) {
+			width: 100%;
+		}
+	}
+	.card-item {
+		margin: 0 20px 10px; 
+		.highlights {
+			font-weight: 700;
+			color: $hover-color;
+		}
+		p {
+			margin: 10px 0;
+		}
+		img {
+			border-radius: 3px;
+			box-shadow: 1px 1px 15px 1px $hover-color;
+		}
+	}
 }
-
 

src/style/auth.scss

@@ -6,6 +6,11 @@ $hover-color: #b1e8ca;
 $opacity-color: rgba(17,17,17,0.8);
 
 
+.auth-wrapper {
+	background-color: $opacity-color;
+	height: 100vh;
+}
+
 .auth {
 	width: 100%;
 	height: 100%;