chore: continue migrate to next13 and redesign - finish mobile design

Troff8 · Sep 18, 2023 · 4264e77 · 4264e77
1 parent c90ecf2
commit 4264e77
Show file tree

Hide file tree

Showing 22 changed files with 263 additions and 26 deletions.
diff --git a/hospital-next/src/app/components/CardSpecialist/CardSpecialist.module.css b/hospital-next/src/app/components/CardSpecialist/CardSpecialist.module.css
@@ -1,5 +1,5 @@
 .cardSpecialist{
-    width: 217px;
+    width: 190px;
     cursor: pointer;
 }
 .cardSpecialist:hover{

diff --git a/hospital-next/src/app/components/Carousel/Carousel.tsx b/hospital-next/src/app/components/Carousel/Carousel.tsx
@@ -29,9 +29,9 @@ export default function CarouselCustom() {
             slidesToSlide: 2, // optional, default to 1.
         },
         mobile: {
-            breakpoint: { max: 464, min: 0 },
-            items: 3,
-            slidesToSlide: 2, // optional, default to 1.
+            breakpoint: { max: 500, min: 0 },
+            items: 2,
+            slidesToSlide: 1, // optional, default to 1.
         },
     };
     return (

diff --git a/hospital-next/src/app/components/ClientInspection/ClientInspection.module.css b/hospital-next/src/app/components/ClientInspection/ClientInspection.module.css
@@ -12,3 +12,8 @@
     opacity: .8;
     line-height: 1.3;
 }
+@media (max-width: 500px) {
+    .title{
+        font-size: 15px;
+    }
+}
diff --git a/hospital-next/src/app/components/Footer/Footer.module.css b/hospital-next/src/app/components/Footer/Footer.module.css
@@ -97,4 +97,26 @@
 }
 .footerBottomContent{
     display: flex;
+}
+@media (max-width: 500px) {
+    .footerContainer{
+        display: block;
+        padding-inline: 5px;
+    }
+    .footerNav{
+        margin-top: 15px;
+    }
+    .columnFooter{
+        max-width: 100%;
+    }
+    .category li{
+        font-size: 0.7em;
+    }
+    .footerBottomContent{
+        flex-direction: column;
+        align-items: center;
+    }
+    .footerBottom{
+        width: 100%;
+    }
 }
diff --git a/hospital-next/src/app/components/Header/Header.module.css b/hospital-next/src/app/components/Header/Header.module.css
@@ -37,4 +37,23 @@
 }
 .navTopRightSide{
     display: flex;
+}
+@media (max-width: 500px) {
+    .container{
+        padding: 5px 15px;
+    }
+    .navTop{
+        flex-direction: row;
+        align-items: center;
+    }
+    .phoneCall{
+        flex-direction: column;
+    }
+    .phoneCall li{
+        padding-inline: 5px;
+    }
+    .navTopRightSide{
+        display: flex;
+        flex-direction: column;
+    }
 }
diff --git a/hospital-next/src/app/components/Header/Header.tsx b/hospital-next/src/app/components/Header/Header.tsx
@@ -8,16 +8,14 @@ export default function Header() {
         <header>
             <div className={styles.container}>
                 <nav className={styles.navTop}>
-                    <Link href={'/'}>
-                        <Image src="/favicon.ico" width={80} height={80} alt="Logo" />
-                    </Link>
-
                     <div className={styles.navTopLeftSide}>
                         <ul className={styles.phoneCall}>
                             <li>
                                 <Image src="/phone.svg" width={10} height={14} alt="Phone" />
                                 <a href="tel:+78463930092">Чапаевск +78463930092</a>
                                 <span>Будни:8:00-19:00</span>
+                            </li>
+                            <li>
                                 <Image src="/phone.svg" width={10} height={14} alt="Phone" />
                                 <a href="tel:+78463930092">Безенчук +78463930092</a>
                                 <span>Будни:8:00-19:00,Суббота 8:00-17:00</span>
@@ -30,12 +28,7 @@ export default function Header() {
                     </div>
                     <div className={styles.navTopRightSide}>
                         <Link href={'/auth'}>
-                            <Button
-                                title="Регистрация"
-                            />
-                        </Link>
-                        <Link href={'/auth'}>
-                            <Button title="Вход"  />
+                            <Button title="Аккаунт" />
                         </Link>
                         <Button
                             title="Работникам"

diff --git a/hospital-next/src/app/components/HeaderPage/HeaderPage.module.css b/hospital-next/src/app/components/HeaderPage/HeaderPage.module.css
@@ -39,4 +39,18 @@
 }
 .sectionButton{
     display: flex;
+}
+
+@media (max-width: 500px) {
+    .sectionButton{
+        display: block;
+    }
+    .headerPageSection{
+        justify-content: center;
+        flex-direction: column;
+        margin-right: 15px;
+    }
+    .headerPage p{
+        margin-right: 0px;
+    }
 }
diff --git a/hospital-next/src/app/components/Menu/Menu.module.css b/hospital-next/src/app/components/Menu/Menu.module.css
@@ -55,4 +55,28 @@
 .active{
     text-decoration:underline;
     color: #63b64b;
+}
+.title{
+    color: #3b3b3b;
+    font-size: 32px;
+}
+
+@media (max-width: 500px) {
+    .container{
+        display: block;
+        padding: 5px 10px;
+    }
+    .wrapperMenu{
+        padding-top: 3px;
+        margin-top: 20px;
+    }
+    .wrapperMenu ul{
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .title{
+        font-size: 20px;
+        text-align: center;
+        margin-bottom: 5px;
+    }
 }
diff --git a/hospital-next/src/app/components/Menu/Menu.tsx b/hospital-next/src/app/components/Menu/Menu.tsx
@@ -15,8 +15,10 @@ const Menu: React.FC<MenuProps> = ({ items }) => {
             <div className={styles.wrapperTitle}>
                 <ul>
                     <li>
-                        <h1>Консультативно-диагностическая Поликлиника</h1>
-                        <Image src="/heartLogo.png" width={20} height={20} alt="heart" />
+                        <Link href={'/'}>
+                            <Image src="/favicon.ico" width={30} height={30} alt="Logo" />
+                        </Link>
+                        <h1 className={styles.title}>Консультативно-диагностическая Поликлиника</h1>
                     </li>
 
                     <li>
@@ -32,7 +34,9 @@ const Menu: React.FC<MenuProps> = ({ items }) => {
                     {items &&
                         items.map((item) => (
                             <Link key={item.title} href={`/${item.url}`}>
-                                <li className={pathName === `/${item.url}` ? styles.active : styles.werw}>{item.title}</li>
+                                <li className={pathName === `/${item.url}` ? styles.active : styles.werw}>
+                                    {item.title}
+                                </li>
                             </Link>
                         ))}
                 </ul>

diff --git a/hospital-next/src/app/components/RecommendationCard/RecommendationCard.module.css b/hospital-next/src/app/components/RecommendationCard/RecommendationCard.module.css
@@ -18,4 +18,13 @@
     color: #686868;
     line-height: 1.45;
     margin-bottom: 0;
-}
+}
+@media (max-width: 500px) {
+    .recommendationCard{
+        width: 100%;
+        padding: 10px 5px;
+    }
+
+}
+
+
diff --git a/hospital-next/src/app/components/Subscription/Subscription.module.css b/hospital-next/src/app/components/Subscription/Subscription.module.css
@@ -73,4 +73,10 @@ transition-delay: .35s;
 .subscription.done .submitEmail .afterSubmit {
 visibility: visible;
 opacity: 1;
+}
+
+@media (max-width: 500px) {
+    .content{
+        width: 300px;
+    }
 }
diff --git a/hospital-next/src/app/contacts/page.jsx b/hospital-next/src/app/contacts/page.jsx
@@ -47,7 +47,7 @@ export default function Page() {
                 </div>
             </section>
             <div className={styles.subscriptionContainer}>
-                <div>
+                <div className={styles.subscriptionContainerText}>
                     <h2>Подпишитесь на новости</h2>
                     <span>Мы сообщим о начале акциях и новых скидках</span>
                 </div>

diff --git a/hospital-next/src/app/contacts/page.module.css b/hospital-next/src/app/contacts/page.module.css
@@ -59,4 +59,28 @@
     padding: 20px 0px;
     border-top: 1px solid #e3e3e3;
     border-bottom: 1px solid #e3e3e3;
-  }
+}
+@media (max-width: 500px) {
+    .title {
+      font-size: 20px;
+      margin-bottom: 20px;
+    }
+    .container{
+        padding: 15px 10px;
+    }
+    .section{
+        max-width: 80%;
+    }
+    .sections{
+        flex-direction: column;
+        align-items: center;
+    }
+    .subscriptionContainer{
+        flex-direction: column;
+    }
+    .subscriptionContainerText{
+        text-align: center;
+        margin-bottom: 15px;
+    }
+
+}
diff --git a/hospital-next/src/app/inspection/page.jsx b/hospital-next/src/app/inspection/page.jsx
@@ -45,7 +45,7 @@ export default function Page() {
                 </span>
             </div>
             <div className={styles.subscriptionContainer}>
-                <div>
+                <div className={styles.subscriptionContainerText}>
                     <h2>Подпишитесь на новости</h2>
                     <span>Мы сообщим о начале акциях и новых скидках</span>
                 </div>

diff --git a/hospital-next/src/app/inspection/page.module.css b/hospital-next/src/app/inspection/page.module.css
@@ -47,4 +47,28 @@
 }
 .aboutInspection{
     width: 400px;
- }
+ }
+ @media (max-width: 500px) {
+    .titlePage {
+      font-size: 20px;
+      margin-bottom: 20px;
+    }
+    .container{
+        padding: 15px 10px;
+    }
+    .inspection{
+        flex-direction: column;
+        padding: 15px 5px;
+    }
+    .details{
+        padding-inline: 5px;
+    }
+    .subscriptionContainer{
+        flex-direction: column;
+      }
+      .subscriptionContainerText{
+        text-align: center;
+        margin-bottom: 15px;
+      }
+
+}
diff --git a/hospital-next/src/app/page.module.css b/hospital-next/src/app/page.module.css
@@ -68,4 +68,34 @@
   padding: 20px 20px;
   border-top: 1px solid #e3e3e3;
   border-bottom: 1px solid #e3e3e3;
+}
+
+@media (max-width: 500px) {
+  .containerAboutHospital{
+    padding: 0px;
+  }
+  .aboutHospital h2 {
+    font-size: 20px;
+  }
+  .aboutHospital h3 {
+    font-size: 14px;
+    margin-bottom: 15px;
+  }
+  .aboutHospitalMediaInfo{
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .cards{
+    display: block;
+  }
+  .containerSpecialists{
+    padding-inline: 20px;
+  }
+  .subscriptionContainer{
+    flex-direction: column;
+  }
+  .subscriptionContainerText{
+    text-align: center;
+    margin-bottom: 15px;
+  }
 }
diff --git a/hospital-next/src/app/page.tsx b/hospital-next/src/app/page.tsx
@@ -82,7 +82,7 @@ export default function Home() {
                 </div>
             </section>
             <div className={styles.subscriptionContainer}>
-                <div>
+                <div className={styles.subscriptionContainerText}>
                     <h2>Подпишитесь на новости</h2>
                     <span>Мы сообщим о начале акциях и новых скидках</span>
                 </div>

diff --git a/hospital-next/src/app/privacyPolicy/page.module.css b/hospital-next/src/app/privacyPolicy/page.module.css
@@ -33,4 +33,18 @@
     color: #4d4d51;
     line-height: 1.5;
     margin-top: 20px;
+}
+
+@media (max-width: 500px) {
+    .container h2{
+      font-size: 20px;
+      margin-bottom: 20px;
+    }
+    .container{
+        padding: 15px 10px;
+    }
+    .content{
+        width: 100%;
+    }
+
 }
diff --git a/hospital-next/src/app/privacyPolicy/page.tsx b/hospital-next/src/app/privacyPolicy/page.tsx
@@ -7,7 +7,7 @@ export default function Page() {
     return (
         <main>
             <Menu items={url} />
-            <HeaderPage text={'Политика конфиденциальности'} />
+            <HeaderPage text={'Конфиденциальность'} />
             <section className={styles.container}>
                 <div className={styles.content}>
                     <h2>Политика обработки данных</h2>

diff --git a/hospital-next/src/app/services/page.jsx b/hospital-next/src/app/services/page.jsx
@@ -66,7 +66,7 @@ export default function Page() {
                 </div>
             </section>
             <div className={styles.subscriptionContainer}>
-                <div>
+                <div className={styles.subscriptionContainerText}>
                     <h2>Подпишитесь на новости</h2>
                     <span>Мы сообщим о начале акциях и новых скидках</span>
                 </div>