Merge pull request #926 from tudi2d/900-pin-description-length

Limit description length for map pins to 70 characters
ONEARMY · Mar 31, 2020 · 48febbb · 48febbb
2 parents 7547845 + d0efb43
commit 48febbb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/pages/Maps/Content/View/Popup.tsx b/src/pages/Maps/Content/View/Popup.tsx
@@ -90,6 +90,10 @@ export class Popup extends React.Component<IProps> {
         : g.type === pin.type
     })
     const { lastActive, heroImageUrl, shortDescription, name } = pin.detail
+    const description =
+      shortDescription.length > 70
+        ? shortDescription.substr(0, 70) + '...'
+        : shortDescription
     const lastActiveText = lastActive
       ? distanceInWords(lastActive, new Date())
       : 'a long time'
@@ -116,8 +120,8 @@ export class Popup extends React.Component<IProps> {
               {name}
             </Text>
           </Link>
-          <Text auxiliary small clipped mb={2}>
-            {shortDescription}
+          <Text small mb={2} style={{ wordBreak: 'break-word' }}>
+            {description}
           </Text>
           <LastOnline>last active {lastActiveText} ago</LastOnline>
           {pin.moderation !== 'accepted' && (

diff --git a/src/pages/Settings/content/formSections/MapPin.section.tsx b/src/pages/Settings/content/formSections/MapPin.section.tsx
@@ -78,13 +78,16 @@ export class UserMapPinSection extends React.Component<IProps, IState> {
         </Flex>
         <Box sx={{ display: isOpen ? 'block' : 'none' }}>
           <Text mb={2} mt={4} medium>
-            Short description of your pin *
+            Short description of your pin*
           </Text>
           <Field
             data-cy="pin-description"
             name="mapPinDescription"
             component={TextAreaField}
-            placeholder="We are shredding plastic in Plymouth, UK."
+            maxLength="70"
+            style={{ height: 'inherit' }}
+            rows="1"
+            placeholder="Short description of your pin (max 70 characters)"
             validate={required}
           />
           {!initialFormValues.location || editAddress ? (