mobile version

src/App.js

@@ -12,8 +12,8 @@ import Loader from "./components/loader";
 import Header from "./components/header/index";
 import Main from "./components/main/Main";
 import Doctors from "./components/specialists/Doctors";
-import Services from "./components/servises/Services";
-import Categories from "./components/servises/categories"
+import Services from "./components/services/Services";
+import Categories from "./components/services/categories"
 import MoreInfo from "./components/specialists/MoreInfo";
 import Appointment from "./components/appointment/Appointment";
 import Reviews from "./components/Reviews";
@@ -27,12 +27,7 @@ export class App extends React.Component {
     componentDidMount() {
         this.props.getDoctors();
         this.props.getServices();
-<<<<<<< HEAD
-        
-        // console.log (this.props.app)
-        
-=======
->>>>>>> ff3f53df4e902acee8dc75802682ebb15c73edfb
+
         // fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
         //     method : "POST",
         //     credentials: "include",

src/components/Admin/Shedule.js

@@ -35,13 +35,8 @@ export default class Shedule extends React.Component {
     };
 
     render() {
-<<<<<<< HEAD
-        console.log ( this.props )
-        const { doctors, postNewShedule,  setSheduleDoctor } = this.props;
-=======
         const {doctors, postNewShedule} = this.props;
         const doctor = doctors.find(el => el._id === postNewShedule.doctor)
->>>>>>> ff3f53df4e902acee8dc75802682ebb15c73edfb
         return (
             <div  className = "shedule-container" >
                 <div className = "option" >

src/components/servises/categories.js

@@ -11,30 +11,29 @@ export class Services extends React.Component {
         const servArray =  Object.keys(categories).map(key => {
             return [key, categories[key]];
         })
-        const category = servArray.slice( 0, 1 )
+        // const category = servArray.slice (1, 2 )
 
         // console.log ("data:", data);
         // console.log ("categories:", Object.values (categories))
         console.log ("servArray:", servArray)
-        console.log ("category:", category)
+        // console.log ("category:", category)
         // console.log ("this.props:", this.props.app)
 
         return (
             <div className="main">
                 <div className="wrapper">
                     <div className = "doctors-wrap">
-                        {  category.map (( el, index )=> (
+                        {  servArray.map (( el, index )=> (
                             <div className = "serv-wrap" key = {index}>
-
                                 {   el[1].map ((item, index) => (
-
+                                          
                                     <div className = "servise-name" key = {index} >
                                         <p>{item.name}</p>
                                         <p>Длительность: {item.duration} ч.</p> 
                                         <p>Цена: {item.price} грн.</p>
                                         <div>
                                             
-                                            <button className = "btn link "> Записаться на приём </button>
+                                            <button className = "btn service-btn"> Записаться на приём </button>
                                         </div>
                                     </div>
                                 ))}

src/style/all.scss

@@ -8,24 +8,36 @@ $opacity-color: rgba(17,17,17,0.8);
 
 body {
 	font-family: 'Lato', sans-serif;
-	font-size: 16px;
-
+	font-size: 14px;
 }
 
 .main {
 	background-image: url(../assets/images/fon6.jpg);
 	background-size: cover;
 	background-attachment: fixed;
-	min-height: 100vh;
+	min-height: 80vh;
 	scroll-behavior: smooth;
-	// padding-top: 120px;
 }
 
 .container {
 	background-image: url(../assets/images/fon1.jpg);
 	background-size: cover;
 	min-height: 100vh;
+	
+	@media (max-width: 768px) {
+		background-position-x: -270px;
+	}
+	@media (max-width: 414px) {
+		background-position-x: -330px;
+	}
+	@media (max-width: 375px) {
+		background-position-x: -285px;
+	}
+	@media (max-width: 320px) {
+		background-position-x: -250px;
+	}
 }
+
 .wrapper,
 .info-wrap {
 	max-width: 1280px;
@@ -50,7 +62,7 @@ body {
 
 	& .nav {
 		margin-top: 25px;
-		font-size: 14px;
+		font-size: 1em;
 		line-height: 24px;
 		font-weight: bold;
 		letter-spacing: 0.075em;
@@ -124,23 +136,40 @@ body {
 		margin: 150px auto 30px;
 		max-width: 300px;
 		@media (max-width: 768px) {
+			// max-width: 200px;	
+			margin-top: 250px;
+		}
+		@media (max-width: 414px) {
 			max-width: 200px;	
+			margin-top: 175px;
+		}
+		@media (max-width: 375px) {
+			max-width: 200px;	
+			margin-bottom: 5px;
 		}
 	}
 	h1{
 		text-transform: uppercase;
 		background-color: $opacity-color;
 		width: 100%;
-		font-size: 40px;
+		font-size: 2.6em;
 		padding: 35px;
 		line-height: 50px;
 		font-weight: bold;
 		margin: 30px auto 0;
 		text-align: center;
 		@media (max-width: 768px) {
-			font-size: 25px;
+			font-size: 30px;
 			padding: 15px;	
 		}
+		@media (max-width: 414px) {
+			font-size: 20px;
+			// padding: 15px;	
+		}
+		@media (max-width: 375px) {
+			font-size: 15px;
+			padding: 5px;	
+		}
 	}
 }
 
@@ -360,6 +389,7 @@ h2 {
 		font-family: 'Montserrat', sans-serif;
 		font-weight: 700;
 		font-size: 1.3em;
+		margin: 5px;
 	}
 	.logo-box {
 		margin-right: 0px;
@@ -374,6 +404,12 @@ h2 {
 		@media (max-width: 768px) {
 			width: 250px;	
 		}
+		@media (max-width: 414px) {
+			width: 200px;	
+		}
+		@media (max-width: 375px) {
+			width: 150px;	
+		}
 	}	
 	.contacts {
 		background-color: $opacity-color;
@@ -385,6 +421,9 @@ h2 {
 		@media (max-width: 768px) {
 			width: 100%;
 		}
+		@media (max-width: 768px) {
+			font-size: 0.7em;
+		}
 	}
 	
 }
@@ -412,6 +451,11 @@ h2 {
 // _____DOCTORS_____ 
 .doctors-wrap {
 	padding-top: 110px;	
+	.item h3 {
+		@media (max-width: 375px) {
+			font-size: 1em;
+		}
+	}
 }
 .info-wrap {
 	padding: 110px 10px 25px;
@@ -425,7 +469,7 @@ h2 {
 	color: $header-color;
 	h3 {
 		margin: 0;
-		font-size: 2em;
+		font-size: 1.8em;
 		line-height: 2em;
 		text-align:  center;
 		@media (max-width: 768px) {
@@ -434,6 +478,9 @@ h2 {
 	}
 	.desc {
 		width: 50%;
+		@media (max-width: 1024px) {
+			width: 60%;
+		}
 		@media (max-width: 768px) {
 			width: 100%;
 		}
@@ -479,20 +526,28 @@ h2 {
 aside {
 	position: fixed;
 	top: 50%;
-	right: 3%;
+	right: 2%;
 	z-index: 999999;
 	.sidebar-ul {
 		list-style: none;
 		.sidebar-item {
 			margin-top: 15px;
 		}
-		
 	}
 	.nav-link {
 		text-decoration: none;
 		margin-top: 15px;
 		padding: 15px 0;
 	}
+	@media (max-width: 1024px) {
+		top: 70%;	
+	}
+	@media (max-width: 375px) {
+		top: 75%;	
+	}
+	@media (max-width: 320px) {
+		top: 25%;	
+	}
 }
 
 
@@ -612,12 +667,22 @@ aside {
 // ______services________
 	.serv-wrap {
 		width: 100%;
-
 		display: flex;
+		flex-wrap:wrap;
 		.servise-name {
+			width: 45%;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: center;
 			border: 1px solid$hover-color;
 			margin: 10px;
-			min-width: 30%;
 			text-align: center;
+			p {
+				margin: 5px 10px;
+			}
 		}
 	}
+	.service-btn {
+		background-color: $hover-color;
+	}

src/style/auth.scss

@@ -10,6 +10,9 @@ $opacity-color: rgba(17,17,17,0.8);
 	background-color: $opacity-color;
 	min-height: 100vh;
 	min-width: 100vw;
+	@media (max-width: 1024px) {
+		min-height: 84vh;
+	}
 }
 
 .auth {
@@ -18,16 +21,20 @@ $opacity-color: rgba(17,17,17,0.8);
 
 
 	&__content {
-		width: 30rem;
+		width: 28rem;
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
-		background-color: $opacity-color;
-		padding: 2rem;
+		background-color: rgba(17, 17, 17, 0.8);
+		padding: 1.5rem;
 		border: 1px solid #eee;
 		margin-top: 40px;
+		@media (max-width: 1024px) {
+			top: 35%;
+		}
 	}
+	
 
 	&__text {
 		font-size: 1.6rem;

src/style/style.css

@@ -70,7 +70,32 @@
   content: "\e901";
   color:  var(--opacity-color);
   margin: 15px 0;
+  font-size: 1.6em;
 }
+@media (max-width: 1024px) {
+	.icon-lens:before {
+		color:  var(--hover-color);
+	}
+}
+@media (max-width: 414px) {
+	.icon-lens:before {
+    color:  var(--hover-color);
+    font-size: 1em;
+  }
+}
+@media (max-width: 375px) {
+  .icon-lens:before {
+    /* color:  var(--hover-color); */
+    font-size: 0.9em;
+  }
+}  
+@media (max-width: 320px) {
+  .icon-lens:before {
+    color:  var(--opacity-color);
+    /* font-size: 0.9em; */
+  }
+}  
+
 .icon-calendar:before {
   content: "\f073";
 }