Merge pull request #542 from cofacts/fix/ux_image_article

UX improvements of images in article page
cofacts · Jul 11, 2023 · 802dc59 · 802dc59
2 parents d49aa7d + 30b8a6c
commit 802dc59
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 27 deletions.
diff --git a/components/ListPageDisplays/ArticleCard.js b/components/ListPageDisplays/ArticleCard.js
@@ -88,6 +88,7 @@ const useStyles = makeStyles(theme => ({
   attachment: {
     minWidth: 0, // Don't use intrinsic image width as flex item min-size
     maxHeight: '10em', // Don't let image rows take too much vertical space
+    margin: '0 1em 0 0', // Add right margin that separate attachment and text with a space
   },
 }));
 
@@ -122,14 +123,14 @@ function ArticleCard({ article, highlight = '' }) {
                 <span>{c('Info box').t`reports`}</span>
               </div>
             </div>
+            <Thumbnail article={article} className={classes.attachment} />
             {(text || highlight) && (
               <ExpandableText className={classes.content} lineClamp={3}>
                 {highlight
                   ? highlightSections(highlight, highlightClasses)
                   : text}
               </ExpandableText>
             )}
-            <Thumbnail article={article} className={classes.attachment} />
           </div>
         </ListPageCard>
       </a>

diff --git a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
@@ -83,6 +83,19 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </span>
                   </div>
                 </div>
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "TEXT",
+                      "createdAt": "2020-01-01T00:00:00Z",
+                      "id": "id1",
+                      "replyCount": 3,
+                      "replyRequestCount": 4,
+                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                    }
+                  }
+                  className="makeStyles-attachment"
+                />
                 <ExpandableText
                   className="makeStyles-content"
                   lineClamp={3}
@@ -102,19 +115,6 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </div>
                   </div>
                 </ExpandableText>
-                <Thumbnail
-                  article={
-                    Object {
-                      "articleType": "TEXT",
-                      "createdAt": "2020-01-01T00:00:00Z",
-                      "id": "id1",
-                      "replyCount": 3,
-                      "replyRequestCount": 4,
-                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                    }
-                  }
-                  className="makeStyles-attachment"
-                />
               </div>
             </article>
           </ListPageCard>
@@ -210,6 +210,19 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </span>
                   </div>
                 </div>
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "TEXT",
+                      "createdAt": "2019-01-01T00:00:00Z",
+                      "id": "id2",
+                      "replyCount": 0,
+                      "replyRequestCount": 999,
+                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu ex augue. Etiam posuere sagittis iaculis. Vestibulum sollicitudin nec felis a mollis. Phasellus ut est velit. Proin fermentum arcu ornare quam vulputate, vel eleifend velit ultrices. Fusce tincidunt vel urna at luctus.",
+                    }
+                  }
+                  className="makeStyles-attachment"
+                />
                 <ExpandableText
                   className="makeStyles-content"
                   lineClamp={3}
@@ -261,19 +274,6 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </div>
                   </div>
                 </ExpandableText>
-                <Thumbnail
-                  article={
-                    Object {
-                      "articleType": "TEXT",
-                      "createdAt": "2019-01-01T00:00:00Z",
-                      "id": "id2",
-                      "replyCount": 0,
-                      "replyRequestCount": 999,
-                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu ex augue. Etiam posuere sagittis iaculis. Vestibulum sollicitudin nec felis a mollis. Phasellus ut est velit. Proin fermentum arcu ornare quam vulputate, vel eleifend velit ultrices. Fusce tincidunt vel urna at luctus.",
-                    }
-                  }
-                  className="makeStyles-attachment"
-                />
               </div>
             </article>
           </ListPageCard>