Merge pull request #961 from ita-social-projects/#955-footer1200media

#955 footer1200media
ita-social-projects · Dec 2, 2024 · 2117dd6 · 2117dd6
2 parents 1de9071 + a7189d5
commit 2117dd6
Show file tree

Hide file tree

Showing 16 changed files with 98 additions and 117 deletions.
diff --git a/FrontEnd/src/App.css b/FrontEnd/src/App.css
@@ -1,7 +1,5 @@
 .App {
-  /*for footer correct work*/
   display: flex;
-  min-height: 100vh;
   flex-direction: column;
 }
 

diff --git a/FrontEnd/src/App.jsx b/FrontEnd/src/App.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import './App.css';
 import { RouterProvider } from 'react-router-dom';
 import router from './routes/Router';

diff --git a/FrontEnd/src/components/Footer/Footer.module.css b/FrontEnd/src/components/Footer/Footer.module.css
@@ -1,15 +1,15 @@
 .footer-main {
     display: flex;
-    width: 100vw;
+    width: 100%;
     background: var(--footer-backround);
     justify-content: center;
 }
 
 .footer-content {
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
-    padding: 32px 24px;
+    justify-content: space-between;
+    padding: 32px 0px;
     width: 327px;
     height: 679px;
     gap: 32px;
@@ -22,11 +22,19 @@
     }
 }
 
-@media only screen and (min-width: 1512px) {
+@media only screen and (min-width: 1200px) {
     .footer-content {
         flex-direction: row;
-        width: 1304px;
+        width: 1136px;
         height: 205px;
-        padding: 32px 104px;
+        padding: 32px 32px 48px 32px;
+        gap: 24px;
+    }
+}
+
+@media only screen and (min-width: 1512px) {
+    .footer-content {
+        width: 1304px;
+        gap: 32px;
     }
 }
diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterAddress.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterAddress.module.css
@@ -72,7 +72,7 @@
     }
 }
 
-@media only screen and (min-width: 1512px) {
+@media only screen and (min-width: 1200px) {
     .footer-address__text {
         flex-direction: column;
     }
@@ -82,3 +82,10 @@
         padding-left: 0px;
     }
 }
+
+@media only screen and (min-width: 1512px) {
+    .footer-address__contacts {
+        padding-top: 25px;
+        padding-left: 0px;
+    }
+}
diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css
@@ -53,11 +53,10 @@
     }
 }
 
-@media only screen and (min-width: 1512px) {
+@media only screen and (min-width: 1200px) {
     .navigation-content {
         flex-direction: column;
         justify-content: flex-end;
-        min-width: 569px;
     }
 
     .navigation-content__company,
@@ -72,7 +71,16 @@
     .navigation-content-section__text-block,
     .navigation-content-company__text-block {
         flex-direction: row;
-        gap: 35px;
         padding-top: 15px;
     }
 }
+
+@media only screen and (min-width: 1512px) {
+    .navigation-content {
+        min-width: 569px;
+    }
+    .navigation-content-section__text-block,
+    .navigation-content-company__text-block {
+        gap: 35px;
+    }
+}
diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css
@@ -58,7 +58,7 @@
     }
 }
 
-@media only screen and (min-width: 1512px) {
+@media only screen and (min-width: 1200px) {
     .policy-divider {
         background: none;
     }

diff --git a/FrontEnd/src/components/Footer/FooterComponents/ScrollToTopButton.module.css b/FrontEnd/src/components/Footer/FooterComponents/ScrollToTopButton.module.css
@@ -1,7 +1,7 @@
 .scroll-to-top-button {
   position: fixed;
   bottom: 30px;
-  left: 80%;
+  left: 85%;
   width: 40px;
   height: 40px;
   background-color: var(--footer-scroll-button);
@@ -26,8 +26,14 @@
   background-color: var(--footer-scroll-button);
 }
 
-@media only screen and (min-width: 1512px) {
-  .scroll-to-top-button  {
+@media only screen and (min-width: 768px) {
+  .scroll-to-top-button {
+    left: 92%;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .scroll-to-top-button {
     left: 95%;
   }
-}
+}
diff --git a/FrontEnd/src/components/Footer/Top/FooterPolicy.jsx b/FrontEnd/src/components/Footer/Top/FooterPolicy.jsx
diff --git a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContacts.module.css b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContacts.module.css
@@ -21,7 +21,7 @@
 .data-block_render-contact,
 .data-content_render-data {
     display: flex;
-    width: 343px;
+    width: 100%;
     flex-direction: column;
     align-items: flex-start;
     gap: 6px;

diff --git a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DetailedInfoSection.module.css b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DetailedInfoSection.module.css
@@ -57,8 +57,8 @@
     .detail-info-page {
         display: flex;
         flex-direction: column;
-        width: 768px;
-        padding: 24px;
+        width: 760px;
+        padding: 24px 0;
     }
 
     .company-description-block {
@@ -69,6 +69,7 @@
         font-size: 34px;
         line-height: 40.8px;
         letter-spacing: -0.34px;
+        width: 300px;
     }
 }
 

diff --git a/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.jsx b/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.jsx
@@ -1,5 +1,6 @@
 import { PropTypes } from 'prop-types';
 import classes from './BannerImage.module.css';
+import PendingStatus from '../../../components/MiniComponents/PendingModerationIcon/PendingStatus';
 
 function BannerImage({ data }) {
     const backgroundImage = data?.banner?.path
@@ -10,7 +11,11 @@ function BannerImage({ data }) {
         <div
             className={classes['banner-image__block']}
             style={{ background: backgroundImage }}
-        />
+        >
+            <div className={classes['banner-image-tooltip']}>
+                <PendingStatus profile={data} elementType="banner" />
+            </div>
+        </div>
     );
 }
 

diff --git a/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.module.css b/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.module.css
@@ -1,8 +1,16 @@
 .banner-image__block {
+    display: flex;
+    justify-content: flex-start;
     width: var(--profile-detail-width);
     height: 195px;
 }
 
+.banner-image-tooltip {
+    display: flex;
+    padding-top: 12px;
+    padding-left: 10%;
+}
+
 @media only screen and (min-width: 768px) {
     .banner-image__block {
         height: 368px;

diff --git a/FrontEnd/src/pages/ProfileDetail/ProfileDetailPage.jsx b/FrontEnd/src/pages/ProfileDetail/ProfileDetailPage.jsx
@@ -13,8 +13,6 @@ import DetailedInfoSection from './DetailedInfo/DetailedInfoSection';
 
 import { ActiveLinksContext } from '../../context/ActiveLinksContext';
 
-import PendingStatus from '../../components/MiniComponents/PendingModerationIcon/PendingStatus';
-
 import classes from './ProfileDetailPage.module.css';
 
 
@@ -57,13 +55,7 @@ function ProfileDetailPage({ isAuthorized }) {
         <Loader />
       ) : (
         <ActiveLinksContext.Provider value={{ activeLinks, setActiveLinks }}>
-          <div className={classes['profile-detail__banner-tooltip']}>
-            <PendingStatus profile={fetchedProfile} elementType="banner" />
-          </div>
           <BannerImage data={fetchedProfile} />
-          <div className={classes['profile-detail__logo-tooltip']}>
-            <PendingStatus profile={fetchedProfile} elementType="logo" />
-          </div>
           <TitleInfo
             containsNotRequiredData={containsNotRequiredData}
             isAuthorized={isAuthorized}

diff --git a/FrontEnd/src/pages/ProfileDetail/ProfileDetailPage.module.css b/FrontEnd/src/pages/ProfileDetail/ProfileDetailPage.module.css
@@ -7,17 +7,3 @@
 .profile-detail__loader-content {
     display: flex;
 }
-
-.profile-detail__banner-tooltip {
-    display: flex;
-    position: absolute;
-    padding-top: 12px;
-    padding-left: 112px;
-}
-
-.profile-detail__logo-tooltip {
-    display: flex;
-    position: absolute;
-    padding-top: 5px;
-    padding-left: 3px;
-}
diff --git a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.jsx b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.jsx
@@ -5,7 +5,7 @@ import { PropTypes } from 'prop-types';
 import classNames from 'classnames';
 
 import DefaultLogo from './DefaultLogo';
-
+import PendingStatus from '../../../components/MiniComponents/PendingModerationIcon/PendingStatus';
 import CategoryBadges from '../../../components/MiniComponents/CategoryBadges';
 import StarForLike from '../../../components/MiniComponents/StarForLike';
 import { useAuth } from '../../../hooks';
@@ -61,35 +61,38 @@ function TitleInfo({ isAuthorized, data }) {
     <div className={classes['title-block']}>
       <div className={classes['title-block__content']}>
         <div className={classes['title-block__content-info']}>
-        <div className={classes['title-block__logo-block']}>
-          {!profile.logo?.path ? (
-            <DefaultLogo />
-          ) : (
-            <img
-              className={classes['title-block__logo-img']}
-              src={profile.logo?.path}
-              alt="Логотип компанії"
-              title="Логотип компанії"
-            />
-          )}
-        </div>
-        <div className={classes['title-block__about']}>
-          <p className={classes['title-block__activity']}>
-            {profile.activities}
-          </p>
-          <div className={classes['title-block__company']}>
-            <h2 className={classes['title-block__company_name']}>
-              {profile.name}
-            </h2>
-            <p className={classes['title-block__company_region']}>
-              {profile.regions}
+          <div className={classes['title-block__logo-block']}>
+            <div className={classes['title-block__logo-tooltip']}>
+              <PendingStatus profile={data} elementType="logo" />
+            </div>
+            {!profile.logo?.path ? (
+              <DefaultLogo />
+            ) : (
+              <img
+                className={classes['title-block__logo-img']}
+                src={profile.logo?.path}
+                alt="Логотип компанії"
+                title="Логотип компанії"
+              />
+            )}
+          </div>
+          <div className={classes['title-block__about']}>
+            <p className={classes['title-block__activity']}>
+              {profile.activities}
             </p>
-            <div className={classes['title-block__company_category']}>
-              <CategoryBadges categories={profile.categories} />
+            <div className={classes['title-block__company']}>
+              <h2 className={classes['title-block__company_name']}>
+                {profile.name}
+              </h2>
+              <p className={classes['title-block__company_region']}>
+                {profile.regions}
+              </p>
+              <div className={classes['title-block__company_category']}>
+                <CategoryBadges categories={profile.categories} />
+              </div>
             </div>
           </div>
         </div>
-        </div>
         {isAuthorized ? (
           <div className={classes['title-block__button-block']}>
             {!ownProfile && (

diff --git a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css
@@ -27,6 +27,11 @@
   align-items: center;
 }
 
+.title-block__logo-tooltip {
+  display: flex;
+  padding-bottom: 64px;
+}
+
 .title-block__logo-img {
   width: 64px;
   height: 64px;
@@ -135,7 +140,7 @@
 
 @media only screen and (min-width: 768px) {
   .title-block__content {
-    width: 768px;
+    width: 760px;
   }
 
   .title-block {
@@ -144,7 +149,7 @@
 
   .title-block__content-info {
     flex-direction: row;
-    width: 768px;
+    width: 728px;
     gap: 24px;
   }