ktl-737 feat: community page adjustments

blocks/community/community-banner/community-banner.module.css

@@ -4,7 +4,7 @@
 }
 
 .text {
-    margin-top: 32px;
+    margin-top: 48px;
 }
 
 .image {
@@ -18,6 +18,10 @@
 }
 
 @media (min-width: 1280px) {
+    .content {
+        margin: 96px 0 108px;
+    }
+
     .banner {
         position: relative;
     }
@@ -27,6 +31,6 @@
         display: block;
         width: 640px;
         right: 0;
-        top: -32px;
+        top: -64px;
     }
 }

blocks/community/event-list/event-list.module.css

@@ -7,20 +7,28 @@
     margin-top: 16px;
 }
 
-.selects {
-    display: none;
-}
-
-.selectEnd {
-    margin-left: 32px;
-}
+/*.selects {*/
+/*    display: none;*/
+/*}*/
 
 .list {
     display: grid;
     grid-gap: 16px;
     margin-top: 32px;
 }
 
+@media (max-width: 767px) {
+    .selects {
+        margin-top: 24px;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .selectEnd {
+        margin-top: 24px;
+    }
+}
+
 @media (min-width: 768px) {
 
     .wrapper {
@@ -42,6 +50,10 @@
         display: flex;
         align-items: center;
     }
+
+    .selectEnd {
+        margin-left: 32px;
+    }
 }
 @media (min-width: 1200px) {
     .list {

blocks/community/event-list/mode-select.module.css

@@ -1,10 +1,17 @@
 .wrapper {
     display: flex;
     align-items: center;
+    justify-content: space-between;
 }
 
 .button {
     padding-left: 12px;
     padding-right: 12px;
     margin-left: 4px;
+}
+
+@media (min-width: 768px) {
+    .wrapper {
+        justify-content: flex-start;
+    }
 }

blocks/community/keep-in-touch-card/keep-in-touch-card.module.css

@@ -1,5 +1,5 @@
 .card {
-    min-height: 170px;
+    min-height: 156px;
 }
 
 .wrapper {
@@ -27,11 +27,4 @@
         font-size: 16px;
         line-height: 24px;
     }
-}
-
-
-@media (min-width: 768px) {
-    .card {
-        min-height: 240px;
-    }
-}
+}

blocks/community/kugs-list/kugs-list.module.css

@@ -64,7 +64,7 @@
 
 @media (min-width: 1024px) {
     .countriesList {
-        column-count: 6;
+        column-count: 5;
     }
 
     .title {

blocks/community/kugs-list/kugs-list.tsx

@@ -1,76 +1,72 @@
-import React, {FC, useMemo} from "react";
+import React, { FC, useMemo } from 'react';
 import classnames from 'classnames';
-import kugsLogo from "../../../public/images/community/kugs-logo.svg"
+import kugsLogo from '../../../public/images/community/kugs-logo.svg';
 import styles from './kugs-list.module.css';
-import {Svg} from 'react-optimized-image';
+import { Svg } from 'react-optimized-image';
 
 interface KugsListProps {
-    userGroupData: UserGroupsData
+    userGroupData: UserGroupsData;
 }
 
-export const KugsList: FC<KugsListProps> = ({userGroupData}) => {
-
+export const KugsList: FC<KugsListProps> = ({ userGroupData }) => {
     const countUserGroups = useMemo(() => {
-        let counter = 0
-        userGroupData.forEach(group => counter += group.groups.length)
-        return counter
+        let counter = 0;
+        userGroupData.forEach((group) => (counter += group.groups.length));
+        return counter;
     }, [userGroupData]);
 
     const userGroupsByRegion = useMemo(() => {
-        const sortedUserGroupsByRegion = []
-
-        userGroupData.forEach(group => {
+        const sortedUserGroupsByRegion = [];
 
+        userGroupData.forEach((group) => {
             const uniqueRegions = new Set();
-            group.groups.forEach(item => uniqueRegions.add(item.country))
-            const sortedUniqueRegions = Array.from(uniqueRegions).sort()
+            group.groups.forEach((item) => uniqueRegions.add(item.country));
+            const sortedUniqueRegions = Array.from(uniqueRegions).sort();
 
-            const regionWithCountries = sortedUniqueRegions.map(region => (
-                {
-                    name: region,
-                    cities: group.groups.filter(groupItem => groupItem.country === region)
-                }
-            ))
+            const regionWithCountries = sortedUniqueRegions.map((region) => ({
+                name: region,
+                cities: group.groups.filter((groupItem) => groupItem.country === region),
+            }));
 
             sortedUserGroupsByRegion.push({
                 name: group.section,
-                countries: regionWithCountries
-            })
-        })
+                countries: regionWithCountries,
+            });
+        });
         return sortedUserGroupsByRegion;
-    }, [userGroupData])
+    }, [userGroupData]);
 
     // If there are more than 6 cities in a country, allow to break the list to the next column
     // If cities list is large, it should start on the new column
-    const countryClassName = (country) => classnames(
-        styles.countrySingle, country.cities.length > 6 && styles.canBreak, country.cities.length > 12 && styles.newColumn
-    )
+    const countryClassName = (country) =>
+        classnames(
+            styles.countrySingle,
+            country.cities.length > 6 && styles.canBreak,
+            country.cities.length > 12 && styles.newColumn
+        );
 
     return (
         <div className={styles.wrapper}>
-            <h2 className={classnames(styles.title, "ktl-hero ktl-offset-bottom-l")}>
+            <h2 className={classnames(styles.title, 'ktl-hero ktl-offset-bottom-l')}>
                 <Svg className={styles.logo} src={kugsLogo} />
                 {countUserGroups} KUGs around the world
             </h2>
             <ul className={styles.list}>
-                {userGroupsByRegion.map(region => (
+                {userGroupsByRegion.map((region) => (
                     <li key={region.name} className={classnames(styles.region)}>
-                        <h2 className="ktl-h2 ktl-offset-bottom-m">
-                            {region.name}
-                        </h2>
+                        <h2 className="ktl-h2 ktl-offset-bottom-m">{region.name}</h2>
                         <ul className={classnames(styles.countriesList)}>
-                            {region.countries.map(country => (
-                                <li key={country.name}
-                                    className={countryClassName(country)}>
-                                    <h3 className="ktl-h4">
-                                        {country.name}
-                                    </h3>
-                                    <ul className={classnames(styles.citiesList, "ktl-offset-top-xs")}>
-                                        {country.cities.map(city => (
+                            {region.countries.map((country) => (
+                                <li key={country.name} className={countryClassName(country)}>
+                                    <h3 className="ktl-h4">{country.name}</h3>
+                                    <ul className={classnames(styles.citiesList, 'ktl-offset-top-xs')}>
+                                        {country.cities.map((city) => (
                                             <li key={city.name}>
-                                                <a href={city.url}
-                                                   className={classnames("rs-link", styles.kugLink)}
-                                                   target="_blank" rel="noopener noreferrer"
+                                                <a
+                                                    href={city.url}
+                                                    className={classnames('rs-link', styles.kugLink)}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
                                                 >
                                                     {city.name}
                                                 </a>
@@ -83,7 +79,6 @@ export const KugsList: FC<KugsListProps> = ({userGroupData}) => {
                     </li>
                 ))}
             </ul>
-
         </div>
     );
 };