Merge pull request #163 from mapswipe/fix/update-read-all-blogs-styling

Update read all blogs styling
mapswipe · Jul 12, 2023 · c66792c · c66792c
2 parents c87cd4f + a4df020
commit c66792c
Show file tree

Hide file tree

Showing 14 changed files with 47 additions and 30 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -14,7 +14,6 @@
   "github": "Github",
   "osm-wiki": "OSM Wiki",
   "email": "Email",
-  "slack": "Slack",
   "copyright": "Copyright © 2023 MapSwipe",
   "privacy": "Privacy",
   "mapswipe-logo": "Mapswipe Logo",

diff --git a/public/locales/en/data.json b/public/locales/en/data.json
@@ -51,6 +51,10 @@
   "bubble-type": "Scale",
   "visible-projects-count": "{{totalProjects, number}} projects",
   "total-area-card-text": "{{area, number}} area mapped",
+  "Location": "Location",
+  "requesting-organization": "Requesting organization",
+  "created-at": "Created at",
+  "project-contributors": "Project contributors",
   "download-section-heading": "Download all projects",
   "download-size": "{{size, number}}",
   "download": "Download",

diff --git a/public/locales/en/home.json b/public/locales/en/home.json
@@ -29,8 +29,9 @@
   "get-involved-link": "Get involved",
   "news-and-updates-title": "News & updates",
   "date": "{{date, datetime}}",
-  "see-more-pages": "See all blog posts",
+  "read-more": "Read more",
+  "see-more-pages": "See all posts",
   "partners": "Partners",
   "missing-maps": "Missing maps logo",
   "missing-map-description": "MapSwipe is part of the Missing Maps Project and is managed by a volunteer-led team with support from  these organizations."
-}
+}
diff --git a/public/locales/en/project.json b/public/locales/en/project.json
@@ -25,6 +25,9 @@
   "footprint": "Validate",
   "change-detection": "Compare",
   "project-tab-head": "{{projectTitle}} | MapSwipe",
+  "Location": "Location",
+  "requesting-organization": "Requesting organization",
+  "created-at": "Created at",
   "date": "{{date, datetime}}",
   "overview-section-title": "Project overview",
   "project-contributors-text": "Contributors",

diff --git a/public/locales/ne/common.json b/public/locales/ne/common.json
@@ -14,7 +14,6 @@
   "github": "Github",
   "osm-wiki": "OSM Wiki",
   "email": "Email",
-  "slack": "Slack",
   "copyright": "Copyright © 2023 MapSwipe",
   "privacy": "गोपनीयता",
   "mapswipe-logo": "Mapswipe Logo",

diff --git a/public/locales/ne/data.json b/public/locales/ne/data.json
@@ -51,6 +51,10 @@
   "bubble-type": "स्केल",
   "visible-projects-count": "{{totalProjects, number}} परियोजनाहरू",
   "total-area-card-text": "{{area, number}} क्षेत्र म्याप गरिएको छ",
+  "Location": "स्थान",
+  "requesting-organization": "अनुरोध गर्ने संगठन",
+  "created-at": "सिर्जना मिति",
+  "project-contributors": "परियोजना योगदानकर्ताहरू",
   "download-section-heading": "सबै परियोजनाहरू डाउनलोड गर्नुहोस्",
   "download-size": "{{size, number}}",
   "download": "डाउनलोड",

diff --git a/public/locales/ne/home.json b/public/locales/ne/home.json
@@ -29,8 +29,9 @@
   "get-involved-link": "संलग्न ",
   "news-and-updates-title": "समाचार र अपडेटहरू",
   "date": "{{date, datetime}}",
-  "see-more-pages": "सबै ब्लग पोस्टहरू हेर्नुहोस्",
+  "read-more": "थप पढ्नुहोस्",
+  "see-more-pages": "सबै पोस्टहरू हेर्नुहोस्",
   "partners": "साझेदारहरू",
   "missing-maps": "Missing maps logo",
   "missing-map-description": "MapSwipe Missing Maps परियोजना को अंश हो र यसको व्यवस्थापन स्वयंसेवकको नेतृत्वमा रहेको टोली र संस्थाहरूको समर्थनमा गरिन्छ।"
-}
+}
diff --git a/public/locales/ne/project.json b/public/locales/ne/project.json
@@ -25,6 +25,9 @@
   "footprint": "प्रमाणीकरण",
   "change-detection": "तुलना",
   "project-tab-head": "{{projectTitle}} | MapSwipe",
+  "Location": "स्थान",
+  "requesting-organization": "अनुरोध गर्ने संगठन",
+  "created-at": "सिर्जना मिति",
   "date": "{{date, datetime}}",
   "overview-section-title": "परियोजना अवलोकन",
   "project-contributors-text": "योगदानकर्ताहरू",

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -6,7 +6,6 @@ import {
 import Link from 'components/Link';
 import { FaRegNewspaper } from 'react-icons/fa';
 import {
-    IoLogoSlack,
     IoLogoFacebook,
     IoLogoTwitter,
     IoLogoGithub,
@@ -134,14 +133,6 @@ function Footer(props: Props) {
                         >
                             <IoMail />
                         </Link>
-                        <Link
-                            href="https://slack.openstreetmap.us/"
-                            variant="icon"
-                            target="_blank"
-                            title={t('slack')}
-                        >
-                            <IoLogoSlack />
-                        </Link>
                     </div>
                 </div>
             </div>

diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx
@@ -29,7 +29,7 @@ export interface Props {
     variant?: Variant;
     spacing?: Spacing;
     children?: React.ReactNode;
-    tooltip?: string;
+    tooltip?: string | null;
 }
 
 function Tag(props: Props) {
@@ -44,7 +44,7 @@ function Tag(props: Props) {
 
     return (
         <div
-            title={tooltip}
+            title={tooltip ?? undefined}
             className={_cs(
                 className,
                 styles.tag,

diff --git a/src/pages/[locale]/data/index.tsx b/src/pages/[locale]/data/index.tsx
@@ -815,7 +815,7 @@ function Data(props: Props) {
                                     <div className={styles.bottomTags}>
                                         {project.region && (
                                             <Tag
-                                                tooltip="Location"
+                                                tooltip={t('Location')}
                                                 className={styles.tag}
                                                 icon={<IoLocationOutline />}
                                                 variant="transparent"
@@ -825,7 +825,7 @@ function Data(props: Props) {
                                         )}
                                         {project.requestingOrganization && (
                                             <Tag
-                                                tooltip="Requesting organization"
+                                                tooltip={t('requesting-organization')}
                                                 className={styles.tag}
                                                 icon={<IoFlag />}
                                                 variant="transparent"
@@ -836,7 +836,7 @@ function Data(props: Props) {
                                         <div className={styles.projectDetailsRow}>
                                             {project.created && (
                                                 <Tag
-                                                    tooltip="Created date"
+                                                    tooltip={t('created-at')}
                                                     className={styles.tag}
                                                     icon={<IoCalendarClearOutline />}
                                                     variant="transparent"
@@ -846,7 +846,7 @@ function Data(props: Props) {
                                             )}
                                             {project.number_of_users && (
                                                 <Tag
-                                                    tooltip="Project contributors"
+                                                    tooltip={t('project-contributors')}
                                                     className={styles.tag}
                                                     icon={<IoPerson />}
                                                     variant="transparent"

diff --git a/src/pages/[locale]/index.tsx b/src/pages/[locale]/index.tsx
@@ -11,7 +11,10 @@ import {
     request,
 } from 'graphql-request';
 import Head from 'next/head';
-import { IoCalendarClearOutline } from 'react-icons/io5';
+import {
+    IoCalendarClearOutline,
+    IoArrowForwardSharp,
+} from 'react-icons/io5';
 
 import Page from 'components/Page';
 import Link from 'components/Link';
@@ -330,16 +333,17 @@ function Home(props: Props) {
                             className={styles.link}
                             href={`/[locale]/blogs/${blog.name}`}
                         >
-                            Read more
+                            {t('read-more')}
                         </Link>
                     </Card>
                 ))}
                 <div className={styles.sectionDescription}>
                     <Link
+                        className={styles.seeMoreLink}
                         href="/[locale]/blogs"
-                        variant="underline"
                     >
                         {t('see-more-pages')}
+                        <IoArrowForwardSharp />
                     </Link>
                 </div>
             </Section>

diff --git a/src/pages/[locale]/projects/[id].tsx b/src/pages/[locale]/projects/[id].tsx
@@ -302,7 +302,7 @@ function Project(props: Props) {
                         <div className={styles.bottomTags}>
                             {region && (
                                 <Tag
-                                    tooltip="Location"
+                                    tooltip={t('Location')}
                                     className={styles.heroTag}
                                     icon={<IoLocationOutline />}
                                     variant="transparent"
@@ -312,7 +312,7 @@ function Project(props: Props) {
                             )}
                             {requestingOrganization && (
                                 <Tag
-                                    tooltip="Requesting organization"
+                                    tooltip={t('requesting-organization')}
                                     className={styles.heroTag}
                                     icon={<IoFlag />}
                                     variant="transparent"
@@ -322,7 +322,7 @@ function Project(props: Props) {
                             )}
                             {created && (
                                 <Tag
-                                    tooltip="Created date"
+                                    tooltip={t('created-at')}
                                     className={styles.heroTag}
                                     icon={<IoCalendarClearOutline />}
                                     variant="transparent"

diff --git a/src/pages/[locale]/styles.module.css b/src/pages/[locale]/styles.module.css
@@ -255,8 +255,16 @@
 
             .sectionDescription {
                 grid-column: 1 / -1;
-                text-align: center;
-                font-size: var(--font-size-medium);
+
+                .seeMoreLink {
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-end;
+                    color: var(--color-accent);
+                    font-size: var(--font-size-medium);
+                    font-weight: var(--font-weight-bold);
+                    gap: var(--spacing-super-small);
+                }
             }
 
             @media screen and (max-width: 800px) {
@@ -312,4 +320,4 @@
     @media screen and (max-width: 720px) {
         gap: unset;
     }
-}
+}