IDA-1144- trunicate text option on search results

digirati-co-uk · Apr 3, 2024 · f213878 · f213878
1 parent e8696b2
commit f213878
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/services/madoc-ts/src/frontend/shared/components/SearchResults.tsx b/services/madoc-ts/src/frontend/shared/components/SearchResults.tsx
@@ -49,6 +49,16 @@ const ResultText = styled.span`
   text-decoration: none;
   line-height: 1.3em;
 `;
+const ResultTextTrunicate = styled.div`
+  text-decoration: none;
+  line-height: 1.3em;
+  position: relative;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
 
 export const ResultTitle = styled.div`
   text-decoration: none;
@@ -118,12 +128,25 @@ export const SearchItem: React.FC<{
   search?: string;
   list?: boolean;
   hideSnippet?: boolean;
+  trunicateSnippet?: boolean;
   border?: string;
   textColor?: string;
   background?: string;
   imageStyle?: string;
   admin?: boolean;
-}> = ({ result, size, search, list, border, textColor, background, imageStyle, hideSnippet, admin }) => {
+}> = ({
+  result,
+  size,
+  search,
+  list,
+  border,
+  textColor,
+  background,
+  imageStyle,
+  hideSnippet,
+  trunicateSnippet,
+  admin,
+}) => {
   const things = ((result && result.contexts) || []).map(value => {
     return parseUrn(typeof value === 'string' ? value : value.id);
   });
@@ -173,7 +196,7 @@ export const SearchItem: React.FC<{
             <TextContainer data-list-item={list} style={{ alignSelf: 'flex-start' }}>
               <LocaleString as={ResultTitle}>{result.label}</LocaleString>
               <LocaleString as={Subtitle}>{result.resource_type}</LocaleString>
-              {snippet && !hideSnippet ? (
+              {snippet && !hideSnippet && !trunicateSnippet ? (
                 <div style={{ paddingBottom: '.8em', maxWidth: 600 }}>
                   <ResultText
                     key={snippet}
@@ -182,6 +205,15 @@ export const SearchItem: React.FC<{
                     }}
                   />
                 </div>
+              ) : snippet && trunicateSnippet ? (
+                <div style={{ paddingBottom: '.8em', maxWidth: 600 }}>
+                  <ResultTextTrunicate
+                    key={snippet}
+                    dangerouslySetInnerHTML={{
+                      __html: replaceBreaks(sanitizeLabel(snippet)),
+                    }}
+                  />
+                </div>
               ) : null}
 
               {/*{result.metadata && (*/}

diff --git a/services/madoc-ts/src/frontend/site/features/SearchPageResults.tsx b/services/madoc-ts/src/frontend/site/features/SearchPageResults.tsx
@@ -16,13 +16,15 @@ interface SearchPageResultsProps {
   background?: string;
   grid?: boolean;
   snippet?: boolean;
+  trunSnippet?: boolean;
   textColor?: string;
   cardBorder?: string;
   imageStyle?: string;
 }
 
 export const SearchPageResults: React.FC<SearchPageResultsProps> = ({
   snippet,
+  trunSnippet,
   cardBorder,
   textColor,
   background,
@@ -89,6 +91,7 @@ export const SearchPageResults: React.FC<SearchPageResultsProps> = ({
                 textColor={textColor}
                 list={resultsView === 'list'}
                 hideSnippet={snippet}
+                trunicateSnippet={trunSnippet}
                 imageStyle={imageStyle}
               />
             ) : null;
@@ -107,12 +110,14 @@ blockEditorFor(SearchPageResults, {
   defaultProps: {
     background: '',
     snippet: '',
+    trunSnippet: '',
     textColor: '',
     cardBorder: '',
     imageStyle: 'fit',
   },
   editor: {
     snippet: { type: 'checkbox-field', label: 'Snippet', inlineLabel: 'Hide snippet?' },
+    trunSnippet: { type: 'checkbox-field', label: 'Trunicate Snippet', inlineLabel: 'Trunicate snippet?' },
     background: { label: 'Card background color', type: 'color-field' },
     textColor: { label: 'Card text color', type: 'color-field' },
     cardBorder: { label: 'Card border', type: 'color-field' },

diff --git a/services/madoc-ts/translations/en/madoc.json b/services/madoc-ts/translations/en/madoc.json
@@ -890,6 +890,8 @@
   "Total contributions": "Total contributions",
   "Total contributors": "Total contributors",
   "Transcription": "Transcription",
+  "Trunicate Snippet": "Trunicate Snippet",
+  "Trunicate snippet?": "Trunicate snippet?",
   "Type": "Type",
   "Types": "Types",
   "URI / URL": "URI / URL",