From 1a85e55091cb97b1d530b3923e53d779d63333dc Mon Sep 17 00:00:00 2001 From: astrology-noob <0french0fries0@gmail.com> Date: Fri, 21 Jan 2022 12:47:34 +0300 Subject: [PATCH 1/2] HowToUseMap added --- projects/co-map/components/CoMapHomePage.tsx | 2 +- projects/co-map/components/HowToUseMap.tsx | 51 ++++--- .../co-map}/assets/img/find_icon.svg | 0 .../co-map}/assets/img/mouse_icon.svg | 0 .../co-map}/assets/img/place_icon.svg | 0 styles/comap.scss | 143 ++++++++++++++++-- 6 files changed, 161 insertions(+), 35 deletions(-) rename public/{ => projects/co-map}/assets/img/find_icon.svg (100%) rename public/{ => projects/co-map}/assets/img/mouse_icon.svg (100%) rename public/{ => projects/co-map}/assets/img/place_icon.svg (100%) diff --git a/projects/co-map/components/CoMapHomePage.tsx b/projects/co-map/components/CoMapHomePage.tsx index 6bd6317..9bfbb7c 100644 --- a/projects/co-map/components/CoMapHomePage.tsx +++ b/projects/co-map/components/CoMapHomePage.tsx @@ -32,7 +32,7 @@ const Main: FC = () => {
- + {/* */}
diff --git a/projects/co-map/components/HowToUseMap.tsx b/projects/co-map/components/HowToUseMap.tsx index 6c3ec2c..4688c23 100644 --- a/projects/co-map/components/HowToUseMap.tsx +++ b/projects/co-map/components/HowToUseMap.tsx @@ -2,41 +2,56 @@ import { FC } from 'react' import Image from 'next/image' const instructions = [ - { - title: 'Находите вдохновляющие организации и события поблизости', - image: '/projects/co-map/assets/img/current_location.png', - instruction: - 'Заходите в гости к лидерам изменений, которые заботятся об окружающих и о будущем.', - reason: 'Например: Зайдите в кафе «Огурцы», которое принимает на работу ребят с нейроособенностями (перейти к карте). Сдайте ненужную одежду в Charity Shop', - }, { title: 'Отмечайте на карте лидеров изменений', - image: '/projects/co-map/assets/img/right_direction.png', instruction: - 'Расскажите об организациях и проектах в вашем районе, которые вас вдохновляют', - reason: 'Вы поможете им привлечь внимание СМИ, новых клиентов, волонтёров и партнёров', + 'Расскажите об организациях и проектах в вашем районе, которые вас вдохновляют.', + reason: 'Вы поможете им привлечь внимание СМИ, новых клиентов, волонтёров и партнёров.', + image: '/projects/co-map/assets/img/place_icon.svg', + position: 'left', + background: '#0198AF', + }, + { + title: 'Находите вдохновляющие организации и события поблизости', + instruction: + 'Заходите в гости к лидерам изменений, которые заботятся об окружающих и о будущем.', + reason: 'Например: Зайдите в кафе «Огурцы», которое принимает на работу ребят с нейроособенностями. Сдайте ненужную одежду в Charity Shop.', + image: '/projects/co-map/assets/img/find_icon.svg', + position: 'right', + background: '#94C31F', }, { title: 'Влияйте на рейтинг участников карты', - image: '/projects/co-map/assets/img/winners.png', instruction: - 'Оставляйте отзывы и оценивайте лидеров изменений по специальным критериям', - reason: 'Ваша оценка поможет проекту стать более заметным, а обратная связь — понять, над чем стоит работать', + 'Оставляйте отзывы и оценивайте лидеров изменений по специальным критериям.', + reason: 'Ваша оценка поможет проекту стать более заметным, а обратная связь — понять, над чем стоит работать.', + image: '/projects/co-map/assets/img/mouse_icon.svg', + position: 'left', + background: '#AC3970', }, ]; const HowToUseMap: FC = () => ( -
-
Как использовать карту
+
{ - instructions.map(({ title, instruction, reason, image }) =>
-
+ instructions.map(({ title, instruction, reason, image, position, background }) => +
+
{title}
{instruction}
{reason}
-
+
+ +
) } diff --git a/public/assets/img/find_icon.svg b/public/projects/co-map/assets/img/find_icon.svg similarity index 100% rename from public/assets/img/find_icon.svg rename to public/projects/co-map/assets/img/find_icon.svg diff --git a/public/assets/img/mouse_icon.svg b/public/projects/co-map/assets/img/mouse_icon.svg similarity index 100% rename from public/assets/img/mouse_icon.svg rename to public/projects/co-map/assets/img/mouse_icon.svg diff --git a/public/assets/img/place_icon.svg b/public/projects/co-map/assets/img/place_icon.svg similarity index 100% rename from public/assets/img/place_icon.svg rename to public/projects/co-map/assets/img/place_icon.svg diff --git a/styles/comap.scss b/styles/comap.scss index 3b203dc..c6c3374 100644 --- a/styles/comap.scss +++ b/styles/comap.scss @@ -80,8 +80,15 @@ } .bounding_element { - width: 55%; + width: calc(100% - 200px); min-width: 300px; + display: flex; + flex-direction: column; + justify-content: center; + + @media (max-width: 1000px) { + width: calc(100% - 40px); + } } .info_community { @@ -225,29 +232,133 @@ // How to use map -.how-to-use-title { - margin: 20px 0; -} - -.map-instruction-block { +#HowToUseMap { display: flex; - justify-content: space-between; + gap: 50px; + flex-direction: column; + + max-width: 1200px; - & .description-block { - width: 50%; - align-self: center; + margin-bottom: 20px; + + .map-instruction-block { display: flex; - flex-direction: column; - padding: 5px 0; + justify-content: space-between; + align-items: center; + + & .description-block { + color: #ffffff; + width: 100%; + align-self: center; + display: flex; + flex-direction: column; + padding: 5px 0; + margin-right: 30px; + + padding: 50px; + + + & > div { + padding: 10px 0; + } + + & .co_map_subtitle { + font-family: 'Roboto', sans-serif; + font-weight: normal; + font-size: 33px; + text-align: center; + } + + & .description { + font-size: 25px; + font-family: 'Roboto', sans-serif; + } + } + + &.right { + flex-direction: row-reverse; + + & .description-block { + margin-left: 30px; + margin-right: 0; + } + + } + + & .image-block { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 400px; + } + + @media (max-width: 1000px) { + & .image-block { + width: auto; + } + + & .co_map_subtitle { + font-size: 28px; + } - & > div { - padding: 10px 0; + & .description { + font-size: 22px; + } } - & .description { - font-family: 'Open Sans', sans-serif; + @media (max-width: 768px) { + + & .description-block { + + padding: 35px; + + & .co_map_subtitle { + font-size: 26px; + } + + & .description { + font-size: 20px; + } + + } + } + + @media (max-width: 480px) { + & .image-block { + display: none; + } + + &.right { + & .description-block { + margin-left: 0; + } + } + + & .description-block { + padding: 20px; + margin-right: 0; + + & .co_map_subtitle { + font-size: 20px; + } + + & .description { + font-size: 15px; + } + } } + + } + + @media (max-width: 768px) { + gap: 30px; } + + @media (max-width: 480px) { + gap: 20px; + } + } // Ambassador Program From f3e3209a05db14d607612cdc26f2deb68c62e2f4 Mon Sep 17 00:00:00 2001 From: astrology-noob <0french0fries0@gmail.com> Date: Fri, 28 Jan 2022 20:25:53 +0300 Subject: [PATCH 2/2] =?UTF-8?q?"=D0=9A=D0=BE=D0=BC=D0=B0=D0=BD=D0=B4=D0=B0?= =?UTF-8?q?"=20Header=20item=20added?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- projects/co-map/components/HomeHeaderCoMap.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/co-map/components/HomeHeaderCoMap.tsx b/projects/co-map/components/HomeHeaderCoMap.tsx index 4f4880c..c0a3579 100644 --- a/projects/co-map/components/HomeHeaderCoMap.tsx +++ b/projects/co-map/components/HomeHeaderCoMap.tsx @@ -29,6 +29,9 @@ const HomeHeader = () => { Инструкции + + Команда + );