fix: styling of Context and Structure tab in NS Overview Section

IFRCGo · Dec 19, 2023 · a4dcc87 · a4dcc87
1 parent c9f0cab
commit a4dcc87
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 42 deletions.
diff --git a/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/i18n.json b/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/i18n.json
@@ -1,5 +1,5 @@
 {
-    "namespace": "CountryNSDirectory",
+    "namespace": "countryNSDirectory",
     "strings": {
         "countryNSDirectoryTitle": "NS Directory",
         "countryNSDirectorySource": "Source"

diff --git a/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/index.tsx b/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/index.tsx
@@ -1,52 +1,56 @@
 import { useOutletContext } from 'react-router-dom';
+import { _cs } from '@togglecorp/fujs';
 
 import Container from '#components/Container';
-import TextOutput from '#components/TextOutput';
 import Link from '#components/Link';
+import TextOutput from '#components/TextOutput';
 import useTranslation from '#hooks/useTranslation';
 import { type CountryOutletContext } from '#utils/outletContext';
 
 import styles from './styles.module.css';
 import i18n from './i18n.json';
 
-function NationalSocietyDirectory() {
+interface Props {
+    className?: string;
+}
+function NationalSocietyDirectory(props: Props) {
+    const { className } = props;
     const strings = useTranslation(i18n);
 
     const { countryResponse } = useOutletContext<CountryOutletContext>();
     const directoryList = countryResponse?.directory;
 
     return (
         <Container
-            childrenContainerClassName={styles.nationalSocietyDirectory}
+            className={_cs(className, styles.nationalSocietyDirectory)}
+            childrenContainerClassName={styles.content}
             heading={strings.countryNSDirectoryTitle}
+            footerContent={(
+                <TextOutput
+                    label={strings.countryNSDirectorySource}
+                    value={(
+                        <Link
+                            variant="tertiary"
+                            href={countryResponse?.society_url}
+                            external
+                            withUnderline
+                        >
+                            {countryResponse?.society_name}
+                        </Link>
+                    )}
+                />
+            )}
             withHeaderBorder
         >
-            <>
-                <div>
-                    {directoryList?.map((directory) => (
-                        <TextOutput
-                            value={directory?.position}
-                            label={`${directory?.first_name} ${directory?.last_name}`}
-                            strongLabel
-                        />
-                    ))}
-                </div>
-                <div className={styles.nationalSocietySource}>
-                    <TextOutput
-                        label={strings.countryNSDirectorySource}
-                        value={(
-                            <Link
-                                variant="tertiary"
-                                href={countryResponse?.society_url}
-                                external
-                                withUnderline
-                            >
-                                {countryResponse?.society_name}
-                            </Link>
-                        )}
-                    />
-                </div>
-            </>
+            {directoryList?.map((directory) => (
+                <TextOutput
+                    key={directory.id}
+                    withoutLabelColon
+                    value={directory?.position}
+                    label={`${directory?.first_name} ${directory?.last_name}`}
+                    strongLabel
+                />
+            ))}
         </Container>
     );
 }

diff --git a/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/styles.module.css b/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/styles.module.css
@@ -1,10 +1,7 @@
 .national-society-directory {
-    display: flex;
-    flex-direction: column;
-    gap: var(--go-ui-spacing-lg);
-
-    .national-society-source {
+    .content {
         display: flex;
-        justify-content: flex-end;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-xs);
     }
 }
diff --git a/...views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnitsMap/styles.module.css b/...views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnitsMap/styles.module.css
@@ -1,5 +1,4 @@
 .national-society-local-units-map {
-    width : 100%;
 
     .clear-button {
         display: flex;

diff --git a/src/views/CountryNsOverviewContextAndStructure/index.tsx b/src/views/CountryNsOverviewContextAndStructure/index.tsx
@@ -20,8 +20,8 @@ export function Component() {
     return (
         <div className={styles.countryNsOverviewContextAndStructure}>
             <div className={styles.nationalSocietyDetail}>
-                <NationalSocietyLocalUnitsMap />
-                <NationalSocietyDirectory />
+                <NationalSocietyLocalUnitsMap className={styles.map} />
+                <NationalSocietyDirectory className={styles.directory} />
             </div>
             {isDefined(countryResponse) && (
                 <Container

diff --git a/src/views/CountryNsOverviewContextAndStructure/styles.module.css b/src/views/CountryNsOverviewContextAndStructure/styles.module.css
@@ -4,9 +4,19 @@
     gap: var(--go-ui-spacing-2xl);
 
     .national-society-detail {
-        display: flex;
-        justify-content: space-between;
-        gap: var(--go-ui-spacing-xl);
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+        grid-gap: var(--go-ui-spacing-lg);
+
+        .map {
+            grid-column: auto / span 2;
+        }
+
+        .directory {
+            @media screen and (max-width: 60rem) {
+                grid-column: 1 / -1;
+            }
+        }
     }
 
     .key-links-content {