From c46047e42dbac0ab94f345e349b3c0c4f429c827 Mon Sep 17 00:00:00 2001 From: romanmyko Date: Fri, 22 Nov 2024 19:43:55 +0200 Subject: [PATCH 1/7] footer 1200 css --- FrontEnd/src/App.css | 2 - FrontEnd/src/App.jsx | 1 - .../src/components/Footer/Footer.module.css | 18 +++++--- .../FooterComponents/FooterAddress.module.css | 9 +++- .../FooterNavigation.module.css | 15 +++++-- .../FooterComponents/FooterPolicy.module.css | 2 +- .../components/Footer/Top/FooterPolicy.jsx | 45 ------------------- 7 files changed, 34 insertions(+), 58 deletions(-) delete mode 100644 FrontEnd/src/components/Footer/Top/FooterPolicy.jsx diff --git a/FrontEnd/src/App.css b/FrontEnd/src/App.css index e5d392976..f7965b367 100644 --- 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 index e9c40b406..296f7b817 100644 --- 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 index 2188beb4d..6729482f6 100644 --- a/FrontEnd/src/components/Footer/Footer.module.css +++ b/FrontEnd/src/components/Footer/Footer.module.css @@ -1,6 +1,6 @@ .footer-main { display: flex; - width: 100vw; + width: 100%; background: var(--footer-backround); justify-content: center; } @@ -9,7 +9,7 @@ display: flex; flex-direction: column; justify-content: space-around; - padding: 32px 24px; + 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: 1100px; height: 205px; - padding: 32px 104px; + padding: 32px 0px; + gap: 0px; + } +} + +@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 index bed5b8621..69fd49083 100644 --- 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 index 4fcf5c546..d90d11b0b 100644 --- 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,17 @@ .navigation-content-section__text-block, .navigation-content-company__text-block { flex-direction: row; - gap: 35px; + gap: 15px; 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 index ed08eab2f..5a152a263 100644 --- a/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css +++ b/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css @@ -57,7 +57,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/Top/FooterPolicy.jsx b/FrontEnd/src/components/Footer/Top/FooterPolicy.jsx deleted file mode 100644 index dfd9442fb..000000000 --- a/FrontEnd/src/components/Footer/Top/FooterPolicy.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import css from './FooterPolicy.module.css'; -import { Link } from 'react-router-dom'; - -const POLICY_LINKS = [ - { - id: 'i0', - title: 'Політика конфіденційності ', - link: 'privacy-policy/' - }, - { - id: 'i1', - title: 'Умови користування', - link: 'terms-and-conditions/' - }, - { - id: 'i3', - title: 'Contact', - link: 'contact/' - } -]; - -function FooterPolicy() { - return ( -
- Footer craft merge logo - -
- {POLICY_LINKS.map((element) => ( - - {element.title} - - ))} -
-
- ); -} - -export default FooterPolicy; From d564ee8f836f6610d36be890fbd78915ff01d845 Mon Sep 17 00:00:00 2001 From: romanmyko Date: Fri, 22 Nov 2024 20:19:56 +0200 Subject: [PATCH 2/7] outline in detail profaile corect media --- .../DetailedInfo/DetailedInfoSection.module.css | 5 +++-- .../src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DetailedInfoSection.module.css b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DetailedInfoSection.module.css index cc44f87d1..60f00b380 100644 --- 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/TitelInfo/TitleInfo.module.css b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css index a141383c3..45574e5bf 100644 --- a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css +++ b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css @@ -134,7 +134,7 @@ @media only screen and (min-width: 768px) { .title-block__content { - width: 768px; + width: 760px; } .title-block { @@ -143,7 +143,7 @@ .title-block__content-info { flex-direction: row; - width: 768px; + width: 728px; gap: 24px; } From f56e5d298cdcb7b4ee83d50272b124153842266f Mon Sep 17 00:00:00 2001 From: romanmyko Date: Fri, 22 Nov 2024 21:09:46 +0200 Subject: [PATCH 3/7] moderation toltip ico in profiles --- .../ProfileDetailBaner/BannerImage.jsx | 7 ++- .../ProfileDetailBaner/BannerImage.module.css | 8 +++ .../pages/ProfileDetail/ProfileDetailPage.jsx | 8 --- .../ProfileDetailPage.module.css | 14 ----- .../ProfileDetail/TitelInfo/TitleInfo.jsx | 55 ++++++++++--------- .../TitelInfo/TitleInfo.module.css | 5 ++ 6 files changed, 48 insertions(+), 49 deletions(-) diff --git a/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.jsx b/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.jsx index 7cef78f95..06b9723ca 100644 --- 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 }) {
+ > +
+ +
+
); } diff --git a/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.module.css b/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.module.css index abf787621..3fc2fadf5 100644 --- 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: 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 index c61c62055..19e847644 100644 --- 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 }) { ) : ( -
- -
-
- -
-
- {!profile.logo?.path ? ( - - ) : ( - Логотип компанії - )} -
-
-

- {profile.activities} -

-
-

- {profile.name} -

-

- {profile.regions} +

+
+ +
+ {!profile.logo?.path ? ( + + ) : ( + Логотип компанії + )} +
+
+

+ {profile.activities}

-
- +
+

+ {profile.name} +

+

+ {profile.regions} +

+
+ +
-
{isAuthorized ? (
{!ownProfile && ( diff --git a/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css b/FrontEnd/src/pages/ProfileDetail/TitelInfo/TitleInfo.module.css index 45574e5bf..af1b47bdb 100644 --- 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; From 6b91f4a391a438c4beac1d43d8e0705a700fe800 Mon Sep 17 00:00:00 2001 From: romanmyko Date: Fri, 22 Nov 2024 21:24:04 +0200 Subject: [PATCH 4/7] flex-start --- .../ProfileDetail/ProfileDetailBaner/BannerImage.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.module.css b/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.module.css index 3fc2fadf5..fb3c3bb69 100644 --- a/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.module.css +++ b/FrontEnd/src/pages/ProfileDetail/ProfileDetailBaner/BannerImage.module.css @@ -1,6 +1,6 @@ .banner-image__block { display: flex; - justify-content: start; + justify-content: flex-start; width: var(--profile-detail-width); height: 195px; } From 6fc20cedacf8c7493628dce25f9cc946ae6e9683 Mon Sep 17 00:00:00 2001 From: romanmyko Date: Thu, 28 Nov 2024 16:56:48 +0200 Subject: [PATCH 5/7] format styles Top button and foter padding, app to develop --- FrontEnd/src/components/Footer/Footer.module.css | 8 ++++---- .../FooterComponents/ScrollToTopButton.module.css | 14 ++++++++++---- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/FrontEnd/src/components/Footer/Footer.module.css b/FrontEnd/src/components/Footer/Footer.module.css index 7afe06a5c..38f3f48f9 100644 --- a/FrontEnd/src/components/Footer/Footer.module.css +++ b/FrontEnd/src/components/Footer/Footer.module.css @@ -8,7 +8,7 @@ .footer-content { display: flex; flex-direction: column; - justify-content: space-around; + justify-content: space-between; padding: 32px 0px; width: 327px; height: 679px; @@ -25,10 +25,10 @@ @media only screen and (min-width: 1200px) { .footer-content { flex-direction: row; - width: 1100px; + width: 1136px; height: 205px; - padding: 32px 0px; - gap: 0px; + padding: 32px 32px 48px 32px; + gap: 24px; } } diff --git a/FrontEnd/src/components/Footer/FooterComponents/ScrollToTopButton.module.css b/FrontEnd/src/components/Footer/FooterComponents/ScrollToTopButton.module.css index 20b2313e5..48c029b63 100644 --- 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%; } -} \ No newline at end of file +} From 75acbdd0579ea188dd21b664ed1eb2b0a825694d Mon Sep 17 00:00:00 2001 From: romanmyko Date: Fri, 29 Nov 2024 08:55:05 +0200 Subject: [PATCH 6/7] gap in content section text --- .../Footer/FooterComponents/FooterNavigation.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css index d90d11b0b..042d98620 100644 --- a/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css +++ b/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css @@ -71,7 +71,6 @@ .navigation-content-section__text-block, .navigation-content-company__text-block { flex-direction: row; - gap: 15px; padding-top: 15px; } } From a7189d545eb53dd85c37c6de166b3ca0059f93ed Mon Sep 17 00:00:00 2001 From: romanmyko Date: Fri, 29 Nov 2024 09:08:58 +0200 Subject: [PATCH 7/7] data contacts 100% in text block --- .../DetailedInfo/DataContacts/DataContacts.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContacts.module.css b/FrontEnd/src/pages/ProfileDetail/DetailedInfo/DataContacts/DataContacts.module.css index baf2f8471..f8b7d43c0 100644 --- 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;